/* noto-sans-arabic-arabic-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/noto-sans-arabic-arabic-400-normal-AAMxebZb.woff2) format('woff2'), url(/assets/noto-sans-arabic-arabic-400-normal-hsqIUL9Q.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* noto-sans-arabic-math-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/noto-sans-arabic-math-400-normal-BxrVu-ji.woff2) format('woff2'), url(/assets/noto-sans-arabic-math-400-normal-BiWGKoY7.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* noto-sans-arabic-symbols-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/noto-sans-arabic-symbols-400-normal-BbP0vlM-.woff2) format('woff2'), url(/assets/noto-sans-arabic-symbols-400-normal-BJzmBRSy.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* noto-sans-arabic-latin-ext-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/noto-sans-arabic-latin-ext-400-normal-CW3XQ4Yj.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-ext-400-normal-D4Wl3hq7.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;
}

/* noto-sans-arabic-latin-400-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/noto-sans-arabic-latin-400-normal-CjsIS08k.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-400-normal-lr8cikIT.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;
}/* noto-sans-arabic-arabic-500-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/noto-sans-arabic-arabic-500-normal-DPISWLls.woff2) format('woff2'), url(/assets/noto-sans-arabic-arabic-500-normal-CoaTbVwZ.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* noto-sans-arabic-math-500-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/noto-sans-arabic-math-500-normal-CPBZimiT.woff2) format('woff2'), url(/assets/noto-sans-arabic-math-500-normal-D2rXSvcI.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* noto-sans-arabic-symbols-500-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/noto-sans-arabic-symbols-500-normal-DHLLsnZT.woff2) format('woff2'), url(/assets/noto-sans-arabic-symbols-500-normal-BxLqRJGm.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* noto-sans-arabic-latin-ext-500-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/noto-sans-arabic-latin-ext-500-normal-CpD3jfIL.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-ext-500-normal-BAH5x22p.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;
}

/* noto-sans-arabic-latin-500-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/noto-sans-arabic-latin-500-normal-8boVNgww.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-500-normal-GCsE6TXV.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;
}/* noto-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/noto-sans-arabic-arabic-600-normal-JPxwL-XU.woff2) format('woff2'), url(/assets/noto-sans-arabic-arabic-600-normal-JLzruTOp.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* noto-sans-arabic-math-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/noto-sans-arabic-math-600-normal-C2PaYQVA.woff2) format('woff2'), url(/assets/noto-sans-arabic-math-600-normal-BQnKH7M_.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* noto-sans-arabic-symbols-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/noto-sans-arabic-symbols-600-normal-BLWpRi3R.woff2) format('woff2'), url(/assets/noto-sans-arabic-symbols-600-normal-Ch3HzCxt.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* noto-sans-arabic-latin-ext-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/noto-sans-arabic-latin-ext-600-normal-6_GPoF44.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-ext-600-normal-Be-B9uOG.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;
}

/* noto-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/noto-sans-arabic-latin-600-normal-BUFr-ZM9.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-600-normal-D8ZQ8Cfs.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;
}/* noto-sans-arabic-arabic-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/noto-sans-arabic-arabic-700-normal-3CqrwsiZ.woff2) format('woff2'), url(/assets/noto-sans-arabic-arabic-700-normal-DXnsSW3z.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* noto-sans-arabic-math-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/noto-sans-arabic-math-700-normal-DhwRdyuq.woff2) format('woff2'), url(/assets/noto-sans-arabic-math-700-normal-C3IT52xG.woff) format('woff');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* noto-sans-arabic-symbols-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/noto-sans-arabic-symbols-700-normal-D40a2DlB.woff2) format('woff2'), url(/assets/noto-sans-arabic-symbols-700-normal-Ct3Gyvbr.woff) format('woff');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* noto-sans-arabic-latin-ext-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/noto-sans-arabic-latin-ext-700-normal-wF0ZdkCd.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-ext-700-normal-DX5dIs2j.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;
}

/* noto-sans-arabic-latin-700-normal */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/noto-sans-arabic-latin-700-normal-D41hNJFR.woff2) format('woff2'), url(/assets/noto-sans-arabic-latin-700-normal-DST6Nu2E.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-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.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-obahsSVq.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-HOLc17fK.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-DGGRlc-M.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-KugGGMne.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-B4URO6DV.woff2) format('woff2'), url(/assets/inter-greek-400-normal-q2sYcFCs.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-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.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-CWCymEST.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-4D_pXhcN.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-DRtmH8MT.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-B8X0CLgF.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-plRanbMR.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BZpKdvQh.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-BjwYoWNd.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-700-normal-LO58E6JB.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-CjBOestx.woff2) format('woff2'), url(/assets/inter-cyrillic-700-normal-DrXBdSj3.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-qfdV9bQt.woff2) format('woff2'), url(/assets/inter-greek-ext-700-normal-BoQ6DsYi.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-C3JjAnD8.woff2) format('woff2'), url(/assets/inter-greek-700-normal-BUv2fZ6O.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-DlLaEgI2.woff2) format('woff2'), url(/assets/inter-vietnamese-700-normal-BZaoP0fm.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-Ca8adRJv.woff2) format('woff2'), url(/assets/inter-latin-ext-700-normal-TidjK2hL.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-Yt3aPRUw.woff2) format('woff2'), url(/assets/inter-latin-700-normal-BLAVimhd.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;
}/* outfit-latin-ext-400-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/outfit-latin-ext-400-normal-5tcqmc2S.woff2) format('woff2'), url(/assets/outfit-latin-ext-400-normal-DHm7mdGe.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;
}

/* outfit-latin-400-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/outfit-latin-400-normal-BGsTXAXT.woff2) format('woff2'), url(/assets/outfit-latin-400-normal-DMwTpYkH.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;
}/* outfit-latin-ext-500-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/outfit-latin-ext-500-normal-zeox_O30.woff2) format('woff2'), url(/assets/outfit-latin-ext-500-normal-DrCvqoFD.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;
}

/* outfit-latin-500-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/outfit-latin-500-normal-DKnIMDSk.woff2) format('woff2'), url(/assets/outfit-latin-500-normal-ClnHRwRh.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;
}/* outfit-latin-ext-600-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/outfit-latin-ext-600-normal-B85nYjL1.woff2) format('woff2'), url(/assets/outfit-latin-ext-600-normal-CWJcPgd7.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;
}

/* outfit-latin-600-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/outfit-latin-600-normal-B7SfZ07L.woff2) format('woff2'), url(/assets/outfit-latin-600-normal-BEfTtDA7.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;
}/* outfit-latin-ext-700-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/outfit-latin-ext-700-normal-CI4iH74K.woff2) format('woff2'), url(/assets/outfit-latin-ext-700-normal-fjS8-Gm7.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;
}

/* outfit-latin-700-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/outfit-latin-700-normal-Cu9v6i1X.woff2) format('woff2'), url(/assets/outfit-latin-700-normal-D4itBLBr.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;
}/* ibm-plex-sans-arabic-arabic-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-arabic-arabic-500-normal-C4MQITzh.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-arabic-500-normal-XmtXq_5I.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAWwABAAAAAACsgAAAVZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIUgmCcxEQCoNQg1MLDgABNgIkAxgEIAWDSAdGDIRaG6EJCJ4D7s4iTIrohOFv3Sgh5LEYFvrgefLP79yZeVCSD3gpVd9b2R3clGItqN0c6dSTAwCym1eADQgKoFS2WQGAVelGM89V+e3iSLh1WWFLy8O76yXc2iIK0kC+5hEFFEGQ4F3+f7f+//eq/vv+0pyAreXhaJD2pjlsD0pAJwc/aMYfmGjSglWk2FOTap1LNTWnz4ESJux2+Jz2TgTwySdGDPFFJqAYA5AESJK1MSjv681zJRqD+hVdW4B6AEWDRu2U32DBUU8xAIz+tWUe0MlQLCqwtaU0SgMaUAAAIzuNiEtQfI31XxQwK0QsAmIgAChXnQGKFQEK0EC6PARIl88AQIiLwgARxW7Wx0lwfkqS/7yRfAQIVn9jFtqEcVbDzvGZE6bS64p+Epbty1iRcpGf3bxzgDDZA8plJBRKExQql1CdIVRvCdUCKD8FbQbGm8A8EGLvTCz/t5yCISWLh55/UYqRNgh5OY8gl6UY1QYjtZQUo9sgn6C7fGNMB4v4Yn5kgi/2oUw0IZgutkScSfIz5UhgcnBj/5SghAEseTaSZFmTFGPkcGMuMnMCzQjhMxbdeCrFWG3CuFd3jzCjjLDeQwoDPCxJUcgrXBphtm6PK8KyySH7iS3H9D7X/OzgROxa7XfF3OPWPUCXmLl3OnMdlLDeVki+jJ22YS4ZkwKkI4YRbtddXixHE2LcR/CSyrw3N0IsSbEeKcZrEx5nvB6n2fxXpUCgcfFJKEomxQGwAQgBDfQHjAcAGJAYCgAQMKZ7mRPZi8oK/IX8/e/35fhIU6kE08uJ6MAR4vh6KX+3d+r1g7KTe5/usf7Ul+FPqYDwIOv/spMH9skXd1H5wTAU+bfy3+QuU49I1sX+/upQf4BevzGpnF7q05R32ld3u1vv93WfzfSZ5OHWS2JnT2WtOULvXp1URS/fy9P91XX7JJzFc2FO9RPgDIOLl1JrxJgEhptwCkMDQ/ucBXIai5Gnp5B4mKenSALjPO2gzJFPzyDgLET5onwdq2u154jIB9c9HLV3FsB+ESdFqCZnHkCENAfhErrpmXsKC1Dja01ZfNRfp4Y4PjI3i4f8xaJEllgL+e6Mpv43J9vRdl1DLIEp/wARVIEP1eBBnYdSvIOksxI6fKhCCQQgOb/EY7dcqrL8Kfb0R4BXyTuVAPBmPPtT2embwni+FQAPBYDAjyVSuJOwt1uAYKVly0OK+b92RbUKBlxeUU+r0dDoNgcBwAeFeYxGAJdl45TxgFmpmBVCN98VihjXFJphDtZNqsIiV0Jh04HGE+M6sMLaRrLERN68Km4F55asWSX72TlzZBatSJMb5hMR5EIbMSdpy7ioBaucVkTFcOKkaEkJnHXzpiStWMVZtABRklFSUHLALH5cxHwPjM2nrZsTtSLnlAmhZhM1xqjdbdGS7a/gS3+dJKJ6wqwRaqzJnpXGJ5M8nTMHFfpWnZ7kEZK+jVu+UUYEAMkYa3WHDYgotGgxzsoFTkFeD5dUCpfGLehUYKiTI2QS1RGDOIsILr6i1o/SpBJw616TzUqlh1jN5AbDJoxgJtOhIZpZMYhOP7NpBtMb0KaG2AyzhZj0aaF5i2GMpMT9vE0fKl1I1B3GczbpDnUIuI9KN7N5jGIh164ebD71zvJROUNsATs1Ydh1E1tINaRZjVJqjpgpyNiT5LYYPZ6LLU5Hvdo0qaL5hAFdJBrYMIXWAEpLILWYbmBOoyfVkWqYzkypG8mcgWan/rr1TNP8TbJHE25CTo5inDoM/76BHP1JEK1HspE8SQ5ACWwlOUC0QBvWAg22ND+guAWB/iAbyBPJCaj0QAfgCQ==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATcAA0AAAAABWgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALgAAAC4SbCJ7T1MvMgAAAYAAAABgAAAAYGpwqYJjbWFwAAAB4AAAAFQAAABUAMohV2dhc3AAAAI0AAAAEAAAABAAGAAjZ2x5ZgAAAkQAAADCAAAAwuo/LUZoZWFkAAADCAAAADYAAAA2QVy51GhoZWEAAANAAAAAJAAAACQhxhq6aG10eAAAA2QAAAAYAAAAGAcXAEtsb2NhAAADfAAAAA4AAAAOAIcAh21heHAAAAOMAAAAIAAAACAAJwLvbmFtZQAAA6wAAADnAAAByCMaQG1wb3N0AAAElAAAAEYAAABG/6CrQQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAAAEAAAAKACwALAADREZMVAAYYXJhYgAUbGF0bgAUAAAAAAAEAAAAAP//AAAAAAAAAAQCigH0AAUAAAKKAlgAAABLAooCWAAAAV4ATQE4CAECCwYDBQIDAAIDAAAAAwAAAAIAAAAAAAAAAElCTSABwAAAILQEPf5hAAAEaAJZIAABQQAAAAACCAK6AAAAIAAHAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAAAAA0AIACgILT//wAAAAAADQAgAKAgtP//AAH/9f/j/2XfUAABAAAAAAAAAAAAAAAAAAEAAwAIAAoAEAAH//8ADwACACAAAAG4AwwAAwAHAAAzESERJTMRIyABmP61/v4DDPz0TQJyAAEAK//0AlACxgA2AAAFIi4CNTQ2NyM1MzchNSE+ATU0JiMiBgcnPgEzMh4CFRQGBzMVIwchFSEGFRQWMzI2NxcOAQFEM1E4HQUDSHWX/vQBcAMEODMmRBs+Jmk6L0w2HQMETHuUAQ/+jwtANiZHJz0mbQweNkgqEBsLTVNNChUMMi4bIEQrKhswQicOGwxNU00WGzY3HipFLjMAAAAAAQAAAAEZ2ztmI5hfDzz1AAkD6AAAAADhZaMmAAAAAONTufD/I/3AHmMEPQAAAAkAAgAAAAAAAAABAAAEPf5hAAAeiv8j/cgeYwABAAAAAAAAAAAAAAAAAAAABgHYACAAAAAAAOwAAADsAAACewArAOwAAAAAABMAEwATABMAYQBhAAAAAQAAAAYCSwAWAKIABwABAAAAAAAAAAAAAAAAAAMAAXicjZDBasJAEIa/qJV48QF62hdQmyJC9aSCIFiUFjx4s5rGQKwh2lIvPp1P4BP1d1lDvJUh7LeZmW9nF/D5pIxXqQELz3fs0eHiuESds+MyI06OK4WaBx5ZO67yRNtxXQQbDoqULi3FnhUZsfYHcVNfTKJ1p7+R8lOdMWHMgFdmyoT88s6SL1X2VbPkQx0rGsqHOjXmmy1zcWZdO1UaAhkDTRIUqOesJqf/+9/EkShRPss9t36TG8ydw9w5hpot5WhvH9lXMTzbyV5EN+fQvkSqqa+uRGEKHXu7C7Ve7/tj7c0/4pRCqQAAAgAAAAAAAP+tAE0AAAAAAAAAAAAAAAAAAAAAAAAAAAAGAAAAAQECAAMBAwEEB3VuaTAwMEQHdW5pMjBCNAd1bmkwMEEwAAA=) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-arabic-latin-ext-500-normal-Ck_W4G78.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-ext-500-normal-DvhI1aHE.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;
}

/* ibm-plex-sans-arabic-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-arabic-latin-500-normal-Cd6jVIg7.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-500-normal-BKKTaxl1.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;
}/* ibm-plex-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-sans-arabic-arabic-600-normal-0pRdybE_.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-arabic-600-normal-B3qNl98V.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXEABAAAAAACuAAAAVrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIVgmCcxEQCoMsgzILDgABNgIkAxgEIAWDVAdGDIUGG7wJCB4H1c0P0w9MhnQ9uzoNh1fw0P9v2rn3PcQS0kK8k0vE8JrFiDhxqEeouNCVP5XfnWH9hdX5N7OvLjy8u15iba0WUZAG8jWPKOODE7zL/+/a//9e1TfO88zjYwsGQxEM4Fjvvp+buTsWjjFBA9RaQcfCaBfYWEC1lmtUAKypTXOZjG0ssIJh/6o+EgHYKVdOxDr6RrGiA+QARLaAAO3nxXv/5BSeM3lwNx5A1mm6vE0mMIFMUxP0/tliA4m0zCqkw6KZpIbUAA2QAADds1+Jl0A9+qr/J6FvlUmFaAGQdpkFFAsgAQ3w0BCAh04zcGJFogMulAf6kzlgvyRy//hK6jiCwXsrMqLPem0Sthi0U5+Fgm7S5ZALbnXYCdskxHVott1ZtwBnbilO0Y1Z7MMs7ThlFqf82pJNn9KAwDKwxROPCXFL0hC5SwaxOosNbeOGoIEIKNW+LZYRm4IGMmAgGn1BAy2gOjJaTcdwoiqp0irdPZNWHWrr5ExGrzHhFaek0smwyjAS25r5o+HLNCfL5pakksnlQQNdj+vZdBIltV2Jbw/7fm4EDUyBXpXRauOJoUTmbKzMyVhY4POp9sxL8cS4Givz9WGfMV84TFunthVfnVpy5kafsqrJkSib/TDJm2a7Vb7M2Thalq5Ktr0MXgp+BaK5YKA8XatpN8TZ+Bp5FqrMhaahlE2WDf+XsaCBLdA7kmiPlfl8ySACDSt23Cy5nHwAzAA4AQ1YCXoBgA78TQIAAnR9ocPiMk85TPbJ9LtvvivO3V1kF44Ju3DdLs69ak/Hx198z3H9nTfe4Wx2YB914byDs7/j+ntNY8+9rZx3OJsmvl/3/fIux+LhisPlPY2uquKukX3Xe2+Mng2F4YZQ37K2eN12/6pof3m8vLW2dKJ39NjVXjmyO+5ZeGFBTauaiA317FqYBcjSsWIrmLPMQHcb8DoG2sOAcJkFykbSQHxswP2iUyq6lo8jUQVLqYUWIZmsVFeqZuutpmdxUYr9bukKt5gIc9HEhVzfovE7F2L9LHbk3/PGfOwLbIi/DS43w/NoqfSkib+zCtHoppPy3Aa+Txy2tJraaQ210XoglwctETaCTxqJIgBR8lHf5kBmY/7Kf6w27XuAL1IP1wN8NTL7h6IbT7Z/9BHAhgRAwM8jV5FF5NEeCAZeZvE+SurnckieoZ5Twt1ZtlPoERYEAHaQ6P+hIQArm5tVug1YkzzWIVjuQ4ckj5cdGj3OH9SlDhOltjrMLLQQ8jABWx0cWfZaLjz5gGn7bePhoJUhhAE76WfZY78twgZ16NOtVb+4nVKOGjFptwNa7DdpyjbTgkak7LJNqz12mjEuZb/ud/fYTYkKiYqItrjiAKmw90fR4fVbHLLTpP2aCa2MSodV8q2gjTb2OvYh2paPaijzLzq6jJIiYtiftJDu0Z12UpnaARZSlKZ+5WEpM0IkAOQiYdCHGRBCoglN6JZDu7dFjIpheH6kdSF/Y0vEAL8sQRHpF7WhmEZffMxCfpWK5QNW/4uU8KtWzsPZnleqjlJiDoeRhMsEbZbwq+JdPVnSbaWwFSWgxdlRtcoUYLLOiJhFCYswYaLJQpcpl643s1iAT4mdbKHDMsGEczFhZYFGZy6Wh7ZLhCA8l9nZbkJMVLm5zMEJMwYsVW0mO6mnFDdox3oX/ZpEVD/meB4Rdddan0+DKmWK3g7dwox34eQCYXUqWpiDwBrzgs+1iJ9vvUeTBerMO3K9V7tl/Cq+YH2hQS0WqPnK1UUmdFqizl1IVhkrFr8B/8IFWZpUEAepaBZ7xQPMjYdkIQyxhw9qE9QBaD6e5YeBTU7sEfc3fleVZ4yrwgi4GwAA) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATUAA0AAAAABWgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALgAAAC4SbCJ7T1MvMgAAAYAAAABgAAAAYGrVqptjbWFwAAAB4AAAAFQAAABUAMohV2dhc3AAAAI0AAAAEAAAABAAGAAjZ2x5ZgAAAkQAAAC4AAAAuIJK/GhoZWFkAAAC/AAAADYAAAA2QeK54WhoZWEAAAM0AAAAJAAAACQiTBstaG10eAAAA1gAAAAYAAAAGAcbAEhsb2NhAAADcAAAAA4AAAAOAIIAgm1heHAAAAOAAAAAIAAAACAAJwLrbmFtZQAAA6AAAADsAAAB1CR4QVVwb3N0AAAEjAAAAEYAAABG/6irTAABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAAAEAAAAKACwALAADREZMVAAYYXJhYgAUbGF0bgAUAAAAAAAEAAAAAP//AAAAAAAAAAQClgJYAAUAAAKKAlgAAABLAooCWAAAAV4AWAE5CAECCwcDBQIDAAIDAAAAAwAAAAIAAAAAAAAAAElCTSABwAAAILQEPf5hAAAEaAJZIAABQQAAAAACCgK6AAAAIAAHAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAAAAA0AIACgILT//wAAAAAADQAgAKAgtP//AAH/9f/j/2XfUAABAAAAAAAAAAAAAAAAAAEAAwAIAAoAEAAH//8ADwACACAAAAG4AwwAAwAHAAAzESERJTMRIyABmP7A6OgDDPz0WAJcAAEAKP/0AlcCxgAzAAAFIi4CNTQ2NyM1MzcjNSE2NTQmIyIHJz4BMzIeAhUUBzMVIwchFSEGFRQWMzI2NxcOAQFJNlM4HQMCSHGM/QFsBjMuTDREI2s9MU42HQZLeYkBAv6SBjkzJUMmRSVuDCA3SyoNFAlTTFQPFi8qOlEoLB0xQyYaGFRMUxEUNDQhKFIrNQAAAQAAAAEZ2wWigF5fDzz1AAkD6AAAAADhZaMoAAAAAONTufH/F/20HvUEUwAAAAkAAgAAAAAAAAABAAAEPf5hAAAfGP8X/a0e9QABAAAAAAAAAAAAAAAAAAAABgHYACAAAAAAAOwAAADsAAACfwAoAOwAAAAAABMAEwATABMAXABcAAAAAQAAAAYCRQAWAKQABwABAAAAAAAAAAAAAAAAAAMAAXiclZC7bsJAEEWPA0SkoUpFtT8QHlEaoAIkJKIgEEgU6RxwDJIDFi9By/flC/I1XJY1AVGh0XrO7Ny5u14gyzcpvPQT8Ok9O/ao8uf4gRy/jlO8s3ecvtBkyDNx/Mib4sQ5EeqsFLH0RcWSEQumqlfigtaUSHmu3VD9Li0+aNOgQ0+dgC0DfGZS1qXx+dLEiBftBvyIG5qNGDNUvbB+c6kNZbmWKWn9U805mzPdd0Zfdcha7EuXeCUe5uxirnzMjU9TOWZnXyK0L2R4tTesiBLfpn2VWLc/+kUKczGxtFWgfPzvjb5jCgd0rkTvAAIAAAAAAAD/tQBYAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAEBAgADAQMBBAd1bmkwMDBEB3VuaTIwQjQHdW5pMDBBMAAA) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-sans-arabic-latin-ext-600-normal-DjDAeNQD.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-ext-600-normal-BPig9_JX.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;
}

/* ibm-plex-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-sans-arabic-latin-600-normal-KrqB56Mw.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-600-normal-5MnVa4PS.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;
}/* ibm-plex-sans-arabic-arabic-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/ibm-plex-sans-arabic-arabic-700-normal-DrtBj6UE.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-arabic-700-normal-COV7B1nq.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXEABAAAAAACxwAAAVqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIVgmCcxEQCoNMg1ELDgABNgIkAxgEIAWDXgdGDIUWG/UJAJ6FsZujJWelo/jYmOSCB/477c+dmUCV0n2dFI5LpEa6LLiQ88Q/Ms+zffCXpL/dVOAige1+wl2kQRrINI8ogyhIsPj//+9VfSM30ZyAjQ0S8CCttWntrnn8A7WCcx7/YO0GKpZrVACsxthiVOpB+8kSAZhJl04EWruHMaIARCKAEeJixeSfp8xtk1MkrMkdm0gAzLhdkW6RnkIHUkgaB7roP1usYSaqjUKyGGWdJCPJgAxIAAAdvUcVN4F6ldoLk6AsSEEV0Qgg2aRlQGUAJEAGEsgIIIFCA7BiREIBbKhuUh+NoOVbIvLfN7Nf9CO4fLRkEwLmtJuy07ANulVwu4ROp7mKWzjDKTboN6xVgxnXcBNgjVRgFR3oxVb0kg2rtIxV+pajqS+pQfHQMPWPPyTEZUFNRE5qBOo5TMhr1zg1RLGqtiwGwmKdU0Mq1hCFDqeGXKy2huWc1sHxrKAaUkMdMyG1VV2YnAkrOUzXecRsKOhWwwzlYuwfTke4IWivjswGg1VODWUtqnhDQYTUpVXokk4+5rxTQ1fcpYbl3P7xgfHwkYBdWANqwOFQW8LP9Y/fowG7o+ikR39aHZ06uJhybmzw6Qul07iSdUhbG2SR4A61ZLMc4SO6bA9lBROTxnNKowAaAhqrtss5LZo40t9tPQK7XWhJrfEG7bf/Z8CpYSruGhpvCdgdjqATgYwRMzEMkYhoAPQAWAEZqAM9AEABEY0EAAhQlDKLwaafsujMk6H3335fuD7ZLCxjZmG7Xhx9xhx6N3/0wQ8s33vrPY7ckGDBPGzBeg1HXrN8pX7kqXdV6w1W//SbgTerei2Vw46z6V1FRpu+bWLDkebfJuZ7Y4teLshuSF/sWPXvBme9v2/FdHpzjiW5qHNi9/7mfyYWi2zePldWpKxrVcHG0vcAllEwYoqNq9RQYjR4Ew1aUgN3OQfYW1BDfKoh5qHQWGQNn3q8s4V2ZcrNs4idb5ez/DLty9iwY6sn29yNMhFsiK2NOtxs1LMhre7hvIFkc4VGt53DjPRvEzKj1QMmxL8atphAo7DdmmBq/y6TjDbsNRwVo5H1NTbgXGzGediEC23Mo26hjwn3s3q8CECkfrLnr88vrI2u+c9okn8E+Gr21myAb4bO/R6xnL8z4wplAYEJCQABvyu+jDMCXcGA4KKiFx+icv7qCtIJcut2IaakZpLcjmEuOzNIKJ8jIwAjc2SEYgIm4iIuFeT7Xyph5HepTJP7pAo++6Q60qyT6ilWYovSNViw4yrcoop7YLtp2yxqE+6wnetrLNrAZbNt5rn1adWtQ5Me/TaYtceQSZts12ibSVMWTXNqstkGM0bN2raWFmdvovJy8fLwRo/KParZqhquujjfU232rfpEZnp99rc168QWe18Xx/zrlVD5TpGppBr9SNs243CtcHCDDdRZju0ttlkaz/7KXWbNcJEAIPIMMy6P0ANCSMhCFoph56ZFD7MHUPR5mkraLm30aFBkGUEyqUgEQQoZP8umnFOWVNGAsehZUuXKkCKWJdnSxrSvkCSGGVbUWYI6PoWyxA88S2JAsxI5UjmTTNnyZyn0qOeVJZHN66jkkitt3LwerzwZkvm8gSZ+hTL2cxhjyyFFFM4y0aGGm0MCq5mZNmBSTnacZWGXdbqUyWQNK/nUxwXzWTa61PLIlgymKArO5IpuS8WzoRbDYUXixarHKuBgFw9xnsS1EvH8yfIaDZCgTTUnLDicqFl5VE/Sp5FfznSyMW3KFbz6p7KMnRFDkQb/lwPL1MsgdtCwBRrgJhKDdkJDYjNHn30d0HYSo2sj0Winqx6wGW5MhMma43oT8CfpRzvAQ2MAAAAA) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAATYAA0AAAAABXgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALgAAAC4SbCJ7T1MvMgAAAYAAAABgAAAAYGs7q5ZjbWFwAAAB4AAAAFQAAABUAMohV2dhc3AAAAI0AAAAEAAAABAAGAAjZ2x5ZgAAAkQAAAC8AAAAvOFh37BoZWFkAAADAAAAADYAAAA2QnK54mhoZWEAAAM4AAAAJAAAACQi2xumaG10eAAAA1wAAAAYAAAAGAcgAEZsb2NhAAADdAAAAA4AAAAOAIQAhG1heHAAAAOEAAAAIAAAACAAJwLqbmFtZQAAA6QAAADpAAAB3iUBQVNwb3N0AAAEkAAAAEYAAABG/7GrWAABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAAAEAAAAKACwALAADREZMVAAYYXJhYgAUbGF0bgAUAAAAAAAEAAAAAP//AAAAAAAAAAQCogK8AAUAAAKKAlgAAABLAooCWAAAAV4AZAE7CAECCwgDBQIDAAIDAAAAAwAAAAIAAAAAAAAAAElCTSABoAAAILQEPf5hAAAEaAJZIAABQQAAAAACDQK6AAAAIAAHAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAAAAA0AIACgILT//wAAAAAADQAgAKAgtP//AAH/9f/j/2XfUAABAAAAAAAAAAAAAAAAAAEAAwAIAAoAEAAH//8ADwACACAAAAG4AwwAAwAHAAAzESERJTMRIyABmP7M0NADDPz0ZAJEAAEAJv/0Al4CxgA1AAAFIi4CNTQ2NyM1MzcjNSE2NTQmIyIGByc+ATMyHgIVFAYHMxUjBzMVIQYVFBYzMjY3Fw4BAU85VTkdAQFHbIHtAWcFLSkkQRdKIG0/M1A3HQIDSnd88/6XAzUuI0AkTCNuDCI6TCsIDgdaRFoPESsmHRpdJS4eNEQlCxgMWkRaDA0xMCAnXSo2AAEAAAABGdtDOLbAXw889QAJA+gAAAAA4WWjJAAAAADjU7nu/wv9px+QBGgAAQAJAAIAAAAAAAAAAQAABD3+YQAAH67/C/2QH5AAAQAAAAAAAAAAAAAAAAAAAAYB2AAgAAAAAADsAAAA7AAAAoQAJgDsAAAAAAATABMAEwATAF4AXgAAAAEAAAAGAkMAFgClAAcAAQAAAAAAAAAAAAAAAAADAAF4nJWQQU/CQBSEv0oleOEHcDB79IBgDRfsSUlMTCSakHDgBLalkBDbFGLE3+Rv8+jZ6bJUuWFetm+2b2b2ZYAGc2p4/hkw8c4d9rjg2+ETcb4crnHHp8M+13w4fEqLqcN12vQcbgrBgo0q54auak1EwVL3jXBHZ8lKPdPfVPMn7nnkQS8NedYk4Z0RM17FvBVnxosUEZdiZJrHjMUprE8mliGQW8CVzs7FVD6mcjIHXqby+tWGlTr81zb7fuzbA/FztjaT1GZllGy5QV9o7zKw+eTarlSvVOaPYm1viXqZxJu+MZ0fT0lFdgAAAAACAAAAAAAA/74AZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAABAQIAAwEDAQQHdW5pMDAwRAd1bmkyMEI0B3VuaTAwQTAAAA==) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/ibm-plex-sans-arabic-latin-ext-700-normal-BSbyEp0V.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-ext-700-normal-M3R6yVFi.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;
}

/* ibm-plex-sans-arabic-latin-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/ibm-plex-sans-arabic-latin-700-normal-BzSf6GNr.woff2) format('woff2'), url(/assets/ibm-plex-sans-arabic-latin-700-normal-C6QlO9CN.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;
}/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: var(--ramp-red-50);
    --color-red-100: var(--ramp-red-100);
    --color-red-200: var(--ramp-red-200);
    --color-red-300: var(--ramp-red-300);
    --color-red-400: var(--ramp-red-400);
    --color-red-500: var(--ramp-red-500);
    --color-red-600: var(--ramp-red-600);
    --color-red-700: var(--ramp-red-700);
    --color-red-800: var(--ramp-red-800);
    --color-red-900: var(--ramp-red-900);
    --color-red-950: var(--ramp-red-900);
    --color-amber-50: var(--ramp-amber-50);
    --color-amber-100: var(--ramp-amber-100);
    --color-amber-200: var(--ramp-amber-200);
    --color-amber-300: var(--ramp-amber-300);
    --color-amber-400: var(--ramp-amber-400);
    --color-amber-500: var(--ramp-amber-500);
    --color-amber-600: var(--ramp-amber-600);
    --color-amber-700: var(--ramp-amber-700);
    --color-amber-800: var(--ramp-amber-800);
    --color-amber-900: var(--ramp-amber-900);
    --color-amber-950: var(--ramp-amber-900);
    --color-green-50: var(--ramp-green-50);
    --color-green-100: var(--ramp-green-100);
    --color-green-200: var(--ramp-green-200);
    --color-green-300: var(--ramp-green-300);
    --color-green-400: var(--ramp-green-400);
    --color-green-500: var(--ramp-green-500);
    --color-green-600: var(--ramp-green-600);
    --color-green-700: var(--ramp-green-700);
    --color-green-800: var(--ramp-green-800);
    --color-green-900: var(--ramp-green-900);
    --color-emerald-50: var(--ramp-green-50);
    --color-emerald-100: var(--ramp-green-100);
    --color-emerald-200: var(--ramp-green-200);
    --color-emerald-300: var(--ramp-green-300);
    --color-emerald-400: var(--ramp-green-400);
    --color-emerald-500: var(--ramp-green-500);
    --color-emerald-600: var(--ramp-green-600);
    --color-emerald-700: var(--ramp-green-700);
    --color-emerald-800: var(--ramp-green-800);
    --color-emerald-900: var(--ramp-green-900);
    --color-emerald-950: var(--ramp-green-900);
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-950: oklch(29.3% .066 243.157);
    --color-blue-50: var(--ramp-indigo-50);
    --color-blue-100: var(--ramp-indigo-100);
    --color-blue-200: var(--ramp-indigo-200);
    --color-blue-300: var(--ramp-indigo-300);
    --color-blue-600: var(--ramp-indigo-600);
    --color-blue-700: var(--ramp-indigo-700);
    --color-blue-800: var(--ramp-indigo-800);
    --color-blue-900: var(--ramp-indigo-900);
    --color-blue-950: var(--ramp-indigo-900);
    --color-gray-50: var(--ramp-neutral-50);
    --color-gray-100: var(--ramp-neutral-100);
    --color-gray-200: var(--ramp-neutral-200);
    --color-gray-300: var(--ramp-neutral-300);
    --color-gray-400: var(--ramp-neutral-400);
    --color-gray-500: var(--ramp-neutral-500);
    --color-gray-600: var(--ramp-neutral-600);
    --color-gray-700: var(--ramp-neutral-700);
    --color-gray-800: var(--ramp-neutral-800);
    --color-gray-900: var(--ramp-neutral-900);
    --color-gray-950: var(--ramp-neutral-1000);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-sm: .25rem;
    --radius-md: var(--shape-radius-subcontainer);
    --radius-lg: var(--shape-radius-action);
    --radius-xl: var(--shape-radius-container);
    --radius-2xl: var(--shape-radius-supercontainer);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: var(--transition-swift-duration);
    --default-transition-timing-function: var(--transition-swift-easing);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-heading: "Outfit", "IBM Plex Sans Arabic", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
    --color-brand-50: var(--ramp-indigo-50);
    --color-brand-100: var(--ramp-indigo-100);
    --color-brand-200: var(--ramp-indigo-200);
    --color-brand-300: var(--ramp-indigo-300);
    --color-brand-400: var(--ramp-indigo-400);
    --color-brand-500: var(--ramp-indigo-500);
    --color-brand-600: var(--ramp-indigo-600);
    --color-brand-700: oklch(52.76% .2249 263.922);
    --color-brand-800: var(--ramp-indigo-700);
    --color-brand-900: var(--ramp-indigo-800);
    --color-brand-950: var(--ramp-indigo-900);
    --color-accent-400: var(--ramp-orange-400);
    --color-accent-500: var(--ramp-orange-500);
    --color-accent-600: var(--ramp-orange-600);
    --color-surface: var(--color-background-base);
    --color-surface-sunken: var(--color-background-sunken);
    --color-surface-sunken-strong: var(--color-background-sunkenStrong);
    --color-surface-raised: var(--color-background-raised);
    --color-surface-raised-hover: var(--color-background-raisedHover);
    --color-surface-overlay: var(--color-background-overlay);
    --color-surface-primary: var(--color-background-primary);
    --color-surface-primary-subtle: var(--color-background-primarySubtle);
    --color-surface-accent: var(--color-background-accent);
    --color-surface-accent-subtle: var(--color-background-accentSubtle);
    --color-surface-success: var(--color-background-success);
    --color-surface-success-subtle: var(--color-background-successSubtle);
    --color-surface-warning: var(--color-background-warning);
    --color-surface-warning-subtle: var(--color-background-warningSubtle);
    --color-surface-critical: var(--color-background-critical);
    --color-surface-critical-subtle: var(--color-background-criticalSubtle);
    --color-surface-info: var(--color-background-info);
    --color-surface-info-subtle: var(--color-background-infoSubtle);
    --color-fg: var(--color-foreground-onBase);
    --color-fg-muted: var(--color-foreground-onBaseMuted);
    --color-fg-faint: var(--color-foreground-onBaseFaint);
    --color-fg-primary: var(--color-foreground-primary);
    --color-fg-accent: var(--color-foreground-accent);
    --color-fg-success: var(--color-foreground-success);
    --color-fg-warning: var(--color-foreground-warning);
    --color-fg-critical: var(--color-foreground-critical);
    --color-fg-info: var(--color-foreground-info);
    --color-fg-on-primary: var(--color-foreground-onPrimary);
    --color-fg-on-success: var(--color-foreground-onSuccess);
    --color-fg-on-warning: var(--color-foreground-onWarning);
    --color-fg-on-critical: var(--color-foreground-onCritical);
    --color-line: var(--color-border-neutral);
    --color-line-faint: var(--color-border-faint);
    --color-line-strong: var(--color-border-strong);
    --color-line-primary: var(--color-border-primary);
    --color-line-success: var(--color-border-success);
    --color-line-warning: var(--color-border-warning);
    --color-line-critical: var(--color-border-critical);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html, body {
    background-color: var(--color-surface);
    color: var(--color-fg);
    font-family: var(--font-sans);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
  }

  :root {
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--shape-border-thick) solid var(--color-border-primary);
    outline-offset: 2px;
  }

  ::selection {
    background: var(--color-background-primarySubtle);
  }

  @media (prefers-reduced-motion: reduce) {
    *, :before, :after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer antd, landing, landing-rtl, components;

@layer utilities {
  .\@container {
    container-type: inline-size;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .-inset-\[3px\] {
    inset: -3px;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-2 {
    inset: calc(var(--spacing) * 2);
  }

  .inset-\[14\%\] {
    inset: 14%;
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-1 {
    inset-inline: calc(var(--spacing) * 1);
  }

  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }

  .inset-x-6 {
    inset-inline: calc(var(--spacing) * 6);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .inset-y-1 {
    inset-block: calc(var(--spacing) * 1);
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .start-0\.5 {
    inset-inline-start: calc(var(--spacing) * .5);
  }

  .start-2 {
    inset-inline-start: calc(var(--spacing) * 2);
  }

  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }

  .start-3\.5 {
    inset-inline-start: calc(var(--spacing) * 3.5);
  }

  .start-4 {
    inset-inline-start: calc(var(--spacing) * 4);
  }

  .start-6 {
    inset-inline-start: calc(var(--spacing) * 6);
  }

  .start-24 {
    inset-inline-start: calc(var(--spacing) * 24);
  }

  .start-\[8\%\] {
    inset-inline-start: 8%;
  }

  .start-\[18px\] {
    inset-inline-start: 18px;
  }

  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .end-1 {
    inset-inline-end: calc(var(--spacing) * 1);
  }

  .end-3 {
    inset-inline-end: calc(var(--spacing) * 3);
  }

  .end-4 {
    inset-inline-end: calc(var(--spacing) * 4);
  }

  .end-\[2\%\] {
    inset-inline-end: 2%;
  }

  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-4 {
    top: calc(var(--spacing) * -4);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-6 {
    top: calc(var(--spacing) * 6);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-\[2\%\] {
    top: 2%;
  }

  .top-full {
    top: 100%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-44 {
    right: calc(var(--spacing) * 44);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-9 {
    bottom: calc(var(--spacing) * 9);
  }

  .bottom-\[22\%\] {
    bottom: 22%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .isolate {
    isolation: isolate;
  }

  .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-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[4\] {
    z-index: 4;
  }

  .z-\[5\] {
    z-index: 5;
  }

  .z-\[6\] {
    z-index: 6;
  }

  .z-\[45\] {
    z-index: 45;
  }

  .z-\[900\] {
    z-index: 900;
  }

  .z-\[1100\] {
    z-index: 1100;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .\!m-0 {
    margin: calc(var(--spacing) * 0) !important;
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-10 {
    margin-inline: calc(var(--spacing) * 10);
  }

  .mx-\[5px\] {
    margin-inline: 5px;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-px {
    margin-block: -1px;
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .ms-0\.5 {
    margin-inline-start: calc(var(--spacing) * .5);
  }

  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }

  .ms-1\.5 {
    margin-inline-start: calc(var(--spacing) * 1.5);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-3 {
    margin-inline-start: calc(var(--spacing) * 3);
  }

  .ms-4 {
    margin-inline-start: calc(var(--spacing) * 4);
  }

  .ms-5 {
    margin-inline-start: calc(var(--spacing) * 5);
  }

  .ms-6 {
    margin-inline-start: calc(var(--spacing) * 6);
  }

  .ms-8 {
    margin-inline-start: calc(var(--spacing) * 8);
  }

  .ms-12 {
    margin-inline-start: calc(var(--spacing) * 12);
  }

  .ms-16 {
    margin-inline-start: calc(var(--spacing) * 16);
  }

  .ms-20 {
    margin-inline-start: calc(var(--spacing) * 20);
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .me-0\.5 {
    margin-inline-end: calc(var(--spacing) * .5);
  }

  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }

  .me-1\.5 {
    margin-inline-end: calc(var(--spacing) * 1.5);
  }

  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }

  .me-auto {
    margin-inline-end: auto;
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }

  .-mt-20 {
    margin-top: calc(var(--spacing) * -20);
  }

  .-mt-\[9\%\] {
    margin-top: -9%;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-\[5px\] {
    margin-top: 5px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\!block {
    display: block !important;
  }

  .\!table {
    display: table !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-header-group {
    display: table-header-group;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
  }

  .size-\[26px\] {
    width: 26px;
    height: 26px;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .\!h-auto {
    height: auto !important;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-3\/5 {
    height: 60%;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-60 {
    height: calc(var(--spacing) * 60);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[4px\] {
    height: 4px;
  }

  .h-\[5px\] {
    height: 5px;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[26px\] {
    height: 26px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[46\%\] {
    height: 46%;
  }

  .h-\[62vh\] {
    height: 62vh;
  }

  .h-\[74px\] {
    height: 74px;
  }

  .h-\[74vh\] {
    height: 74vh;
  }

  .h-\[80mm\] {
    height: 80mm;
  }

  .h-\[96\%\] {
    height: 96%;
  }

  .h-\[440px\] {
    height: 440px;
  }

  .h-\[620px\] {
    height: 620px;
  }

  .h-\[calc\(100dvh-17rem\)\] {
    height: calc(100dvh - 17rem);
  }

  .h-\[min\(60vh\,560px\)\] {
    height: min(60vh, 560px);
  }

  .h-\[min\(92svh\,860px\)\] {
    height: min(92svh, 860px);
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-52 {
    max-height: calc(var(--spacing) * 52);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[26rem\] {
    max-height: 26rem;
  }

  .max-h-\[32rem\] {
    max-height: 32rem;
  }

  .max-h-\[45vh\] {
    max-height: 45vh;
  }

  .max-h-\[50vh\] {
    max-height: 50vh;
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[68vh\] {
    max-height: 68vh;
  }

  .max-h-\[70vh\] {
    max-height: 70vh;
  }

  .max-h-\[72vh\] {
    max-height: 72vh;
  }

  .max-h-\[74vh\] {
    max-height: 74vh;
  }

  .max-h-\[75vh\] {
    max-height: 75vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[560px\] {
    max-height: 560px;
  }

  .max-h-full {
    max-height: 100%;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }

  .min-h-\[28rem\] {
    min-height: 28rem;
  }

  .min-h-\[297mm\] {
    min-height: 297mm;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[420px\] {
    min-height: 420px;
  }

  .min-h-dvh {
    min-height: 100dvh;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-16 {
    width: calc(var(--spacing) * 16) !important;
  }

  .\!w-20 {
    width: calc(var(--spacing) * 20) !important;
  }

  .\!w-24 {
    width: calc(var(--spacing) * 24) !important;
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-60 {
    width: calc(var(--spacing) * 60);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-68 {
    width: calc(var(--spacing) * 68);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[22\%\] {
    width: 22%;
  }

  .w-\[34\%\] {
    width: 34%;
  }

  .w-\[34px\] {
    width: 34px;
  }

  .w-\[40\%\] {
    width: 40%;
  }

  .w-\[60\%\] {
    width: 60%;
  }

  .w-\[62\%\] {
    width: 62%;
  }

  .w-\[85\%\] {
    width: 85%;
  }

  .w-\[92px\] {
    width: 92px;
  }

  .w-\[150px\] {
    width: 150px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-\[min\(96vw\,640px\)\] {
    width: min(96vw, 640px);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }

  .max-w-44 {
    max-width: calc(var(--spacing) * 44);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-52 {
    max-width: calc(var(--spacing) * 52);
  }

  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }

  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }

  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }

  .max-w-\[8rem\] {
    max-width: 8rem;
  }

  .max-w-\[9rem\] {
    max-width: 9rem;
  }

  .max-w-\[11rem\] {
    max-width: 11rem;
  }

  .max-w-\[14rem\] {
    max-width: 14rem;
  }

  .max-w-\[15rem\] {
    max-width: 15rem;
  }

  .max-w-\[16rem\] {
    max-width: 16rem;
  }

  .max-w-\[18rem\] {
    max-width: 18rem;
  }

  .max-w-\[20rem\] {
    max-width: 20rem;
  }

  .max-w-\[22rem\] {
    max-width: 22rem;
  }

  .max-w-\[24rem\] {
    max-width: 24rem;
  }

  .max-w-\[28rem\] {
    max-width: 28rem;
  }

  .max-w-\[50\%\] {
    max-width: 50%;
  }

  .max-w-\[80\%\] {
    max-width: 80%;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-w-\[92\%\] {
    max-width: 92%;
  }

  .max-w-\[210mm\] {
    max-width: 210mm;
  }

  .max-w-\[210px\] {
    max-width: 210px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[297mm\] {
    max-width: 297mm;
  }

  .max-w-\[calc\(100vw-32px\)\] {
    max-width: calc(100vw - 32px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-1\.5 {
    min-width: calc(var(--spacing) * 1.5);
  }

  .min-w-7 {
    min-width: calc(var(--spacing) * 7);
  }

  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }

  .min-w-14 {
    min-width: calc(var(--spacing) * 14);
  }

  .min-w-20 {
    min-width: calc(var(--spacing) * 20);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-28 {
    min-width: calc(var(--spacing) * 28);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }

  .min-w-48 {
    min-width: calc(var(--spacing) * 48);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }

  .min-w-72 {
    min-width: calc(var(--spacing) * 72);
  }

  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[14rem\] {
    min-width: 14rem;
  }

  .min-w-\[16rem\] {
    min-width: 16rem;
  }

  .min-w-\[18rem\] {
    min-width: 18rem;
  }

  .min-w-\[22rem\] {
    min-width: 22rem;
  }

  .min-w-\[36rem\] {
    min-width: 36rem;
  }

  .min-w-\[38rem\] {
    min-width: 38rem;
  }

  .min-w-\[40rem\] {
    min-width: 40rem;
  }

  .min-w-\[46rem\] {
    min-width: 46rem;
  }

  .min-w-\[52rem\] {
    min-width: 52rem;
  }

  .min-w-\[700px\] {
    min-width: 700px;
  }

  .min-w-\[720px\] {
    min-width: 720px;
  }

  .min-w-\[760px\] {
    min-width: 760px;
  }

  .min-w-\[900px\] {
    min-width: 900px;
  }

  .min-w-\[1000px\] {
    min-width: 1000px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-max {
    min-width: max-content;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[2\] {
    flex: 2;
  }

  .flex-\[3\] {
    flex: 3;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .basis-64 {
    flex-basis: calc(var(--spacing) * 64);
  }

  .basis-72 {
    flex-basis: calc(var(--spacing) * 72);
  }

  .caption-top {
    caption-side: top;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .-skew-x-\[35deg\] {
    --tw-skew-x: skewX(calc(35deg * -1));
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-cell {
    cursor: cell;
  }

  .cursor-crosshair {
    cursor: crosshair;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-ew-resize {
    cursor: ew-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .touch-pan-y {
    --tw-pan-y: pan-y;
    touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .snap-center {
    scroll-snap-align: center;
  }

  .scroll-mt-6 {
    scroll-margin-top: calc(var(--spacing) * 6);
  }

  .scroll-mt-20 {
    scroll-margin-top: calc(var(--spacing) * 20);
  }

  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }

  .scroll-mt-28 {
    scroll-margin-top: calc(var(--spacing) * 28);
  }

  .\[scrollbar-width\:thin\] {
    scrollbar-width: thin;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .columns-4 {
    columns: 4;
  }

  .\!grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .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));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[1\.4fr_1fr_auto\] {
    grid-template-columns: 1.4fr 1fr auto;
  }

  .grid-cols-\[1\.5rem_minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)_4rem\] {
    grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1.2fr) 4rem;
  }

  .grid-cols-\[1\.6fr_1fr_1fr\] {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .grid-cols-\[1fr_1\.6fr\] {
    grid-template-columns: 1fr 1.6fr;
  }

  .grid-cols-\[1fr_10rem\] {
    grid-template-columns: 1fr 10rem;
  }

  .grid-cols-\[1fr_17rem\] {
    grid-template-columns: 1fr 17rem;
  }

  .grid-cols-\[1fr_18rem\] {
    grid-template-columns: 1fr 18rem;
  }

  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .grid-cols-\[6\.5rem_1fr_1fr_1fr\] {
    grid-template-columns: 6.5rem 1fr 1fr 1fr;
  }

  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .grid-cols-\[auto_auto\] {
    grid-template-columns: auto auto;
  }

  .grid-cols-\[auto_repeat\(5\,minmax\(3rem\,1fr\)\)\] {
    grid-template-columns: auto repeat(5, minmax(3rem, 1fr));
  }

  .grid-cols-\[minmax\(0\,1fr\)_4\.5rem_auto\] {
    grid-template-columns: minmax(0, 1fr) 4.5rem auto;
  }

  .grid-cols-\[minmax\(0\,14rem\)_1fr\] {
    grid-template-columns: minmax(0, 14rem) 1fr;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .content-center {
    align-content: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  .gap-\[5px\] {
    gap: 5px;
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-gray-200 > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }

  :where(.divide-line > :not(:last-child)) {
    border-color: var(--color-line);
  }

  :where(.divide-line-faint > :not(:last-child)) {
    border-color: var(--color-line-faint);
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\!overflow-visible {
    overflow: visible !important;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overscroll-y-contain {
    overscroll-behavior-y: contain;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[5px\] {
    border-radius: 5px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-s-2xl {
    border-start-start-radius: var(--radius-2xl);
    border-end-start-radius: var(--radius-2xl);
  }

  .rounded-s-\[3rem\] {
    border-start-start-radius: 3rem;
    border-end-start-radius: 3rem;
  }

  .rounded-s-full {
    border-start-start-radius: 3.40282e38px;
    border-end-start-radius: 3.40282e38px;
  }

  .rounded-e-2xl {
    border-start-end-radius: var(--radius-2xl);
    border-end-end-radius: var(--radius-2xl);
  }

  .rounded-e-md {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
  }

  .rounded-ee-md {
    border-end-end-radius: var(--radius-md);
  }

  .rounded-es-\[3rem\] {
    border-end-start-radius: 3rem;
  }

  .rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }

  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }

  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[10px\] {
    border-style: var(--tw-border-style);
    border-width: 10px;
  }

  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }

  .border-y-2 {
    border-block-style: var(--tw-border-style);
    border-block-width: 2px;
  }

  .border-s {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
  }

  .border-s-2 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 2px;
  }

  .border-s-4 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 4px;
  }

  .border-e {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
  }

  .border-e-2 {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-\[color\:var\(--ds-accent\,\#6d28d9\)\] {
    border-color: var(--ds-accent, #6d28d9);
  }

  .border-accent-500 {
    border-color: var(--color-accent-500);
  }

  .border-amber-300 {
    border-color: var(--color-amber-300);
  }

  .border-brand-100 {
    border-color: var(--color-brand-100);
  }

  .border-brand-200 {
    border-color: var(--color-brand-200);
  }

  .border-brand-300 {
    border-color: var(--color-brand-300);
  }

  .border-brand-400 {
    border-color: var(--color-brand-400);
  }

  .border-brand-500 {
    border-color: var(--color-brand-500);
  }

  .border-brand-700 {
    border-color: var(--color-brand-700);
  }

  .border-brand-900 {
    border-color: var(--color-brand-900);
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-fg-accent {
    border-color: var(--color-fg-accent);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400 {
    border-color: var(--color-gray-400);
  }

  .border-gray-700 {
    border-color: var(--color-gray-700);
  }

  .border-gray-800 {
    border-color: var(--color-gray-800);
  }

  .border-gray-900 {
    border-color: var(--color-gray-900);
  }

  .border-line {
    border-color: var(--color-line);
  }

  .border-line-critical {
    border-color: var(--color-line-critical);
  }

  .border-line-faint {
    border-color: var(--color-line-faint);
  }

  .border-line-primary {
    border-color: var(--color-line-primary);
  }

  .border-line-strong {
    border-color: var(--color-line-strong);
  }

  .border-line-success, .border-line-success\/40 {
    border-color: var(--color-line-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-line-success\/40 {
      border-color: color-mix(in oklab, var(--color-line-success) 40%, transparent);
    }
  }

  .border-line-warning {
    border-color: var(--color-line-warning);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .\!bg-surface-sunken {
    background-color: var(--color-surface-sunken) !important;
  }

  .bg-\[color\:var\(--ds-accent\,\#6d28d9\)\] {
    background-color: var(--ds-accent, #6d28d9);
  }

  .bg-\[rgba\(109\,40\,217\,0\.14\)\] {
    background-color: #6d28d924;
  }

  .bg-accent-500, .bg-accent-500\/15 {
    background-color: var(--color-accent-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent-500\/15 {
      background-color: color-mix(in oklab, var(--color-accent-500) 15%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-black\/45 {
    background-color: #00000073;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/45 {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/55 {
    background-color: #0000008c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/55 {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-brand-50 {
    background-color: var(--color-brand-50);
  }

  .bg-brand-100, .bg-brand-100\/70 {
    background-color: var(--color-brand-100);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-100\/70 {
      background-color: color-mix(in oklab, var(--color-brand-100) 70%, transparent);
    }
  }

  .bg-brand-400 {
    background-color: var(--color-brand-400);
  }

  .bg-brand-500 {
    background-color: var(--color-brand-500);
  }

  .bg-brand-600 {
    background-color: var(--color-brand-600);
  }

  .bg-brand-700 {
    background-color: var(--color-brand-700);
  }

  .bg-brand-800 {
    background-color: var(--color-brand-800);
  }

  .bg-brand-900 {
    background-color: var(--color-brand-900);
  }

  .bg-brand-950 {
    background-color: var(--color-brand-950);
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-fg-primary {
    background-color: var(--color-fg-primary);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-line {
    background-color: var(--color-line);
  }

  .bg-line-strong {
    background-color: var(--color-line-strong);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }

  .bg-surface {
    background-color: var(--color-surface);
  }

  .bg-surface-accent {
    background-color: var(--color-surface-accent);
  }

  .bg-surface-accent-subtle {
    background-color: var(--color-surface-accent-subtle);
  }

  .bg-surface-critical {
    background-color: var(--color-surface-critical);
  }

  .bg-surface-critical-subtle {
    background-color: var(--color-surface-critical-subtle);
  }

  .bg-surface-info {
    background-color: var(--color-surface-info);
  }

  .bg-surface-info-subtle {
    background-color: var(--color-surface-info-subtle);
  }

  .bg-surface-overlay {
    background-color: var(--color-surface-overlay);
  }

  .bg-surface-primary {
    background-color: var(--color-surface-primary);
  }

  .bg-surface-primary-subtle {
    background-color: var(--color-surface-primary-subtle);
  }

  .bg-surface-raised {
    background-color: var(--color-surface-raised);
  }

  .bg-surface-success {
    background-color: var(--color-surface-success);
  }

  .bg-surface-success-subtle {
    background-color: var(--color-surface-success-subtle);
  }

  .bg-surface-sunken {
    background-color: var(--color-surface-sunken);
  }

  .bg-surface-sunken-strong {
    background-color: var(--color-surface-sunken-strong);
  }

  .bg-surface-sunken\/40 {
    background-color: var(--color-surface-sunken);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-sunken\/40 {
      background-color: color-mix(in oklab, var(--color-surface-sunken) 40%, transparent);
    }
  }

  .bg-surface-warning {
    background-color: var(--color-surface-warning);
  }

  .bg-surface-warning-subtle {
    background-color: var(--color-surface-warning-subtle);
  }

  .bg-surface\/70 {
    background-color: var(--color-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface\/70 {
      background-color: color-mix(in oklab, var(--color-surface) 70%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-\[var\(--color-surface-primary-subtle\)\] {
    --tw-gradient-from: var(--color-surface-primary-subtle);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-brand-500 {
    --tw-gradient-from: var(--color-brand-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-brand-700 {
    --tw-gradient-from: var(--color-brand-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-brand-950\/0 {
    --tw-gradient-from: var(--color-brand-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-brand-950\/0 {
      --tw-gradient-from: color-mix(in oklab, var(--color-brand-950) 0%, transparent);
    }
  }

  .from-brand-950\/0 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-brand-950\/10 {
    --tw-gradient-via: var(--color-brand-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-brand-950\/10 {
      --tw-gradient-via: color-mix(in oklab, var(--color-brand-950) 10%, transparent);
    }
  }

  .via-brand-950\/10 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-\[var\(--color-surface\)\] {
    --tw-gradient-to: var(--color-surface);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-brand-400 {
    --tw-gradient-to: var(--color-brand-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-brand-700 {
    --tw-gradient-to: var(--color-brand-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-brand-950\/60 {
    --tw-gradient-to: var(--color-brand-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-brand-950\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-brand-950) 60%, transparent);
    }
  }

  .to-brand-950\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .fill-amber-400 {
    fill: var(--color-amber-400);
  }

  .fill-amber-500 {
    fill: var(--color-amber-500);
  }

  .fill-brand-300 {
    fill: var(--color-brand-300);
  }

  .fill-brand-400 {
    fill: var(--color-brand-400);
  }

  .fill-brand-700 {
    fill: var(--color-brand-700);
  }

  .fill-brand-800 {
    fill: var(--color-brand-800);
  }

  .fill-fg-on-success {
    fill: var(--color-fg-on-success);
  }

  .fill-green-500 {
    fill: var(--color-green-500);
  }

  .fill-white {
    fill: var(--color-white);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\!p-1\.5 {
    padding: calc(var(--spacing) * 1.5) !important;
  }

  .\!p-2 {
    padding: calc(var(--spacing) * 2) !important;
  }

  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-\[6px\] {
    padding: 6px;
  }

  .p-px {
    padding: 1px;
  }

  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .\!px-1 {
    padding-inline: calc(var(--spacing) * 1) !important;
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-\[5px\] {
    padding-inline: 5px;
  }

  .\!py-0 {
    padding-block: calc(var(--spacing) * 0) !important;
  }

  .\!py-1 {
    padding-block: calc(var(--spacing) * 1) !important;
  }

  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }

  .\!py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5) !important;
  }

  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .\!ps-8 {
    padding-inline-start: calc(var(--spacing) * 8) !important;
  }

  .ps-0 {
    padding-inline-start: calc(var(--spacing) * 0);
  }

  .ps-1 {
    padding-inline-start: calc(var(--spacing) * 1);
  }

  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }

  .ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
  }

  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }

  .ps-6 {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .ps-9 {
    padding-inline-start: calc(var(--spacing) * 9);
  }

  .ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
  }

  .ps-16 {
    padding-inline-start: calc(var(--spacing) * 16);
  }

  .pe-1 {
    padding-inline-end: calc(var(--spacing) * 1);
  }

  .pe-3 {
    padding-inline-end: calc(var(--spacing) * 3);
  }

  .pe-8 {
    padding-inline-end: calc(var(--spacing) * 8);
  }

  .pe-12 {
    padding-inline-end: calc(var(--spacing) * 12);
  }

  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }

  .pe-48 {
    padding-inline-end: calc(var(--spacing) * 48);
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-28 {
    padding-top: calc(var(--spacing) * 28);
  }

  .pt-\[14px\] {
    padding-top: 14px;
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }

  .pb-\[5px\] {
    padding-bottom: 5px;
  }

  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .text-justify {
    text-align: justify;
  }

  .text-start {
    text-align: start;
  }

  .align-\[-0\.125em\] {
    vertical-align: -.125em;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-bottom {
    vertical-align: bottom;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-heading {
    font-family: var(--font-heading);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .\!text-xs {
    font-size: var(--text-xs) !important;
    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .text-\[13\.5px\] {
    font-size: 13.5px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.4em\] {
    --tw-tracking: .4em;
    letter-spacing: .4em;
  }

  .tracking-\[0\.25em\] {
    --tw-tracking: .25em;
    letter-spacing: .25em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .\!whitespace-normal {
    white-space: normal !important;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-accent-600 {
    color: var(--color-accent-600);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-brand-200 {
    color: var(--color-brand-200);
  }

  .text-brand-400 {
    color: var(--color-brand-400);
  }

  .text-brand-600 {
    color: var(--color-brand-600);
  }

  .text-brand-700 {
    color: var(--color-brand-700);
  }

  .text-brand-800, .text-brand-800\/80 {
    color: var(--color-brand-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-brand-800\/80 {
      color: color-mix(in oklab, var(--color-brand-800) 80%, transparent);
    }
  }

  .text-brand-900 {
    color: var(--color-brand-900);
  }

  .text-brand-950 {
    color: var(--color-brand-950);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-fg {
    color: var(--color-fg);
  }

  .text-fg-accent {
    color: var(--color-fg-accent);
  }

  .text-fg-critical {
    color: var(--color-fg-critical);
  }

  .text-fg-faint {
    color: var(--color-fg-faint);
  }

  .text-fg-info {
    color: var(--color-fg-info);
  }

  .text-fg-muted {
    color: var(--color-fg-muted);
  }

  .text-fg-on-critical {
    color: var(--color-fg-on-critical);
  }

  .text-fg-on-primary {
    color: var(--color-fg-on-primary);
  }

  .text-fg-on-success {
    color: var(--color-fg-on-success);
  }

  .text-fg-primary {
    color: var(--color-fg-primary);
  }

  .text-fg-success {
    color: var(--color-fg-success);
  }

  .text-fg-warning {
    color: var(--color-fg-warning);
  }

  .text-gray-200 {
    color: var(--color-gray-200);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-inherit {
    color: inherit;
  }

  .text-line {
    color: var(--color-line);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-sky-700 {
    color: var(--color-sky-700);
  }

  .text-white {
    color: var(--color-white);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .not-italic {
    font-style: normal;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .accent-brand-600 {
    accent-color: var(--color-brand-600);
  }

  .accent-brand-700 {
    accent-color: var(--color-brand-700);
  }

  .accent-fg-primary {
    accent-color: var(--color-fg-primary);
  }

  .accent-gray-400 {
    accent-color: var(--color-gray-400);
  }

  .accent-red-600 {
    accent-color: var(--color-red-600);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg, .shadow-md {
    --tw-shadow: var(--shadow-overlay);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: var(--shadow-raised);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: var(--shadow-overlay);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[3px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-amber-500\/30 {
    --tw-shadow-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-500\/30 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-brand-700\/10 {
    --tw-shadow-color: #225aea1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-brand-700\/10 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-brand-700) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-600\/30 {
    --tw-shadow-color: var(--color-green-600);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-600\/30 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-600) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[var\(--color-border-primary\)\] {
    --tw-ring-color: var(--color-border-primary);
  }

  .ring-brand-100 {
    --tw-ring-color: var(--color-brand-100);
  }

  .ring-gray-200 {
    --tw-ring-color: var(--color-gray-200);
  }

  .ring-line-critical {
    --tw-ring-color: var(--color-line-critical);
  }

  .ring-line-primary {
    --tw-ring-color: var(--color-line-primary);
  }

  .ring-surface-raised {
    --tw-ring-color: var(--color-surface-raised);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-2 {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .outline-offset-2 {
    outline-offset: 2px;
  }

  .outline-offset-4 {
    outline-offset: 4px;
  }

  .outline-line-primary {
    outline-color: var(--color-line-primary);
  }

  .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, );
  }

  .invert {
    --tw-invert: invert(100%);
    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 {
    --tw-backdrop-blur: blur(8px);
    -webkit-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-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-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-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-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(var(--blur-sm));
    -webkit-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-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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\,translate\] {
    transition-property: border-color, box-shadow, translate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-dashed {
    --tw-outline-style: dashed;
    outline-style: dashed;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[--dst-page-bg\:var\(--color-background-sunken\)\] {
    --dst-page-bg: var(--color-background-sunken);
  }

  .\[--gantt-row\:1\.75rem\] {
    --gantt-row: 1.75rem;
  }

  .\[-webkit-print-color-adjust\:exact\] {
    -webkit-print-color-adjust: exact;
  }

  .\[closure\:nudge\] {
    closure: nudge;
  }

  .\[email-verify\:noop\] {
    email-verify: noop;
  }

  .\[email\:cloudflare\] {
    email: cloudflare;
  }

  .\[email\:dev-sink\] {
    email: dev-sink;
  }

  .\[email\:disabled\] {
    email: disabled;
  }

  .\[email\:noop\] {
    email: noop;
  }

  .\[email\:resend\] {
    email: resend;
  }

  .\[image-rendering\:pixelated\] {
    image-rendering: pixelated;
  }

  .\[owner-invite\:noop\] {
    owner-invite: noop;
  }

  .\[password-reset\:noop\] {
    password-reset: noop;
  }

  .\[print-color-adjust\:exact\] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .\[referral-invite\:noop\] {
    referral-invite: noop;
  }

  @media (hover: hover) {
    .group-hover\:text-fg-primary:is(:where(.group):hover *) {
      color: var(--color-fg-primary);
    }
  }

  .peer-checked\:translate-x-5:is(:where(.peer):checked ~ *) {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .peer-checked\:border-line-primary:is(:where(.peer):checked ~ *) {
    border-color: var(--color-line-primary);
  }

  .peer-checked\:bg-surface-primary:is(:where(.peer):checked ~ *) {
    background-color: var(--color-surface-primary);
  }

  .peer-focus-visible\:outline:is(:where(.peer):focus-visible ~ *) {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .peer-focus-visible\:outline-2:is(:where(.peer):focus-visible ~ *) {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .peer-focus-visible\:outline-offset-2:is(:where(.peer):focus-visible ~ *) {
    outline-offset: 2px;
  }

  .peer-focus-visible\:outline-fg-accent:is(:where(.peer):focus-visible ~ *) {
    outline-color: var(--color-fg-accent);
  }

  .peer-focus-visible\:outline-line-primary:is(:where(.peer):focus-visible ~ *) {
    outline-color: var(--color-line-primary);
  }

  .marker\:font-bold ::marker {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .marker\:font-bold::marker {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .marker\:font-bold ::-webkit-details-marker {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .marker\:font-bold::-webkit-details-marker {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .file\:me-3::file-selector-button {
    margin-inline-end: calc(var(--spacing) * 3);
  }

  .file\:rounded-lg::file-selector-button {
    border-radius: var(--radius-lg);
  }

  .file\:rounded-md::file-selector-button {
    border-radius: var(--radius-md);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-brand-700::file-selector-button {
    background-color: var(--color-brand-700);
  }

  .file\:bg-surface-sunken::file-selector-button {
    background-color: var(--color-surface-sunken);
  }

  .file\:px-3::file-selector-button {
    padding-inline: calc(var(--spacing) * 3);
  }

  .file\:py-1\.5::file-selector-button {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-semibold::file-selector-button {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .file\:text-white::file-selector-button {
    color: var(--color-white);
  }

  .placeholder\:text-fg-faint::placeholder {
    color: var(--color-fg-faint);
  }

  .after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none;
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:inset-0:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * 0);
  }

  .after\:rounded-\[inherit\]:after {
    content: var(--tw-content);
    border-radius: inherit;
  }

  .after\:rounded-lg:after {
    content: var(--tw-content);
    border-radius: var(--radius-lg);
  }

  .after\:bg-current:after {
    content: var(--tw-content);
    background-color: currentColor;
  }

  .after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0;
  }

  .after\:transition-opacity:after {
    content: var(--tw-content);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .focus-within\:border-line-primary:focus-within {
    border-color: var(--color-line-primary);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-line-primary:focus-within {
    --tw-ring-color: var(--color-line-primary);
  }

  @media (hover: hover) {
    .hover\:border-brand-500:hover {
      border-color: var(--color-brand-500);
    }

    .hover\:border-brand-700:hover {
      border-color: var(--color-brand-700);
    }

    .hover\:border-line:hover {
      border-color: var(--color-line);
    }

    .hover\:border-line-primary:hover {
      border-color: var(--color-line-primary);
    }

    .hover\:bg-amber-600:hover {
      background-color: var(--color-amber-600);
    }

    .hover\:bg-brand-50:hover {
      background-color: var(--color-brand-50);
    }

    .hover\:bg-brand-800:hover {
      background-color: var(--color-brand-800);
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-green-200:hover {
      background-color: var(--color-green-200);
    }

    .hover\:bg-red-200:hover {
      background-color: var(--color-red-200);
    }

    .hover\:bg-surface-raised-hover:hover {
      background-color: var(--color-surface-raised-hover);
    }

    .hover\:bg-surface-sunken:hover {
      background-color: var(--color-surface-sunken);
    }

    .hover\:bg-surface-sunken-strong:hover {
      background-color: var(--color-surface-sunken-strong);
    }

    .hover\:text-brand-700:hover {
      color: var(--color-brand-700);
    }

    .hover\:text-brand-800:hover {
      color: var(--color-brand-800);
    }

    .hover\:text-fg:hover {
      color: var(--color-fg);
    }

    .hover\:text-fg-critical:hover {
      color: var(--color-fg-critical);
    }

    .hover\:text-fg-primary:hover {
      color: var(--color-fg-primary);
    }

    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:shadow-md:hover {
      --tw-shadow: var(--shadow-overlay);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:after\:opacity-10:hover:after {
      content: var(--tw-content);
      opacity: .1;
    }
  }

  .focus\:border-line-primary:focus {
    border-color: var(--color-line-primary);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-line:focus-visible {
    border-color: var(--color-line);
  }

  .focus-visible\:border-line-primary:focus-visible {
    border-color: var(--color-line-primary);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-line-primary:focus-visible {
    --tw-ring-color: var(--color-line-primary);
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-1:focus-visible {
    outline-offset: 1px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-brand-700:focus-visible {
    outline-color: var(--color-brand-700);
  }

  .focus-visible\:outline-line-primary:focus-visible {
    outline-color: var(--color-line-primary);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:after\:opacity-15:active:after {
    content: var(--tw-content);
    opacity: .15;
  }

  .active\:after\:opacity-20:active:after {
    content: var(--tw-content);
    opacity: .2;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:opacity-90:disabled {
    opacity: .9;
  }

  .has-\[\:checked\]\:border-line-primary:has(:checked) {
    border-color: var(--color-line-primary);
  }

  .has-\[\:checked\]\:bg-surface-primary-subtle:has(:checked) {
    background-color: var(--color-surface-primary-subtle);
  }

  .has-\[\:focus-visible\]\:ring-2:has(:focus-visible) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-\[\:focus-visible\]\:ring-line-primary:has(:focus-visible) {
    --tw-ring-color: var(--color-line-primary);
  }

  .has-\[\:focus-visible\]\:outline-2:has(:focus-visible) {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .has-\[\:focus-visible\]\:outline-offset-2:has(:focus-visible) {
    outline-offset: 2px;
  }

  .has-\[\:focus-visible\]\:outline-line-primary:has(:focus-visible) {
    outline-color: var(--color-line-primary);
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-pulse {
      animation: var(--animate-pulse);
    }

    @media (hover: hover) {
      .motion-safe\:hover\:-translate-y-0\.5:hover {
        --tw-translate-y: calc(var(--spacing) * -.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }

    .motion-safe\:active\:translate-y-0:active {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:order-first {
      order: -9999;
    }

    .max-sm\:ms-auto {
      margin-inline-start: auto;
    }

    .max-sm\:block {
      display: block;
    }

    .max-sm\:flex {
      display: flex;
    }

    .max-sm\:hidden {
      display: none;
    }

    .max-sm\:w-full {
      width: 100%;
    }

    .max-sm\:max-w-full {
      max-width: 100%;
    }

    .max-sm\:min-w-0 {
      min-width: calc(var(--spacing) * 0);
    }

    .max-sm\:flex-1 {
      flex: 1;
    }

    .max-sm\:basis-full {
      flex-basis: 100%;
    }

    .max-sm\:flex-wrap {
      flex-wrap: wrap;
    }

    .max-sm\:items-center {
      align-items: center;
    }

    .max-sm\:gap-x-2 {
      column-gap: calc(var(--spacing) * 2);
    }

    .max-sm\:truncate {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .max-sm\:p-1 {
      padding: calc(var(--spacing) * 1);
    }

    .max-sm\:py-2 {
      padding-block: calc(var(--spacing) * 2);
    }

    .max-sm\:font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-block {
      display: inline-block;
    }

    .sm\:size-16 {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }

    .sm\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .sm\:w-\[60\%\] {
      width: 60%;
    }

    .sm\:max-w-none {
      max-width: none;
    }

    .sm\:\!grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .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\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[1fr_1\.4fr_1\.2fr_2fr_1fr_auto_auto\] {
      grid-template-columns: 1fr 1.4fr 1.2fr 2fr 1fr auto auto;
    }

    .sm\:grid-cols-\[1fr_7rem_10rem_auto\] {
      grid-template-columns: 1fr 7rem 10rem auto;
    }

    .sm\:grid-cols-\[1fr_8rem\] {
      grid-template-columns: 1fr 8rem;
    }

    .sm\:grid-cols-\[2fr_1fr_1fr_1fr_1fr_auto\] {
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
    }

    .sm\:grid-cols-\[2fr_5rem_8rem_7rem_7rem_auto\] {
      grid-template-columns: 2fr 5rem 8rem 7rem 7rem auto;
    }

    .sm\:grid-cols-\[6rem_1fr_9rem_8rem_7rem\] {
      grid-template-columns: 6rem 1fr 9rem 8rem 7rem;
    }

    .sm\:grid-cols-\[260px_minmax\(0\,1fr\)\] {
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_9rem\] {
      grid-template-columns: minmax(0, 1fr) 9rem;
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_11rem\] {
      grid-template-columns: minmax(0, 1fr) 11rem;
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_11rem_9\.5rem_auto\] {
      grid-template-columns: minmax(0, 1fr) 11rem 9.5rem auto;
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_160px\] {
      grid-template-columns: minmax(0, 1fr) 160px;
    }

    .sm\:grid-cols-\[minmax\(0\,11rem\)_minmax\(0\,1fr\)_minmax\(0\,7rem\)\] {
      grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 7rem);
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:items-start {
      align-items: flex-start;
    }

    .sm\:items-stretch {
      align-items: stretch;
    }

    .sm\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .md\:col-span-12 {
      grid-column: span 12 / span 12;
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:grid {
      display: grid;
    }

    .md\:hidden {
      display: none;
    }

    .md\:inline-flex {
      display: inline-flex;
    }

    .md\:h-\[calc\(100dvh-12rem\)\] {
      height: calc(100dvh - 12rem);
    }

    .md\:min-h-\[34rem\] {
      min-height: 34rem;
    }

    .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\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .md\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .md\:grid-cols-\[2fr_1fr_1fr_auto_auto\] {
      grid-template-columns: 2fr 1fr 1fr auto auto;
    }

    .md\:grid-cols-\[2fr_1fr_auto\] {
      grid-template-columns: 2fr 1fr auto;
    }

    .md\:grid-cols-\[2fr_2fr_1fr_1fr_auto\] {
      grid-template-columns: 2fr 2fr 1fr 1fr auto;
    }

    .md\:grid-cols-\[2fr_auto_1fr_auto_auto\] {
      grid-template-columns: 2fr auto 1fr auto auto;
    }

    .md\:grid-cols-\[minmax\(0\,1\.3fr\)_minmax\(0\,1fr\)_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:border-0 {
      border-style: var(--tw-border-style);
      border-width: 0;
    }

    .md\:p-0 {
      padding: calc(var(--spacing) * 0);
    }

    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .md\:text-end {
      text-align: end;
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }

    .lg\:top-4 {
      top: calc(var(--spacing) * 4);
    }

    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:max-h-none {
      max-height: none;
    }

    .lg\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .lg\:\!grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .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\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1fr_320px\] {
      grid-template-columns: 1fr 320px;
    }

    .lg\:grid-cols-\[16rem_1fr\] {
      grid-template-columns: 16rem 1fr;
    }

    .lg\:grid-cols-\[320px_minmax\(0\,1fr\)\] {
      grid-template-columns: 320px minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1\.45fr\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1\.65fr\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_22rem\] {
      grid-template-columns: minmax(0, 1fr) 22rem;
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] {
      grid-template-columns: minmax(0, 1fr) 320px;
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.15fr\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,3fr\)\] {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .lg\:grid-cols-\[minmax\(0\,320px\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(10rem\,1\.2fr\)_3fr_8rem_auto\] {
      grid-template-columns: minmax(10rem, 1.2fr) 3fr 8rem auto;
    }

    .lg\:self-start {
      align-self: flex-start;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .\32 xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @container (min-width: 48rem) {
    .\@3xl\:col-start-1 {
      grid-column-start: 1;
    }

    .\@3xl\:col-start-2 {
      grid-column-start: 2;
    }

    .\@3xl\:row-span-3 {
      grid-row: span 3 / span 3;
    }

    .\@3xl\:row-start-1 {
      grid-row-start: 1;
    }

    .\@3xl\:row-start-2 {
      grid-row-start: 2;
    }

    .\@3xl\:row-start-3 {
      grid-row-start: 3;
    }

    .\@3xl\:block {
      display: block;
    }

    .\@3xl\:hidden {
      display: none;
    }

    .\@3xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(320px\,360px\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    }
  }

  @container (min-width: 72rem) {
    .\@6xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\@6xl\:col-start-1 {
      grid-column-start: 1;
    }

    .\@6xl\:col-start-2 {
      grid-column-start: 2;
    }

    .\@6xl\:col-start-3 {
      grid-column-start: 3;
    }

    .\@6xl\:row-span-2 {
      grid-row: span 2 / span 2;
    }

    .\@6xl\:row-start-1 {
      grid-row-start: 1;
    }

    .\@6xl\:row-start-2 {
      grid-row-start: 2;
    }

    .\@6xl\:row-start-3 {
      grid-row-start: 3;
    }

    .\@6xl\:grid-cols-\[minmax\(240px\,280px\)_minmax\(0\,1fr\)_minmax\(320px\,360px\)\] {
      grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(320px, 360px);
    }
  }

  .ltr\:rotate-180:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
    rotate: 180deg;
  }

  .rtl\:-scale-x-100:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rtl\:-rotate-90:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: -90deg;
  }

  .rtl\:rotate-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: 0deg;
  }

  .rtl\:rotate-90:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: 90deg;
  }

  .rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: 180deg;
  }

  .rtl\:peer-checked\:-translate-x-5:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *):is(:where(.peer):checked ~ *) {
    --tw-translate-x: calc(var(--spacing) * -5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .dark\:border-amber-700:where(.dark, .dark *) {
    border-color: var(--color-amber-700);
  }

  .dark\:border-amber-800:where(.dark, .dark *) {
    border-color: var(--color-amber-800);
  }

  .dark\:border-brand-700:where(.dark, .dark *) {
    border-color: var(--color-brand-700);
  }

  .dark\:border-emerald-900:where(.dark, .dark *) {
    border-color: var(--color-emerald-900);
  }

  .dark\:border-gray-600:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }

  .dark\:border-gray-700:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }

  .dark\:border-gray-800:where(.dark, .dark *) {
    border-color: var(--color-gray-800);
  }

  .dark\:border-red-900:where(.dark, .dark *) {
    border-color: var(--color-red-900);
  }

  .dark\:bg-amber-900\/10:where(.dark, .dark *) {
    background-color: var(--color-amber-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/10:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 10%, transparent);
    }
  }

  .dark\:bg-amber-900\/15:where(.dark, .dark *) {
    background-color: var(--color-amber-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/15:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 15%, transparent);
    }
  }

  .dark\:bg-amber-900\/30:where(.dark, .dark *) {
    background-color: var(--color-amber-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent);
    }
  }

  .dark\:bg-amber-950\/30:where(.dark, .dark *) {
    background-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
    }
  }

  .dark\:bg-amber-950\/40:where(.dark, .dark *) {
    background-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/40:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
    }
  }

  .dark\:bg-blue-900\/20:where(.dark, .dark *) {
    background-color: var(--color-blue-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
    }
  }

  .dark\:bg-blue-900\/30:where(.dark, .dark *) {
    background-color: var(--color-blue-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
    }
  }

  .dark\:bg-blue-950\/40:where(.dark, .dark *) {
    background-color: var(--color-blue-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-950\/40:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);
    }
  }

  .dark\:bg-brand-900\/20:where(.dark, .dark *) {
    background-color: var(--color-brand-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-brand-900\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-brand-900) 20%, transparent);
    }
  }

  .dark\:bg-emerald-900\/15:where(.dark, .dark *) {
    background-color: var(--color-emerald-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-900\/15:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 15%, transparent);
    }
  }

  .dark\:bg-emerald-900\/20:where(.dark, .dark *) {
    background-color: var(--color-emerald-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-900\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 20%, transparent);
    }
  }

  .dark\:bg-emerald-900\/30:where(.dark, .dark *) {
    background-color: var(--color-emerald-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-900\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
    }
  }

  .dark\:bg-emerald-950\/40:where(.dark, .dark *) {
    background-color: var(--color-emerald-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-950\/40:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
    }
  }

  .dark\:bg-gray-700:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }

  .dark\:bg-gray-800:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }

  .dark\:bg-gray-900:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }

  .dark\:bg-gray-950:where(.dark, .dark *), .dark\:bg-gray-950\/90:where(.dark, .dark *) {
    background-color: var(--color-gray-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-gray-950\/90:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-gray-950) 90%, transparent);
    }
  }

  .dark\:bg-green-900\/20:where(.dark, .dark *) {
    background-color: var(--color-green-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-900\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
    }
  }

  .dark\:bg-green-900\/30:where(.dark, .dark *) {
    background-color: var(--color-green-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-900\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }

  .dark\:bg-red-900\/10:where(.dark, .dark *) {
    background-color: var(--color-red-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/10:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 10%, transparent);
    }
  }

  .dark\:bg-red-900\/15:where(.dark, .dark *) {
    background-color: var(--color-red-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/15:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 15%, transparent);
    }
  }

  .dark\:bg-red-900\/20:where(.dark, .dark *) {
    background-color: var(--color-red-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
    }
  }

  .dark\:bg-red-900\/30:where(.dark, .dark *) {
    background-color: var(--color-red-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }

  .dark\:bg-red-950\/40:where(.dark, .dark *) {
    background-color: var(--color-red-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-950\/40:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
    }
  }

  .dark\:bg-sky-950\/40:where(.dark, .dark *) {
    background-color: #052f4a66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-sky-950\/40:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--color-sky-950) 40%, transparent);
    }
  }

  .dark\:text-accent-400:where(.dark, .dark *) {
    color: var(--color-accent-400);
  }

  .dark\:text-amber-200:where(.dark, .dark *) {
    color: var(--color-amber-200);
  }

  .dark\:text-amber-300:where(.dark, .dark *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-400:where(.dark, .dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-blue-200:where(.dark, .dark *) {
    color: var(--color-blue-200);
  }

  .dark\:text-blue-300:where(.dark, .dark *) {
    color: var(--color-blue-300);
  }

  .dark\:text-brand-300:where(.dark, .dark *) {
    color: var(--color-brand-300);
  }

  .dark\:text-brand-400:where(.dark, .dark *) {
    color: var(--color-brand-400);
  }

  .dark\:text-emerald-200:where(.dark, .dark *) {
    color: var(--color-emerald-200);
  }

  .dark\:text-emerald-300:where(.dark, .dark *) {
    color: var(--color-emerald-300);
  }

  .dark\:text-emerald-400:where(.dark, .dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-gray-200:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }

  .dark\:text-gray-300:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }

  .dark\:text-gray-400:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }

  .dark\:text-green-300:where(.dark, .dark *) {
    color: var(--color-green-300);
  }

  .dark\:text-green-400:where(.dark, .dark *) {
    color: var(--color-green-400);
  }

  .dark\:text-red-200:where(.dark, .dark *) {
    color: var(--color-red-200);
  }

  .dark\:text-red-300:where(.dark, .dark *) {
    color: var(--color-red-300);
  }

  .dark\:text-red-400:where(.dark, .dark *) {
    color: var(--color-red-400);
  }

  .dark\:text-sky-300:where(.dark, .dark *) {
    color: var(--color-sky-300);
  }

  .dark\:text-white:where(.dark, .dark *) {
    color: var(--color-white);
  }

  @media (hover: hover) {
    .dark\:hover\:bg-brand-900\/20:where(.dark, .dark *):hover {
      background-color: var(--color-brand-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-brand-900\/20:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--color-brand-900) 20%, transparent);
      }
    }

    .dark\:hover\:bg-gray-700:where(.dark, .dark *):hover {
      background-color: var(--color-gray-700);
    }

    .dark\:hover\:bg-gray-800:where(.dark, .dark *):hover {
      background-color: var(--color-gray-800);
    }

    .dark\:hover\:text-brand-400:where(.dark, .dark *):hover {
      color: var(--color-brand-400);
    }
  }

  @media print {
    .print\:hidden {
      display: none;
    }

    .print\:bg-white {
      background-color: var(--color-white);
    }

    .print\:p-0 {
      padding: calc(var(--spacing) * 0);
    }

    .print\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }

    .print\:shadow-none {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (pointer: coarse) {
    .pointer-coarse\:inset-y-2 {
      inset-block: calc(var(--spacing) * 2);
    }

    .pointer-coarse\:h-11 {
      height: calc(var(--spacing) * 11);
    }

    .pointer-coarse\:w-11 {
      width: calc(var(--spacing) * 11);
    }

    .pointer-coarse\:\[--gantt-row\:2\.75rem\] {
      --gantt-row: 2.75rem;
    }
  }

  .\[\&_\.ant-card-body\]\:\!p-4 .ant-card-body {
    padding: calc(var(--spacing) * 4) !important;
  }

  @media (min-width: 40rem) {
    .sm\:\[\&_\.ant-card-body\]\:\!p-6 .ant-card-body {
      padding: calc(var(--spacing) * 6) !important;
    }
  }

  .\[\&_\.ds-seg-btn\]\:min-h-11 .ds-seg-btn {
    min-height: calc(var(--spacing) * 11);
  }

  .\[\&_a\]\:text-fg-accent a {
    color: var(--color-fg-accent);
  }

  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }

  .\[\&_blockquote\]\:border-s-4 blockquote {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 4px;
  }

  .\[\&_blockquote\]\:border-line blockquote {
    border-color: var(--color-line);
  }

  .\[\&_blockquote\]\:ps-3 blockquote {
    padding-inline-start: calc(var(--spacing) * 3);
  }

  .\[\&_blockquote\]\:text-fg-muted blockquote {
    color: var(--color-fg-muted);
  }

  .\[\&_code\]\:rounded code {
    border-radius: .25rem;
  }

  .\[\&_code\]\:bg-surface-sunken code {
    background-color: var(--color-surface-sunken);
  }

  .\[\&_code\]\:px-1 code {
    padding-inline: calc(var(--spacing) * 1);
  }

  .\[\&_h1\]\:text-lg h1 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .\[\&_h1\]\:font-bold h1 {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .\[\&_h2\]\:text-base h2 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .\[\&_h2\]\:font-bold h2 {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .\[\&_h3\]\:font-semibold h3 {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .\[\&_img\]\:max-w-full img {
    max-width: 100%;
  }

  .\[\&_ol\]\:my-2 ol {
    margin-block: calc(var(--spacing) * 2);
  }

  .\[\&_ol\]\:list-decimal ol {
    list-style-type: decimal;
  }

  .\[\&_ol\]\:ps-6 ol {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .\[\&_p\]\:my-2 p {
    margin-block: calc(var(--spacing) * 2);
  }

  .\[\&_pre\]\:overflow-auto pre {
    overflow: auto;
  }

  .\[\&_pre\]\:rounded-lg pre {
    border-radius: var(--radius-lg);
  }

  .\[\&_pre\]\:bg-surface-sunken pre {
    background-color: var(--color-surface-sunken);
  }

  .\[\&_pre\]\:p-3 pre {
    padding: calc(var(--spacing) * 3);
  }

  .\[\&_table\]\:my-2 table {
    margin-block: calc(var(--spacing) * 2);
  }

  .\[\&_table\]\:w-full table {
    width: 100%;
  }

  .\[\&_td\]\:border td {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_td\]\:border-line td {
    border-color: var(--color-line);
  }

  .\[\&_td\]\:px-2 td {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_td\]\:py-1 td {
    padding-block: calc(var(--spacing) * 1);
  }

  .\[\&_th\]\:border th {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_th\]\:border-line th {
    border-color: var(--color-line);
  }

  .\[\&_th\]\:bg-surface-sunken th {
    background-color: var(--color-surface-sunken);
  }

  .\[\&_th\]\:px-2 th {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_th\]\:py-1 th {
    padding-block: calc(var(--spacing) * 1);
  }

  .\[\&_th\]\:text-start th {
    text-align: start;
  }

  .\[\&_ul\]\:my-2 ul {
    margin-block: calc(var(--spacing) * 2);
  }

  .\[\&_ul\]\:list-disc ul {
    list-style-type: disc;
  }

  .\[\&_ul\]\:ps-6 ul {
    padding-inline-start: calc(var(--spacing) * 6);
  }

  .\[\&\>button\]\:min-h-11 > button {
    min-height: calc(var(--spacing) * 11);
  }

  .\[\&\>div\]\:max-w-full > div {
    max-width: 100%;
  }

  .\[\&\>div\]\:shadow-sm > div {
    --tw-shadow: var(--shadow-raised);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

:root {
  --ramp-neutral-0: oklch(99.11% 0 0);
  --ramp-neutral-50: oklch(96.42% .0041 271.369);
  --ramp-neutral-100: oklch(92.5% .0042 271.367);
  --ramp-neutral-200: oklch(86.96% .0059 264.53);
  --ramp-neutral-300: oklch(77.93% .0074 268.532);
  --ramp-neutral-400: oklch(67.96% .0077 268.518);
  --ramp-neutral-500: oklch(57.98% .0094 271.252);
  --ramp-neutral-600: oklch(48.1% .0088 260.728);
  --ramp-neutral-700: oklch(39% .0072 264.484);
  --ramp-neutral-800: oklch(30.97% .0073 274.737);
  --ramp-neutral-900: oklch(23.95% .0059 271.165);
  --ramp-neutral-1000: oklch(19.99% .0043 264.472);
  --ramp-indigo-50: oklch(96.55% .0149 260.73);
  --ramp-indigo-100: oklch(92.56% .0326 262.695);
  --ramp-indigo-200: oklch(87.12% .0597 264.197);
  --ramp-indigo-300: oklch(78.09% .1042 264.194);
  --ramp-indigo-400: oklch(68.09% .1591 264.302);
  --ramp-indigo-500: oklch(58.08% .2039 264.226);
  --ramp-indigo-600: oklch(48.04% .1721 264.335);
  --ramp-indigo-700: oklch(39% .1193 264.627);
  --ramp-indigo-800: oklch(31.1% .0704 264.118);
  --ramp-indigo-900: oklch(24.06% .0412 263.361);
  --ramp-orange-50: oklch(96.4% .0186 51.9761);
  --ramp-orange-100: oklch(92.52% .0385 53.3111);
  --ramp-orange-200: oklch(86.99% .0574 54.8241);
  --ramp-orange-300: oklch(78.06% .0953 53.7203);
  --ramp-orange-400: oklch(67.91% .1317 53.4494);
  --ramp-orange-500: oklch(57.94% .1379 53.5848);
  --ramp-orange-600: oklch(48.02% .1146 53.2782);
  --ramp-orange-700: oklch(38.94% .082 53.83);
  --ramp-orange-800: oklch(31.03% .0499 53.5484);
  --ramp-orange-900: oklch(24.11% .0285 56.447);
  --ramp-green-50: oklch(96.54% .0239 163.152);
  --ramp-green-100: oklch(92.62% .0332 162.26);
  --ramp-green-200: oklch(87.01% .0493 162.924);
  --ramp-green-300: oklch(77.94% .0817 162.721);
  --ramp-green-400: oklch(67.96% .1143 162.48);
  --ramp-green-500: oklch(58.07% .1198 162.52);
  --ramp-green-600: oklch(47.88% .0976 162.916);
  --ramp-green-700: oklch(39.07% .0721 161.841);
  --ramp-green-800: oklch(30.95% .0427 163.169);
  --ramp-green-900: oklch(23.99% .0246 163.698);
  --ramp-amber-50: oklch(96.46% .0233 69.6041);
  --ramp-amber-100: oklch(92.5% .0331 70.3289);
  --ramp-amber-200: oklch(86.96% .0492 69.1118);
  --ramp-amber-300: oklch(78.12% .0827 70.3607);
  --ramp-amber-400: oklch(68.03% .1138 69.969);
  --ramp-amber-500: oklch(57.98% .1186 70.3141);
  --ramp-amber-600: oklch(47.91% .0983 70.1715);
  --ramp-amber-700: oklch(39.1% .071 70.8166);
  --ramp-amber-800: oklch(30.88% .0427 69.4026);
  --ramp-amber-900: oklch(23.94% .025 68.8431);
  --ramp-red-50: oklch(96.56% .0154 27.2805);
  --ramp-red-100: oklch(92.51% .0349 26.5336);
  --ramp-red-200: oklch(86.98% .066 24.2769);
  --ramp-red-300: oklch(78.1% .1216 25.7141);
  --ramp-red-400: oklch(68.11% .1953 25.524);
  --ramp-red-500: oklch(57.96% .2101 25.4591);
  --ramp-red-600: oklch(48.03% .1763 25.3784);
  --ramp-red-700: oklch(38.93% .1222 25.4144);
  --ramp-red-800: oklch(30.95% .0732 25.8195);
  --ramp-red-900: oklch(23.95% .0409 25.3955);
  --ramp-teal-50: oklch(96.46% .0157 177.085);
  --ramp-teal-100: oklch(92.56% .0241 173.809);
  --ramp-teal-200: oklch(87% .0341 175.468);
  --ramp-teal-300: oklch(78.02% .0576 174.662);
  --ramp-teal-400: oklch(67.87% .0785 174.926);
  --ramp-teal-500: oklch(58.04% .0859 174.525);
  --ramp-teal-600: oklch(48.06% .072 174.502);
  --ramp-teal-700: oklch(39.04% .0503 173.981);
  --ramp-teal-800: oklch(30.9% .0291 174.423);
  --ramp-teal-900: oklch(24.03% .0166 176.219);
  --ramp-purple-50: oklch(96.38% .0196 305.268);
  --ramp-purple-100: oklch(92.61% .0425 305.13);
  --ramp-purple-200: oklch(86.9% .0761 304.598);
  --ramp-purple-300: oklch(78.01% .1319 304.976);
  --ramp-purple-400: oklch(68.1% .1929 305.102);
  --ramp-purple-500: oklch(58.03% .2074 305.077);
  --ramp-purple-600: oklch(48.01% .1734 304.899);
  --ramp-purple-700: oklch(39.03% .1203 304.479);
  --ramp-purple-800: oklch(30.94% .0745 304.961);
  --ramp-purple-900: oklch(24.04% .0414 305.38);
  --ramp-cyan-50: oklch(96.58% .0148 196.912);
  --ramp-cyan-100: oklch(92.56% .0212 200.43);
  --ramp-cyan-200: oklch(87.05% .0308 199.149);
  --ramp-cyan-300: oklch(78.03% .0514 199.3);
  --ramp-cyan-400: oklch(68.02% .0717 200.303);
  --ramp-cyan-500: oklch(57.98% .0767 199.834);
  --ramp-cyan-600: oklch(48.12% .0646 199.501);
  --ramp-cyan-700: oklch(38.89% .0443 199.864);
  --ramp-cyan-800: oklch(31.11% .0279 199.478);
  --ramp-cyan-900: oklch(24.16% .0155 196.172);
  --ramp-pink-50: oklch(96.4% .0201 345.681);
  --ramp-pink-100: oklch(92.57% .0451 345.616);
  --ramp-pink-200: oklch(87% .0787 345.11);
  --ramp-pink-300: oklch(78.08% .1286 345.287);
  --ramp-pink-400: oklch(68.11% .1782 345.224);
  --ramp-pink-500: oklch(57.91% .1926 344.769);
  --ramp-pink-600: oklch(47.96% .162 344.96);
  --ramp-pink-700: oklch(38.9% .1113 345.15);
  --ramp-pink-800: oklch(31.07% .0677 345.387);
  --ramp-pink-900: oklch(24.05% .0368 346.1);
  --color-background-base: var(--ramp-neutral-0);
  --color-background-sunken: var(--ramp-neutral-50);
  --color-background-sunkenStrong: var(--ramp-neutral-100);
  --color-background-raised: var(--ramp-neutral-0);
  --color-background-raisedHover: var(--ramp-neutral-50);
  --color-background-overlay: var(--ramp-neutral-0);
  --color-background-primary: var(--color-primary-base);
  --color-background-primaryHover: var(--ramp-indigo-700);
  --color-background-primarySubtle: var(--ramp-indigo-50);
  --color-background-accent: var(--ramp-orange-600);
  --color-background-accentSubtle: var(--ramp-orange-50);
  --color-background-success: var(--ramp-green-600);
  --color-background-successSubtle: var(--ramp-green-50);
  --color-background-warning: var(--ramp-amber-600);
  --color-background-warningSubtle: var(--ramp-amber-50);
  --color-background-critical: var(--ramp-red-600);
  --color-background-criticalSubtle: var(--ramp-red-50);
  --color-background-info: var(--ramp-indigo-600);
  --color-background-infoSubtle: var(--ramp-indigo-50);
  --color-background-decorative-teal: var(--ramp-teal-600);
  --color-background-decorative-tealSubtle: var(--ramp-teal-50);
  --color-background-decorative-purple: var(--ramp-purple-600);
  --color-background-decorative-purpleSubtle: var(--ramp-purple-50);
  --color-background-decorative-cyan: var(--ramp-cyan-600);
  --color-background-decorative-cyanSubtle: var(--ramp-cyan-50);
  --color-background-decorative-pink: var(--ramp-pink-600);
  --color-background-decorative-pinkSubtle: var(--ramp-pink-50);
  --color-background-gradientSoft: var(--ramp-neutral-0);
  --color-border-decorative-teal: var(--ramp-teal-600);
  --color-border-decorative-purple: var(--ramp-purple-600);
  --color-border-decorative-cyan: var(--ramp-cyan-600);
  --color-border-decorative-pink: var(--ramp-pink-600);
  --color-border-neutral: var(--ramp-neutral-100);
  --color-border-strong: var(--ramp-neutral-200);
  --color-border-faint: var(--ramp-neutral-50);
  --color-border-primary: var(--color-primary-base);
  --color-border-accent: var(--ramp-orange-600);
  --color-border-success: var(--ramp-green-600);
  --color-border-warning: var(--ramp-amber-600);
  --color-border-critical: var(--ramp-red-600);
  --color-border-info: var(--ramp-indigo-600);
  --color-primary-base: oklch(52.76% .2249 263.922);
  --color-foreground-onBase: var(--ramp-neutral-900);
  --color-foreground-onBaseMuted: var(--ramp-neutral-600);
  --color-foreground-onBaseFaint: var(--ramp-neutral-500);
  --color-foreground-onRaised: var(--ramp-neutral-900);
  --color-foreground-onSunken: var(--ramp-neutral-900);
  --color-foreground-primary: var(--ramp-indigo-700);
  --color-foreground-accent: var(--ramp-orange-700);
  --color-foreground-success: var(--ramp-green-700);
  --color-foreground-warning: var(--ramp-amber-700);
  --color-foreground-critical: var(--ramp-red-700);
  --color-foreground-info: var(--ramp-indigo-700);
  --color-foreground-decorative-teal: var(--ramp-teal-700);
  --color-foreground-decorative-purple: var(--ramp-purple-700);
  --color-foreground-decorative-cyan: var(--ramp-cyan-700);
  --color-foreground-decorative-pink: var(--ramp-pink-700);
  --color-foreground-onPrimary: var(--ramp-neutral-0);
  --color-foreground-onAccent: var(--ramp-neutral-0);
  --color-foreground-onSuccess: var(--ramp-neutral-0);
  --color-foreground-onWarning: var(--ramp-neutral-0);
  --color-foreground-onCritical: var(--ramp-neutral-0);
  --color-foreground-onInfo: var(--ramp-neutral-0);
  --color-foreground-decorative-onTeal: var(--ramp-neutral-0);
  --color-foreground-decorative-onPurple: var(--ramp-neutral-0);
  --color-foreground-decorative-onCyan: var(--ramp-neutral-0);
  --color-foreground-decorative-onPink: var(--ramp-neutral-0);
  --color-foreground-onPrimarySubtle: var(--ramp-indigo-700);
  --color-foreground-onAccentSubtle: var(--ramp-orange-700);
  --color-foreground-onSuccessSubtle: var(--ramp-green-700);
  --color-foreground-onWarningSubtle: var(--ramp-amber-700);
  --color-foreground-onCriticalSubtle: var(--ramp-red-700);
  --color-foreground-onInfoSubtle: var(--ramp-indigo-700);
  --color-foreground-decorative-onTealSubtle: var(--ramp-teal-700);
  --color-foreground-decorative-onPurpleSubtle: var(--ramp-purple-700);
  --color-foreground-decorative-onCyanSubtle: var(--ramp-cyan-700);
  --color-foreground-decorative-onPinkSubtle: var(--ramp-pink-700);
  --color-foreground-onGradient: var(--ramp-neutral-0);
  --color-foreground-onGradientMuted: var(--ramp-neutral-100);
  --color-interactive-background-hover: oklch(39% .0072 264.484);
  --color-interactive-background-active: oklch(39% .0072 264.484);
  --color-chart-grid: var(--ramp-neutral-100);
  --color-chart-primary: var(--color-primary-base);
  --color-chart-primaryGradientStart: var(--color-primary-base);
  --color-chart-primaryGradientEnd: var(--color-primary-base);
  --gradient-primary: linear-gradient(135deg, var(--color-background-primary), var(--color-background-accent));
  --font-heading-family: var(--typography-font-family-heading);
  --font-heading-weight: var(--typography-weight-700);
  --font-heading-lineheight: 125%;
  --font-body-family: var(--typography-font-family-body);
  --font-body-weight-light: var(--typography-weight-400);
  --font-body-weight-regular: var(--typography-weight-500);
  --font-body-weight-medium: var(--typography-weight-500);
  --font-body-weight-bold: var(--typography-weight-700);
  --font-body-lineheight: 150%;
  --font-action-family: var(--typography-font-family-body);
  --font-action-weight: var(--typography-weight-500);
  --font-action-xs-lineheight: calc(140% / 120%);
  --font-action-sm-lineheight: calc(160% / 140%);
  --font-action-md-lineheight: 125%;
  --font-action-lg-lineheight: calc(240% / 180%);
  --font-field-family: var(--typography-font-family-body);
  --font-field-weight: var(--typography-weight-500);
  --font-field-xs-lineheight: calc(140% / 120%);
  --font-field-sm-lineheight: calc(160% / 140%);
  --font-field-md-lineheight: 125%;
  --font-field-lg-lineheight: calc(240% / 180%);
  --font-heading-xs-size: var(--typography-size-200);
  --font-heading-sm-size: var(--typography-size-225);
  --font-heading-md-size: var(--typography-size-300);
  --font-heading-lg-size: var(--typography-size-350);
  --font-heading-xl-size: var(--typography-size-400);
  --font-heading-2xl-size: var(--typography-size-500);
  --font-heading-3xl-size: var(--typography-size-600);
  --font-heading-4xl-size: var(--typography-size-800);
  --font-body-2xs-size: var(--typography-size-125);
  --font-body-xs-size: var(--typography-size-150);
  --font-body-sm-size: var(--typography-size-175);
  --font-body-md-size: var(--typography-size-200);
  --font-body-lg-size: var(--typography-size-225);
  --font-action-xs-size: var(--typography-size-150);
  --font-field-xs-size: var(--typography-size-150);
  --font-action-sm-size: var(--typography-size-175);
  --font-field-sm-size: var(--typography-size-175);
  --font-action-md-size: var(--typography-size-200);
  --font-field-md-size: var(--typography-size-200);
  --font-action-lg-size: var(--typography-size-225);
  --font-field-lg-size: var(--typography-size-225);
  --space-xs: var(--dimension-50);
  --space-sm: var(--dimension-100);
  --space-md: var(--dimension-150);
  --space-lg: var(--dimension-200);
  --space-xl: var(--dimension-300);
  --space-2xl: var(--dimension-400);
  --space-3xl: var(--dimension-500);
  --space-4xl: var(--dimension-600);
  --space-5xl: var(--dimension-800);
  --space-6xl: var(--dimension-1000);
  --typography-font-family-body: "Inter", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --typography-font-family-heading: "Outfit", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --typography-size-100: 8px;
  --typography-size-125: 10px;
  --typography-size-150: 12px;
  --typography-size-175: 14px;
  --typography-size-200: 16px;
  --typography-size-225: 18px;
  --typography-size-250: 20px;
  --typography-size-300: 24px;
  --typography-size-350: 28px;
  --typography-size-400: 32px;
  --typography-size-500: 40px;
  --typography-size-600: 48px;
  --typography-size-800: 64px;
  --typography-weight-400: 400;
  --typography-weight-500: 500;
  --typography-weight-600: 600;
  --typography-weight-700: 700;
  --dimension-0: 0px;
  --dimension-25: 2px;
  --dimension-50: 4px;
  --dimension-75: 6px;
  --dimension-100: 8px;
  --dimension-125: 10px;
  --dimension-150: 12px;
  --dimension-175: 14px;
  --dimension-200: 16px;
  --dimension-225: 18px;
  --dimension-250: 20px;
  --dimension-300: 24px;
  --dimension-350: 28px;
  --dimension-400: 32px;
  --dimension-500: 40px;
  --dimension-600: 48px;
  --dimension-800: 64px;
  --dimension-1000: 80px;
  --dimension-max: 999px;
  --shape-border-thin: .5px;
  --shape-border-regular: 1px;
  --shape-border-thick: 2px;
  --shape-ringOffset: var(--dimension-25);
  --shape-radius-max: var(--dimension-max);
  --shape-radius-container: var(--dimension-200);
  --shape-radius-action: var(--dimension-125);
  --shape-radius-field: var(--dimension-125);
  --shape-radius-subcontainer: var(--dimension-100);
  --shape-radius-badge: var(--dimension-100);
  --shape-radius-supercontainer: var(--dimension-300);
  --shadow-raised: 0 1px 3px #0f172a0f;
  --shadow-overlay: 0 10px 25px #0f172a1a, 0 4px 10px #0f172a0f;
  --state-opacity-active: .24;
  --state-opacity-disabled: .4;
  --state-opacity-hover: .12;
  --transition-swift-duration: .25s;
  --transition-swift-easing: cubic-bezier(.22, .61, .36, 1);
  --transition-gradual-duration: .5s;
  --transition-gradual-easing: cubic-bezier(.65, .05, .36, 1);
  --transition-theme: background-color var(--transition-gradual-duration) var(--transition-gradual-easing), border-color var(--transition-gradual-duration) var(--transition-gradual-easing), color var(--transition-gradual-duration) var(--transition-gradual-easing), border-radius var(--transition-gradual-duration) var(--transition-gradual-easing), padding var(--transition-gradual-duration) var(--transition-gradual-easing), gap var(--transition-gradual-duration) var(--transition-gradual-easing), box-shadow var(--transition-gradual-duration) var(--transition-gradual-easing);
  --transition-interactive: all var(--transition-swift-duration) var(--transition-swift-easing);
  --transition-chart: stroke var(--transition-gradual-duration) var(--transition-gradual-easing), fill var(--transition-gradual-duration) var(--transition-gradual-easing), opacity var(--transition-gradual-duration) var(--transition-gradual-easing);
  --color-chart-cat-1: var(--color-primary-base);
  --color-chart-cat-2: var(--ramp-amber-500);
  --color-chart-cat-3: var(--ramp-green-600);
  --color-chart-cat-4: var(--ramp-red-500);
  --color-chart-cat-5: var(--ramp-purple-500);
  --color-chart-cat-6: var(--ramp-cyan-500);
  --color-chart-cat-7: var(--ramp-orange-500);
  --color-chart-cat-8: var(--ramp-neutral-500);
  --color-chart-cat-1-soft: var(--ramp-indigo-300);
  --color-chart-cat-2-soft: var(--ramp-amber-300);
  --color-chart-alert: var(--ramp-red-600);
  --color-chart-link: var(--ramp-neutral-600);
}

.dark {
  --color-primary-base: oklch(52.76% .2176 264.489);
  --color-background-base: oklch(22.08% .005 248.053);
  --color-background-sunken: oklch(18.15% .0026 247.971);
  --color-background-sunkenStrong: oklch(12.91% .0026 286.028);
  --color-background-raised: oklch(26.88% .0057 271.2);
  --color-background-raisedHover: oklch(32.95% .0071 274.76);
  --color-background-overlay: oklch(26.88% .0057 271.2);
  --color-background-primaryHover: oklch(72% .1366 264.295);
  --color-background-primarySubtle: oklch(30.08% .0374 262.862);
  --color-background-accent: oklch(63.02% .1507 53.7554);
  --color-background-accentSubtle: oklch(29.91% .033 52.5012);
  --color-background-success: oklch(63.02% .1301 162.291);
  --color-background-successSubtle: oklch(29.82% .0288 162.278);
  --color-background-warning: oklch(62.97% .129 69.8878);
  --color-background-warningSubtle: oklch(29.88% .0283 68.649);
  --color-background-critical: oklch(62.97% .2069 25.4158);
  --color-background-criticalSubtle: oklch(30.12% .0448 26.3987);
  --color-background-info: oklch(62.95% .1759 264.46);
  --color-background-infoSubtle: oklch(30.08% .0374 262.862);
  --color-border-neutral: oklch(32.95% .0071 274.76);
  --color-border-strong: oklch(40.03% .0078 255.533);
  --color-border-faint: oklch(27.04% .0064 274.76);
  --color-border-accent: oklch(63.02% .1507 53.7554);
  --color-border-success: oklch(63.02% .1301 162.291);
  --color-border-warning: oklch(62.97% .129 69.8878);
  --color-border-critical: oklch(62.97% .2069 25.4158);
  --color-border-info: oklch(62.95% .1759 264.46);
  --color-foreground-onBase: oklch(87.96% .0056 274.957);
  --color-foreground-onBaseMuted: oklch(64.91% .0082 260.731);
  --color-foreground-onBaseFaint: oklch(55.92% .0095 271.245);
  --color-foreground-onRaised: oklch(87.96% .0056 274.957);
  --color-foreground-onSunken: oklch(76.98% .0074 268.53);
  --color-foreground-primary: oklch(72% .1366 264.295);
  --color-foreground-accent: oklch(71.99% .146 53.3996);
  --color-foreground-success: oklch(72% .1264 162.617);
  --color-foreground-warning: oklch(71.88% .1254 69.8462);
  --color-foreground-critical: oklch(71.98% .1654 25.0892);
  --color-foreground-info: oklch(72% .1366 264.295);
  --color-foreground-onPrimary: oklch(94.92% .0042 271.368);
  --color-foreground-onAccent: oklch(12.91% .0026 286.028);
  --color-foreground-onSuccess: oklch(12.91% .0026 286.028);
  --color-foreground-onWarning: oklch(12.91% .0026 286.028);
  --color-foreground-onCritical: oklch(12.91% .0026 286.028);
  --color-foreground-onInfo: oklch(12.91% .0026 286.028);
  --color-foreground-onPrimarySubtle: oklch(72% .1366 264.295);
  --color-foreground-onAccentSubtle: oklch(71.99% .146 53.3996);
  --color-foreground-onSuccessSubtle: oklch(72% .1264 162.617);
  --color-foreground-onWarningSubtle: oklch(71.88% .1254 69.8462);
  --color-foreground-onCriticalSubtle: oklch(71.98% .1654 25.0892);
  --color-foreground-onInfoSubtle: oklch(72% .1366 264.295);
  --color-chart-grid: oklch(32.95% .0071 274.76);
  --color-chart-cat-1-soft: oklch(81.08% .0897 264.177);
  --color-chart-cat-2-soft: oklch(80.93% .0969 70.2892);
  --color-chart-link: oklch(64.91% .0082 260.731);
  --shadow-raised: 0 1px 3px #0000001a;
  --shadow-overlay: 0 10px 25px #00000073, 0 4px 10px #00000040;
}

html[lang="en"] {
  --font-sans: "Inter", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

[dir="rtl"] .dir-flip {
  display: inline-block;
  transform: scaleX(-1);
}

.ltr-island {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.sig-slot {
  height: 22mm;
}

.sig-slot img {
  object-fit: contain;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  max-width: 100%;
  height: auto;
  max-height: 18mm;
  width: auto !important;
}

.sig-stamp {
  max-width: 100%;
  display: inline-block;
}

.ltr-field, .ltr-field input {
  text-align: left;
  direction: ltr;
}

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
  }
}

.brand-fx {
  box-shadow: 0 6px 18px -8px var(--color-background-primary);
  border-radius: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .brand-fx {
    box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--color-background-primary) 70%, transparent);
  }
}

.brand-fx {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

:root .brand-fx:hover, :root :is(a, button):is(:hover, :focus-visible) .brand-fx {
  box-shadow: 0 10px 24px -10px var(--color-background-primary);
  transform: translateY(-2px) rotate(-4deg);
}

@supports (color: color-mix(in lab, red, red)) {
  :root .brand-fx:hover, :root :is(a, button):is(:hover, :focus-visible) .brand-fx {
    box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--color-background-primary) 80%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-fx {
    transition: none;
  }

  :root .brand-fx:hover, :root :is(a, button):is(:hover, :focus-visible) .brand-fx {
    transform: none;
  }
}

@media print {
  .brand-fx {
    box-shadow: none !important;
    transform: none !important;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-pan-x {
  syntax: "*";
  inherits: false
}

@property --tw-pan-y {
  syntax: "*";
  inherits: false
}

@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false
}

@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
/* global reset from live app-core.css */
*,:before,:after{box-sizing:border-box}

/* Bespoke auth/layout classes ported verbatim from the live app-core.css
   oracle (mirror/app/css/app-core.css). antd component styling comes from antd
   via ConfigProvider; these are the custom .login-*/.social-*/.create-account
   /.forgot-password rules. */

.login-tools-wrapper{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;min-height:100vh;padding:32px 0 32px 32px;display:flex}

.login-tools-card{flex-direction:column;align-items:center;width:100%;max-width:1250px;display:flex}

.login-tools-visual{border-radius:24px 0 0;width:100%;height:73dvh;position:relative;overflow:hidden}

.login-tools-slide{opacity:0;pointer-events:none;z-index:1;transition:opacity .5s ease-in-out;position:absolute;inset:0}

.login-tools-slide.active{opacity:1;pointer-events:auto;z-index:2}

.login-tools-image{object-fit:cover;object-position:top;width:100%;height:100%}

.login-tools-visual:after{content:"";pointer-events:none;z-index:3;background:linear-gradient(#f9fbff00 0%,#f9fbff 100%);height:180px;position:absolute;bottom:0;left:0;right:0}

.login-tools-dots{justify-content:center;align-items:center;gap:4px;margin-top:24px;display:flex}

.login-tools-dot{cursor:pointer;appearance:none;background:#225aea26;border:none;border-radius:999px;outline:none;width:16px;height:4px;padding:0;transition:background .25s}

.login-tools-dot.active{background:#225aea}

.login-tools-dot:focus-visible{outline:2px solid #225aea66}

.login-tools-content{text-align:center;max-width:560px;margin-top:45px}

.login-tools-title{letter-spacing:-.8px;text-align:center;color:#151e3a;margin:0 0 12px;font-size:20px;font-weight:600;line-height:24px}

.login-tools-subtitle{letter-spacing:-.1px;text-align:center;color:#707ba0;max-width:500px;font-size:14px;font-weight:400;line-height:140%}

.login-trustpilot-wrapper{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;padding-top:24px;display:flex}

.login-trustpilot-wrapper .login-trustpilot-stats{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;max-width:320px;display:flex}

.login-trustpilot-wrapper .trustpilot-icon{justify-content:center;align-items:center;display:flex}

.login-trustpilot-wrapper .trustpilot-rating-stars{width:176px;height:32px;display:inline-block;position:relative}

.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__base,.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__fill{grid-template-columns:repeat(5,32px);gap:4px;display:grid;position:absolute;inset:0}

.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__fill{overflow:hidden}

.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__cell{justify-content:center;align-items:center;display:flex}

.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__cell--empty{color:#fff;background:#5c5c5c}

.login-trustpilot-wrapper .trustpilot-rating-stars .rating-block__cell--filled{color:#fff;background:#00b67a}

.login-trustpilot-wrapper .trustpilot-rating-stars--small{width:136px;height:24px}

.login-trustpilot-wrapper .trustpilot-rating-stars--small .rating-block__base,.login-trustpilot-wrapper .trustpilot-rating-stars--small .rating-block__fill{grid-template-columns:repeat(5,24px)}

.login-trustpilot-wrapper .trustpilot-rating-stats{letter-spacing:-.3px;color:#000;justify-content:center;align-items:center;gap:4px;font-size:14px;font-weight:500;line-height:140%;display:flex}

.login-trustpilot-wrapper .trustpilot-comment{letter-spacing:-.1px;text-align:center;color:#434c69;max-width:320px;margin-top:16px;font-size:12px;font-weight:400;line-height:16px}

.login-trustpilot-wrapper .trustpilot-divider{width:592px;max-width:calc(100% - 96px)}

.login-trustpilot-wrapper .trustpilot-divider .ant-divider{border-color:#e2e6f3;border-top-width:1.5px;margin:64px 0}

.login-trustpilot-wrapper .trustpilot-slider-section{width:100%;padding-bottom:16px;position:relative}

.login-trustpilot-wrapper .trustpilot-slider-window{box-sizing:border-box;width:100%;padding:8px 0 16px;overflow:hidden}

.login-trustpilot-wrapper .trustpilot-slider-track{will-change:transform;backface-visibility:hidden;gap:16px;display:flex;transform:translateZ(0)}

.login-trustpilot-wrapper .trustpilot-slide{opacity:.38;flex:0 0 528px;width:528px;min-width:528px;max-width:528px}

.login-trustpilot-wrapper .trustpilot-slide.is-active{opacity:1}

.login-trustpilot-wrapper .trustpilot-review-card{box-sizing:border-box;background:#fff;border:1px solid #e2e6f3;border-radius:20px;flex-direction:column;justify-content:space-between;width:100%;height:236px;padding:24px;display:flex;box-shadow:0 4px 18px #1018280f}

.login-trustpilot-wrapper .trustpilot-review-content{color:#151e3a;letter-spacing:-.3px;-webkit-line-clamp:5;word-break:break-word;-webkit-box-orient:vertical;font-size:14px;font-weight:500;line-height:140%;display:-webkit-box;overflow:hidden}

.login-trustpilot-wrapper .trustpilot-review-footer{justify-content:space-between;align-items:center;gap:12px;display:flex}

.login-trustpilot-wrapper .trustpilot-review-author{flex:1;align-items:center;gap:12px;min-width:0;display:flex}

.login-trustpilot-wrapper .trustpilot-review-avatar{flex-shrink:0}

.login-trustpilot-wrapper .trustpilot-review-avatar>img{object-fit:none}

.login-trustpilot-wrapper .trustpilot-review-avatar-fallback{color:#fff;background:#00b67a;font-weight:600}

.login-trustpilot-wrapper .trustpilot-review-author-info{flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;display:flex}

.login-trustpilot-wrapper .trustpilot-review-author-name{color:#151e3a;letter-spacing:-.3px;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:500;line-height:20px;overflow:hidden}

.login-trustpilot-wrapper .trustpilot-review-author-subtitle{color:#707ba0;letter-spacing:-.1px;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:400;line-height:16px;overflow:hidden}

.login-trustpilot-wrapper .trustpilot-review-stars{flex-shrink:0;align-items:center;gap:2px;display:flex}

.login-trustpilot-wrapper .trustpilot-review-star{color:#fff;background:#c5cce3;justify-content:center;align-items:center;width:28px;height:28px;font-size:17px;font-weight:700;line-height:1;display:flex}

.login-trustpilot-wrapper .trustpilot-review-star.filled{background:#16895a}

.login-trustpilot-wrapper .trustpilot-dots{justify-content:center;align-items:center;gap:8px;margin-top:18px;display:flex}

.login-trustpilot-wrapper .trustpilot-dot{cursor:pointer;background:#e2e6f3;border:none;border-radius:999px;width:18px;height:6px;padding:0}

.login-trustpilot-wrapper .trustpilot-dot.active{background:#225aea}

.login-trustpilot-wrapper .trustpilot-slide{opacity:1}

.login-trustpilot-wrapper .trustpilot-slider-window{padding-left:16px;padding-right:16px}

.login-trustpilot-wrapper .trustpilot-slide{flex:0 0 calc(100% - 32px);width:calc(100% - 32px);min-width:calc(100% - 32px);max-width:calc(100% - 32px)}

.login-trustpilot-wrapper .trustpilot-review-card{border-radius:20px;height:auto;min-height:236px;padding:20px}

.login-trustpilot-wrapper .trustpilot-review-footer{flex-direction:column;align-items:flex-start;gap:14px}

section.ant-layout:has(.login-content){height:100dvh}

.login-content{background:#fff;flex-direction:column;justify-content:flex-start;align-items:center;width:50%;height:100%;padding:32px 0;font-family:var(--font-sans);display:flex;overflow-y:auto}

.login-content.success{justify-content:center;align-items:center;width:100%}

.login-content.success .content-title{width:450px;padding-top:24px}

.login-content.success .content-title>h2{text-align:center;background:#fff;margin-bottom:12px}

.login-content.success .content-title>div{white-space:pre-wrap;font-size:16px}

.login-content.success .content-title.animation h2{letter-spacing:-.69px;color:#225aea;font-size:32px;line-height:48px}

.login-content.success .page-content{flex-direction:column;height:auto;min-height:240px;display:flex}

.login-content.success .page-content>img,.login-content.success .page-content video{max-width:100%;height:57vh;max-height:468px;margin:62px auto}

.login-content.success .page-content .ant-btn{width:390px;min-height:48px}

.login-content.success_first-time{background:#fff}

.login-content.success_first-time .content-title>h2{text-align:center;background:#fff;margin-bottom:12px}

.login-content.success_first-time .content-title>div{white-space:pre-wrap;text-align:center;font-size:16px;line-height:24px}

.login-content.success_first-time .page-content>img,.login-content.success_first-time .page-content video{margin:auto}

.login-content.success_first-time .page-content .ant-btn{width:390px;margin:0 auto}

.login-content .login-content-wrap{flex-direction:column;width:464px;height:100%;display:flex}

.login-content .login-logo-wrapper{text-align:flex-start}

.login-content .login-logo-wrapper .login-logo{width:36px;height:36px}

.login-content .login-card-wrapper{margin-top:116px}

.login-content .login-card-wrapper .login-card{width:100%}

.login-content .login-card-wrapper .login-card .code-block{margin:24px auto;width:100%!important}

.login-content .login-card-wrapper .login-card .code-block>div{justify-content:space-between;align-items:center;display:flex;width:100%!important}

.login-content .login-card-wrapper .login-card .code-block>div input{color:#151e3a;caret-color:#151e3a;background:#fff;border:1px solid #e2e6f3;border-radius:10px;justify-content:space-between;align-items:center;width:40px;height:40px;padding:6px 12px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;display:flex}

.login-content .login-card-wrapper .login-card .code-block>div input.error{border:1px solid #d71313}

.login-content .login-card-wrapper .login-card .code-block>div input:focus,.login-content .login-card-wrapper .login-card .code-block>div input:active{border:1px solid #225aea}

.login-content .login-card-wrapper .login-card .error-text.error-text-restore{position:relative;top:-8px}

.login-content .login-card-wrapper .login-card .error-text span{color:#d71313;font-size:14px;font-style:normal;font-weight:500;line-height:20px}

.login-content .login-card-wrapper .login-card .error-text.red span{color:#d71313}

.login-content .login-card-wrapper .login-card .error-text.yellow span{color:#f6b60e}

.login-content .login-card-wrapper .login-card .error-text.green span{color:#16895a}

.login-content .login-card-wrapper .login-card .error-text.orange span{color:#df7009}

.login-content .login-card-wrapper .login-card .resend-code{text-align:center;margin-top:18px}

.login-content .login-card-wrapper .login-card .resend-code .resend-timer{justify-content:center;align-items:center;width:100%;display:flex}

.login-content .login-card-wrapper .login-card .resend-code .resend-timer .ant-statistic{margin-right:5px}

.login-content .login-card-wrapper .login-card .resend-code .resend-timer .ant-statistic-content{align-items:center;display:flex}

.login-content .login-card-wrapper .login-card .resend-code .resend-timer span{color:#434c69;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px}

.login-content .login-card-wrapper .login-card .resend-code .text{cursor:pointer;color:#434c69}

.login-content .login-card-wrapper .login-card .resend-code .text .marked-text{color:#225aea}

.login-content .login-card-wrapper .login-card .verify-btn-block{flex-direction:column;align-items:center;gap:12px;margin-top:18px;display:flex}

.login-content .login-card-wrapper .login-card .verify-btn-block button{cursor:pointer;background:#225aea;border-radius:10px;width:100%;min-height:40px;margin:0;transition:all .3s;box-shadow:inset 0 -1px 2px #1448cb7a,0 0 0 1px #225aea29,0 8px 16px -8px #225aeaa3,0 4px 4px #0000000f}

.login-content .login-card-wrapper .login-card .verify-btn-block button:hover,.login-content .login-card-wrapper .login-card .verify-btn-block button:focus,.login-content .login-card-wrapper .login-card .verify-btn-block button:active{background:#1448cb}

.login-content .login-card-wrapper .login-card .verify-btn-block button[disabled]{cursor:not-allowed;color:#c5cce3!important;box-shadow:none!important;background:#f2f3f8!important}

.login-content .login-card-wrapper .login-card .verify-btn-block .gmail{cursor:pointer;color:#151e3a;background:#fff;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;height:40px;margin:0;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}

.login-content .login-card-wrapper .login-card .verify-btn-block .gmail:hover,.login-content .login-card-wrapper .login-card .verify-btn-block .gmail:focus,.login-content .login-card-wrapper .login-card .verify-btn-block .gmail:active{background:#f9f9fc}

.login-content .login-card-wrapper .login-card-title{font-size:20px;font-style:normal;letter-spacing:-.8px;color:#151e3a;text-align:start;font-weight:600;line-height:24px}

.login-content .login-card-wrapper .login-card-subtitle{color:#707ba0;letter-spacing:-.1px;text-align:start;margin-top:12px;font-size:14px;font-style:normal;font-weight:400;line-height:140%}

.login-content .login-card-wrapper .login-card .social-btn-block-login{align-items:center;gap:12px;margin-top:24px;display:flex}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login{color:#151e3a;cursor:pointer;background:#fff;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;height:36px;padding:6px 12px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login:hover,.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login:focus,.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login:active{background:#f9f9fc}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login[disabled]{cursor:not-allowed;color:#c5cce3!important;box-shadow:none!important;background:#f2f3f8!important}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login--apple span{margin-top:2px}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login .social-btn-login-icon{width:20px;height:20px}

.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login .label-auth-last-method{letter-spacing:-.1px;color:#1448cb;background-color:#f2f6ff;border-radius:6px;padding:2px 6px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:-10px;right:-8px}

/* 0248 — Google + passkey row. The «Last used» badge is absolutely placed, so each button (and the
   passkey's wrapper slot) is its positioning context; in RTL it pins to the opposite corner. */
.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login{position:relative;text-decoration:none}
.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login-slot{position:relative;flex:1;display:flex}
.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login-slot>.social-btn-login{width:100%}
.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login-slot>.label-auth-last-method{letter-spacing:-.1px;color:#1448cb;background-color:#f2f6ff;border-radius:6px;padding:2px 6px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:-10px;right:-8px;pointer-events:none}
[dir=rtl] .login-content .login-card-wrapper .login-card .social-btn-block-login .label-auth-last-method{right:auto;left:-8px}
[dir=rtl] .login-content .login-card-wrapper .login-card .login-card-divider span .label-auth-last-method{margin-left:0;margin-right:8px}
.login-content .login-card-wrapper .login-card .social-btn-block-login .social-btn-login:focus-visible{outline:2px solid #225aea;outline-offset:2px}

.login-content .login-card-wrapper .login-card .login-card-divider{justify-content:center;align-items:center;gap:8px;margin:24px auto;display:flex}

.login-content .login-card-wrapper .login-card .login-card-divider span{color:#434c69;font-size:12px;font-style:normal;font-weight:500;line-height:16px}

.login-content .login-card-wrapper .login-card .login-card-divider span .label-auth-last-method{letter-spacing:-.1px;color:#1448cb;background-color:#f2f6ff;border-radius:6px;margin-left:8px;padding:2px 6px;font-size:12px;font-weight:500;line-height:16px}

.login-content .login-card-wrapper .login-card .login-card-divider div{background:#e2e6f3;flex:1;height:1px}

.login-content .login-card-wrapper .login-card .login-form.restore:has(.restore-password-input+.error-text:not(.error-text_empty)) .login-form-submit{margin-top:8px}

.login-content .login-card-wrapper .login-card .login-form:has(.login-form-password+.field-helper) .login-form-submit{margin-top:8px}

.login-content .login-card-wrapper .login-card .login-form .field-helper{letter-spacing:-.3px;font-size:14px;font-style:normal;font-weight:500;line-height:20px;position:relative;top:-8px}

.login-content .login-card-wrapper .login-card .login-form input{height:40px;box-shadow:none;background:#fff;border:1px solid #e2e6f3;border-radius:10px;padding:6px 12px;font-size:14px;font-style:normal;font-weight:500;transition:all .3s;caret-color:#151e3a!important}

.login-content .login-card-wrapper .login-card .login-form input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 50px #fff!important}

.login-content .login-card-wrapper .login-card .login-form input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 50px #fff!important}

.login-content .login-card-wrapper .login-card .login-form input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 50px #fff!important}

.login-content .login-card-wrapper .login-card .login-form input:-webkit-autofill:active{-webkit-box-shadow:inset 0 0 0 50px #fff!important}

.login-content .login-card-wrapper .login-card .login-form input:hover,.login-content .login-card-wrapper .login-card .login-form input:focus,.login-content .login-card-wrapper .login-card .login-form input:active{border:1px solid #225aea}

.login-content .login-card-wrapper .login-card .login-form input.ant-input-status-error{border:1px solid #d71313}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper{box-shadow:none;border:1px solid #e2e6f3;border-radius:10px;padding:0;transition:all .3s}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper:hover,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper:focus,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper:active,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper:focus-within{border:1px solid #225aea}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper-status-error,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper-status-error:focus,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper-status-error:hover,.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper-status-error:focus-within{border:1px solid #d71313}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper .ant-input-suffix{padding:6px 12px 6px 0}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper .ant-input-suffix svg{width:20px;height:20px}

.login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper input{border:none;border-radius:10px 0 0 10px}

/* RTL: the eye icon sits on the left, so the input keeps the RIGHT corners (it clipped the wrapper's border). */
[dir=rtl] .login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper input{border-radius:0 10px 10px 0}
[dir=rtl] .login-content .login-card-wrapper .login-card .login-form .ant-input-affix-wrapper .ant-input-suffix{padding:6px 0 6px 12px}

.login-content .login-card-wrapper .login-card .login-form-submit{cursor:pointer;background:#225aea;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;margin-top:24px;transition:background .3s;display:flex;box-shadow:inset 0 -1px 2px #1448cb7a,0 0 0 1px #225aea29,0 8px 16px -8px #225aeaa3,0 4px 4px #0000000f;color:#fff!important}

.login-content .login-card-wrapper .login-card .login-form-submit:hover,.login-content .login-card-wrapper .login-card .login-form-submit:focus,.login-content .login-card-wrapper .login-card .login-form-submit:active{background:#1448cb}

.login-content .login-card-wrapper .login-card .login-form-submit[disabled]{cursor:not-allowed;color:#c5cce3!important;box-shadow:none!important;background:#f2f3f8!important}

.login-content .terms{text-align:center;color:#a1aac8;margin-top:auto;padding:0 24px;font-size:12px;font-style:normal;font-weight:500;line-height:16px}

.login-content .terms a{color:#225aea;margin:0 3px;transition:all .3s}

.login-content .terms a:hover,.login-content .terms a:focus,.login-content .terms a:active{cursor:pointer;color:#1448cb;text-decoration:underline}

.login-content .forgot-password{color:#225aea;justify-content:flex-start;align-items:center;margin-top:8px;font-size:14px;font-style:normal;font-weight:500;line-height:20px;display:flex}

.login-content .create-account{color:#434c69;letter-spacing:-.3px;text-align:center;margin-top:22px;font-size:14px;font-style:normal;font-weight:500;line-height:140%}

.login-content .create-account a{color:#225aea;cursor:pointer;transition:all .3s}

.login-content .create-account a:hover,.login-content .create-account a:focus,.login-content .create-account a:active{color:#1448cb}

.login-content .remember-password{color:#434c69;text-align:center;margin-top:24px;font-size:14px;font-style:normal;font-weight:500}

.login-content .remember-password.verify-code-page{margin-top:auto}

.login-content .remember-password a{color:#225aea;transition:all .3s}

.login-content .remember-password a:hover,.login-content .remember-password a:focus,.login-content .remember-password a:active{color:#1448cb}

.login-wrapper{flex-direction:row;justify-content:space-between;align-items:center;height:100%;display:flex}

.login-wrapper .login-slider{background:#f9fbff;flex-direction:column;justify-content:flex-start;align-items:center;width:50%;height:100%;padding-top:140px;font-family:var(--font-sans);display:flex;overflow-y:auto}

.login-wrapper .login-slider.slider-tools{padding-top:0}

.login-wrapper .login-slider .ant-spin-nested-loading{overflow-y:auto}

/* full-height root so .login-wrapper{height:100%} fills the viewport */
html, body, #root { height: 100%; margin: 0; }

/* Sign-up terms footer (live app-core.css) */
.login-content .terms{text-align:center;color:#a1aac8;margin-top:auto;padding:0 24px;font-size:12px;font-style:normal;font-weight:500;line-height:16px}
.login-content .terms a{color:#225aea;margin:0 3px;transition:all .3s}
.login-content .terms a:hover,.login-content .terms a:focus,.login-content .terms a:active{cursor:pointer;color:#1448cb;text-decoration:underline}


/* ============================================================
   APP SHELL — Layout + Sider + header + page-header parity.
   Rules lifted from mirror/app/css (app-core.css / app-components.css);
   theme-light variants only (the wrapper is hardcoded theme-light).
   ============================================================ */
.main-sidebar{width:72px;min-height:100vh;z-index:40;flex-flow:column;justify-content:stretch;min-height:-webkit-fill-available;transition:width .3s;display:flex;position:fixed;top:0;left:0}
.main-sidebar_wrap{padding:24px 16px 0}
.main-sidebar.big-sidebar{scrollbar-width:thin;scrollbar-color:#c5cce3 transparent;justify-content:space-between;width:272px;max-height:500px;overflow-y:auto!important}
.main-sidebar>*{height:100%;transition:all .3s;position:relative;left:0}
.theme-light .main-sidebar{background:#f9fbff;border-right:1px solid #e2e6f3}
.main-sidebar.big-sidebar .main-sidebar-header{flex-direction:row;justify-content:space-between;width:100%}
.main-sidebar.big-sidebar .main-sidebar-header>svg{flex-shrink:0}
.main-sidebar-header{flex-direction:column;align-items:center;gap:17px;width:100%;margin-bottom:24px;display:flex}
.main-sidebar-header-btn{cursor:pointer;transition:all .3s}
.main-sidebar-header-btn path{transition:all .3s}
.theme-light .main-sidebar-header-btn:hover path{stroke:#225aea}
.main-sidebar .ant-collapse-header{padding:0!important}
.main-sidebar .ant-collapse-header-text{width:100%;margin:0}
.main-sidebar .ant-collapse-content-box{padding:0!important;transition:height .3s!important}
.main-sidebar .ant-collapse-content{overflow:visible!important}
.main-sidebar .ant-collapse-item{border-bottom:none!important}
.main-sidebar.big-sidebar .sidebar-link{height:36px;padding:8px}
.main-sidebar.big-sidebar .sidebar-link_icon{width:20px;margin-right:8px}
.main-sidebar .sidebar-link-text .sidebar-link-text-wrapper{align-items:center;gap:12px;display:flex}
.main-sidebar .sidebar-link-text .dashboard-page-block-title-tag{position:unset}
.main-sidebar .sidebar-link{letter-spacing:-.3px;border-radius:10px;justify-content:flex-start;align-items:center;width:calc(100% - 2px);margin:1px;padding:10px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex;position:relative}
.theme-light .main-sidebar .sidebar-link{color:#434c69}
.main-sidebar .sidebar-link-text{white-space:nowrap;flex:1;justify-content:space-between;align-items:center;display:flex;overflow:hidden}
.main-sidebar .sidebar-link>svg{flex-shrink:0}
.theme-light .main-sidebar .sidebar-link:not(.active):hover{background:#f2f6ff}
.theme-light .main-sidebar .sidebar-link.active:not(.sidebar-dropdown-link-main),.theme-light .main-sidebar .sidebar-link.sidebar-dropdown-link-main-selected:not(.sidebar-dropdown-link-main){color:#151e3a;background:#fff;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}
.main-sidebar .sidebar-link_icon{margin-right:0}
.main-sidebar .sidebar-link.sidebar-dropdown-link{justify-content:flex-start;align-items:center;margin-left:28px;display:flex;width:unset!important}
.main-sidebar .sidebar-link.sidebar-dropdown-link:last-child{margin-bottom:4px}
.main-sidebar .sidebar-link.sidebar-dropdown-link .sidebar-link-text-wrapper{align-items:center;gap:12px;display:flex}
.main-sidebar_bottom{margin-top:auto;padding:20px 16px 16px}
.main-sidebar .main-sidebar-free-button{letter-spacing:-.3px;border:none;border-radius:8px;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:4px 15px;margin-top:16px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex}
.theme-light .main-sidebar .main-sidebar-free-button{color:#151e3a;background:#fff;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}
.theme-light .main-sidebar .main-sidebar-free-button:hover,.theme-light .main-sidebar .main-sidebar-free-button:focus,.theme-light .main-sidebar .main-sidebar-free-button:active{background:#f9f9fc}
.main-sidebar .main-sidebar-free-button span{align-items:center;gap:4px;display:flex}
.sidebar-link-arrow{justify-content:center;align-items:center;display:flex}
.sidebar-link-arrow svg{transition:transform .3s}
.sidebar-dropdown-link-main.rotated .sidebar-link-arrow svg{transform:rotate(180deg)}
.sidebar-dropdown-link-main.rotated .sidebar-link-arrow svg path,.sidebar-dropdown-link-main .sidebar-link-arrow svg path:hover,.sidebar-dropdown-link-main .sidebar-link-arrow svg path:focus,.sidebar-dropdown-link-main .sidebar-link-arrow svg path:active{stroke:#225aea}
.group-dropdown-wrapper{flex-direction:column;display:flex}
.group-dropdown-wrapper .sidebar-group-dropdown{padding-top:24px}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header{cursor:pointer;align-items:center;gap:8px;width:100%;padding:4px 8px;transition:all .3s;display:flex}
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header{color:#a1aac8}
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:hover{color:#434c69!important}
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:hover svg path{fill:#434c69}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow{align-items:center;transition:transform .3s;display:flex;transform:rotate(-90deg)}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow.rotated{transform:rotate(0)}
/* GroupArrow (app/routes/app/layout.tsx) is a solid triangle pointing DOWN, so the collapsed
   state rotates it a quarter turn to point at the content it would reveal. rotate(-90deg)
   aims it right, which is only "toward the content" while reading left-to-right; in Arabic
   the group opens leftward, so the collapsed caret turns the other way. The open state stays
   rotate(0) (pointing down) in both directions. */
[dir="rtl"] .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow{transform:rotate(90deg)}
[dir="rtl"] .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow.rotated{transform:rotate(0)}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header-text{text-wrap:nowrap}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-dropdown-children{opacity:0;pointer-events:none;max-height:0;transition:max-height .3s,opacity .3s;overflow:hidden}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-dropdown.open .sidebar-group-dropdown-children{opacity:1;pointer-events:all;max-height:500px}
.user-dropdown{position:relative}
.user-dropdown-outer{cursor:pointer;width:100%;display:flex}
.user-dropdown-outer.ant-dropdown-open .user-dropdown-outer-info-wrapper svg{transform:rotate(180deg)}
.user-dropdown-outer:has(.user-dropdown-outer-icon){justify-content:center;align-items:center;width:40px}
.user-dropdown-outer-info{letter-spacing:-.3px;flex-direction:column;align-items:flex-start;gap:2px;width:100%;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;display:flex}
.user-dropdown-outer-info-wrapper{justify-content:space-between;align-items:center;width:100%;display:flex}
.user-dropdown-outer-info-wrapper svg{transition:all .3s}
.theme-light .user-dropdown-outer-info-wrapper svg path{stroke:#434c69}
.user-dropdown-outer-info-email{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}
.theme-light .user-dropdown-outer-info-email{color:#707ba0}
.user-dropdown-outer-info-name{white-space:nowrap;justify-content:space-between;align-items:center;width:100%;max-width:100%;display:flex;overflow:hidden}
.theme-light .user-dropdown-outer-info-name{color:#151e3a}
.user-dropdown-outer-info-name span{white-space:nowrap;text-overflow:ellipsis;max-width:90%;overflow:hidden}
.global-wrap.theme-light{background-color:#fff!important}
.global-wrap .main-container{flex-flow:row;justify-content:stretch;align-items:stretch;display:flex}
.global-wrap.big-sidebar .main-content{max-width:calc(100% - 272px)}
.global-wrap .main-content{flex:1;max-width:calc(100% - 72px);margin:0 0 0 auto;transition:all .3s;position:relative;overflow:auto}
.header{flex-flow:row;justify-content:stretch;align-items:center;height:68px;padding:24px;display:none}
.theme-light .header{border-bottom:1px solid #e2e6f3}
.header_right-part{flex-flow:row;flex:1;justify-content:flex-end;align-items:center;display:flex}
.main-layout{width:100%;min-height:100dvh}
.page-header{justify-content:space-between;align-items:center;padding:20px 32px;display:flex}
.theme-light .page-header{border-bottom:1px solid #e2e6f3}
.page-header_content{align-items:center;gap:12px;display:flex}
.page-header_icon{border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;display:flex;box-shadow:0 2px 4px #3c3c3c0a,0 24px 24px -12px #0000000a,0 4px 6px -3px #0000003d}
.page-header_info-block{align-items:center;gap:8px;display:flex}
.page-header_info-block .page-header_title{letter-spacing:-.3px;color:#151e3a;font-size:14px;font-weight:600;line-height:140%}
.theme-light .page-header_info-block .page-header_title{color:#151e3a}
.page-header_info-block .page-header_description{letter-spacing:-.3px;font-size:14px;font-weight:400;line-height:140%}
.theme-light .page-header_info-block .page-header_description{color:#434c69}
.page-header_info-block .page-header_description .white-paper{color:#225aea;cursor:pointer;transition:.3}
.page-header_info-block .page-header_description .white-paper:hover{color:#1448cb;text-decoration:underline}
.page-header_actions{justify-content:center;align-items:center;gap:16px;display:flex}
.page-header_actions_three-dots{cursor:pointer}
.theme-light .page-header_actions .ant-divider{background-color:#e2e6f3}
.sidebar-promo-carousel-wrapper{cursor:pointer;border-radius:12px;width:100%;min-width:239px;margin-bottom:24px;padding:8px 12px;transition:all .3s}
.theme-light .sidebar-promo-carousel-wrapper{background:#fff;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}
.theme-light .sidebar-promo-carousel-wrapper:hover{background:#f9f9fc}
.sidebar-promo-carousel-title{letter-spacing:-.3px;text-transform:capitalize;font-size:12px;font-style:normal;font-weight:500;line-height:16px}
.theme-light .sidebar-promo-carousel-title{color:#151e3a}
.sidebar-promo-carousel-title-wrapper{flex-direction:column;align-items:flex-start;gap:4px;font-family:var(--font-sans);display:flex}
.sidebar-promo-carousel-text{letter-spacing:-.3px;font-size:12px;font-style:normal;font-weight:400;line-height:16px}
.theme-light .sidebar-promo-carousel-text{color:#707ba0}
.sidebar-promo-carousel-icon{margin-bottom:8px}

/* .sidebar-toggle has no rule in the live CSS (bare <button> + box-sizing reset). */
.sidebar-toggle{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}
/* empty placeholder body for not-yet-built page stubs */
.page-body{padding:0}

/* ---- Collapsed icon-rail: the header sidebar-toggle removes .big-sidebar so the
   sidebar shrinks 272px -> 72px (.main-sidebar base width). Hide every text label,
   arrow and expanded sub-link so only centered icons remain. Scoped to
   :not(.big-sidebar) so the default expanded sidebar + the baseline are untouched. */
.main-sidebar:not(.big-sidebar) .main-sidebar_wrap{padding:24px 12px 0}
.main-sidebar:not(.big-sidebar) .sidebar-link-text,
.main-sidebar:not(.big-sidebar) .sidebar-link-arrow,
.main-sidebar:not(.big-sidebar) .sidebar-group-header-text,
.main-sidebar:not(.big-sidebar) .sidebar-dropdown-arrow,
.main-sidebar:not(.big-sidebar) .user-dropdown-outer-info{display:none!important}
/* expanded mega sub-links can't fit a 72px rail — collapse to the main icon rows */
.main-sidebar:not(.big-sidebar) .ant-collapse-content{display:none!important}
/* centre every icon in the rail */
.main-sidebar:not(.big-sidebar) .sidebar-link{justify-content:center;width:100%;margin:1px 0;padding:10px 0}
.main-sidebar:not(.big-sidebar) .sidebar-link_icon,
.main-sidebar:not(.big-sidebar) .sidebar-link>svg{margin:0}
.main-sidebar:not(.big-sidebar) .sidebar-group-header{justify-content:center;padding:4px 0}
.main-sidebar:not(.big-sidebar) .group-dropdown-wrapper .sidebar-group-dropdown{padding-top:16px}
/* bottom: drop the wide promo card; keep Upgrade as an icon-only button */
.main-sidebar:not(.big-sidebar) .sidebar-promo-carousel-wrapper{display:none}
.main-sidebar:not(.big-sidebar) .main-sidebar-free-button{justify-content:center;padding:10px 0}
.main-sidebar:not(.big-sidebar) .main-sidebar-free-button span{font-size:0;gap:0;justify-content:center}
/* header logo clips to its icon mark */
.main-sidebar:not(.big-sidebar) .main-sidebar-header{align-items:flex-start;overflow:hidden}
.main-sidebar:not(.big-sidebar) .main-sidebar-header-logo{flex:0 0 auto}

/* Mobile-only shell rules — scoped to their original @media so they never
   collapse the desktop sidebar at the 1440px compare width. */
@media only screen and (max-width:768px){
  /* Phase-S a11y fix: re-show the mobile top bar so its hamburger (toggles
     mobileOpen → .opened-sidebar drawer) is reachable. Without this the sidebar
     collapses to width:0 with no way to open it — nav was unreachable on mobile. */
  .header{display:flex!important}
  .main-sidebar.closed-sidebar{width:0!important;overflow:hidden!important}
  .main-sidebar.opened-sidebar{overscroll-behavior:contain;width:calc(100vw - 48px)!important;min-height:unset!important;height:100dvh!important;overflow-y:auto!important}
  /* Real app: when the sidebar collapses at mobile, the content reclaims the full
     viewport. Without this the unscoped .main-content max-width:calc(100% - 272px)
     keeps every dashboard page crammed into a narrow column at <=768px. */
  .global-wrap .main-content,
  .global-wrap.big-sidebar .main-content{max-width:100vw!important;margin:0!important}
  .main-sidebar_bottom.logout{flex-direction:row;align-items:flex-end;padding:0 0 16px;display:flex}
  .main-content.magic-ai-search{overflow:hidden!important}
}

/* ------------------------------------------------------------------ *
 * User-account dropdown popup. Ported from the live app-core/app-components
 * CSS (theme-light variants; the app is hardcoded theme-light). The overlay
 * root is `.ant-dropdown.user-dropdown-main`; the card body is
 * `.user-dropdown-inner`. Opens above the sidebar trigger on click.
 * ------------------------------------------------------------------ */
.user-dropdown-main{min-width:239px}
.user-dropdown-main .user-dropdown-inner{border-radius:16px;width:300px;padding:16px 0 0;background:#fff;border:1px solid #e2e6f3}

.user-dropdown-inner-info{letter-spacing:-.3px;flex-direction:column;align-items:flex-start;gap:2px;max-width:80%;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;display:flex}
.user-dropdown-inner-info-wrapper{justify-content:space-between;align-items:center;width:100%;padding:0 16px;display:flex}
.user-dropdown-inner-info-name{color:#151e3a}
.user-dropdown-inner-info-email{color:#434c69}

.user-dropdown-inner-logout{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex;background:#fff;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}
.user-dropdown-inner-logout:active{background:#f9f9fc}

.user-dropdown-inner-subscription-trial{letter-spacing:-.3px;flex-direction:column;align-items:flex-start;padding:12px 16px;font-family:var(--font-sans);font-size:14px;font-style:normal;line-height:20px;display:flex;background:#fffcf4}
.user-dropdown-inner-subscription-trial h3{margin-top:8px;font-weight:500;color:#151e3a}
.user-dropdown-inner-subscription-trial h4{width:90%;margin-top:4px;font-weight:400;color:#434c69}
.user-dropdown-inner-subscription-trial-button{letter-spacing:-.3px;border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;height:40px;margin-top:16px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex;color:#151e3a;background:#fff;box-shadow:inset 0 -1px 2px #f2f3f87a,0 0 0 1px #c5cce373,0 4px 4px #151e3a0a}
.user-dropdown-inner-subscription-trial-button:hover,.user-dropdown-inner-subscription-trial-button:focus,.user-dropdown-inner-subscription-trial-button:active{background:#f9f9fc}

.user-dropdown-inner-settings{cursor:pointer;border-radius:8px;align-items:center;gap:8px;width:calc(100% - 8px);margin:4px auto;padding:8px;transition:all .3s;display:flex}
.user-dropdown-inner-settings:hover{background:#f2f6ff}
.user-dropdown-inner-settings svg path{stroke:#434c69}
.user-dropdown-inner-settings span{letter-spacing:-.3px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;color:#151e3a}

.user-dropdown-inner-referral{cursor:pointer;border-radius:8px;align-items:center;gap:8px;width:calc(100% - 8px);margin:4px auto;padding:8px;transition:all .3s;display:flex}
.user-dropdown-inner-referral:hover{background:#f2f6ff}
.user-dropdown-inner-referral svg path{stroke:#434c69}
.user-dropdown-inner-referral-title{letter-spacing:-.3px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;color:#151e3a}
.user-dropdown-inner-referral-tag{letter-spacing:-.1px;color:#f9fbff;text-wrap:nowrap;background-color:#225aea;border-radius:6px;padding:4px 6px;font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:16px}
.user-dropdown-inner-referral-icon{margin-left:auto}
.user-dropdown-inner-referral-icon svg{transform:rotate(-90deg)}
.user-dropdown-inner-referral-icon svg path{stroke:#707ba0}

.user-dropdown-inner .text-link{cursor:pointer;letter-spacing:-.3px;border-radius:8px;justify-content:flex-start;align-items:center;gap:8px;width:calc(100% - 8px);margin:4px auto;padding:8px;font-family:var(--font-sans);font-size:14px;font-style:normal;font-weight:500;line-height:20px;transition:all .3s;display:flex;color:#151e3a}
.user-dropdown-inner .text-link:hover{background:#f2f6ff}
.user-dropdown-inner .text-link svg{width:20px!important;height:20px!important}

.language-switcher,.theme-switcher{letter-spacing:-.3px;font-family:var(--font-sans);font-size:14px;font-style:normal;line-height:20px;position:relative}
.language-switcher-inner,.theme-switcher-inner{cursor:pointer;border-radius:8px;align-items:center;width:calc(100% - 8px);margin:4px auto;padding:8px;transition:all .3s;display:flex}
.language-switcher-inner:hover,.theme-switcher-inner:hover{background:#f2f6ff}
.language-switcher-inner .language path{fill:#434c69}
.theme-switcher-inner .sun path{stroke:#434c69}
.language-switcher-inner div,.theme-switcher-inner div{margin-left:8px;font-weight:500;color:#151e3a}
.language-switcher-inner span,.theme-switcher-inner span{align-items:center;gap:8px;margin-left:auto;font-weight:400;display:flex;color:#434c69}
.language-switcher-inner span svg,.theme-switcher-inner span svg{transform:rotate(-90deg)}
.language-switcher-inner span svg path,.theme-switcher-inner span svg path{stroke:#434c69}

/* ── Create-dialog skin — dropship "Create collection" modal ──
   Values mirrored from app.dropship.io (mirror/app/css/app-core.css):
   radius 20, title 16/500, close 14, footer-in-body. Scoped via rootClassName
   so AntD's own confirm/message modals are untouched. Logical props for RTL. */
.eng-create-dialog .ant-modal-content { border-radius: 20px; padding: 16px; }
.eng-create-dialog .ant-modal-header { padding: 0; margin-bottom: 12px; background: transparent; }
.eng-create-dialog .ant-modal-title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: -.3px;
  color: #151e3a;
}
.eng-create-dialog .eng-dialog-subtitle {
  font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: -.2px; color: #434c69;
}
.eng-create-dialog .ant-modal-close { top: 14px; inset-inline-end: 14px; }
.eng-create-dialog .ant-modal-footer { display: none; }
.eng-create-dialog .eng-dialog-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e6f3;
}
.dark .eng-create-dialog .ant-modal-title { color: #f2f3f8; }
.dark .eng-create-dialog .eng-dialog-subtitle { color: #ffffff5c; }
.dark .eng-create-dialog .eng-dialog-footer { border-top-color: #ffffff1f; }
/* RTL adaptations + eng-assist shell additions on top of the ported dropship
   app-parity.css (which is authored LTR). eng-assist renders <html dir="rtl"> for
   Arabic, so flip the fixed sidebar to the inline-start = right. */

[dir="rtl"] .main-sidebar { left: auto; right: 0; }
[dir="rtl"] .theme-light .main-sidebar { border-right: none; border-left: 1px solid #e2e6f3; }
[dir="rtl"] .global-wrap .main-content,
[dir="rtl"] .global-wrap.big-sidebar .main-content { margin: 0 auto 0 0; }
[dir="rtl"] .main-sidebar .sidebar-link.sidebar-dropdown-link { margin-left: 0; margin-right: 28px; }
[dir="rtl"] .main-sidebar.big-sidebar .sidebar-link_icon { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .user-dropdown-inner-referral-icon { margin-left: 0; margin-right: auto; }
[dir="rtl"] .user-dropdown-inner-referral-icon svg,
[dir="rtl"] .language-switcher-inner span svg,
[dir="rtl"] .theme-switcher-inner span svg { transform: rotate(90deg); }
[dir="rtl"] .language-switcher-inner span,
[dir="rtl"] .theme-switcher-inner span { margin-left: 0; margin-right: auto; }
[dir="rtl"] .language-switcher-inner div,
[dir="rtl"] .theme-switcher-inner div { margin-left: 0; margin-right: 8px; }

@media only screen and (max-width: 768px) {
  [dir="rtl"] .main-sidebar.opened-sidebar { right: 0; left: auto; }
}

/* ── eng-assist additions, styled to match the dropship shell ── */
/* Project switcher sits in the sidebar just under the logo. */
.main-sidebar .eng-project-switcher { width: 100%; margin: 0 0 4px; }
.main-sidebar .eng-project-switcher .ant-select { width: 100%; }
.main-sidebar:not(.big-sidebar) .eng-project-switcher { display: none; }

/* AI-quota pill in the sidebar bottom (mirrors dropship pill aesthetics). */
.eng-quota-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px;
}
.eng-quota-pill.ok { background: #f2f6ff; color: #225aea; }
.eng-quota-pill.warn { background: #fff7e6; color: #b7791f; }
.eng-quota-pill.over { background: #fff1f0; color: #d71313; }
.main-sidebar:not(.big-sidebar) .eng-quota-pill { display: none; }

/* Sidebar SVG module glyphs (ModuleIcons.tsx): inherit the .sidebar-link colour so
   they go muted → brand on hover/active, matching Dropship's icon geometry. */
.main-sidebar .sidebar-link .sidebar-link_icon { width: 20px; height: 20px; flex-shrink: 0; color: inherit; }
.theme-light .main-sidebar .sidebar-link:not(.active) .sidebar-link_icon { color: #707ba0; }
.theme-light .main-sidebar .sidebar-link:not(.active):hover .sidebar-link_icon { color: #225aea; }
.theme-light .main-sidebar .sidebar-link.active .sidebar-link_icon { color: #225aea; }
html.dark .main-sidebar .sidebar-link .sidebar-link_icon { color: var(--color-foreground-onBaseMuted); }
html.dark .main-sidebar .sidebar-link.active .sidebar-link_icon,
html.dark .main-sidebar .sidebar-link.sidebar-dropdown-link-main-selected .sidebar-link_icon { color: #fff; }

/* ── Option A mega-rows: an expandable submenu of module rows under one parent.
   The parent row reuses .sidebar-dropdown-link-main / -selected (parity CSS); this
   only governs the children container's collapse animation (matching NavGroup) and
   the collapsed-rail behaviour. ── */
.main-sidebar .sidebar-link.sidebar-dropdown-link-main { cursor: pointer; }

/* ── Accordion nav groups: one open at a time (app/routes/app/layout.tsx).
   The section animates to a MEASURED height, so the easing below is what the eye
   actually reads — parity:370 only sets a flat `.3s`. The inner wrapper exists purely
   to carry the natural height for that measurement and must add no box of its own. ── */
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-dropdown-children {
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
  will-change: max-height;
}
.sidebar-group-dropdown-inner { display: block; }
/* The caret and the section move on the same curve, so the header does not settle
   before its rows do. */
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-dropdown-children,
  .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow {
    transition: none;
  }
}
.sidebar-mega-children { opacity: 0; pointer-events: none; max-height: 0; overflow: hidden; transition: max-height 0.3s, opacity 0.3s; }
.sidebar-mega-children.open { opacity: 1; pointer-events: all; max-height: 600px; }
/* 72px icon rail: the parent navigates to its first child, so the submenu is dropped. */
.main-sidebar:not(.big-sidebar) .sidebar-mega-children { display: none !important; }
/* Dark pill for a collapsed parent that owns the active child, matching the dark
   active-link treatment below (the light pill is parity:340). */
html.dark .theme-light .main-sidebar .sidebar-link.sidebar-dropdown-link-main-selected:not(.sidebar-dropdown-link-main) { color: #fff; background: var(--color-background-primary); box-shadow: none; }

/* eng-assist has 40+ modules: pin the sidebar bottom (user info + billing) so it is
   ALWAYS visible — only the nav region scrolls, the bottom stays put. */
.main-sidebar.big-sidebar { height: 100vh; max-height: 100vh; overflow: hidden !important; }
/* app-parity sets `.main-sidebar > * { height: 100% }` which forces BOTH the nav and
   the bottom to full height and breaks the flex split — reset so flex governs heights. */
.main-sidebar.big-sidebar > * { height: auto; }
.main-sidebar.big-sidebar .main-sidebar_wrap {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c5cce3 transparent;
}
.main-sidebar.big-sidebar .main-sidebar_bottom {
  flex-shrink: 0; margin-top: 0; padding: 14px 16px 16px;
  border-top: 1px solid #e2e6f3; background: #f9fbff;
}
html.dark .main-sidebar.big-sidebar .main-sidebar_bottom {
  border-top-color: var(--color-border-neutral); background: var(--color-background-raised);
}

/* eng-assist text logo, styled like the dropship sidebar logo slot. */
.eng-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-sans); font-weight: 700; color: #151e3a; }
.eng-logo-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #225aea; color: #fff; font-size: 20px; flex-shrink: 0; }
.eng-logo-text { font-size: 16px; letter-spacing: -0.3px; white-space: nowrap; }
.main-sidebar-header-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; }
.main-sidebar:not(.big-sidebar) .main-sidebar-header-btn { display: none; }

/* dropship pages render edge-to-edge inside .main-content (which has no padding);
   give eng-assist pages the dropship content padding. */
.global-wrap .main-content { padding: 24px 32px; }

/* Layout pass: every page owns its title through the shell header (handle.page /
   usePageHeader), so the old ".main-content h1 { display:none }" crutch is gone —
   an <h1> inside the content column is now a bug, not something to hide. */
@media (max-width: 768px) { .global-wrap .main-content { padding: 16px; } }

/* dropship dashboard stat-grid: one unified white panel, hairline dividers,
   only the outer corners rounded. */
.ds-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid #e2e6f3; border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 24px; }
.ds-stat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-inline-start: 1px solid #e2e6f3; min-height: 84px; }
.ds-stat:nth-child(6n + 1) { border-inline-start: none; }
.ds-stat { gap: 6px; }
.ds-stat-title { font-size: 14px; font-weight: 500; color: #225aea; letter-spacing: -0.3px; line-height: 140%; }
.ds-stat-title a { color: #225aea; text-decoration: none; transition: color 0.3s; }
.ds-stat-title a:hover { color: #1448cb; }
.ds-stat-count { font-size: 20px; font-weight: 600; letter-spacing: -0.8px; line-height: 24px; color: #151e3a; }
.ds-stat-count.green { color: #16895a; }
.ds-stat-count.red { color: #d71313; }
.ds-stat-desc { font-size: 13px; font-weight: 400; color: #707ba0; letter-spacing: -0.1px; line-height: 140%; }
@media (max-width: 1100px) {
  .ds-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-stat:nth-child(6n + 1) { border-inline-start: 1px solid #e2e6f3; }
  .ds-stat:nth-child(3n + 1) { border-inline-start: none; }
  .ds-stat:nth-child(n + 4) { border-top: 1px solid #e2e6f3; }
}
@media (max-width: 640px) {
  .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stat { border-top: none; border-inline-start: 1px solid #e2e6f3; }
  .ds-stat:nth-child(3n + 1) { border-inline-start: 1px solid #e2e6f3; }
  .ds-stat:nth-child(odd) { border-inline-start: none; }
  .ds-stat:nth-child(n + 3) { border-top: 1px solid #e2e6f3; }
}

/* dropship-style section heading (title + description), mirrors
   .dashboard-page-blocks-title / -subtitle. */
.ds-section-head { margin-bottom: 12px; }
.ds-section-title { font-size: 18px; font-weight: 600; color: #151e3a; letter-spacing: -0.3px; line-height: 24px; margin: 0; }
.ds-section-desc { font-size: 14px; font-weight: 400; color: #707ba0; line-height: 20px; margin: 4px 0 0; }

/* ── Global dropship table styling: the day-one uplift for every un-migrated
   <table> in eng-assist's pages (unlayered, so it beats inline Tailwind utilities
   like p-2 / border-gray-200). Excludes .ds-table (the DataTable component owns its
   own look in dashboard-ds.css). All colours read the --dst-* var bridge, which
   flips under html.dark, so light and dark are handled without separate overrides.
   Alignment (text-start/text-end) is left to the page's own utilities. ── */
.main-content table:not(.ds-table) { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.main-content table:not(.ds-table) thead th { font-size: 13px; font-weight: 600; color: var(--dst-head-fg); letter-spacing: -0.1px; padding: 12px; border-bottom: 1px solid var(--dst-head-border); white-space: nowrap; background: var(--dst-head-bg); }
.main-content table:not(.ds-table) tbody td { font-size: 14px; font-weight: 500; color: var(--dst-fg); padding: 12px; border-bottom: 1px solid var(--dst-row-border); }
.main-content table:not(.ds-table) tbody tr:last-child td { border-bottom: none; }
.main-content table:not(.ds-table) tbody tr:hover td { background: var(--dst-hover); }

/* dropship page-header pattern (title + description + actions) for rebuilt pages */
.ds-page-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ds-page-header-title { font-size: 18px; font-weight: 700; color: #151e3a; letter-spacing: -0.3px; }
.ds-page-header-desc { font-size: 14px; color: #707ba0; margin-top: 2px; }
.ds-page-header-actions { display: flex; align-items: center; gap: 8px; }
html.dark .ds-page-header-title { color: var(--color-foreground-onBase); }
html.dark .ds-page-header-desc { color: var(--color-foreground-onBaseMuted); }

/* PageHeader.tsx top-bar — title/desc/padding/border come from dropship-parity.css
   (.page-header*). The brand chip wraps a white 20×20 ModuleIcon. Pull the bar to
   the content edges so its bottom border spans the page (the .main-content padding
   supplies the surrounding gutter). */
.main-content .page-header { margin: -24px -32px 24px; }
@media (max-width: 768px) { .main-content .page-header { margin: -16px -16px 16px; } }
/* per-module colored icon chip (background set inline per page); glyph white */
.page-header_icon { box-shadow: none; }
.page-header_icon .sidebar-link_icon { width: 16px; height: 16px; color: #fff; }
/* the Dropship sidebar-toggle (collapse/expand) in the page-header */
.page-header .sidebar-toggle { color: #a1aac8; transition: color 0.2s; }
.page-header .sidebar-toggle:hover { color: #225aea; }
/* AI credits in the page-header actions ("X / Y credits" with ring), like Dropship */
.ai-credits { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ai-credits-ring { display: inline-flex; align-items: center; }
.ai-credits-label { font-weight: 500; color: #707ba0; }
.ai-credits.ok { color: #16895a; }
.ai-credits.warn { color: #b7791f; }
.ai-credits.over { color: #d71313; }
html.dark .ai-credits-label { color: var(--color-foreground-onBaseMuted); }
html.dark .page-header { border-bottom-color: var(--color-border-neutral); }
html.dark .page-header_info-block .page-header_title { color: var(--color-foreground-onBase); }
html.dark .page-header_info-block .page-header_description { color: var(--color-foreground-onBaseMuted); }

/* Auth right panel — components/AuthBrandPanel.tsx: a line-drawn skyline on the brand gradient with an illustrative product preview per slide. Static brand surface in
   both themes: it reads the brand ramp primitives, never the theme-flipping semantic tokens. */
.login-wrapper .login-slider.slider-tools {
  background: none;
  display: flex; align-items: stretch; justify-content: stretch; padding: 0; overflow: hidden;
}
.abp {
  --abp-ink: var(--ramp-neutral-0);
  --abp-ink-soft: color-mix(in oklch, var(--ramp-neutral-0) 78%, transparent);
  --abp-ink-faint: color-mix(in oklch, var(--ramp-neutral-0) 55%, transparent);
  --abp-line: color-mix(in oklch, var(--ramp-neutral-0) 9%, transparent);
  --abp-line-strong: color-mix(in oklch, var(--ramp-neutral-0) 16%, transparent);
  --abp-glass: color-mix(in oklch, var(--ramp-neutral-0) 10%, transparent);
  --abp-card: var(--ramp-neutral-0);
  --abp-card-ink: var(--color-brand-950);
  --abp-card-muted: color-mix(in oklch, var(--color-brand-950) 58%, transparent);
  --abp-card-line: color-mix(in oklch, var(--color-brand-950) 9%, transparent);
  --abp-ok: var(--ramp-green-600);
  --abp-ease: cubic-bezier(.215, .61, .355, 1);
  position: relative; isolation: isolate; inline-size: 100%; min-block-size: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--abp-ink);
  background:
    radial-gradient(120% 80% at 85% 0%, color-mix(in oklch, var(--color-brand-400) 55%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-brand-700) 0%, var(--color-brand-900) 62%, var(--color-brand-950) 100%);
}
.abp-glow {
  position: absolute; inset-inline-start: 50%; inset-block-start: 38%; z-index: -1;
  inline-size: 520px; block-size: 520px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--color-brand-300) 35%, transparent), transparent 65%);
  filter: blur(10px); pointer-events: none;
}
[dir="rtl"] .abp-glow { translate: 50% -50%; }
.abp-skyline {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: -1;
  inline-size: 100%; block-size: 26%; color: var(--abp-ink-faint); opacity: .22; pointer-events: none;
  mask-image: linear-gradient(to top, black 40%, transparent);
}
.abp[data-motion] .abp-beacon { animation: abp-blink 2.4s ease-in-out infinite; }
@keyframes abp-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.abp-inner {
  inline-size: min(460px, 100% - 64px); padding-block: 48px 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px;
}

/* ---- the stage: three stacked previews that cross-fade ---- */
.abp-stage { position: relative; display: grid; inline-size: 100%; }
.abp-preview {
  /* Each preview keeps its own height (centred in the shared cell), so its chip hugs its card. */
  grid-area: 1 / 1; align-self: center; position: relative; padding: 18px 22px 30px;
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity .55s var(--abp-ease), transform .7s var(--abp-ease);
}
.abp-preview.is-on { opacity: 1; transform: none; }
.abp-card {
  position: relative; text-align: start; padding: 18px; border-radius: 18px;
  background: var(--abp-card); color: var(--abp-card-ink);
  box-shadow:
    0 30px 60px -20px color-mix(in oklch, var(--color-brand-950) 70%, transparent),
    0 0 0 1px color-mix(in oklch, var(--ramp-neutral-0) 40%, transparent);
  transform: rotate(-1.5deg);
}
[dir="rtl"] .abp-card { transform: rotate(1.5deg); }
.abp-card-head { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.abp-icon {
  display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 9px;
  background: color-mix(in oklch, var(--color-brand-700) 12%, transparent); color: var(--color-brand-700);
}
.abp-card-title { flex: 1; min-inline-size: 0; font-weight: 700; font-size: 14px; }
.abp-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.abp-pill--ok { background: color-mix(in oklch, var(--abp-ok) 14%, transparent); color: var(--abp-ok); }
.abp-strong { font-weight: 800; color: var(--abp-card-ink); }
.abp-progress { display: flex; justify-content: space-between; font-size: 12px; color: var(--abp-card-muted); margin-block-end: 6px; }
.abp-bar { block-size: 8px; border-radius: 99px; background: var(--abp-card-line); overflow: hidden; }
.abp-bar > span {
  display: block; block-size: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-700));
}
[dir="rtl"] .abp-bar > span { background: linear-gradient(270deg, var(--color-brand-500), var(--color-brand-700)); }
.abp-preview.is-on .abp-bar > span { animation: abp-grow 1.1s var(--abp-ease) both; }
.abp-gantt { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.abp-gantt li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
.abp-gantt-name { font-size: 11px; color: var(--abp-card-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abp-gantt-track { position: relative; block-size: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--abp-card-line) 0 1px, transparent 1px 20%); }
.abp-gantt-bar {
  position: absolute; inset-block: 0; border-radius: 6px; overflow: hidden;
  background: color-mix(in oklch, var(--color-chart-cat-1) 22%, transparent);
}
.abp-gantt-bar > span { display: block; block-size: 100%; background: var(--color-chart-cat-1); border-radius: inherit; }
.abp-gantt li:nth-child(2) .abp-gantt-bar { background: color-mix(in oklch, var(--color-chart-cat-6) 22%, transparent); }
.abp-gantt li:nth-child(2) .abp-gantt-bar > span { background: var(--color-chart-cat-6); }
.abp-gantt li:nth-child(3) .abp-gantt-bar { background: color-mix(in oklch, var(--color-chart-cat-2) 22%, transparent); }
.abp-gantt li:nth-child(3) .abp-gantt-bar > span { background: var(--color-chart-cat-2); }
.abp-gantt li:nth-child(4) .abp-gantt-bar { background: color-mix(in oklch, var(--color-chart-cat-5) 22%, transparent); }
.abp-preview.is-on .abp-gantt-bar { animation: abp-grow .9s var(--abp-ease) both; }
.abp-preview.is-on .abp-gantt li:nth-child(2) .abp-gantt-bar { animation-delay: .08s; }
.abp-preview.is-on .abp-gantt li:nth-child(3) .abp-gantt-bar { animation-delay: .16s; }
.abp-preview.is-on .abp-gantt li:nth-child(4) .abp-gantt-bar { animation-delay: .24s; }
@keyframes abp-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[dir="rtl"] .abp-preview.is-on .abp-bar > span,
[dir="rtl"] .abp-preview.is-on .abp-gantt-bar { animation-name: abp-grow-rtl; }
@keyframes abp-grow-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

.abp-chart { display: flex; align-items: flex-end; gap: 12px; block-size: 120px; padding-block-end: 4px; border-block-end: 1px solid var(--abp-card-line); }
.abp-chart-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; block-size: 100%; }
.abp-col { inline-size: 40%; border-radius: 5px 5px 2px 2px; transform-origin: bottom; }
.abp-col--price { background: color-mix(in oklch, var(--color-chart-cat-1) 30%, transparent); }
.abp-col--cost { background: var(--color-chart-cat-1); }
.abp-preview.is-on .abp-col { animation: abp-rise .8s var(--abp-ease) both; }
.abp-preview.is-on .abp-chart-col:nth-child(2) .abp-col { animation-delay: .06s; }
.abp-preview.is-on .abp-chart-col:nth-child(3) .abp-col { animation-delay: .12s; }
.abp-preview.is-on .abp-chart-col:nth-child(4) .abp-col { animation-delay: .18s; }
.abp-preview.is-on .abp-chart-col:nth-child(5) .abp-col { animation-delay: .24s; }
@keyframes abp-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.abp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 10px; font-size: 11px; color: var(--abp-card-muted); }
.abp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.abp-swatch { inline-size: 9px; block-size: 9px; border-radius: 3px; display: inline-block; }
.abp-swatch--cost { background: var(--color-chart-cat-1); }
.abp-swatch--price { background: color-mix(in oklch, var(--color-chart-cat-1) 30%, transparent); }
.abp-legend-margin { margin-inline-start: auto; }
.abp-legend-margin b { color: var(--abp-ok); font-weight: 800; }

.abp-chat { display: grid; gap: 10px; }
.abp-msg { max-inline-size: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.6; }
.abp-msg--me { justify-self: end; background: var(--color-brand-700); color: var(--ramp-neutral-0); border-end-end-radius: 4px; }
.abp-msg--ai { justify-self: start; background: color-mix(in oklch, var(--color-brand-700) 7%, transparent); color: var(--abp-card-ink); border-end-start-radius: 4px; }
.abp-ai-name { display: flex; align-items: center; gap: 4px; margin-block-end: 3px; font-size: 11px; font-weight: 700; color: var(--color-brand-700); }
.abp-preview.is-on .abp-msg--me { animation: abp-pop .5s var(--abp-ease) both; }
.abp-preview.is-on .abp-msg--ai { animation: abp-pop .5s var(--abp-ease) .45s both; }
@keyframes abp-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.abp-typing { display: inline-flex; gap: 4px; padding: 8px 12px; justify-self: start; border-radius: 12px; background: color-mix(in oklch, var(--color-brand-700) 7%, transparent); }
.abp-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--abp-card-muted); }
.abp[data-motion] .abp-preview.is-on .abp-typing i { animation: abp-dot 1.2s ease-in-out infinite; }
.abp[data-motion] .abp-preview.is-on .abp-typing i:nth-child(2) { animation-delay: .15s; }
.abp[data-motion] .abp-preview.is-on .abp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes abp-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Floating status chips, glass on the brand surface, drifting gently. */
.abp-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--abp-card-ink); background: var(--abp-card);
  box-shadow: 0 16px 30px -12px color-mix(in oklch, var(--color-brand-950) 65%, transparent);
}
.abp-chip svg { color: var(--abp-ok); }
.abp-chip--a { inset-block-end: 0; inset-inline-end: -6px; }
.abp-chip--b { inset-block-start: 0; inset-inline-start: -4px; }
.abp-chip--c { inset-block-end: 2px; inset-inline-start: -2px; }
.abp-preview.is-on .abp-chip { animation: abp-pop .6s var(--abp-ease) .35s both; }
.abp[data-motion] .abp-preview.is-on .abp-chip { animation: abp-pop .6s var(--abp-ease) .35s both, abp-float 5s ease-in-out 1s infinite; }
@keyframes abp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---- copy + indicators ---- */
.abp-copy { min-block-size: 92px; }
.abp-copy h2 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--abp-ink); letter-spacing: -.3px; }
.abp-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--abp-ink-soft); }
.abp[data-motion] .abp-copy { animation: abp-pop .55s var(--abp-ease) both; }
.abp-dots { display: flex; gap: 8px; }
.abp-dot { position: relative; inline-size: 28px; block-size: 4px; padding: 0; border: 0; border-radius: 99px; background: var(--abp-line-strong); cursor: pointer; overflow: hidden; transition: inline-size .4s var(--abp-ease); }
.abp-dot.is-active { inline-size: 52px; background: color-mix(in oklch, var(--ramp-neutral-0) 32%, transparent); }
.abp-dot::before { content: ""; position: absolute; inset: -10px 0; }
.abp-dot-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--abp-ink); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .abp-dot-fill { transform-origin: right; }
.abp-dot.is-active .abp-dot-fill { transform: scaleX(1); }
.abp-dot.is-active .abp-dot-fill[style] { animation: abp-fill linear both; }
@keyframes abp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.abp-dot:focus-visible { outline: 2px solid var(--abp-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .abp *, .abp *::before, .abp *::after { animation: none !important; transition: none !important; }
}
@media (max-height: 760px) {
  .abp-inner { gap: 18px; padding-block: 28px 40px; }
  .abp-gantt li:nth-child(n + 3) { display: none; }
  .abp-chart { block-size: 88px; }
}
@media (max-width: 900px) {
  .login-wrapper { flex-direction: column; }
  /* A 16px side gutter (the auth card used to touch both screen edges) and the form right under
     the logo: the desktop 116px drop pushed the first field, and the CTA, below the fold. */
  .login-wrapper .login-content { width: 100%; padding: 16px 16px 32px; }
  .login-wrapper .login-content .login-content-wrap { width: 100% !important; max-width: 640px; }
  .login-wrapper .login-content .login-card-wrapper { margin-top: 24px; }
  .login-wrapper .login-slider.slider-tools { display: none; }
}

/* ── Dark mode: the ported dropship shell is hardcoded theme-light, so map it onto
   eng-assist's dark surface tokens (which flip under html.dark) for a cohesive dark. ── */
html.dark .global-wrap.theme-light { background-color: var(--color-background-base) !important; }
html.dark .theme-light .main-sidebar { background: var(--color-background-raised); border-color: var(--color-border-neutral); }
html.dark .theme-light .main-sidebar .sidebar-link { color: var(--color-foreground-onBaseMuted); }
html.dark .theme-light .main-sidebar .sidebar-link:not(.active):hover { background: var(--color-background-raisedHover); }
html.dark .theme-light .main-sidebar .sidebar-link.active:not(.sidebar-dropdown-link-main) { color: #fff; background: var(--color-background-primary); box-shadow: none; }
html.dark .eng-logo, html.dark .eng-logo-text { color: var(--color-foreground-onBase); }
html.dark .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header { color: var(--color-foreground-onBaseFaint); }
html.dark .ds-stats { background: var(--color-background-raised); border-color: var(--color-border-neutral); }
html.dark .ds-stat { border-color: var(--color-border-neutral); }
html.dark .ds-stat-count { color: var(--color-foreground-onBase); }
html.dark .ds-stat-count.green { color: #34d399; }
html.dark .ds-stat-count.red { color: #f87171; }
html.dark .ds-stat-title { color: #6c9bff; }
html.dark .ds-stat-title a { color: #6c9bff; }
html.dark .ds-stat-title a:hover { color: #93b6ff; }
html.dark .ds-stat-desc { color: var(--color-foreground-onBaseMuted); }
html.dark .ds-section-title { color: var(--color-foreground-onBase); }
html.dark .ds-section-desc { color: var(--color-foreground-onBaseMuted); }
html.dark .user-dropdown-outer-info-name { color: var(--color-foreground-onBase); }
html.dark .user-dropdown-outer-info-email { color: var(--color-foreground-onBaseMuted); }

/* User-dropdown chevron: points UP when closed, animates DOWN when the popup opens
   (ChevronDown glyph points down → rotate 180° = up). */
.user-dropdown-arrow {
  display: inline-flex;
  flex-shrink: 0;
  max-width: none;
  overflow: visible;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}
.user-dropdown-arrow.open { transform: rotate(0deg); }

/* ── Notification bell + popup (dropship-style) ── */
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent;
  color: #707ba0; cursor: pointer; transition: background .2s, color .2s; flex-shrink: 0;
}
.notif-bell:hover { background: #f2f6ff; color: #225aea; }
.notif-bell-badge {
  position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; font-family: var(--font-sans);
}
/* no room beside the compact logo when the sidebar is collapsed */
.main-sidebar:not(.big-sidebar) .main-sidebar-header .notif-bell { display: none; }

.notif-pop {
  width: 320px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e2e6f3;
  border-radius: 14px; overflow: hidden; font-family: var(--font-sans);
  box-shadow: 0 12px 32px -8px rgba(21,30,58,.18), 0 4px 12px -4px rgba(21,30,58,.1);
}
.notif-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid #e2e6f3;
}
.notif-pop-title { font-size: 14px; font-weight: 600; color: #151e3a; }
.notif-pop-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #225aea; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.notif-pop-empty { padding: 28px 16px; text-align: center; color: #a1aac8; font-size: 13px; }
.notif-pop-list { max-height: 360px; overflow-y: auto; }
.notif-pop-item a, .notif-pop-item > div {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  text-decoration: none; transition: background .15s;
}
.notif-pop-item a:hover { background: #f9fbff; }
.notif-pop-item.unread a, .notif-pop-item.unread > div { background: #f6f9ff; }
.notif-pop-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: transparent; }
.notif-pop-dot.unread { background: #225aea; }
.notif-pop-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-pop-item-title {
  font-size: 13px; font-weight: 500; color: #151e3a; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-pop-item-date { font-size: 11px; color: #a1aac8; }
.notif-pop-all {
  display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 600;
  color: #225aea; text-decoration: none; border-top: 1px solid #e2e6f3; transition: background .15s;
}
.notif-pop-all:hover { background: #f2f6ff; }

html.dark .notif-bell { color: var(--color-foreground-onBaseMuted); }
html.dark .notif-bell:hover { background: var(--color-background-raisedHover); color: var(--color-foreground-primary); }
html.dark .notif-pop { background: var(--color-background-raised); border-color: var(--color-border-neutral); }
html.dark .notif-pop-head, html.dark .notif-pop-all { border-color: var(--color-border-neutral); }
html.dark .notif-pop-title, html.dark .notif-pop-item-title { color: var(--color-foreground-onBase); }
html.dark .notif-pop-item a:hover, html.dark .notif-pop-all:hover { background: var(--color-background-raisedHover); }
html.dark .notif-pop-item.unread a, html.dark .notif-pop-item.unread > div { background: var(--color-background-primarySubtle); }
html.dark .theme-light .main-sidebar .main-sidebar-free-button { background: var(--color-background-raisedHover); color: var(--color-foreground-onBase); box-shadow: none; }
html.dark .user-dropdown-main .user-dropdown-inner { background: var(--color-background-raised); border-color: var(--color-border-neutral); }
html.dark .user-dropdown-inner-info-name { color: var(--color-foreground-onBase); }
html.dark .user-dropdown-inner-settings span, html.dark .language-switcher-inner div, html.dark .theme-switcher-inner div { color: var(--color-foreground-onBase); }
html.dark .user-dropdown-inner-settings:hover, html.dark .language-switcher-inner:hover, html.dark .theme-switcher-inner:hover { background: var(--color-background-raisedHover); }

/* ==== Landing-style buttons (user request: match the marketing navbar's
   "Sign in" / "Start free" look across the whole dashboard) ====
   Geometry (40px / radius 11 / weight 500) comes from antd-theme.ts Button
   tokens; these rules add the landing gradients + hovers. Excluded: danger
   buttons, the WhatsApp green variant, and disabled states, which keep their
   own colors. Unlayered, so they win over the antd cssinjs layer. */
.ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success) {
  background-color: #225aea;
  background-image: linear-gradient(90deg, color-mix(in srgb, #225aea 60%, #fff), #225aea);
  border: none;
}
.ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success):not(:disabled):hover,
.ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success):not(:disabled):active {
  background-color: #1448cb;
  background-image: linear-gradient(90deg, #225aea, #1448cb);
}
/* Disabled = ONE intentional, neutral state for every filled/outlined variant (primary, default,
   danger, the WhatsApp green): a recessed neutral surface, a strong neutral border, faint text, no
   gradient, no shadow, no hover/pressed change. It used to keep the primary gradient (the rule
   above out-specifies a bare `:disabled`) under antd's pale disabled text, which read as a broken
   button rather than an unavailable one. `.ant-btn.ant-btn:is(...)` + `:disabled` = (0,4,0): beats
   the gradient (0,3,0) and every caller's utility classes (this sheet is unlayered). Semantic
   tokens only, so it flips with `.dark` on its own; the «المنصة» skin restates it with its own
   palette in app/styles/platform/kit.css. Text/link buttons keep antd's own disabled colour. */
.ant-btn.ant-btn:is(.ant-btn-primary, .ant-btn-default, .ant-btn-dashed):disabled,
.ant-btn.ant-btn:is(.ant-btn-primary, .ant-btn-default, .ant-btn-dashed):disabled:hover,
.ant-btn.ant-btn:is(.ant-btn-primary, .ant-btn-default, .ant-btn-dashed):disabled:active {
  border: 1px solid var(--color-border-strong);
  /* A flat neutral chip a step off the card in BOTH themes (sunkenStrong alone is a near-black
     hole under .dark); derived from the semantic tokens, so it still flips on its own. */
  background-color: color-mix(in oklab, var(--color-foreground-onBaseFaint) 14%, var(--color-background-raised));
  background-image: none;
  color: var(--color-foreground-onBaseMuted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.ant-btn:disabled::after { opacity: 0; }
html:not(.dark) .ant-btn-default:not(:disabled) {
  background-image: linear-gradient(90deg, #fff, #fdfdfd);
  border-color: #e2e6f3;
  color: #151e3a;
}
html:not(.dark) .ant-btn-default:not(:disabled):hover {
  background-image: linear-gradient(90deg, #f3f3f3, #eef1f8);
  border-color: #dbe1f0;
  color: #151e3a;
}
html.dark .ant-btn-default:not(:disabled) {
  background-image: none;
}

/* Layout pass: AI credits live with the other account-level status in the sidebar bottom
   (the page-header actions slot is now page-owned). Ring-only in the 72px rail. */
.main-sidebar-credits { display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.main-sidebar:not(.big-sidebar) .main-sidebar-credits .ltr-island,
.main-sidebar:not(.big-sidebar) .main-sidebar-credits .ai-credits-label { display: none; }
/* Credits + language/theme toggles share ONE line. It stays one line in both languages because
   the sidebar shows only the ring + "50 / 50" (the word "credits" lives in the tooltip and the
   header pill) and the language toggle is a two-letter code (EN / AR). */
/* Rhythm: the block already pads 20/16/16 — the row sits flush with the user row's edges (no
   extra inline inset), and 14px separates it from the user row so the two read as one stack. */
.main-sidebar-status-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0; margin-block-end: 14px; min-inline-size: 0; }
.main-sidebar-credits { min-inline-size: 0; flex: 1 1 auto; justify-content: flex-start; white-space: nowrap; padding-inline: 0; overflow: hidden; }
.main-sidebar-credits .ai-credits-label { display: none; }
.main-sidebar-prefs { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.main-sidebar-prefs .ant-btn, .main-sidebar-prefs button { padding-inline: 10px; block-size: 30px; min-inline-size: 38px; }
.main-sidebar:not(.big-sidebar) .main-sidebar-status-row { flex-direction: column; }
.main-sidebar:not(.big-sidebar) .main-sidebar-prefs { flex-direction: column; }
/* shell search in the page header — desktop only; mobile uses the top-bar icon */
/* shell search — lives in the sidebar above the project selector (hidden in the collapsed rail;
   the mobile top bar keeps its search icon) */
.main-sidebar-search { margin: 0 0 8px; }
.main-sidebar-search .ds-search { block-size: 38px; }
.main-sidebar:not(.big-sidebar) .main-sidebar-search { display: none; }

/* User dropdown — the subscription card was hard-coded cream (#fffcf4) with a white button,
   so it glowed inside the dark popup. Map it onto the dark surface tokens like the rest. */
html.dark .user-dropdown-inner-subscription-trial { background: var(--color-background-warningSubtle, var(--color-background-raised)); }
html.dark .user-dropdown-inner-subscription-trial h3,
html.dark .user-dropdown-inner-subscription-trial h4 { color: var(--color-foreground-onBase); }
html.dark .user-dropdown-inner-subscription-trial-button { background: var(--color-background-raised); color: var(--color-foreground-onBase); box-shadow: 0 0 0 1px var(--color-border-neutral); }
html.dark .user-dropdown-inner-subscription-trial-button:hover { background: var(--color-background-raisedHover); }

/* Collapsed rail: the parity sheet aligns the sidebar header to flex-start, which left the
   logo hugging the inline-start edge of the header box while every nav icon below it is
   centred — an 8.5px offset ((47px header - 30px mark) / 2). Centre it with the icons.
   `overflow:hidden` stays: it clips the wordmark during the collapse transition. */
.main-sidebar:not(.big-sidebar) .main-sidebar-header { align-items: center; }

/* ── Language / theme rows in the user menu (app/components/PrefToggles.tsx) ──
   The row itself is the ported dropship block (parity:507-515). Two things it does not
   carry: the list the row opens, and Arabic. Its `margin-left:8px` / `margin-left:auto`
   / `rotate(-90deg)` are PHYSICAL, so in RTL the label hugged the wrong edge, the value
   fled to the wrong side and the chevron pointed away from the list it opens. */
[dir="rtl"] .language-switcher-inner div,
[dir="rtl"] .theme-switcher-inner div { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .language-switcher-inner span,
[dir="rtl"] .theme-switcher-inner span { margin-left: 0; margin-right: auto; }
[dir="rtl"] .language-switcher-inner span svg,
[dir="rtl"] .theme-switcher-inner span svg { transform: rotate(90deg); }

/* The list opens BESIDE the row (logical, so it flips with direction) and is positioned by
   the `.x-switcher` wrapper the parity block already made `position: relative` for. */
.pref-switcher-list {
  position: absolute; inset-inline-start: calc(100% - 4px); top: -4px; z-index: 10;
  min-inline-size: 172px; margin: 0; padding: 4px; list-style: none;
  border-radius: 12px; background: var(--color-background-raised);
  border: 1px solid var(--color-border-neutral);
  box-shadow: 0 8px 24px rgb(21 30 58 / 12%);
}
.pref-switcher-option {
  display: flex; align-items: center; gap: 8px; inline-size: 100%;
  padding: 8px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; text-align: start; position: relative;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 20px;
  letter-spacing: -.3px; color: var(--color-foreground-onBase);
}
.pref-switcher-option-label { flex: 1 1 auto; }
/* Hover/pressed through the ::after scrim, never a background colour swap (docs/design/tokens.md). */
.pref-switcher-option::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.pref-switcher-option:hover::after { opacity: var(--state-opacity-hover, .06); }
.pref-switcher-option:active::after { opacity: var(--state-opacity-pressed, .1); }
.pref-switcher-option:focus-visible { outline: 2px solid var(--color-border-primary); outline-offset: -2px; }
/* The user menu is 300px wide and sits at the bottom of the sidebar; on a phone a flyout
   beside it would leave the viewport, so there it drops under the row instead. */
@media (max-width: 640px) {
  /* margin-inline-start, not margin-left: the indent has to follow the text direction. */
  .pref-switcher-list { position: static; inset-inline-start: auto; margin-block: 4px; margin-inline: 8px 0; box-shadow: none; }
}

/* ── Classic sidebar tidy-up (owner 2026-10-01: visual only — same items, order and groups) ──
   Section headings read as headings (muted onBase text, 700, a lucide chevron that turns from the
   reading direction to down), mega-row chevrons follow the same convention, a mega-row's children
   hang off one guide line at the parent icon's centre, and the active row is an in-column tint
   with a start-edge accent instead of the floating white card. Hover/pressed go through the
   ::after scrim (docs/design/tokens.md); colours are semantic tokens, so .dark needs no pairs. */
.group-dropdown-wrapper .sidebar-group-dropdown { padding-top: 12px; }
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header,
html.dark .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header {
  position: relative;
  justify-content: space-between;
  min-height: 32px;
  margin: 0 1px 2px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--color-foreground-onBaseMuted);
}
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:hover,
html.dark .group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:hover {
  color: var(--color-foreground-onBase) !important;
}
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header-text {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.2px;
}
/* parity:359 fills the old triangle's path on hover; the lucide chevron is a stroke. */
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header svg path { fill: none !important; }
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header .sidebar-dropdown-arrow { color: var(--color-foreground-onBaseFaint); }
.theme-light .group-dropdown-wrapper .sidebar-group-dropdown.open .sidebar-group-header,
html.dark .group-dropdown-wrapper .sidebar-group-dropdown.open .sidebar-group-header { color: var(--color-foreground-onBase); }

/* Mega-row chevron: sideways (toward the reading direction) while closed, down while open —
   the group headings' convention, instead of down/up. */
.main-sidebar .sidebar-link-arrow { color: var(--color-foreground-onBaseFaint); }
.main-sidebar .sidebar-link-arrow svg path { stroke: currentColor !important; }
[dir] .main-sidebar :is(.sidebar-dropdown-link-main, .sidebar-dropdown-link-main-selected) .sidebar-link-arrow svg { transform: rotate(-90deg); }
[dir="rtl"] .main-sidebar :is(.sidebar-dropdown-link-main, .sidebar-dropdown-link-main-selected) .sidebar-link-arrow svg { transform: rotate(90deg); }
[dir] .main-sidebar .sidebar-dropdown-link-main.rotated.rotated .sidebar-link-arrow svg { transform: none; }

/* Children: one indent, one guide line under the parent's icon centre (8px pad + 10px). */
.main-sidebar.big-sidebar .sidebar-mega-children {
  margin-inline-start: 19px;
  padding-inline-start: 7px;
  border-inline-start: 1px solid var(--color-border-neutral);
}
[dir] .main-sidebar .sidebar-mega-children .sidebar-link.sidebar-dropdown-link { margin: 1px 0; }
[dir] .main-sidebar .sidebar-mega-children .sidebar-link.sidebar-dropdown-link:last-child { margin-bottom: 4px; }

/* Rows: one height, one icon size, hover through the scrim. */
.main-sidebar.big-sidebar .sidebar-link { height: 36px; }
.main-sidebar .sidebar-link .sidebar-link_icon { width: 20px; height: 20px; }
.main-sidebar .sidebar-link::after,
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.main-sidebar .sidebar-link:hover::after,
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:hover::after { opacity: var(--state-opacity-hover, 0.06); }
.main-sidebar .sidebar-link:active::after { opacity: var(--state-opacity-pressed, 0.1); }
html .theme-light .main-sidebar .sidebar-link.sidebar-link:not(.active):hover { background: transparent; }
.main-sidebar .sidebar-link:focus-visible,
.group-dropdown-wrapper .sidebar-group-dropdown .sidebar-group-header:focus-visible {
  outline: 2px solid var(--color-border-primary);
  outline-offset: -2px;
}

/* Active: an in-column tint + a 3px start-edge accent (no card, no ring, no shadow). The
   `.sidebar-link` triple and the leading `html` out-rank parity:340 and the html.dark pills. */
html .theme-light .main-sidebar .sidebar-link.sidebar-link.sidebar-link:is(.active, .sidebar-dropdown-link-main-selected):not(.sidebar-dropdown-link-main) {
  color: var(--color-foreground-primary);
  background: var(--color-background-primarySubtle);
  box-shadow: inset 3px 0 0 var(--color-border-primary);
  font-weight: 600;
}
html[dir="rtl"] .theme-light .main-sidebar .sidebar-link.sidebar-link.sidebar-link:is(.active, .sidebar-dropdown-link-main-selected):not(.sidebar-dropdown-link-main) {
  box-shadow: inset -3px 0 0 var(--color-border-primary);
}
html .theme-light .main-sidebar .sidebar-link.sidebar-link:is(.active, .sidebar-dropdown-link-main-selected) .sidebar-link_icon {
  color: var(--color-foreground-primary);
}
/* ============================================================================
 * dashboard-ds.css — dropship-quality skin for the /app dashboard component kit.
 *
 * Imported in root.tsx immediately AFTER dropship-shell.css and left UNLAYERED
 * (same rationale as the gradient-button block): unlayered rules beat everything
 * in @layer antd, so the kit wins over AntD without !important.
 *
 * Contract (plan Decision 5 + Appendix B):
 *  - One :root block pins the dropship LIGHT hexes into --dst-* vars.
 *  - One html.dark block remaps every --dst-* to an existing semantic --color-*
 *    token from tokens.css (the ramps stay static; only semantics flip).
 *  - Every component rule reads vars only. No raw hex outside these two blocks.
 *  - Logical properties everywhere (padding-inline, margin-inline-start,
 *    text-align:start/end). All ported shadows are horizontally symmetric.
 *  - Each rule is anchored to a single .ds-* class (element descendants only
 *    where a semantic table needs them). No global bare element selectors.
 * ============================================================================ */

:root {
  /* surfaces + borders (dropship light) */
  --dst-surface: #fff;
  --dst-border: #f0f1f5;
  --dst-head-bg: #f7f8fc;
  --dst-head-fg: #707ba0;
  --dst-head-border: #e7e9f1;
  --dst-row-border: #f0f1f5;
  --dst-hover: #fafbff;
  --dst-chip-bg: #f9f9fc;
  --dst-avatar-bg: #f2f3f8;
  --dst-field-border: #e7e9f1;
  --dst-seg-border: #e2e6f3;
  --dst-track: #f2f3f8;

  /* foreground ramp (#151e3a → #a1aac8) */
  --dst-fg: #151e3a;
  --dst-fg-body: #434c69;
  --dst-fg-muted: #707ba0;
  --dst-fg-faint: #a1aac8;

  /* accents */
  --dst-primary: #225aea;
  --dst-on-primary: #fff;
  --dst-link: #225aea;
  --dst-pos: #16895a;
  --dst-neg: #d71313;
  --dst-warn: #f6b60e;

  /* soft-chip badges (bg + pinned text hex) */
  --dst-badge-gray-bg: #f2f3f8;   --dst-badge-gray-fg: #434c69;
  --dst-badge-blue-bg: #f2f6ff;   --dst-badge-blue-fg: #1448cb;
  --dst-badge-green-bg: #e6f6ef;  --dst-badge-green-fg: #16895a;
  --dst-badge-red-bg: #fdecec;    --dst-badge-red-fg: #d71313;
  --dst-badge-amber-bg: #fff5da;  --dst-badge-amber-fg: #92610a;

  /* alerts (bg / border / accent fg) */
  --dst-alert-info-bg: #f2f6ff;      --dst-alert-info-border: #d3e0ff;      --dst-alert-info-fg: #1448cb;
  --dst-alert-success-bg: #e6f6ef;   --dst-alert-success-border: #c5ead7;   --dst-alert-success-fg: #16895a;
  --dst-alert-warning-bg: #fff8e8;   --dst-alert-warning-border: #fce8b8;   --dst-alert-warning-fg: #92610a;
  --dst-alert-critical-bg: #fdecec;  --dst-alert-critical-border: #f8c9c9;  --dst-alert-critical-fg: #d71313;

  /* signature shadows (horizontally symmetric) */
  --dst-cta-shadow: inset 0 -1px 2px #1448cb7a, 0 0 0 1px #225aea29, 0 8px 16px -8px #225aeaa3, 0 4px 4px #0000000f;
  --dst-seg-active-shadow: 0 5px 10px -2px #191c210f, 0 2px 6px -2px #6a73851f;
}

html.dark {
  /* surfaces + borders → semantic tokens */
  --dst-surface: var(--color-background-raised);
  --dst-border: var(--color-border-neutral);
  --dst-head-bg: var(--color-background-sunken);
  --dst-head-fg: var(--color-foreground-onBaseMuted);
  --dst-head-border: var(--color-border-neutral);
  --dst-row-border: var(--color-border-neutral);
  --dst-hover: var(--color-background-raisedHover);
  --dst-chip-bg: var(--color-background-sunken);
  --dst-avatar-bg: var(--color-background-sunkenStrong);
  --dst-field-border: var(--color-border-neutral);
  --dst-seg-border: var(--color-border-strong);
  --dst-track: var(--color-background-sunkenStrong);

  /* foreground ramp */
  --dst-fg: var(--color-foreground-onBase);
  --dst-fg-body: var(--color-foreground-onSunken);
  --dst-fg-muted: var(--color-foreground-onBaseMuted);
  --dst-fg-faint: var(--color-foreground-onBaseFaint);

  /* accents */
  --dst-primary: var(--color-primary-base);
  --dst-on-primary: var(--color-foreground-onPrimary);
  --dst-link: #6c9bff;
  --dst-pos: var(--color-foreground-success);
  --dst-neg: var(--color-foreground-critical);
  --dst-warn: var(--color-background-warning);

  /* badges */
  --dst-badge-gray-bg: var(--color-background-sunkenStrong);   --dst-badge-gray-fg: var(--color-foreground-onBaseMuted);
  --dst-badge-blue-bg: var(--color-background-infoSubtle);     --dst-badge-blue-fg: var(--color-foreground-info);
  --dst-badge-green-bg: var(--color-background-successSubtle); --dst-badge-green-fg: var(--color-foreground-success);
  --dst-badge-red-bg: var(--color-background-criticalSubtle);  --dst-badge-red-fg: var(--color-foreground-critical);
  --dst-badge-amber-bg: var(--color-background-warningSubtle); --dst-badge-amber-fg: var(--color-foreground-warning);

  /* alerts */
  --dst-alert-info-bg: var(--color-background-infoSubtle);        --dst-alert-info-border: var(--color-border-info);         --dst-alert-info-fg: var(--color-foreground-info);
  --dst-alert-success-bg: var(--color-background-successSubtle);  --dst-alert-success-border: var(--color-border-success);   --dst-alert-success-fg: var(--color-foreground-success);
  --dst-alert-warning-bg: var(--color-background-warningSubtle);  --dst-alert-warning-border: var(--color-border-warning);   --dst-alert-warning-fg: var(--color-foreground-warning);
  --dst-alert-critical-bg: var(--color-background-criticalSubtle);--dst-alert-critical-border: var(--color-border-critical); --dst-alert-critical-fg: var(--color-foreground-critical);

  --dst-seg-active-shadow: var(--shadow-raised);
}

/* ---- DataTable -------------------------------------------------------------
 * markup: div.ds-table-wrap > table.ds-table(.ds-table--compact)               */
.ds-table-wrap {
  background: var(--dst-surface);
  border: 1px solid var(--dst-border);
  border-radius: 12px;
  overflow-x: auto;
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, "Noto Sans Arabic", sans-serif;
  font-size: 14px;
  color: var(--dst-fg-body);
}
.ds-table caption {
  text-align: start;
  color: var(--dst-fg-muted);
  font-size: 13px;
  padding-inline: 16px;
  padding-block: 10px;
}
.ds-table thead th {
  background: var(--dst-head-bg);
  color: var(--dst-head-fg);
  font-weight: 600;
  font-size: 13px;
  text-align: start;
  white-space: nowrap;
  border-block-end: 1px solid var(--dst-head-border);
  padding-block: 12px;
  padding-inline: 16px;
}
.ds-table tbody td {
  border-block-end: 1px solid var(--dst-row-border);
  vertical-align: middle;
  padding-block: 12px;
  padding-inline: 16px;
  block-size: 80px;
}
.ds-table tbody tr:last-child td { border-block-end: none; }
.ds-table tbody tr:hover td { background: var(--dst-hover); }
.ds-table tfoot td {
  border-block-start: 1px solid var(--dst-head-border);
  padding-block: 12px;
  padding-inline: 16px;
  font-weight: 600;
  color: var(--dst-fg);
}
.ds-table--compact tbody td { block-size: 52px; padding-block: 8px; }
/* numeric cells: end-aligned, tabular, LTR island keeps the sign/digits ordered */
.ds-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.ds-table td.is-num { color: var(--dst-fg); font-weight: 600; }
.ds-table .is-center { text-align: center; }
.ds-table .is-nowrap { white-space: nowrap; }

/* cell primitives */
.ds-cell-avatar {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 8px;
  background: var(--dst-avatar-bg);
  border: 1px solid var(--dst-border);
  object-fit: contain;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dst-fg-faint);
  overflow: hidden;
  flex: 0 0 auto;
}
.ds-cell-avatar img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ds-cell-primary {
  color: var(--dst-link);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}
.ds-cell-primary:hover { text-decoration: underline; }
.ds-cell-secondary { color: var(--dst-fg-muted); font-size: 12px; font-weight: 500; line-height: 20px; }
.ds-cell-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 6px;
  background: var(--dst-chip-bg);
  color: var(--dst-fg-body);
  padding-block: 4px;
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.ds-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-inline-size: 0; }

/* ---- PageToolbar -----------------------------------------------------------
 * div.ds-toolbar; actions cluster gets margin-inline-start:auto                */
.ds-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-end: 16px;
}
.ds-toolbar-search { flex: 1 1 260px; min-inline-size: 0; }
.ds-toolbar-filters { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ds-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}

.ds-search {
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 40px;
  border-radius: 12px;
  border: 1px solid var(--dst-field-border);
  background: var(--dst-surface);
  padding-block: 6px;
  padding-inline: 12px;
}
.ds-search-icon { display: inline-flex; flex: 0 0 auto; color: var(--dst-fg-faint); }
.ds-search-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 28px;
  font-size: 14px;
  color: var(--dst-fg);
}
.ds-search-input::placeholder { color: var(--dst-fg-faint); }

.ds-toolbar-total {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 40px;
  padding-inline: 14px;
  border: 1px solid var(--dst-head-border);
  border-radius: 10px;
  background: var(--dst-surface);
  font-size: 14px;
  white-space: nowrap;
}
.ds-toolbar-total-value { color: var(--dst-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-toolbar-total-value.is-positive { color: var(--dst-pos); }
.ds-toolbar-total-label { color: var(--dst-fg-muted); font-weight: 400; margin-inline-start: 3px; }

/* CTA in the actions slot: layer the signature dropship shadow on top of the
 * existing gradient (additive; box-shadow vs background-image). Light only. */
html:not(.dark) .ds-toolbar-actions .ant-btn-primary:not(:disabled) { box-shadow: var(--dst-cta-shadow); }

/* ---- Badge (soft chip) — patched ui.Badge renders span.ds-badge.ds-badge--{color} */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding-block: 3px;
  padding-inline: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.ds-badge--gray { background: var(--dst-badge-gray-bg); color: var(--dst-badge-gray-fg); }
.ds-badge--blue { background: var(--dst-badge-blue-bg); color: var(--dst-badge-blue-fg); }
.ds-badge--green { background: var(--dst-badge-green-bg); color: var(--dst-badge-green-fg); }
.ds-badge--red { background: var(--dst-badge-red-bg); color: var(--dst-badge-red-fg); }
.ds-badge--amber { background: var(--dst-badge-amber-bg); color: var(--dst-badge-amber-fg); }

/* ---- Alert ----------------------------------------------------------------- */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 12px;
  padding-inline: 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 20px;
}
.ds-alert--info { background: var(--dst-alert-info-bg); border-color: var(--dst-alert-info-border); }
.ds-alert--success { background: var(--dst-alert-success-bg); border-color: var(--dst-alert-success-border); }
.ds-alert--warning { background: var(--dst-alert-warning-bg); border-color: var(--dst-alert-warning-border); }
.ds-alert--critical { background: var(--dst-alert-critical-bg); border-color: var(--dst-alert-critical-border); }
.ds-alert-icon { flex: 0 0 auto; display: inline-flex; margin-block-start: 1px; }
.ds-alert--info .ds-alert-icon { color: var(--dst-alert-info-fg); }
.ds-alert--success .ds-alert-icon { color: var(--dst-alert-success-fg); }
.ds-alert--warning .ds-alert-icon { color: var(--dst-alert-warning-fg); }
.ds-alert--critical .ds-alert-icon { color: var(--dst-alert-critical-fg); }
.ds-alert-body { flex: 1 1 auto; min-inline-size: 0; color: var(--dst-fg-body); }
.ds-alert-title { font-weight: 600; color: var(--dst-fg); margin-block-end: 2px; }
.ds-alert-action { flex: 0 0 auto; margin-inline-start: auto; }

/* ---- Meter ----------------------------------------------------------------- */
.ds-meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dst-fg-muted); margin-block-end: 4px; }
.ds-meter-track {
  inline-size: 100%;
  block-size: 8px;
  border-radius: 999px;
  background: var(--dst-track);
  overflow: hidden;
}
.ds-meter--sm .ds-meter-track { block-size: 6px; }
.ds-meter-fill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--dst-primary);
  transition: width 0.3s ease;
}
.ds-meter--success .ds-meter-fill { background: var(--dst-pos); }
.ds-meter--warning .ds-meter-fill { background: var(--dst-warn); }
.ds-meter--critical .ds-meter-fill { background: var(--dst-neg); }

/* ---- RangeField (.ds-range) ------------------------------------------------
   The slider lives beside the Meter because it is the same picture read the other way: the same
   --dst-track rail, the same --dst-primary fill colour on the thumb. Native appearance is switched
   off so the control looks the same in every engine, which means BOTH vendor pseudo-element pairs
   have to be written out (-webkit-slider-runnable-track/-thumb and -moz-range-track/-thumb) — there
   is no shared selector for them and a missing pair silently falls back to the OS slider.

   The 44px target (WCAG 2.5.8) is built from padding, not from a fat thumb: an 18px content box +
   13px above and below = 44px of hittable input around a 6px rail. box-sizing: content-box is what
   keeps that arithmetic true under the project's border-box default.

   Focus: the same treatment as .ds-kebab:focus-visible above. Never focus { outline: none }. */
.ds-range {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: content-box;
  inline-size: 100%;
  block-size: 18px;
  padding-block: 13px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.ds-range::-webkit-slider-runnable-track {
  block-size: 6px;
  margin-block: 6px;
  border-radius: 999px;
  background: var(--dst-track);
}
.ds-range::-moz-range-track {
  block-size: 6px;
  border-radius: 999px;
  background: var(--dst-track);
}
.ds-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  border: none;
  border-radius: 999px;
  background: var(--dst-primary);
  /* (6 - 18) / 2 — centres the thumb on the rail instead of hanging it below. */
  margin-block-start: -6px;
}
.ds-range::-moz-range-thumb {
  inline-size: 18px;
  block-size: 18px;
  border: none;
  border-radius: 999px;
  background: var(--dst-primary);
}
.ds-range:focus-visible { outline: 2px solid var(--dst-primary); outline-offset: 1px; }
.ds-range:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- SegmentedTabs --------------------------------------------------------- */
.ds-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 40px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--dst-seg-border);
  background: var(--dst-chip-bg);
  max-inline-size: 100%;
  overflow-x: auto;
}
.ds-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 30px;
  padding-inline: 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dst-fg-body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.ds-seg-btn.active {
  background: var(--dst-surface);
  color: var(--dst-fg);
  box-shadow: var(--dst-seg-active-shadow);
}
.ds-seg-count { color: var(--dst-fg-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.ds-seg-btn.active .ds-seg-count { color: var(--dst-fg-muted); }

/* ---- Sliding segmented pill (components/useSlidingPill.ts) -------------------------------------
   The landing `.tab-list` motion for every segmented control: the active pill SLIDES to the new
   choice, and a faint scrim follows the pointer and settles back on the active option. Opt in
   with `.seg-anim` on the strip + <SegPills /> inside it. The scrim is currentColor at the
   kit's hover opacity (the ::after scrim rule), never a hover colour swap. */
.seg-anim { position: relative; isolation: isolate; }
.seg-anim > .seg-thumb,
.seg-anim > .seg-hover {
  /* Physical left/top: the hook translates by offsetLeft/offsetTop, which are physical in RTL too. */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.seg-anim > .seg-thumb { background: var(--dst-surface); box-shadow: var(--dst-seg-active-shadow); }
.seg-anim > .seg-hover { background: currentColor; }
.seg-anim > .seg-thumb[data-on] { opacity: 1; }
.seg-anim > .seg-hover[data-on] { opacity: var(--state-opacity-hover, .08); }
.seg-anim > :not(.seg-thumb):not(.seg-hover) { position: relative; z-index: 1; }
/* The thumb draws the active fill; the option itself stays transparent. */
.seg-anim > .ds-seg-btn.active { background: transparent; box-shadow: none; }
.seg-anim[data-seg-ready] > .seg-thumb,
.seg-anim[data-seg-ready] > .seg-hover {
  transition:
    transform .35s cubic-bezier(.215, .61, .355, 1),
    width .35s cubic-bezier(.215, .61, .355, 1),
    height .35s cubic-bezier(.215, .61, .355, 1),
    opacity .2s ease;
}
.seg-anim[data-seg-ready] > .ds-seg-btn { transition: color .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .seg-anim[data-seg-ready] > .seg-thumb,
  .seg-anim[data-seg-ready] > .seg-hover { transition: none; }
}
/* Custom strips (the billing-cycle toggles, the analyzer tabs) mark options `.seg-item`. */
.seg-anim > .seg-thumb.seg-thumb--primary { background: var(--color-surface-primary); box-shadow: none; }

/* The billing-cycle toggle moved to app/styles/auth-motion.css (.cycle-seg, 2026-10-04). */
.seg-anim > .seg-thumb.seg-thumb--raised { border-radius: 8px; }
.seg-anim[data-seg-ready] > .seg-item { transition: color .35s ease; }

/* ---- RollingPrice (components/RollingPrice.tsx) — the /pricing odometer on app pages ----------
   Same rules as landing.css's `.dsl [data-odometer-*]`, which only apply inside the landing shell. */
.app-odometer[data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.app-odometer [data-odometer-part=mask],
.app-odometer [data-odometer-part=static] { display: inline-block; overflow: clip; padding: .05em; margin: -.05em; }
.app-odometer [data-odometer-part=static] { white-space: pre; }
.app-odometer [data-odometer-part=roller] { display: block; white-space: pre; text-align: center; will-change: transform; }

/* ---- RowActions kebab trigger (plain button, NOT ant-btn) ------------------ */
.ds-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dst-fg-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ds-kebab:hover { background: var(--dst-hover); color: var(--dst-fg); }
.ds-kebab:focus-visible { outline: 2px solid var(--dst-primary); outline-offset: 1px; }

/* ---- EmptyState ------------------------------------------------------------ */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 48px;
  padding-inline: 24px;
  text-align: center;
}
.ds-empty-icon { color: var(--dst-fg-faint); margin-block-end: 4px; }
.ds-empty-title { color: var(--dst-fg); font-size: 14px; font-weight: 600; }
.ds-empty-hint { color: var(--dst-fg-muted); font-size: 13px; max-inline-size: 42ch; }
.ds-empty-action { margin-block-start: 8px; }

/* ---- Stats grid modifiers (base .ds-stats/.ds-stat live in dropship-shell.css) */
.ds-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-stats--4 .ds-stat { border-inline-start: 1px solid var(--dst-seg-border); }
.ds-stats--4 .ds-stat:nth-child(4n + 1) { border-inline-start: none; }
.ds-stats--4 .ds-stat:nth-child(n + 5) { border-block-start: 1px solid var(--dst-seg-border); }
.ds-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-stats--3 .ds-stat { border-inline-start: 1px solid var(--dst-seg-border); }
.ds-stats--3 .ds-stat:nth-child(3n + 1) { border-inline-start: none; }
.ds-stats--3 .ds-stat:nth-child(n + 4) { border-block-start: 1px solid var(--dst-seg-border); }
@media (max-width: 640px) {
  .ds-stats--4, .ds-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stats--4 .ds-stat, .ds-stats--3 .ds-stat { border-inline-start: 1px solid var(--dst-seg-border); border-block-start: 1px solid var(--dst-seg-border); }
  .ds-stats--4 .ds-stat:nth-child(-n + 2), .ds-stats--3 .ds-stat:nth-child(-n + 2) { border-block-start: none; }
  .ds-stats--4 .ds-stat:nth-child(odd), .ds-stats--3 .ds-stat:nth-child(odd) { border-inline-start: none; }
}

/* ==== Layout pass (structure only — no new colours/type; reads --dst-* vars) ==== */

/* Section header: title/desc on the start side, section-scoped actions at the end */
.ds-section { margin-block-end: 24px; }
.ds-section:last-child { margin-block-end: 0; }
.ds-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-section-head-text { min-inline-size: 0; }
.ds-section-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* `ruled` (0114, settings redesign) — the dropship plain heading sitting on a hairline. Token only
   (--dst-head-border is the same var .ds-form-actions rules with, defined light and dark), so the
   rule flips with the theme and carries no colour of its own. */
.ds-section-head--ruled { padding-block-end: 12px; border-block-end: 1px solid var(--dst-head-border); margin-block-end: 16px; }
.ds-form-legend--ruled { padding-block-end: 12px; border-block-end: 1px solid var(--dst-head-border); }

/* PageNotices: the single alert region under the page header */
.ds-notices { display: flex; flex-direction: column; gap: 8px; margin-block-end: 16px; }
.ds-notices-more > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--dst-fg-muted); padding-block: 4px; list-style: none; }
.ds-notices-more > summary::-webkit-details-marker { display: none; }
/* ▸ is Bidi_Mirrored=No, so unlike the crumb separator it is NOT auto-mirrored and needs the
   explicit flip `.dir-flip` gives glyphs elsewhere — as a rule, since a pseudo-element cannot
   carry a class. The gap moved from the content string to margin-inline-end so scaleX(-1)
   cannot swallow it. ▾ is symmetric, so the flip is a no-op on the open state. */
.ds-notices-more > summary::before { content: "▸"; display: inline-block; margin-inline-end: 0.35em; }
.ds-notices-more[open] > summary::before { content: "▾"; }
[dir="rtl"] .ds-notices-more > summary::before { transform: scaleX(-1); }
.ds-notices-more-body { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }

/* StatGrid: 2-col + compact variants, warning tone */
.ds-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-stats--2 .ds-stat { border-inline-start: 1px solid var(--dst-seg-border); }
.ds-stats--2 .ds-stat:nth-child(2n + 1) { border-inline-start: none; }
.ds-stats--2 .ds-stat:nth-child(n + 3) { border-block-start: 1px solid var(--dst-seg-border); }
.ds-stats--compact .ds-stat { min-height: 64px; padding: 10px 14px; gap: 4px; }
.ds-stats--compact .ds-stat-count { font-size: 18px; line-height: 22px; }
.ds-stat-count.warning { color: var(--color-foreground-warning); }
@media (max-width: 768px) {
  .ds-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stats--4 .ds-stat { border-inline-start: 1px solid var(--dst-seg-border); border-block-start: 1px solid var(--dst-seg-border); }
  .ds-stats--4 .ds-stat:nth-child(-n + 2) { border-block-start: none; }
  .ds-stats--4 .ds-stat:nth-child(odd) { border-inline-start: none; }
}

/* PageToolbar: utilities cluster + collapsible filters below md */
.ds-toolbar-utilities { display: inline-flex; align-items: center; gap: 8px; }
.ds-toolbar-filter-toggle { display: none; }
.ds-toolbar-filter-count { margin-inline-start: 4px; font-variant-numeric: tabular-nums; color: var(--dst-fg-muted); }
@media (max-width: 768px) {
  .ds-toolbar-search { flex-basis: 100%; }
  .ds-toolbar-filter-toggle { display: inline-flex; }
  .ds-toolbar.is-collapsible .ds-toolbar-filters { display: none; }
  .ds-toolbar.is-collapsible.is-filters-open .ds-toolbar-filters { display: flex; flex-basis: 100%; }
  .ds-toolbar.is-collapsible.is-filters-open .ds-toolbar-filters > * { flex: 1 1 45%; }
  .ds-toolbar-actions { margin-inline-start: 0; flex-basis: 100%; justify-content: space-between; }
}

/* FilterBar: labelled filter form (≥4 filters / date ranges) — same band as the toolbar */
.ds-filterbar { align-items: flex-end; }
.ds-filterbar .ds-toolbar-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); inline-size: 100%; gap: 12px; }
.ds-filterbar .ds-filter-field label { margin-block-end: 4px; display: block; font-size: 12px; font-weight: 600; color: var(--dst-fg-muted); }
.ds-filterbar .ds-filterbar-actions { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 768px) {
  .ds-filterbar.is-collapsible:not(.is-filters-open) .ds-toolbar-filters,
  .ds-filterbar.is-collapsible:not(.is-filters-open) .ds-filterbar-actions { display: none; }
}

/* Pagination */
.ds-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-block: 12px; }
.ds-pagination-info { font-size: 13px; color: var(--dst-fg-muted); font-variant-numeric: tabular-nums; }
.ds-pagination-btns { display: inline-flex; gap: 8px; }

/* SegmentedTabs: horizontal scroll instead of wrapping on small screens */
@media (max-width: 768px) {
  .ds-seg { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-inline-size: 100%; }
  .ds-seg::-webkit-scrollbar { display: none; }
  .ds-seg-btn { white-space: nowrap; }
}

/* DataTable additions: priority columns, sort control, negative money, sticky primary, stacked mobile rows */
@media (max-width: 1100px) { .ds-table .ds-col-p3 { display: none; } }
@media (max-width: 768px) { .ds-table .ds-col-p2 { display: none; } }
.ds-sort-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ds-sort-icon { color: var(--dst-fg-faint); }
.is-sorted .ds-sort-icon { color: var(--dst-fg); }
.ds-sort-icon.is-asc { transform: rotate(180deg); }
.ds-table td.is-negative, .ds-table td.is-negative .ltr-island { color: var(--dst-neg); }
.ds-table td.is-actions { padding-inline: 8px; }
.ds-table-wrap .ds-pagination { padding-inline: 16px; border-block-start: 1px solid var(--dst-row-border); }
/* 0190 (roll-ups council #18) — DataTable `expand`: a ≥44px disclosure button + a full-width detail row */
.ds-expand-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 10px; border: 1px solid var(--dst-border); border-radius: 10px; background: var(--dst-surface); color: var(--dst-link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ds-expand-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.ds-expand-btn:hover::after { opacity: 0.06; }
.ds-expand-btn:active::after { opacity: 0.12; }
.ds-expand-icon { transition: transform 150ms ease; }
.ds-expand-icon.is-open { transform: rotate(180deg); }
.ds-table tbody tr.is-expanded td { border-block-end-color: transparent; }
.ds-table tbody tr.ds-table-detail td { block-size: auto; padding-block: 0 16px; background: var(--dst-head-bg); }
.ds-table tbody tr.ds-table-detail:hover td { background: var(--dst-head-bg); }
@media (prefers-reduced-motion: reduce) { .ds-expand-icon { transition: none; } }
@media (max-width: 640px) {
  .ds-table-wrap--stack .ds-table thead { display: none; }
  .ds-table-wrap--stack .ds-table tbody tr { display: block; padding: 12px 16px; border-block-end: 1px solid var(--dst-row-border); }
  .ds-table-wrap--stack .ds-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; block-size: auto; padding: 4px 0; border: none; text-align: end; }
  .ds-table-wrap--stack .ds-table tbody td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--dst-fg-muted); text-align: start; }
  .ds-table-wrap--stack .ds-table tbody td.is-primary { font-weight: 600; }
  .ds-table-wrap--stack .ds-table tbody td.is-actions { justify-content: flex-end; }
  .ds-table-wrap--stack .ds-table tbody td.ds-col-p2 { display: flex; }
  .ds-table-wrap--stack .ds-table tbody td.ds-expand-cell { justify-content: flex-start; }
  .ds-table-wrap--stack .ds-table tbody tr.ds-table-detail { padding-block-start: 0; }
  .ds-table-wrap--stack .ds-table tbody tr.ds-table-detail td { display: block; text-align: start; padding: 0; }
}

/* FormSection / FormActions */
.ds-form-section { border: none; padding: 0; margin: 0 0 24px; min-inline-size: 0; }
.ds-form-section:last-of-type { margin-block-end: 0; }
.ds-form-legend { display: flex; flex-direction: column; gap: 2px; padding: 0; margin-block-end: 12px; inline-size: 100%; }
.ds-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ds-form-actions { margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--dst-head-border); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ds-form-actions-note { margin-inline-end: auto; font-size: 13px; font-weight: 600; color: var(--dst-pos); }
@media screen {
  .ds-form-actions.is-sticky { position: sticky; inset-block-end: 0; z-index: 2; background: var(--dst-page-bg, var(--dst-surface)); padding-block: 12px 16px; margin-inline: -32px; padding-inline: 32px; }
  @media (max-width: 768px) {
    .ds-form-actions.is-sticky { margin-inline: -16px; padding-inline: 16px; }
    .ds-form-actions.is-sticky .ant-btn { flex: 1 1 auto; }
  }
}

/* DetailHeader */
.ds-detail-header { margin-block-end: 20px; }
.ds-detail-header .ds-page-header { margin-bottom: 16px; }
.ds-detail-header .ds-stats { margin-bottom: 0; }
.ds-page-header-text { min-inline-size: 0; }
.ds-page-header-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-page-header-title-row .ds-page-header-title { margin: 0; }
@media (max-width: 768px) {
  .ds-page-header-actions { inline-size: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* Page actions in the shell header */
.ds-page-actions-slot { display: contents; }
.ds-page-actions { display: inline-flex; align-items: center; gap: 8px; }
.ds-page-actions-utilities { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 768px) { .ds-page-actions-utilities { display: none; } }

/* CardGrid / EntityCard */
.ds-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ds-card-min, 280px), 100%), 1fr)); gap: 16px; }
/* A short, fixed set (the plan cards) fills the row: empty tracks collapse instead of leaving a gap. */
.ds-card-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--ds-card-min, 280px), 100%), 1fr)); }
.ds-entity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ds-entity-head-text { min-inline-size: 0; }
.ds-entity-head-end { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ds-entity-title { font-size: 15px; font-weight: 600; color: var(--dst-fg); text-decoration: none; overflow-wrap: anywhere; }
a.ds-entity-title:hover { text-decoration: underline; }
.ds-entity-subtitle { font-size: 13px; color: var(--dst-fg-muted); margin-block-start: 2px; }
.ds-entity-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 12px 0 0; font-size: 13px; }
.ds-entity-meta-item { display: flex; justify-content: space-between; gap: 8px; min-inline-size: 0; }
.ds-entity-meta dt { color: var(--dst-fg-muted); }
.ds-entity-meta dd { margin: 0; font-weight: 500; color: var(--dst-fg); font-variant-numeric: tabular-nums; }
.ds-entity-figure { margin-block-start: 12px; font-size: 18px; font-weight: 600; color: var(--dst-fg); letter-spacing: -0.3px; }
.ds-entity-footer { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--dst-row-border); }
/* Cover image on an EntityCard (render projects, 0127). A fixed 16/9 box means a grid of cards
   keeps one baseline whatever the render's real aspect ratio is, and object-fit: cover crops rather
   than letterboxes — the card is a thumbnail, the workspace is where the true framing is shown.
   --dst-avatar-bg is the file's existing sunken surface (the placeholder behind a missing avatar),
   so an image that has not decoded yet leaves a themed well, not a hole. */
.ds-entity-media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dst-avatar-bg);
  margin-block-end: 12px;
}
.ds-entity-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* Page body width per archetype (set by the shell from handle.page.archetype) */
.page-body { min-inline-size: 0; }
.page-body--detail { max-inline-size: 1200px; margin-inline: auto; }
.page-body--form { max-inline-size: 48rem; margin-inline: auto; }

/* Breadcrumbs inside the shell page header */
.page-header_crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--dst-fg-muted); margin-block-end: 2px; }
.page-header_crumbs a { color: inherit; text-decoration: none; }
.page-header_crumbs a:hover { text-decoration: underline; }
.page-header_crumbs .crumb { display: inline-flex; align-items: center; gap: 4px; }
/* U+203A/U+2039 are Bidi_Mirrored characters: at an RTL embedding level the engine already
   paints the mirrored glyph, so authoring "‹" for Arabic flipped it twice and the separator
   ended up pointing back at the parent crumb. `direction: ltr` pins the pseudo-element to an
   even embedding level, which switches auto-mirroring off — so the glyph below is the glyph
   that renders, and the [dir="rtl"] swap is the only thing choosing a direction. */
.page-header_crumbs .crumb-sep::before { content: "›"; color: var(--dst-fg-faint); direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .page-header_crumbs .crumb-sep::before { content: "‹"; }
.page-header_title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-header_project { margin-inline-start: 6px; }
@media (max-width: 768px) {
  .page-header { flex-wrap: wrap; }
  .page-header_actions { inline-size: 100%; justify-content: flex-end; }
}

/* Visual pass — long money values in a 6-up StatGrid overlapped their neighbours (dashboard):
   let a stat shrink, wrap its value, and step the type down for the dense grids. */
.ds-stat { min-width: 0; }
.ds-stat-count { overflow-wrap: normal; word-break: keep-all; }
.ds-stats:not(.ds-stats--4):not(.ds-stats--3):not(.ds-stats--2) .ds-stat-count { font-size: clamp(14px, 1.35vw, 20px); line-height: 1.25; letter-spacing: -0.01em; }

/* Visual pass — a tab strip that is allowed to wrap (KB categories) instead of scrolling
   off the edge with its last label clipped. */
.ds-seg.ds-seg--wrap { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
@media (max-width: 768px) { .ds-seg.ds-seg--wrap { flex-wrap: wrap; overflow: visible; } }
/* A wrapped strip must also GROW — the base .ds-seg has a fixed block size for the pill look. */
.ds-seg.ds-seg--wrap { height: auto; min-height: 0; block-size: auto; }
.ds-seg.ds-seg--wrap .ds-seg-btn { flex: 0 0 auto; }
/* 0188 (book-catalog council #17) — the catalog picker's group strip: six short pills that wrap inside a
   560px dialog (never scroll «مرافق» off-screen), and a 40px hit area on touch. */
@media (pointer: coarse) { .ds-seg.catalog-sector-strip .ds-seg-btn { min-block-size: 40px; } }

/* ChoicePicker — a searchable list of choices inside the create dialog skin. Rows are plain
   buttons with the row divider + hover scrim the tables use, so the picker looks like the
   rest of the product rather than a new component. */
.ds-choice-list { max-block-size: min(60vh, 520px); overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.ds-choice-group { margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-foreground-onBaseFaint); }
.ds-choice { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 8px 10px; border-radius: 8px; text-align: start; background: transparent; border: 0; cursor: pointer; position: relative; }
.ds-choice + .ds-choice { border-block-start: 1px solid var(--color-border-neutralFaint, var(--dst-seg-border)); border-radius: 0 0 8px 8px; }
.ds-choice::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ds-choice:hover::after { opacity: var(--state-opacity-hover, .06); }
.ds-choice:focus-visible { outline: 2px solid var(--color-border-primary); outline-offset: -2px; }
.ds-choice-icon { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; background: var(--dst-chip-bg); color: var(--color-foreground-onBaseMuted); flex-shrink: 0; }

/* 0088 — estimation mode cards: hover/pressed through the ::after scrim, never a colour swap */
.ds-card-link { position: relative; overflow: hidden; }
.ds-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ds-card-link:hover::after { opacity: var(--state-opacity-hover, .06); }
.ds-card-link:active::after { opacity: var(--state-opacity-pressed, .1); }
.ds-card-link:focus-visible { outline: 2px solid var(--color-border-focus, currentColor); outline-offset: 2px; }

/* Settings shell nav (app/routes/app/settings/layout.tsx) — the same ::after scrim the
   choice rows and estimation cards use, so a settings row hovers like the rest of the
   product. Active state is a colour PAIR (bg-surface-primary-subtle + text-fg-primary)
   set in the markup; this class only carries interactivity. */
.ds-settings-link { position: relative; overflow: hidden; }
.ds-settings-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ds-settings-link:hover::after { opacity: var(--state-opacity-hover, .06); }
.ds-settings-link:active::after { opacity: var(--state-opacity-pressed, .1); }
.ds-settings-link:focus-visible { outline: 2px solid var(--color-border-focus, currentColor); outline-offset: -2px; }

/* ---- Beta strip (0115) ------------------------------------------------------
   The «النسخة الأولية» bar is the FIRST thing in the viewport: a full-width band above both
   shells' sidebars and top bars, sticky so it stays at the top while the page scrolls. Both
   sidebars are pinned to the viewport (the module shell's is position:fixed, the settings
   shell's sticky + viewport-tall), so while the strip is shown the shell carries
   `data-beta-strip` and those columns start below it: `--beta-strip-h` is the strip's measured
   height (BetaNotice.tsx keeps it current; 49px is the one-line desktop height the server
   renders with — the 32px small kit button + 8px padding each side + the 1px bottom border —
   so the first paint is already right on desktop and only a wrapped mobile strip is corrected
   after hydration). Tokens only — the info-alert vars flip with the theme. */
:root { --beta-strip-h: 49px; }
.beta-strip {
  position: sticky;
  top: 0;
  /* Below the mobile nav scrim (39) and the sidebar (40): neither overlaps the strip — the sidebar
     starts under it — and the scrim must dim the strip while the drawer is modal. Above the
     settings top bar (10) and the sticky form bar. antd overlays are 1000+. */
  z-index: 38;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-block: 8px;
  padding-inline: 16px;
  background: var(--dst-alert-info-bg);
  border-block-end: 1px solid var(--dst-alert-info-border);
  color: var(--dst-fg-body);
  font-size: 14px;
  line-height: 20px;
}
.beta-strip-icon { flex: 0 0 auto; display: inline-flex; color: var(--dst-alert-info-fg); }
.beta-strip-text { flex: 1 1 280px; min-inline-size: 0; }
.beta-strip-title { font-weight: 600; color: var(--dst-fg); margin-inline-end: 6px; }
.beta-strip-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
/* The CTA is a link, styled as one: the info foreground, no borrowed button classes (antd's
   .ant-btn styles are emitted per rendered component and never reached a bare <a>). */
.beta-strip-cta { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 8px; border-radius: 8px; color: var(--dst-alert-info-fg); font-weight: 600; text-decoration: none; white-space: nowrap; }
.beta-strip-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The pinned columns yield the strip's height while it is shown. */
[data-beta-strip] .main-sidebar { top: var(--beta-strip-h); min-height: calc(100vh - var(--beta-strip-h)); }
/* The expanded sidebar carries an explicit height:100vh (dropship-shell.css .main-sidebar.big-sidebar),
   which min-height cannot shorten — without this its pinned bottom block (user menu, billing
   button) would sit exactly one strip below the fold, unreachable on a fixed, overflow-hidden box. */
[data-beta-strip] .main-sidebar.big-sidebar { height: calc(100vh - var(--beta-strip-h)); max-height: calc(100vh - var(--beta-strip-h)); }
@media only screen and (max-width: 768px) {
  [data-beta-strip] .main-sidebar.opened-sidebar { height: calc(100dvh - var(--beta-strip-h)) !important; }
}
[data-beta-strip] .settings-shell-aside { top: var(--beta-strip-h); height: calc(100dvh - var(--beta-strip-h)); }
[data-beta-strip] .settings-shell-topbar { top: var(--beta-strip-h); }
/* Scrolling something into view (focus, a #hash target) must clear the sticky strip rather than
   land under it. Scoped to the shells that render the strip; :has() is a progressive enhancement. */
html:has([data-beta-strip]) { scroll-padding-block-start: var(--beta-strip-h); }
/* The 4-second «denied» toast is viewport-fixed at 1rem; it hangs below the strip, not over it. */
[data-beta-strip] .denied-toast { top: calc(var(--beta-strip-h) + 1rem); }

/* Demo instead of Trial — the «demo account» strip (app/components/DemoBar.tsx). Same box and same
   --beta-strip-h as the beta strip it replaces; only the paint differs.
   2026-10-01 (owner: «more beautiful») — a refined warm strip instead of a flat amber slab: the
   warning-SUBTLE surface with a soft sheen toward the raised surface and one thin warning hairline,
   a small «تجريبي» pill (the warning pair, eye icon), the title semibold on fg and the body muted and
   truncated, the account-type switcher as ONE segmented track (the current type raised on the
   raised surface with the raised shadow) and «اشترك الآن» as the primary pair with a direction-aware
   arrow. Hover/pressed = the ::after scrim (never a colour swap); semantic tokens only, so `.dark`
   flips every pair with no second rule. 48px tall on desktop (7px + 34px + 7px), title-only and a
   scrolling switcher at ≤ 768px. */
.beta-strip.demo-strip {
  flex-wrap: nowrap;
  gap: 8px 12px;
  padding-block: 7px;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--color-surface-raised) 55%, transparent), transparent 70%),
    var(--color-surface-warning-subtle);
  border-block-end: 1px solid color-mix(in oklab, var(--color-line-warning) 45%, transparent);
  color: var(--color-fg);
}
.demo-strip-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 24px;
  padding-inline: 8px;
  border-radius: 999px;
  background: var(--color-surface-warning);
  color: var(--color-fg-on-warning);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.demo-strip-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.demo-strip-title { font-weight: 600; color: var(--color-fg); margin-inline-end: 6px; }
.demo-strip-body { color: var(--color-fg-muted); }
.demo-strip-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; min-inline-size: 0; }
/* One rounded track; each type a segment. The current one is raised (surface + shadow), the rest
   are muted ink on the track. */
.demo-strip-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--color-surface-sunken-strong) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-line-warning) 25%, transparent);
  min-inline-size: 0;
}
.demo-strip-type,
.demo-strip-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
}
.demo-strip-type {
  min-block-size: 30px;
  padding-inline: 10px;
  border-radius: 8px;
  color: var(--color-fg-muted);
  font-size: 13px;
}
.demo-strip-type[aria-current="page"] {
  background: var(--color-surface-raised);
  color: var(--color-fg);
  box-shadow: var(--shadow-raised), 0 0 0 1px color-mix(in oklab, var(--color-line-strong) 35%, transparent);
}
.demo-strip-cta {
  min-block-size: 34px;
  padding-inline: 14px 12px;
  border-radius: 10px;
  background: var(--color-surface-primary);
  color: var(--color-fg-on-primary);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
}
.demo-strip-cta-arrow { display: inline-flex; }
[dir="rtl"] .demo-strip-cta-arrow { transform: scaleX(-1); }
.demo-strip-type::after,
.demo-strip-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.demo-strip-type:hover::after,
.demo-strip-cta:hover::after { opacity: var(--state-opacity-hover, .06); }
.demo-strip-type:active::after,
.demo-strip-cta:active::after { opacity: var(--state-opacity-pressed, .1); }
.demo-strip-cta { transition: transform .15s, box-shadow .15s; }
.demo-strip-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-overlay); }
.demo-strip-cta:hover .demo-strip-cta-arrow { transform: translateX(2px); }
[dir="rtl"] .demo-strip-cta:hover .demo-strip-cta-arrow { transform: scaleX(-1) translateX(2px); }
.demo-strip-cta-arrow { transition: transform .15s; }
.demo-strip-type:focus-visible,
.demo-strip-cta:focus-visible { outline: 2px solid var(--color-border-focus, var(--color-fg-warning)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .demo-strip-cta,
  .demo-strip-cta-arrow,
  .demo-strip-type::after,
  .demo-strip-cta::after { transition: none; }
  .demo-strip-cta:hover { transform: none; }
  .demo-strip-cta:hover .demo-strip-cta-arrow { transform: none; }
  [dir="rtl"] .demo-strip-cta:hover .demo-strip-cta-arrow { transform: scaleX(-1); }
}
/* Phones: the title alone on the first line, then the switcher (scrolling sideways, never wrapping)
   and the CTA on a second line. */
@media only screen and (max-width: 768px) {
  .beta-strip.demo-strip { flex-wrap: wrap; row-gap: 6px; }
  .demo-strip-body { display: none; }
  .demo-strip .demo-strip-actions { margin-inline-start: 0; inline-size: 100%; justify-content: space-between; }
  .demo-strip-switch { overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
  .demo-strip-switch::-webkit-scrollbar { display: none; }
  .demo-strip-cta { flex: 0 0 auto; }
}

/* ---- Brain v2 dock (0132) ----------------------------------------------------
   Council #19 — the dock is NOT the kit Drawer. The Drawer is a MODAL Radix Dialog: an overlay, a
   focus trap, the page behind it inert. A panel whose whole purpose is to read the page it sits on
   must not blank that page, so the dock is its own fixed panel with no overlay: the page stays
   scrollable and clickable while it is open. Logical properties only — `inset-inline-end` is the
   left edge in Arabic RTL and the right edge in English, with no locale branch and no `[dir]` fork.
   z-40: above the page, level with the fixed sidebar (which it never overlaps — opposite inline
   edge), below the kit's dialogs at z-50 so a Modal or a Drawer is never trapped behind it.
   The panel's own colours are semantic utilities on the element (bg-surface / border-line /
   text-fg); nothing here paints, so dark mode needs no second rule.

   Council R30 (2026-09-25) — three widths, three shapes:
     >=1280px   the DOCKED COLUMN (380px): the content column yields its width, never covered;
     640–1279px a 320px OVERLAY — narrowing a 1024px page by 380px left a 400px content column —
                with «تثبيت بجانب الصفحة» (html[data-brain-dock-pin="on"]) to dock it anyway;
     <640px     the BOTTOM SHEET, sized in dvh so the mobile URL bar never pushes the composer
                off-screen. Post-build council #27: the on-screen keyboard is handled HERE, not by a
                global `interactive-widget=resizes-content` (which lifted every form's sticky action
                bar on Android): while the sheet is open on a coarse pointer the dock tracks the
                visual viewport and sets --brain-dock-kb, the height the keyboard covers.
   Post-build council #26: the panel clips its own content (overflow hidden), and the sheet never
   shrinks below --brain-dock-sheet-min = handle + header + footer + 120px of answer, measured by the
   dock — a flat 28dvh left the pinned answer 0px and pushed the composer off-screen. */
.brain-dock {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  inline-size: 380px;
  max-inline-size: 90vw;
  overflow: hidden;
  /* `clip`, not a scroll container: nothing (a stray scrollIntoView, a focused field) can scroll the
     panel and slide its header out of view. `hidden` above is the fallback for older engines. */
  overflow: clip;
}
/* A CLOSED dock stays in the DOM so the launcher's aria-controls resolves, but must not render,
   focus or hit-test. Tailwind's preflight already does this !important; keeping it here means the
   rule holds wherever this file is read without preflight. */
.brain-dock[hidden] { display: none; }
/* The sticky beta strip owns the top of the viewport; the dock hangs below it, like the sidebar. */
[data-beta-strip] .brain-dock { inset-block-start: var(--beta-strip-h); }
.brain-dock-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline: 12px;
  padding-block: 10px;
  border-block-end: 1px solid;
}
/* R30 — the header's rows: every name is truncated INSIDE its own element (with the full text in
   `title`), and every control sits OUTSIDE the truncating element so an ellipsis never eats it. */
.brain-dock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}
.brain-dock-row > .brain-dock-trunc {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brain-dock-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  /* A new answer is scrolled to its START; keep that start clear of the body's own edge. */
  scroll-padding-block-start: 12px;
}
.brain-dock-foot { flex: 0 0 auto; padding: 12px; border-block-start: 1px solid; }
/* The sheet's drag handle is a real control below 640px and nothing at all above it: a full-height
   docked column has no height to drag. It is a `role="slider"` (R30): click / Enter cycles
   60 → 92 → 28dvh, ArrowUp / ArrowDown move it 8dvh. */
.brain-dock-handle { display: none; }
.brain-dock-handle-grip {
  display: block;
  inline-size: 40px;
  block-size: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
}
/* «تثبيت بجانب الصفحة» only means something where the dock is an overlay (640–1279px). */
.brain-dock .brain-dock-pin { display: none; }
/* Post-build council #36 — the starter chips WRAP: an antd button is one nowrap line of fixed
   height, and the longest chip is wider than a 320px sheet's body. */
.brain-dock .brain-dock-chip {
  block-size: auto;
  min-block-size: 32px;
  max-inline-size: 100%;
  padding-block: 4px;
  white-space: normal;
  text-align: start;
  line-height: 1.5;
}
.brain-dock .brain-dock-chip > span { white-space: normal; overflow-wrap: anywhere; }
/* R30 — touch targets: on a coarse pointer every header control (picker trigger, new thread, pin,
   close) is at least 44x44, whatever the antd control height is. */
@media (pointer: coarse) {
  .brain-dock .brain-dock-hit {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}
/* The ONE launcher (council #19), for every account type: 44x44 = the touch-target floor, a
   logical inset so it flips with the locale, and the same z-40 ceiling as the panel. Unlayered, so
   it overrides the antd Button's themed 40px control box without !important. */
.brain-dock-launcher {
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 24px;
  z-index: 40;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Post-build council #27 — on a touch device the launcher steps aside while a text field has focus:
   in RTL it sat on the inline end of the very field being typed into, above the keyboard. */
@media (pointer: coarse) {
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="range"]), textarea, select, [contenteditable="true"]):focus) .brain-dock-launcher {
    display: none;
  }
}
/* 640–1279px — the 320px OVERLAY. It covers the inline end of the page (no overlay scrim, the
   page stays live); the viewer's pin turns it into the docked column at the same 320px. */
@media (min-width: 640px) and (max-width: 1279px) {
  .brain-dock { inline-size: 320px; }
  .brain-dock .brain-dock-pin { display: inline-flex; }
  html[data-brain-dock="open"][data-brain-dock-pin="on"] .global-wrap .main-content { padding-inline-end: 320px; }
}
/* >=1280px — the DOCKED COLUMN. `.main-content` is the shell's content column; the sidebar is a
   separate fixed element, so its width is untouched, and padding on this element narrows the page
   body AND the shell header together, which is what "docked, not covering" has to mean. */
@media (min-width: 1280px) {
  html[data-brain-dock="open"] .global-wrap .main-content { padding-inline-end: 380px; }
}
/* <640px — the BOTTOM SHEET: 60dvh by default, between 28dvh and 92dvh through
   --brain-dock-sheet-h (the handle, a link followed from inside the dock → 28dvh), never below its
   measured minimum (--brain-dock-sheet-min, #26), never taller than what the keyboard leaves
   visible, and lifted above the keyboard by --brain-dock-kb (#27). Rounded on its leading block
   edge, and still WITHOUT an overlay so the page it is answering about stays visible. The launcher
   would sit on the sheet, so it steps aside while the sheet is open (the sheet carries its own
   close button). */
@media (max-width: 639px) {
  .brain-dock {
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: var(--brain-dock-kb, 0px);
    inline-size: auto;
    max-inline-size: none;
    block-size: min(
      calc(100dvh - var(--brain-dock-kb, 0px)),
      max(var(--brain-dock-sheet-min, 0px), var(--brain-dock-sheet-h, 60dvh))
    );
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    border-inline-start-width: 0;
    border-block-start-width: 1px;
  }
  [data-beta-strip] .brain-dock { inset-block-start: auto; }
  .brain-dock-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 24px;
    padding-block: 8px 4px;
    cursor: grab;
    touch-action: none;
  }
  html[data-brain-dock="open"] .brain-dock-launcher { display: none; }
}

/* User-feedback wave 1 (B) — the Gantt's OVERDUE pattern (app/components/gantt/GanttRow.tsx and the
   legend swatch). Diagonal stripes over the amber overdue fill, so "late" is carried by a texture as
   well as a colour (never colour alone). The ink is the critical FOREGROUND token mixed toward
   transparent, so the stripes flip with the theme like the text beside them; no raw colour. */
.gantt-hatch {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-foreground-critical) 45%, transparent) 0 2px,
    transparent 2px 6px
  );
  pointer-events: none;
}

/* ── 0210 — product tour chrome (docs/strategy/product-tour-plan.md §5, council #17 / #20) ──────────
   The help button sits in the shell header actions: 32px visual, a 44px hit area on a coarse pointer
   (the same floor as the Brain launcher), hover/pressed through the ::after scrim — never a colour swap.
   The driver.js popover theme is NOT here: it lives in app/styles/tour.css and is loaded with the
   engine, on the first tour start only. */
.tour-help-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border-neutral);
  border-radius: 8px;
  background: var(--color-background-base);
  color: var(--color-foreground-onBaseMuted);
  cursor: pointer;
}
.tour-help-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-swift-duration, 0.15s);
}
.tour-help-btn:hover::after { opacity: 0.08; }
.tour-help-btn:active::after { opacity: 0.14; }
@media (pointer: coarse) {
  .tour-help-btn::before { content: ""; position: absolute; inset: -6px; }
}
.tour-help-pulse {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: -3px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  background: var(--color-background-primary);
  box-shadow: 0 0 0 2px var(--color-background-base);
  animation: tour-pulse 1.6s ease-out infinite;
}
@keyframes tour-pulse {
  0% { box-shadow: 0 0 0 2px var(--color-background-base), 0 0 0 2px var(--color-border-primary); }
  70% { box-shadow: 0 0 0 2px var(--color-background-base), 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 2px var(--color-background-base), 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-help-pulse { animation: none; }
}
/* Council #17 — while a tour runs the Brain launcher steps aside, except on the welcome step that
   points at it. The dock itself is closed through dock-bus when the tour starts. */
html[data-tour-active]:not([data-tour-step="brain-dock"]) .brain-dock-launcher { display: none; }

/* ============================================================================
 * Platform design («المنصة» canvas), entry sheet. Imported by app/root.tsx right
 * AFTER dashboard-ds.css and left UNLAYERED, like the classic sheets it overrides.
 *
 * THE RULE (test/platform-skin-contracts.test.ts): every selector in every file of
 * this folder starts with html[data-skin="platform"] (light-only:
 * html[data-skin="platform"]:not(.dark) …, dark: html.dark[data-skin="platform"] …)
 * and every @keyframes is named pf-*. root.tsx sets the attribute only when the
 * design is "platform" AND the route is /app, /portal or /collab, so classic and
 * the public pages never match a rule here. docs/design/platform-skin.md.
 *
 * Order matters: tokens first (variables only), then the shell, the component
 * kit, and motion last (it must be able to switch everything off under
 * prefers-reduced-motion).
 * ============================================================================ */
/* ============================================================================
 * Platform design: TOKENS. Variables only, plus nothing that draws.
 *
 * Source of truth: the «المنصة» canvas (W-Dash.dc.html and its dark twin), as
 * measured in scratchpad/reports/canvas-design-language.md sections 1-3.
 *
 * What this file does, and only while <html data-skin="platform"> is set
 * (root.tsx; /app, /portal, /collab with the platform design chosen):
 *  1. restates the Trellis SEMANTIC tokens of app/tokens.css (surfaces,
 *     foregrounds, borders, primary, shadows, radii, font families, gradient)
 *     with the canvas values, per mode. Every Tailwind semantic utility
 *     (bg-surface-*, text-fg-*, border-line-*, rounded-*, shadow-*) reads
 *     these, so the whole app retints without touching a component;
 *  2. restates EVERY --dst-* variable of app/dashboard-ds.css (L19-109), which
 *     the component kit (.ds-table, .ds-stat, .ds-badge, .ds-alert ...) reads
 *     instead of the semantic tokens in light mode;
 *  3. defines the platform-only --pf-* variables the shell, kit and screen
 *     passes build with (navy chrome, brand, glass, tints, shadows, sizes,
 *     easings, the numeric font). Nothing outside app/styles/platform/ may
 *     rely on a --pf-* variable: it is undefined in classic.
 *
 * NOT restated, on purpose:
 *  - the --ramp-* primitives and the Tailwind palette bridge (static in both
 *    designs, both modes: docs/design/tokens.md);
 *  - the categorical chart palette --color-chart-cat-*, --color-chart-alert and
 *    --color-chart-link (static / pinned by test/chart-link-token.test.ts;
 *    chart-cat-1 follows --color-primary-base, as in classic);
 *  - the decorative teal/purple/cyan/pink tokens (the canvas has no such hues;
 *    they stay the static Trellis values in both designs, as in classic).
 *
 * Specificity: html[data-skin="platform"] is (0,1,1) and beats tokens.css
 * :root / .dark (0,1,0). The per-mode blocks html[data-skin="platform"]:not(.dark)
 * and html.dark[data-skin="platform"] are (0,2,1) and beat dashboard-ds.css
 * html.dark (0,1,1). A mode-dependent value must NEVER go in the bare block:
 * it would be the same in light and dark.
 *
 * Tints: the canvas draws chips and tiles with translucent tints (rgba). Those
 * stay available as --pf-*-tint. The SEMANTIC *Subtle backgrounds and the kit's
 * badge / alert / chip backgrounds are the same tints composited over the card
 * (opaque), because sticky elements paint them over scrolling content (the
 * beta strip is sticky on --dst-alert-info-bg) and a see-through strip is a bug.
 *
 * Raw colours are allowed in this file only (and in the platform block of
 * app/theme/antd-theme.ts). Everything else reads the variables.
 * ============================================================================ */
/* ── 1. Mode-invariant: brand, navy chrome, glass, radii, sizes, fonts, motion ── */
html[data-skin="platform"] {
  /* Fonts. UI: Inter for Latin + digits, Arabic glyphs fall through to Noto Sans Arabic.
     Numbers / amounts / KPI values / the wordmark: Outfit first (--pf-font-num).
     Arabic titles (h1–h4, font-heading): IBM Plex Sans Arabic (--pf-font-heading). */
  --pf-font-ui: "Inter", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --pf-font-ui-latin: "Outfit", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --pf-font-num: "Outfit", "Noto Sans Arabic", system-ui, sans-serif;
  --pf-font-heading: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --font-sans: var(--pf-font-ui), "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: var(--pf-font-heading);
  --typography-font-family-body: var(--pf-font-ui);
  --typography-font-family-heading: var(--pf-font-heading);

  /* Radii (canvas section 3). The Tailwind bridge reads the four shape tokens:
     rounded-md = subcontainer, rounded-lg = action, rounded-xl = container,
     rounded-2xl = supercontainer. */
  --shape-radius-container: 20px;      /* cards */
  --shape-radius-supercontainer: 24px; /* hero */
  --shape-radius-action: 12px;         /* buttons, nav item, search, segmented track */
  --shape-radius-field: 11px;          /* input fields */
  --shape-radius-subcontainer: 10px;   /* table header row, thumbnails, tooltip, small tiles */
  --shape-radius-badge: 999px;         /* chips are pills */
  --pf-radius-hero: 24px;
  --pf-radius-card: 20px;
  --pf-radius-column: 18px;            /* kanban column, camera tile */
  --pf-radius-panel: 16px;             /* promo card, chat bubble, signature pad, rail item */
  --pf-radius-inner: 14px;             /* account switcher, toast, kanban card, inner panels */
  --pf-radius-cta: 13px;               /* big CTA, textarea */
  --pf-radius-control: 12px;           /* buttons, nav item, search, segmented track */
  --pf-radius-field: 11px;             /* inputs, 36-38px icon tiles, logo mark */
  --pf-radius-tile: 10px;              /* 32-34px icon tiles, table header row, thumbnails */
  --pf-radius-seg: 9px;                /* segment button */
  --pf-radius-hint: 6px;               /* Ctrl K hint, Gantt bars, checkbox */
  --pf-radius-pill: 999px;

  /* Brand constants (identical in light and dark). */
  --pf-brand: #2f65ee;                 /* logo, hero CTA, sidebar pill, active count badge, AI avatar */
  --pf-brand-deep: #1b3fb8;            /* gradient end */
  --pf-accent-light: #8fb0ff;          /* active indicator bar, hero underline, promo icon */
  --pf-brand-rgb: 47 101 238;          /* rgb(var(--pf-brand-rgb) / .34) */
  --pf-accent-light-rgb: 143 176 255;
  --pf-brand-gradient: linear-gradient(145deg, #2f65ee, #1b3fb8);
  --pf-live: #ff5a5f;                  /* bell badge, live dot */
  --pf-live-ring: rgba(255, 90, 95, 0.55);
  --pf-bell-cutout: #0e1636;
  --pf-ok: #199065;                    /* loading-button ok state, success pulse */
  --pf-ok-pulse: rgba(25, 144, 101, 0.55);

  /* Navy chrome. The hero is the same navy in both modes; the sidebar is not
     (--pf-navy, per mode below). Scrims over photos use rgb(var(--pf-scrim-rgb) / a). */
  --pf-hero-bg: #0b1230;
  --pf-scrim-rgb: 8 13 32;
  --pf-navy-rgb: 11 18 48;             /* sidebar photo gradient: rgb(var(--pf-navy-rgb) / .55) */

  /* White-alpha scale on navy (sidebar, hero). */
  --pf-on-navy: #ffffff;
  --pf-on-navy-hero-text: rgba(255, 255, 255, 0.78);
  --pf-on-navy-nav: rgba(255, 255, 255, 0.72);
  --pf-on-navy-rail: rgba(255, 255, 255, 0.66);
  --pf-on-navy-promo: rgba(255, 255, 255, 0.64);
  --pf-on-navy-crumb: rgba(255, 255, 255, 0.62);
  --pf-on-navy-chevron: rgba(255, 255, 255, 0.6);
  --pf-on-navy-caption: rgba(255, 255, 255, 0.55);
  --pf-on-navy-wordmark: rgba(255, 255, 255, 0.5);
  --pf-on-navy-crumb-sep: rgba(255, 255, 255, 0.45);
  --pf-on-navy-section: rgba(255, 255, 255, 0.52); /* canvas 0.40 = 3.8:1; 0.52 clears 4.5:1 on both navies */
  --pf-on-navy-divider: rgba(255, 255, 255, 0.06);
  --pf-nav-hover: rgba(255, 255, 255, 0.05);
  --pf-nav-badge-bg: rgba(255, 255, 255, 0.12);
  --pf-switcher-bg: rgba(255, 255, 255, 0.06);
  --pf-switcher-border: rgba(255, 255, 255, 0.08);

  /* Sidebar active pill + indicator, promo card, tablet rail. */
  --pf-pill-bg: linear-gradient(90deg, rgba(47, 101, 238, 0.08), rgba(47, 101, 238, 0.34));
  --pf-pill-border: rgba(143, 176, 255, 0.28);
  --pf-pill-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --pf-pill-glow: 0 0 14px rgba(143, 176, 255, 0.9);
  --pf-promo-bg: linear-gradient(160deg, rgba(47, 101, 238, 0.26), rgba(47, 101, 238, 0.06));
  --pf-promo-border: rgba(143, 176, 255, 0.2);
  --pf-rail-active-bg: linear-gradient(160deg, rgba(47, 101, 238, 0.55), rgba(47, 101, 238, 0.2));
  --pf-rail-active-ring: inset 0 0 0 1px rgba(143, 176, 255, 0.35);

  /* Glass (hero buttons, search, eyebrow chip). */
  --pf-glass-bg: rgba(255, 255, 255, 0.12);
  --pf-glass-border: rgba(255, 255, 255, 0.22);
  --pf-glass-search-bg: rgba(255, 255, 255, 0.10);
  --pf-glass-search-border: rgba(255, 255, 255, 0.18);
  --pf-glass-chip-bg: rgba(255, 255, 255, 0.14);
  --pf-glass-chip-border: rgba(255, 255, 255, 0.24);
  --pf-glass-hint-border: rgba(255, 255, 255, 0.25);
  --pf-glass-blur: 12px;
  --pf-glass-blur-sm: 8px;
  --pf-hero-primary-border: rgba(143, 176, 255, 0.55);

  /* Fixed shadows. */
  --pf-hero-shadow: 0 30px 60px -36px rgba(8, 13, 32, 0.85);
  --pf-hero-cta-shadow: 0 12px 26px -12px rgba(47, 101, 238, 0.95);
  --pf-logo-shadow: 0 8px 20px -8px rgba(47, 101, 238, 0.9);
  --pf-ok-shadow: 0 10px 22px -12px rgba(25, 144, 101, 0.6);
  --pf-toast-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5);
  --pf-tooltip-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
  --pf-fly-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45);
  --pf-title-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  --pf-photo-title-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);

  /* Avatar palette (rounded squares, white initials), same in both modes. */
  --pf-avatar-user: #225aea;
  --pf-avatar-contractor: #8e480e;
  --pf-avatar-consultant: #6b3fd6;
  --pf-avatar-owner: #199065;

  /* Monitoring extras. */
  --pf-detect: #4fc596;
  --pf-detect-ink: #06281b;

  /* Layout sizes (canvas section 4). */
  --pf-sidebar-w: 252px;
  --pf-rail-w: 88px;
  --pf-hero-h: 224px;
  --pf-hero-h-tablet: 206px;
  --pf-hero-overlap: 44px;             /* the first card row rises into the hero */
  --pf-gutter: 44px;                   /* .wbody inline padding */
  --pf-gap: 16px;                      /* page / grid gap */
  --pf-nav-item-h: 42px;
  --pf-control-h: 40px;
  --pf-table-head-h: 38px;
  --pf-table-row-h: 54px;

  /* Motion (canvas section 6). motion.css switches every animation off under
     prefers-reduced-motion. */
  --pf-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pf-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --pf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pf-ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --pf-dur-fast: 220ms;
  --pf-dur: 300ms;
  --pf-dur-slow: 560ms;
  --pf-dur-hero: 1300ms;
}
/* English: Latin-first stacks (Outfit). Classic English keeps app.css's Inter
   swap; this only applies under the platform design. */
html[data-skin="platform"][lang="en"] {
  --font-sans: var(--pf-font-ui-latin), "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: var(--pf-font-ui-latin);
  --typography-font-family-body: var(--pf-font-ui-latin);
  --typography-font-family-heading: var(--pf-font-ui-latin);
}
/* ── 2. LIGHT ─────────────────────────────────────────────────────────────── */
html[data-skin="platform"]:not(.dark) {
  /* --- platform palette (--pf-*) --- */
  --pf-page: #f2f3f6;
  --pf-card: #ffffff;
  --pf-sunken: #f6f7fa;                /* surface-2: table header, inputs, search, neutral tiles */
  --pf-panel: #f6f7fa;                 /* kanban columns */
  --pf-segmented: #eceff5;             /* segmented track, neutral chip */
  --pf-zebra: #f7f8fb;
  --pf-border: #e5e6e9;
  --pf-border-strong: #d9dde8;
  --pf-grid-line: #eceef3;
  --pf-track: #e9ecf3;
  --pf-text: #1e1f22;
  --pf-text-2: #666970;               /* text grade: canvas #6b6e74 read 4.44:1 on the segmented track */
  --pf-text-3: #6e7177;               /* text grade: the canvas #96989d read 2.9:1 on the card (final verify 2026-09-28) */
  --pf-primary: #225aea;               /* solid: buttons, fills, checkbox, current step */
  --pf-primary-text: #1f52d6;          /* links, tinted icons, primary chip text (canvas #225aea read 4.43:1 on sunken) */
  --pf-primary-tint: rgba(34, 90, 234, 0.10);
  --pf-primary-tint-strong: rgba(34, 90, 234, 0.14);
  --pf-primary-halo: rgba(34, 90, 234, 0.10);
  --pf-primary-shadow: 0 10px 22px -12px rgba(34, 90, 234, 0.55);
  --pf-success: #199065;
  --pf-success-tint: rgba(25, 144, 101, 0.12);
  --pf-warning: #b9780a;
  --pf-warning-tint: rgba(242, 182, 50, 0.18);
  --pf-danger: #ab1d23;
  --pf-danger-tint: rgba(219, 43, 49, 0.10);
  --pf-orange: #d0711a;
  --pf-orange-tint: rgba(208, 113, 26, 0.16);
  /* Text-grade status colours: the canvas solids above measure 3.2-3.6:1 as 12-14px text on
     their own tints and on the page grey; these clear 4.5:1 there (verify pass, 2026-09-28). */
  --pf-success-text: #127050;
  --pf-warning-text: #8f5c06;
  --pf-orange-text: #a85a10;
  --pf-chart-1: #225aea;
  --pf-chart-2: #d0711a;
  --pf-chart-neutral: #96989d;
  --pf-e1: 0 1px 2px rgba(21, 22, 24, 0.04), 0 12px 28px -20px rgba(12, 18, 52, 0.35);
  --pf-navy: #0b1230;                  /* sidebar, tablet rail */
  --pf-chip-on-image-bg: rgba(255, 255, 255, 0.9);
  --pf-chip-on-image-fg: #1e1f22;
  --pf-tooltip-bg: #141a33;
  --pf-tooltip-fg: #f2f3f6;
  --pf-tooltip-positive: #4fc596;
  --pf-map-base: #e6eaf2;
  --pf-map-block: #dde2ec;
  --pf-map-road: #f7f8fb;
  --pf-placeholder: #96989d;

  /* --- Trellis semantic tokens (app/tokens.css) --- */
  --color-primary-base: #225aea;

  --color-background-base: #f2f3f6;    /* the page; body and html paint it */
  --color-background-sunken: #f6f7fa;
  --color-background-sunkenStrong: #eceff5;
  --color-background-raised: #ffffff;  /* cards */
  --color-background-raisedHover: #f7f8fb;
  --color-background-overlay: #ffffff;
  --color-background-gradientSoft: #ffffff;
  --color-background-primary: #225aea;
  --color-background-primaryHover: #1d4fd3;
  --color-background-primarySubtle: #e9eefd;   /* rgba(34,90,234,.10) over the card */
  --color-background-accent: #d0711a;
  --color-background-accentSubtle: #f7e8da;    /* rgba(208,113,26,.16) */
  --color-background-success: #199065;
  --color-background-successSubtle: #e3f2ed;   /* rgba(25,144,101,.12) */
  --color-background-warning: #b9780a;
  --color-background-warningSubtle: #fdf2da;   /* rgba(242,182,50,.18) */
  --color-background-critical: #ab1d23;
  --color-background-criticalSubtle: #fbeaea;  /* rgba(219,43,49,.10) */
  --color-background-info: #225aea;
  --color-background-infoSubtle: #e9eefd;

  --color-border-neutral: #e5e6e9;
  --color-border-strong: #d9dde8;
  --color-border-faint: #eceef3;
  --color-border-primary: #225aea;
  --color-border-accent: #d0711a;
  --color-border-success: #199065;
  --color-border-warning: #b9780a;
  --color-border-critical: #ab1d23;
  --color-border-info: #225aea;

  --color-foreground-onBase: #1e1f22;
  --color-foreground-onBaseMuted: #666970;
  --color-foreground-onBaseFaint: #6e7177; /* canvas text-3 #96989d = 2.9:1 on white (classic 4.3:1) */
  --color-foreground-onRaised: #1e1f22;
  --color-foreground-onSunken: #1e1f22;
  --color-foreground-primary: #225aea;
  --color-foreground-accent: #a85a10;
  --color-foreground-success: #127050;
  --color-foreground-warning: #8f5c06;
  --color-foreground-critical: #ab1d23;
  --color-foreground-info: #225aea;
  --color-foreground-onPrimary: #ffffff;
  --color-foreground-onAccent: #ffffff;
  --color-foreground-onSuccess: #ffffff;
  --color-foreground-onWarning: #ffffff;
  --color-foreground-onCritical: #ffffff;
  --color-foreground-onInfo: #ffffff;
  --color-foreground-onPrimarySubtle: #225aea;
  --color-foreground-onAccentSubtle: #a85a10;
  --color-foreground-onSuccessSubtle: #127050;
  --color-foreground-onWarningSubtle: #8f5c06;
  --color-foreground-onCriticalSubtle: #ab1d23;
  --color-foreground-onInfoSubtle: #225aea;
  --color-foreground-onGradient: #ffffff;
  --color-foreground-onGradientMuted: rgba(255, 255, 255, 0.78);

  --color-chart-grid: #eceef3;
  --gradient-primary: linear-gradient(145deg, #2f65ee, #1b3fb8);
  --shadow-raised: 0 1px 2px rgba(21, 22, 24, 0.04), 0 12px 28px -20px rgba(12, 18, 52, 0.35);
  --shadow-overlay: 0 20px 40px -18px rgba(12, 18, 52, 0.28), 0 4px 10px rgba(12, 18, 52, 0.06);

  /* --- component kit (app/dashboard-ds.css L19-64), every variable --- */
  --dst-surface: #ffffff;
  --dst-border: #e5e6e9;
  --dst-head-bg: #f6f7fa;
  --dst-head-fg: #666970;
  --dst-head-border: #e5e6e9;
  --dst-row-border: #e5e6e9;
  --dst-hover: #f7f8fb;
  --dst-chip-bg: #eceff5;
  --dst-avatar-bg: #f6f7fa;
  --dst-field-border: #d9dde8;
  --dst-seg-border: #e5e6e9;
  --dst-track: #e9ecf3;

  --dst-fg: #1e1f22;
  --dst-fg-body: #1e1f22;
  --dst-fg-muted: #666970;
  --dst-fg-faint: #6e7177;

  --dst-primary: #225aea;
  --dst-on-primary: #ffffff;
  --dst-link: #225aea;
  --dst-pos: #199065;
  --dst-neg: #ab1d23;
  --dst-warn: #f2b632;

  --dst-badge-gray-bg: #eceff5;   --dst-badge-gray-fg: #666970;
  --dst-badge-blue-bg: #e9eefd;   --dst-badge-blue-fg: #1f52d6;
  --dst-badge-green-bg: #e3f2ed;  --dst-badge-green-fg: #127050;
  --dst-badge-red-bg: #fbeaea;    --dst-badge-red-fg: #ab1d23;
  --dst-badge-amber-bg: #fdf2da;  --dst-badge-amber-fg: #8f5c06;

  --dst-alert-info-bg: #f0f3fe;      --dst-alert-info-border: rgba(34, 90, 234, 0.22);      --dst-alert-info-fg: #225aea;
  --dst-alert-success-bg: #edf6f3;   --dst-alert-success-border: rgba(25, 144, 101, 0.24);  --dst-alert-success-fg: #127050;
  --dst-alert-warning-bg: #fdf5e2;   --dst-alert-warning-border: rgba(185, 120, 10, 0.28);  --dst-alert-warning-fg: #8f5c06;
  --dst-alert-critical-bg: #fcf0f1;  --dst-alert-critical-border: rgba(219, 43, 49, 0.22);  --dst-alert-critical-fg: #ab1d23;

  --dst-cta-shadow: 0 10px 22px -12px rgba(34, 90, 234, 0.55);
  --dst-seg-active-shadow: 0 1px 2px rgba(21, 22, 24, 0.04), 0 12px 28px -20px rgba(12, 18, 52, 0.35);
}
/* ── 3. DARK ──────────────────────────────────────────────────────────────── */
html.dark[data-skin="platform"] {
  /* --- platform palette (--pf-*) --- */
  --pf-page: #0a0f1e;
  --pf-card: #121a2e;
  --pf-sunken: #172036;
  --pf-panel: rgba(255, 255, 255, 0.03);
  --pf-segmented: rgba(255, 255, 255, 0.06);
  --pf-zebra: #141d33;
  --pf-border: rgba(255, 255, 255, 0.08);
  --pf-border-strong: rgba(255, 255, 255, 0.14);
  --pf-grid-line: rgba(255, 255, 255, 0.06);
  --pf-track: rgba(255, 255, 255, 0.07);
  --pf-text: #f2f4f8;
  --pf-text-2: #a7aec0;
  --pf-text-3: #8a93ab;               /* text grade: the canvas #6f7890 read 3.9:1 on the card */
  --pf-primary: #2f65ee;
  --pf-primary-text: #7fa2ff;
  --pf-primary-tint: rgba(127, 162, 255, 0.14);
  --pf-primary-tint-strong: rgba(95, 134, 245, 0.18);
  --pf-primary-halo: rgba(127, 162, 255, 0.14);
  --pf-primary-shadow: 0 10px 22px -12px rgba(47, 101, 238, 0.7);
  --pf-success: #4fc596;
  --pf-success-tint: rgba(79, 197, 150, 0.14);
  --pf-warning: #f2b632;
  --pf-warning-tint: rgba(242, 182, 50, 0.14);
  --pf-danger: #ff6b6b;
  --pf-danger-tint: rgba(255, 107, 107, 0.12);
  --pf-orange: #e39a24;
  --pf-orange-tint: rgba(201, 122, 20, 0.20);
  --pf-success-text: #4fc596;
  --pf-warning-text: #f2b632;
  --pf-orange-text: #e39a24;
  --pf-chart-1: #5f86f5;
  --pf-chart-2: #c97a14;
  --pf-chart-neutral: #6f7890;
  --pf-e1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
  --pf-navy: #070b19;
  --pf-chip-on-image-bg: rgba(10, 15, 30, 0.75);
  --pf-chip-on-image-fg: #ffffff;
  --pf-tooltip-bg: #f2f4f8;
  --pf-tooltip-fg: #0a0f1e;
  --pf-tooltip-positive: #199065;
  --pf-map-base: #0d1526;
  --pf-map-block: #131d33;
  --pf-map-road: #1b2640;
  --pf-placeholder: #6f7890;

  /* --- Trellis semantic tokens (app/tokens.css .dark) --- */
  --color-primary-base: #2f65ee;

  --color-background-base: #0a0f1e;    /* the page */
  --color-background-sunken: #172036;
  --color-background-sunkenStrong: #20283b; /* the canvas rgba(255,255,255,.06) over the card, opaque */
  --color-background-raised: #121a2e;  /* cards */
  --color-background-raisedHover: #172036;
  --color-background-overlay: #121a2e;
  --color-background-gradientSoft: #121a2e;
  --color-background-primary: #2f65ee;
  --color-background-primaryHover: #4a78f0;
  --color-background-primarySubtle: #212d4b;   /* rgba(127,162,255,.14) over the card */
  --color-background-accent: #e39a24;
  --color-background-accentSubtle: #372d29;    /* rgba(201,122,20,.20) */
  --color-background-success: #4fc596;
  --color-background-successSubtle: #1b323d;   /* rgba(79,197,150,.14) */
  --color-background-warning: #f2b632;
  --color-background-warningSubtle: #31302f;   /* rgba(242,182,50,.14) */
  --color-background-critical: #ff6b6b;
  --color-background-criticalSubtle: #2e2435;  /* rgba(255,107,107,.12) */
  --color-background-info: #2f65ee;
  --color-background-infoSubtle: #212d4b;

  --color-border-neutral: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-faint: rgba(255, 255, 255, 0.06);
  --color-border-primary: #7fa2ff;
  --color-border-accent: #e39a24;
  --color-border-success: #4fc596;
  --color-border-warning: #f2b632;
  --color-border-critical: #ff6b6b;
  --color-border-info: #7fa2ff;

  --color-foreground-onBase: #f2f4f8;
  --color-foreground-onBaseMuted: #a7aec0;
  --color-foreground-onBaseFaint: #8a93ab; /* canvas text-3 #6f7890 = 3.9:1 on the card */
  --color-foreground-onRaised: #f2f4f8;
  --color-foreground-onSunken: #f2f4f8;
  --color-foreground-primary: #7fa2ff;
  --color-foreground-accent: #e39a24;
  --color-foreground-success: #4fc596;
  --color-foreground-warning: #f2b632;
  --color-foreground-critical: #ff6b6b;
  --color-foreground-info: #7fa2ff;
  --color-foreground-onPrimary: #ffffff;
  --color-foreground-onAccent: #0a0f1e;
  --color-foreground-onSuccess: #06281b;
  --color-foreground-onWarning: #0a0f1e;
  --color-foreground-onCritical: #0a0f1e;
  --color-foreground-onInfo: #ffffff;
  --color-foreground-onPrimarySubtle: #7fa2ff;
  --color-foreground-onAccentSubtle: #e39a24;
  --color-foreground-onSuccessSubtle: #4fc596;
  --color-foreground-onWarningSubtle: #f2b632;
  --color-foreground-onCriticalSubtle: #ff6b6b;
  --color-foreground-onInfoSubtle: #7fa2ff;
  --color-foreground-onGradient: #ffffff;
  --color-foreground-onGradientMuted: rgba(255, 255, 255, 0.78);

  --color-chart-grid: rgba(255, 255, 255, 0.06);
  --gradient-primary: linear-gradient(145deg, #2f65ee, #1b3fb8);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
  --shadow-overlay: 0 20px 40px -18px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);

  /* --- component kit (app/dashboard-ds.css L66-109, plus the two :root-only
         shadows), every variable --- */
  --dst-surface: #121a2e;
  --dst-border: rgba(255, 255, 255, 0.08);
  --dst-head-bg: #172036;
  --dst-head-fg: #a7aec0;
  --dst-head-border: rgba(255, 255, 255, 0.08);
  --dst-row-border: rgba(255, 255, 255, 0.08);
  --dst-hover: #141d33;
  --dst-chip-bg: #20283b;              /* rgba(255,255,255,.06) over the card */
  --dst-avatar-bg: #172036;
  --dst-field-border: rgba(255, 255, 255, 0.14);
  --dst-seg-border: rgba(255, 255, 255, 0.08);
  --dst-track: rgba(255, 255, 255, 0.07);

  --dst-fg: #f2f4f8;
  --dst-fg-body: #f2f4f8;
  --dst-fg-muted: #a7aec0;
  --dst-fg-faint: #8a93ab;

  --dst-primary: #2f65ee;
  --dst-on-primary: #ffffff;
  --dst-link: #7fa2ff;
  --dst-pos: #4fc596;
  --dst-neg: #ff6b6b;
  --dst-warn: #f2b632;

  --dst-badge-gray-bg: #20283b;   --dst-badge-gray-fg: #a7aec0;
  --dst-badge-blue-bg: #212d4b;   --dst-badge-blue-fg: #7fa2ff;
  --dst-badge-green-bg: #1b323d;  --dst-badge-green-fg: #4fc596;
  --dst-badge-red-bg: #2e2435;    --dst-badge-red-fg: #ff6b6b;
  --dst-badge-amber-bg: #31302f;  --dst-badge-amber-fg: #f2b632;

  --dst-alert-info-bg: #1d2843;      --dst-alert-info-border: rgba(127, 162, 255, 0.28);    --dst-alert-info-fg: #7fa2ff;
  --dst-alert-success-bg: #182b38;   --dst-alert-success-border: rgba(79, 197, 150, 0.28);  --dst-alert-success-fg: #4fc596;
  --dst-alert-warning-bg: #282a2e;   --dst-alert-warning-border: rgba(242, 182, 50, 0.28);  --dst-alert-warning-fg: #f2b632;
  --dst-alert-critical-bg: #2a2234;  --dst-alert-critical-border: rgba(255, 107, 107, 0.28); --dst-alert-critical-fg: #ff6b6b;

  --dst-cta-shadow: 0 10px 22px -12px rgba(47, 101, 238, 0.7);
  --dst-seg-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
}
/* ============================================================================
 * Platform design: the SHELL (sidebar, hero page header, page body, settings
 * shell, portal and collab chrome).
 *
 * Every selector starts with html[data-skin="platform"]; read tokens from
 * ./tokens.css (--pf-* and the semantic tokens), no new raw colours here
 * (translucent tints are composed from the --pf-*-rgb channels).
 * Logical properties only (inset-inline-start, margin-inline, padding-inline)
 * so English mirrors the RTL canvas; the few PHYSICAL things the canvas draws
 * (gradient angles, the drawer's slide) are restated under [dir="ltr"].
 *
 * Markup: app/routes/app/layout.tsx (AppShell, platform branch),
 * app/routes/app/settings/layout.tsx (SettingsShell, platform branch),
 * app/components/platform/*, app/components/PageHeader.tsx (HeroPageHeader).
 * The classic shell classes the platform frame still carries (.main-content,
 * .page-header*, .page-body, .header, .notif-bell, .sidebar-toggle,
 * .ai-credits) are the ONLY classic hooks restyled here; everything else is a
 * .pf-* class classic never renders.
 *
 * Breakpoints (canvas-design-language.md §4, canvas-portals-tablet.md):
 *   > 1180px   252px sidebar (or the 88px rail while collapsed), 224px hero;
 *   769–1180   the 88px icon rail automatically, 206px hero, 36px gutters;
 *   ≤ 768px    the phone top bar + a navy drawer, a compact hero, 16px gutters.
 * ============================================================================ */
/* ── 1. Frame ────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-shell {
  min-block-size: 100dvh;
  background: var(--pf-page);
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-frame {
  display: flex;
  align-items: flex-start;
  min-block-size: 100dvh;
}
html[data-skin="platform"] .pf-shell[data-beta-strip] .pf-frame {
  min-block-size: calc(100dvh - var(--beta-strip-h));
}
/* The content column. The classic .main-content rules that still match here
   (.main-content .page-header's negative margins, the dropship table uplift)
   are neutralised or left to the kit; the column itself has no padding: the
   hero keeps its own 16px margin and the page body its gutter.
   overflow-x: clip keeps what classic's `overflow: auto` kept (nothing a page
   draws can push the DOCUMENT sideways, e.g. a visually-hidden label inside a
   scrolling table) without making the column a scroll container, so sticky
   bars inside a page keep sticking to the viewport. */
html[data-skin="platform"] .pf-main {
  --dst-page-bg: var(--pf-page);
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}
/* ── 2. Sidebar (canvas aside.wsb) ───────────────────────────────────────── */
html[data-skin="platform"] .pf-sidebar {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  flex: 0 0 var(--pf-sidebar-w);
  inline-size: var(--pf-sidebar-w);
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pf-navy);
  border-inline-end: 1px solid var(--pf-on-navy-divider);
  color: var(--pf-on-navy);
  font-family: var(--pf-font-ui);
}
html[data-skin="platform"][lang="en"] .pf-sidebar {
  font-family: var(--pf-font-ui-latin);
}
html[data-skin="platform"] .pf-shell[data-beta-strip] .pf-sidebar {
  inset-block-start: var(--beta-strip-h);
  block-size: calc(100dvh - var(--beta-strip-h));
}
/* The architectural photo at the bottom, under the navy gradient. */
html[data-skin="platform"] .pf-sidebar-photo {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 420px;
  overflow: hidden;
  pointer-events: none;
}
html[data-skin="platform"] .pf-sidebar-photo img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  opacity: 0.28;
}
html[data-skin="platform"] .pf-sidebar-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--pf-navy) 0%, rgb(var(--pf-navy-rgb) / 0.55) 60%, rgb(var(--pf-navy-rgb) / 0.2) 100%);
}
html[data-skin="platform"] .pf-sidebar-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 0;
}
/* Logo row: 72px, 38px gradient mark + the stacked wordmark. */
html[data-skin="platform"] .pf-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  block-size: 72px;
  padding-inline: 22px 16px;
}
/* Beside the logo: the notification bell (the shell's NotificationBell, surface="sidebar"), a 38px
   glass button on the navy, pushed to the row's inline end. Its menu opens toward the page. */
html[data-skin="platform"] .pf-sidebar-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-inline-start: auto;
}
html[data-skin="platform"] .pf-sidebar-head .notif-bell {
  position: relative;
  inline-size: 38px;
  block-size: 38px;
  border: 1px solid var(--pf-switcher-border);
  border-radius: var(--pf-radius-field);
  background: var(--pf-switcher-bg);
  color: var(--pf-on-navy-nav);
}
html[data-skin="platform"] .pf-sidebar-head .notif-bell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-on-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur-fast) ease;
}
html[data-skin="platform"] .pf-sidebar-head .notif-bell:hover {
  background: var(--pf-switcher-bg);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-sidebar-head .notif-bell:hover::after { opacity: 0.08; }
html[data-skin="platform"] .pf-sidebar-head .notif-bell:active::after,
html[data-skin="platform"] .pf-sidebar-head .notif-bell[aria-expanded="true"]::after { opacity: 0.14; }
html[data-skin="platform"] .pf-sidebar-head .notif-bell:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-sidebar-head .notif-bell svg {
  inline-size: 18px;
  block-size: 18px;
}
html[data-skin="platform"] .pf-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-inline-size: 0;
  color: var(--pf-on-navy);
  text-decoration: none;
  border-radius: var(--pf-radius-field);
}
html[data-skin="platform"] .pf-logo:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 3px;
}
html[data-skin="platform"] .pf-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--pf-radius-field);
  background: var(--pf-brand-gradient);
  box-shadow: var(--pf-logo-shadow);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-wordmark {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.1;
}
html[data-skin="platform"] .pf-wordmark-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--pf-on-navy);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-wordmark-tag {
  font-family: var(--pf-font-num);
  font-size: 10.5px;
  letter-spacing: 2.2px;
  color: var(--pf-on-navy-wordmark);
  white-space: nowrap;
}
/* Account card (company + account type). */
html[data-skin="platform"] .pf-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin: 0 14px 4px;
  padding: 10px 12px;
  border-radius: var(--pf-radius-inner);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-switcher-border);
}
html[data-skin="platform"] .pf-account-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-account-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-on-navy);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-account-caption {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--pf-on-navy-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Rounded-square avatars (initials in white on the account-type colour). */
html[data-skin="platform"] .pf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--pf-avatar-user);
  color: var(--pf-on-navy);
  font-weight: 700;
  line-height: 1;
}
html[data-skin="platform"] .pf-avatar[data-tone="contractor"] { background: var(--pf-avatar-contractor); }
html[data-skin="platform"] .pf-avatar[data-tone="consultant"] { background: var(--pf-avatar-consultant); }
html[data-skin="platform"] .pf-avatar[data-tone="owner"] { background: var(--pf-avatar-owner); }
html[data-skin="platform"] .pf-avatar--sm {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--pf-radius-tile);
  font-size: 11px;
}
html[data-skin="platform"] .pf-avatar--md {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-field);
  font-size: 12px;
}
html[data-skin="platform"] .pf-avatar img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
/* A company logo is a mark on its own ground, not a photo: contain it on white. */
html[data-skin="platform"] .pf-account .pf-avatar:has(img) {
  padding: 3px;
  background: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-account .pf-avatar img { object-fit: contain; }
/* Tools: the global search and the project switcher (the classic features, navy-dressed). */
html[data-skin="platform"] .pf-sidebar-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px 6px;
}
/* The search field is a BUTTON drawn as the field (components/search/SearchTrigger.tsx): it opens
   the command palette, and its key-cap names the shortcut (Ctrl K, or ⌘ K on a Mac). */
html[data-skin="platform"] .pf-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  block-size: 38px;
  margin: 0;
  padding-inline: 12px 8px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-switcher-border);
  color: var(--pf-on-navy-nav);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--pf-dur-fast) ease, color var(--pf-dur-fast) ease;
}
html[data-skin="platform"] .pf-sidebar-search > svg { flex-shrink: 0; }
html[data-skin="platform"] .pf-sidebar-search:hover {
  border-color: var(--pf-glass-hint-border);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-sidebar-search:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-sidebar-search-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--pf-on-navy-caption);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-sidebar-search-hint {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--pf-glass-hint-border);
  border-radius: var(--pf-radius-hint);
  background: transparent;
  color: var(--pf-on-navy-nav);
  font-family: var(--pf-font-num);
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher {
  inline-size: 100%;
  margin: 0;
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select {
  inline-size: 100%;
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select .ant-select-selector {
  block-size: 38px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-switcher-border);
  box-shadow: none;
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select-focused .ant-select-selector {
  border-color: var(--pf-pill-border);
  box-shadow: 0 0 0 3px rgb(var(--pf-brand-rgb) / 0.3);
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select .ant-select-selection-item,
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select .ant-select-selection-placeholder {
  color: var(--pf-on-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 36px;
}
html[data-skin="platform"] .pf-sidebar .eng-project-switcher .ant-select .ant-select-arrow {
  color: var(--pf-on-navy-chevron);
}
/* The nav region scrolls on its own; the logo, tools and footer stay put. */
html[data-skin="platform"] .pf-sidebar-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pf-nav-badge-bg) transparent;
}
/* ── 3. Navigation ───────────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-nav {
  padding: 2px 12px 8px;
}
html[data-skin="platform"] .pf-nav-track {
  position: relative;
}
/* The ONE sliding active pill (placed by app/components/platform/navPill.ts). */
html[data-skin="platform"] .pf-pill {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 0;
  block-size: var(--pf-nav-item-h);
  border-radius: var(--pf-radius-control);
  background: var(--pf-pill-bg);
  border: 1px solid var(--pf-pill-border);
  box-shadow: var(--pf-pill-inset);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur-fast) linear;
}
html[data-skin="platform"][dir="ltr"] .pf-pill {
  background: linear-gradient(270deg, rgb(var(--pf-brand-rgb) / 0.08) 0%, rgb(var(--pf-brand-rgb) / 0.34) 100%);
}
html[data-skin="platform"] .pf-nav-track[data-pill] > .pf-pill {
  opacity: 1;
}
/* The 4x24 indicator, flush with the sidebar's OUTER edge (canvas: right -12px in RTL). */
html[data-skin="platform"] .pf-pill-bar {
  position: absolute;
  inset-inline-start: -13px;
  inset-block-start: 50%;
  inline-size: 4px;
  block-size: 24px;
  translate: 0 -50%;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: var(--pf-accent-light);
  box-shadow: var(--pf-pill-glow);
}
html[data-skin="platform"] .pf-nav-block {
  display: flex;
  flex-direction: column;
}
/* A row: 42px, radius 12, 20px icon at 72% white; active 700 white. */
html[data-skin="platform"] .pf-nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  block-size: var(--pf-nav-item-h);
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--pf-radius-control);
  background: transparent;
  color: var(--pf-on-navy-nav);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* Hover through a scrim (5% white), never a colour swap. */
html[data-skin="platform"] .pf-nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-nav-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur-fast) ease;
}
html[data-skin="platform"] .pf-nav-item:hover::after { opacity: 1; }
html[data-skin="platform"] .pf-nav-item:hover { color: var(--pf-on-navy); }
html[data-skin="platform"] .pf-nav-item:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: -2px;
}
html[data-skin="platform"] .pf-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  color: inherit;
}
html[data-skin="platform"] .pf-nav-icon svg {
  inline-size: 20px;
  block-size: 20px;
  color: inherit;
}
html[data-skin="platform"] .pf-nav-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-inline-size: 22px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-nav-badge-bg);
  color: var(--pf-on-navy);
  font-family: var(--pf-font-num);
  font-size: 11px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
}
/* Active: white 700. Before the pill is placed (SSR, no script) the row paints
   the pill's look itself; once the pill is there it steps back. */
html[data-skin="platform"] .pf-nav-item.is-active,
html[data-skin="platform"] .pf-nav-mega.owns-active:not(.is-open) > .pf-nav-mega-head {
  color: var(--pf-on-navy);
  font-weight: 700;
}
html[data-skin="platform"] .pf-nav-track:not([data-pill]) .pf-nav-item.is-active,
html[data-skin="platform"] .pf-nav-track:not([data-pill]) .pf-nav-mega.owns-active:not(.is-open) > .pf-nav-mega-head {
  background: var(--pf-pill-bg);
  box-shadow: inset 0 0 0 1px var(--pf-pill-border);
}
html[data-skin="platform"] .pf-nav-item.is-active .pf-nav-count {
  background: var(--pf-brand);
}
/* Section label = the accordion toggle (one open group, as in classic). */
/* Owner 2026-10-01 (visual tidy-up): a clear heading — the rows' own 72 % white at 700 (was 52 %
   at 600 / 11.5px), centred on its chevron, with air between sections. */
html[data-skin="platform"] .pf-nav-label {
  display: flex;
  align-items: center;
  gap: 6px;
  inline-size: 100%;
  block-size: 36px;
  margin: 6px 0 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--pf-radius-hint);
  background: transparent;
  color: var(--pf-on-navy-nav);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
  text-align: start;
  cursor: pointer;
}
html[data-skin="platform"] .pf-nav-section.is-static > .pf-nav-label { cursor: default; }
html[data-skin="platform"] button.pf-nav-label:hover,
html[data-skin="platform"] .pf-nav-section.is-open > .pf-nav-label { color: var(--pf-on-navy); }
html[data-skin="platform"] .pf-nav-label:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: -2px;
}
html[data-skin="platform"] .pf-nav-label-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Chevrons point toward the reading direction while closed, down while open. */
html[data-skin="platform"] .pf-nav-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--pf-on-navy-chevron);
  transform: rotate(90deg);
  transition: transform 0.28s var(--pf-ease-quint);
}
html[data-skin="platform"][dir="ltr"] .pf-nav-chevron { transform: rotate(-90deg); }
html[data-skin="platform"] .pf-nav-section.is-open > .pf-nav-label .pf-nav-chevron,
html[data-skin="platform"] .pf-nav-mega.is-open > .pf-nav-mega-head .pf-nav-chevron {
  transform: none;
}
html[data-skin="platform"] .pf-nav-mega-head .pf-nav-chevron { margin-inline-start: auto; }
/* The rail's closed-group button exists only in the rail. */
html[data-skin="platform"] .pf-nav-railgroup { display: none; }
/* Folds (a group's rows, a mega-row's children): measured by the grid, no JS. A
   closed fold is also visibility:hidden (after it has folded), so the tour and
   the keyboard never land on a row nobody can see (the fold is `inert` too). */
html[data-skin="platform"] .pf-nav-fold {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.28s;
}
html[data-skin="platform"] .is-open > .pf-nav-fold {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}
html[data-skin="platform"] .pf-nav-fold-inner {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
}
/* Mega-row children (owner 2026-10-01): the same row height and 20px icon as every other row, one
   indent, hanging off a guide line under the parent's icon centre (14px padding + 10px). */
html[data-skin="platform"] .pf-nav-mega > .pf-nav-fold > .pf-nav-fold-inner { position: relative; }
html[data-skin="platform"] .pf-nav-mega > .pf-nav-fold > .pf-nav-fold-inner::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 6px;
  inset-inline-start: 23px;
  inline-size: 1px;
  background: var(--pf-nav-badge-bg);
  pointer-events: none;
}
html[data-skin="platform"] .pf-nav-item.is-child {
  padding-inline-start: 38px;
}
html[data-skin="platform"] .pf-nav-back .pf-nav-icon { color: var(--pf-on-navy-chevron); }
/* ── 4. Sidebar footer: Field promo, AI credits, billing alert, user row ── */
html[data-skin="platform"] .pf-sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px;
}
html[data-skin="platform"] .pf-promo {
  display: block;
  padding: 14px;
  border-radius: var(--pf-radius-panel);
  background: var(--pf-promo-bg);
  border: 1px solid var(--pf-promo-border);
  color: var(--pf-on-navy);
  text-decoration: none;
}
html[data-skin="platform"] .pf-promo:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-promo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-promo-title svg { color: var(--pf-accent-light); }
html[data-skin="platform"] .pf-promo-body {
  display: block;
  margin-block-start: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--pf-on-navy-promo);
}
/* A short viewport keeps the nav, not the advert. */
@media (max-height: 780px) {
  html[data-skin="platform"] .pf-promo { display: none; }
}
html[data-skin="platform"] .pf-sidebar-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
html[data-skin="platform"] .pf-credits {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  block-size: 30px;
  padding-inline: 10px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-switcher-border);
}
html[data-skin="platform"] .pf-credits .ai-credits {
  gap: 6px;
  color: var(--pf-on-navy);
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 700;
}
html[data-skin="platform"] .pf-credits .ai-credits .ai-credits-label {
  color: var(--pf-on-navy-caption);
  font-family: var(--pf-font-ui);
  font-weight: 500;
}
html[data-skin="platform"] .pf-credits .ai-credits.ok .ai-credits-ring { color: var(--pf-detect); }
html[data-skin="platform"] .pf-credits .ai-credits.warn .ai-credits-ring { color: var(--pf-accent-light); }
html[data-skin="platform"] .pf-credits .ai-credits.over .ai-credits-ring { color: var(--pf-live); }
html[data-skin="platform"] .pf-billing-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  min-block-size: 36px;
  padding: 6px 12px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-switcher-border);
  color: var(--pf-on-navy);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
html[data-skin="platform"] .pf-billing-alert::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-nav-hover);
  opacity: 0;
  pointer-events: none;
}
html[data-skin="platform"] .pf-billing-alert:hover::after { opacity: 1; }
html[data-skin="platform"] .pf-billing-alert:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-billing-dot {
  flex-shrink: 0;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--pf-detect);
}
html[data-skin="platform"] .pf-billing-alert[data-level="warn"] .pf-billing-dot { background: var(--pf-accent-light); }
html[data-skin="platform"] .pf-billing-alert[data-level="urgent"] .pf-billing-dot { background: var(--pf-live); }
html[data-skin="platform"] .pf-billing-text {
  flex: 1 1 auto;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-billing-alert svg { flex-shrink: 0; color: var(--pf-accent-light); }
html[data-skin="platform"] .pf-billing-alert[data-level="urgent"] svg { color: var(--pf-live); }
html[data-skin="platform"] .pf-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 0;
}
html[data-skin="platform"] .pf-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: -4px;
  padding: 4px;
  border: 0;
  border-radius: var(--pf-radius-control);
  background: transparent;
  color: var(--pf-on-navy);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
html[data-skin="platform"] button.pf-user::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-nav-hover);
  opacity: 0;
  pointer-events: none;
}
html[data-skin="platform"] button.pf-user:hover::after,
html[data-skin="platform"] button.pf-user[aria-expanded="true"]::after { opacity: 1; }
html[data-skin="platform"] .pf-user--static { cursor: default; }
html[data-skin="platform"] .pf-user:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 0;
}
html[data-skin="platform"] .pf-user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-user-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-on-navy);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-user-role {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--pf-on-navy-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-user-gear {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-tile);
  background: transparent;
  color: var(--pf-on-navy-chevron);
  cursor: pointer;
}
html[data-skin="platform"] .pf-user-gear::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-nav-hover);
  opacity: 0;
  pointer-events: none;
}
html[data-skin="platform"] .pf-user-gear:hover { color: var(--pf-on-navy); }
html[data-skin="platform"] .pf-user-gear:hover::after { opacity: 1; }
html[data-skin="platform"] .pf-user-gear:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 0;
}
/* ── 5. The 88px icon rail (tablet boards). Shared by the desktop collapse
   (>= 769px with [data-rail]) and the automatic 769–1180px range; the drawer
   (≤ 768px) is always the full sidebar. ─────────────────────────────────── */
@media (min-width: 769px) {
  html[data-skin="platform"] .pf-sidebar[data-rail] {
    flex-basis: var(--pf-rail-w);
    inline-size: var(--pf-rail-w);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-head {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    block-size: auto;
    padding: 18px 0 10px;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-head-tools { margin: 0; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-head .notif-bell {
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--pf-radius-inner);
  }
  /* The tools row keeps only the search, as one icon (the project switcher has no rail form). */
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-tools {
    align-items: center;
    padding: 0 0 6px;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-tools > :not(.pf-sidebar-search),
  html[data-skin="platform"] .pf-sidebar[data-rail] :is(.pf-sidebar-search-text, .pf-sidebar-search-hint) { display: none; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-search {
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border-radius: var(--pf-radius-panel);
    color: var(--pf-on-navy-rail);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-search > svg { inline-size: 22px; block-size: 22px; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-brand-mark {
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--pf-radius-inner);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-brand-mark svg { inline-size: 26px; block-size: 26px; }
  html[data-skin="platform"] .pf-sidebar[data-rail] :is(.pf-wordmark, .pf-account, .pf-promo, .pf-pill, .pf-nav-label, .pf-nav-chevron, .pf-user-text, .pf-user-gear:not(.pf-user-logout), .pf-billing-dot) {
    display: none;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-scroll { scrollbar-width: none; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav { padding: 0 0 8px; }
  html[data-skin="platform"] .pf-sidebar[data-rail] :is(.pf-nav-block, .pf-nav-fold-inner) {
    align-items: center;
    gap: 8px;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 18px 0;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--pf-on-navy-divider);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-section:not(.is-open) > .pf-nav-railgroup { display: flex; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-section:not(.is-open) > .pf-nav-fold,
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-mega > .pf-nav-fold { display: none; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-section.is-open > .pf-nav-fold { display: block; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-item {
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border-radius: var(--pf-radius-panel);
    color: var(--pf-on-navy-rail);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-icon,
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-icon svg {
    inline-size: 24px;
    block-size: 24px;
  }
  /* The label stays the accessible name; the native title is the tooltip. */
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-count {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 3px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    font-size: 10px;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-track .pf-nav-item.is-active,
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-nav-track .pf-nav-mega.owns-active > .pf-nav-mega-head {
    background: var(--pf-rail-active-bg);
    box-shadow: var(--pf-rail-active-ring);
    color: var(--pf-on-navy);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-foot {
    align-items: center;
    padding: 12px 0 16px;
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-sidebar-status { align-items: center; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-credits { justify-content: center; inline-size: 42px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-credits :is(.ltr-island, .ai-credits-label) { display: none; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-billing-alert { justify-content: center; inline-size: 42px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-billing-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-user-row { flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-user { flex: 0 0 auto; margin: 0; padding: 0; }
  html[data-skin="platform"] .pf-sidebar[data-rail] .pf-user .pf-avatar {
    inline-size: 42px;
    block-size: 42px;
    border-radius: 13px;
    font-size: 15px;
  }
}
/* 769–1180px: the same rail, whatever the collapse preference (the rules above,
   restated without [data-rail]) — unless the shell's toggle (or a tour step) has
   expanded it: then [data-open] draws the full 252px sidebar in place until the
   next navigation (the same `mobileOpen` state as the phone drawer). */
@media (min-width: 769px) and (max-width: 1180px) {
  html[data-skin="platform"] .pf-sidebar:not([data-open]) {
    flex-basis: var(--pf-rail-w);
    inline-size: var(--pf-rail-w);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-head {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    block-size: auto;
    padding: 18px 0 10px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-head-tools { margin: 0; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-head .notif-bell {
    inline-size: 42px;
    block-size: 42px;
    border-radius: var(--pf-radius-inner);
  }
  /* The tools row keeps only the search, as one icon (the project switcher has no rail form). */
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-tools {
    align-items: center;
    padding: 0 0 6px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-tools > :not(.pf-sidebar-search),
  html[data-skin="platform"] .pf-sidebar:not([data-open]) :is(.pf-sidebar-search-text, .pf-sidebar-search-hint) { display: none; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-search {
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border-radius: var(--pf-radius-panel);
    color: var(--pf-on-navy-rail);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-search > svg { inline-size: 22px; block-size: 22px; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-brand-mark {
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--pf-radius-inner);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-brand-mark svg { inline-size: 26px; block-size: 26px; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) :is(.pf-wordmark, .pf-account, .pf-promo, .pf-pill, .pf-nav-label, .pf-nav-chevron, .pf-user-text, .pf-user-gear:not(.pf-user-logout), .pf-billing-dot) {
    display: none;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-scroll { scrollbar-width: none; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav { padding: 0 0 8px; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) :is(.pf-nav-block, .pf-nav-fold-inner) {
    align-items: center;
    gap: 8px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 18px 0;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--pf-on-navy-divider);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-section:not(.is-open) > .pf-nav-railgroup { display: flex; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-section:not(.is-open) > .pf-nav-fold,
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-mega > .pf-nav-fold { display: none; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-section.is-open > .pf-nav-fold { display: block; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-item {
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    padding: 0;
    border-radius: var(--pf-radius-panel);
    color: var(--pf-on-navy-rail);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-icon,
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-icon svg {
    inline-size: 24px;
    block-size: 24px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-count {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 3px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    font-size: 10px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-track .pf-nav-item.is-active.is-active,
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-nav-track .pf-nav-mega.owns-active > .pf-nav-mega-head.pf-nav-mega-head {
    background: var(--pf-rail-active-bg);
    box-shadow: var(--pf-rail-active-ring);
    color: var(--pf-on-navy);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-foot {
    align-items: center;
    padding: 12px 0 16px;
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-sidebar-status { align-items: center; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-credits { justify-content: center; inline-size: 42px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-credits :is(.ltr-island, .ai-credits-label) { display: none; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-billing-alert { justify-content: center; inline-size: 42px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-billing-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-user-row { flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-user { flex: 0 0 auto; margin: 0; padding: 0; }
  html[data-skin="platform"] .pf-sidebar:not([data-open]) .pf-user .pf-avatar {
    inline-size: 42px;
    block-size: 42px;
    border-radius: 13px;
    font-size: 15px;
  }
}
/* The settings shell has no collapse preference: its hero toggle only exists
   for the tablet rail above (the phone uses the top bar's menu button). */
@media (min-width: 1181px) {
  html[data-skin="platform"] .pf-shell--settings .pf-hero .pf-hero-toggle { display: none; }
}
/* ── 6. Phone (≤ 768px): the top bar and the navy drawer ─────────────────── */
/* The bar is the classic `.header` element (its display rules decide when it
   shows); only its paint and contents are the platform's. */
html[data-skin="platform"] .pf-mobile-bar {
  position: relative;
  z-index: 20;
  justify-content: space-between;
  gap: 12px;
  block-size: 60px;
  padding-block: 0;
  padding-inline: 16px 12px;
  border: 0;
  background: var(--pf-navy);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-mobile-bar .pf-logo { gap: 10px; }
html[data-skin="platform"] .pf-mobile-bar .pf-brand-mark {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .pf-mobile-bar .pf-wordmark-name { font-size: 17px; }
html[data-skin="platform"] .pf-mobile-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-skin="platform"] .pf-scrim { display: none; }
@media (max-width: 768px) {
  html[data-skin="platform"] .pf-frame {
    display: block;
    min-block-size: 0;
  }
  html[data-skin="platform"] .pf-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    inline-size: min(calc(100vw - 48px), 320px);
    flex-basis: auto;
    block-size: 100dvh;
    border-inline-end: 0;
    box-shadow: var(--pf-fly-shadow);
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 0.3s var(--pf-ease-quint),
      visibility 0s linear 0.3s;
  }
  html[data-skin="platform"][dir="ltr"] .pf-sidebar { transform: translateX(-100%); }
  html[data-skin="platform"] .pf-sidebar[data-open],
  html[data-skin="platform"][dir="ltr"] .pf-sidebar[data-open] {
    visibility: visible;
    transform: none;
    transition:
      transform 0.3s var(--pf-ease-quint),
      visibility 0s linear 0s;
  }
  html[data-skin="platform"] .pf-shell[data-beta-strip] .pf-sidebar {
    inset-block-start: var(--beta-strip-h);
    block-size: calc(100dvh - var(--beta-strip-h));
  }
  html[data-skin="platform"] .pf-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgb(var(--pf-scrim-rgb) / 0.55);
  }
}
/* The glass icon buttons the bar and the hero share (bell, search link, menu,
   collapse toggle, theme, language, help): 42px on the hero, 40px on the bar. */
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle),
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button, .tour-help-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 42px;
  min-inline-size: 42px;
  block-size: 42px;
  padding: 0;
  border-radius: var(--pf-radius-control);
  background: var(--pf-glass-bg);
  border: 1px solid var(--pf-glass-border);
  box-shadow: none;
  color: var(--pf-on-navy);
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur));
  backdrop-filter: blur(var(--pf-glass-blur));
}
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle) {
  inline-size: 40px;
  min-inline-size: 40px;
  block-size: 40px;
}
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle)::after,
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-on-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur-fast) ease;
}
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle):hover,
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button):hover {
  background: var(--pf-glass-bg);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle):hover::after,
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button):hover::after { opacity: 0.08; }
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle):active::after,
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button):active::after { opacity: 0.14; }
html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle):focus-visible,
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button, .tour-help-btn):focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button, .tour-help-btn) svg {
  inline-size: 18px;
  block-size: 18px;
}
html[data-skin="platform"] .pf-hero .pf-hero-tool { display: inline-flex; margin: 0; }
/* The bell's count: a red pill cut out of the navy (canvas: top/inline-end -5px). */
html[data-skin="platform"] :is(.pf-hero, .pf-mobile-bar, .pf-sidebar-head) .notif-bell-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 5px;
  border: 2px solid var(--pf-bell-cutout);
  border-radius: var(--pf-radius-pill);
  /* the canvas #ff5a5f under white read 3.05:1; mixed a quarter toward the navy it clears 4.5:1 */
  background: color-mix(in srgb, var(--pf-live) 75%, var(--pf-bell-cutout));
  color: var(--pf-on-navy);
  direction: ltr; /* "9+" read "+9" under RTL */
  unicode-bidi: isolate;
  font-family: var(--pf-font-num);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
/* ── 7. Hero page header (canvas header.hd) ──────────────────────────────── */
html[data-skin="platform"] .pf-main > .page-header.pf-hero,
html[data-skin="platform"] .page-header.pf-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-block-size: var(--pf-hero-h);
  margin: 16px 16px 0;
  padding: 18px 28px 64px;
  border: 0;
  border-radius: var(--pf-radius-hero);
  background: var(--pf-hero-bg);
  box-shadow: var(--pf-hero-shadow);
  color: var(--pf-on-navy);
}
/* Photo layer: the image oversized (108%) for the parallax settle, 4 overlays. */
html[data-skin="platform"] .pf-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
html[data-skin="platform"] .pf-hero-img {
  position: absolute;
  inset: -4%;
  inline-size: 108%;
  block-size: 108%;
  max-inline-size: none;
  object-fit: cover;
}
html[data-skin="platform"] .pf-hero-shade {
  position: absolute;
  inset: 0;
}
/* Darkest behind the title, on the reading-start side. */
html[data-skin="platform"] .pf-hero-shade-side {
  background: linear-gradient(270deg, rgb(var(--pf-scrim-rgb) / 0.92) 0%, rgb(var(--pf-scrim-rgb) / 0.7) 38%, rgb(var(--pf-scrim-rgb) / 0.3) 72%, rgb(var(--pf-scrim-rgb) / 0.18) 100%);
}
html[data-skin="platform"][dir="ltr"] .pf-hero-shade-side {
  background: linear-gradient(90deg, rgb(var(--pf-scrim-rgb) / 0.92) 0%, rgb(var(--pf-scrim-rgb) / 0.7) 38%, rgb(var(--pf-scrim-rgb) / 0.3) 72%, rgb(var(--pf-scrim-rgb) / 0.18) 100%);
}
html[data-skin="platform"] .pf-hero-shade-fade {
  background: linear-gradient(180deg, rgb(var(--pf-scrim-rgb) / 0.35) 0%, rgb(var(--pf-scrim-rgb) / 0) 30%, rgb(var(--pf-scrim-rgb) / 0.55) 100%);
}
html[data-skin="platform"] .pf-hero-shade-glow {
  background: radial-gradient(70% 120% at 100% 0%, rgb(var(--pf-brand-rgb) / 0.3) 0%, rgb(var(--pf-brand-rgb) / 0) 60%);
}
html[data-skin="platform"][dir="ltr"] .pf-hero-shade-glow {
  background: radial-gradient(70% 120% at 0% 0%, rgb(var(--pf-brand-rgb) / 0.3) 0%, rgb(var(--pf-brand-rgb) / 0) 60%);
}
html[data-skin="platform"] .pf-hero-rule {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(270deg, var(--pf-accent-light) 0%, var(--pf-brand) 45%, rgb(var(--pf-brand-rgb) / 0) 100%);
}
html[data-skin="platform"][dir="ltr"] .pf-hero-rule {
  background: linear-gradient(90deg, var(--pf-accent-light) 0%, var(--pf-brand) 45%, rgb(var(--pf-brand-rgb) / 0) 100%);
}
/* Top row: toggle + breadcrumb | search, bell, theme, language. */
html[data-skin="platform"] .pf-hero-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 44px;
}
html[data-skin="platform"] .pf-hero-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-hero .pf-hero-toggle {
  inline-size: 36px;
  min-inline-size: 36px;
  block-size: 36px;
  border-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .pf-hero .page-header_crumbs.pf-hero-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
  color: var(--pf-on-navy-crumb);
  font-size: 13px;
  font-weight: 500;
}
html[data-skin="platform"] .pf-hero .pf-hero-crumbs .crumb { gap: 8px; }
html[data-skin="platform"] .pf-hero .pf-hero-crumbs a {
  color: inherit;
  text-decoration: none;
  border-radius: var(--pf-radius-hint);
}
html[data-skin="platform"] .pf-hero .pf-hero-crumbs a:hover {
  color: var(--pf-on-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-skin="platform"] .pf-hero .pf-hero-crumbs a:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-hero .pf-hero-crumbs .crumb:last-child { color: var(--pf-on-navy); }
html[data-skin="platform"] .pf-hero .pf-hero-crumbs .crumb-sep::before {
  color: var(--pf-on-navy-crumb-sep);
  font-size: 15px;
}
html[data-skin="platform"] .pf-hero-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Bottom row: eyebrow, title, description | actions. */
html[data-skin="platform"] .pf-hero .page-header_content.pf-hero-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 20px;
  margin-block-start: auto;
  padding-block-start: 6px;
}
html[data-skin="platform"] .pf-hero .pf-hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 360px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-hero .page-header_title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-hero .page-header_title {
  margin: 0;
  color: var(--pf-on-navy);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-shadow: var(--pf-title-shadow);
  overflow-wrap: anywhere;
}
/* A code or a date in the hero title / subtitle (EXT-2026-0005, 2026-09-26) stays on one line:
   PageHeader.tsx wraps each in <bdi dir="ltr" class="pf-nobr">; the words around it still wrap. */
html[data-skin="platform"] .pf-hero .pf-nobr {
  white-space: nowrap;
  overflow-wrap: normal;
  unicode-bidi: isolate;
}
html[data-skin="platform"] .pf-hero .page-header_description {
  max-inline-size: 620px;
  margin: 0;
  color: var(--pf-on-navy-hero-text);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
html[data-skin="platform"] .pf-hero .page-header_description a { color: var(--pf-on-navy); }
html[data-skin="platform"] .pf-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* A kit Badge a page hands to PageActions (e.g. the AI quota) lands on the navy: tinted chip text
   would read 2.6:1 there, so it takes the glass chip look; the tone survives as the border. */
html[data-skin="platform"] .pf-hero .ds-badge {
  background: var(--pf-glass-chip-bg);
  border: 1px solid var(--pf-glass-chip-border);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-hero .ds-badge--red { border-color: var(--pf-live); }
html[data-skin="platform"] .pf-hero .ds-badge--amber { border-color: var(--pf-warning); }
html[data-skin="platform"] .pf-hero .pf-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-inline-size: 100%;
  block-size: 26px;
  margin: 0;
  padding-inline: 10px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-glass-chip-bg);
  border: 1px solid var(--pf-glass-chip-border);
  color: var(--pf-on-navy);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur-sm));
  backdrop-filter: blur(var(--pf-glass-blur-sm));
}
/* Actions: the page's primary is the hero CTA, everything else glass. The kit
   (kit.css) draws its buttons from --pf-kit-btn-*; the hero sets them here and
   restates the visuals below for buttons the kit rules do not reach. */
html[data-skin="platform"] .pf-hero-actions {
  --pf-kit-btn-primary-bg: var(--pf-brand);
  --pf-kit-btn-primary-bg-hover: var(--pf-brand-deep);
  --pf-kit-btn-primary-fg: var(--pf-on-navy);
  --pf-kit-btn-primary-border: var(--pf-hero-primary-border);
  --pf-kit-btn-primary-shadow: var(--pf-hero-cta-shadow);
  --pf-kit-btn-bg: var(--pf-glass-bg);
  --pf-kit-btn-bg-hover: rgb(var(--pf-accent-light-rgb) / 0.2);
  --pf-kit-btn-fg: var(--pf-on-navy);
  --pf-kit-btn-border: var(--pf-glass-border);
  --pf-kit-btn-shadow: none;
}
html[data-skin="platform"] .pf-hero .page-header_actions.pf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  inline-size: auto;
  max-inline-size: 100%;
}
html[data-skin="platform"] .pf-hero-actions :is(.ds-page-actions, .ds-page-actions-utilities) {
  flex-wrap: wrap;
  gap: 10px;
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn {
  block-size: 42px;
  padding-inline: 16px;
  border-radius: var(--pf-radius-control);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn-icon-only { inline-size: 42px; padding-inline: 0; }
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn:not(.ant-btn-primary):not(:disabled) {
  background: var(--pf-glass-bg);
  background-image: none;
  border: 1px solid var(--pf-glass-border);
  color: var(--pf-on-navy);
  -webkit-backdrop-filter: blur(var(--pf-glass-blur));
  backdrop-filter: blur(var(--pf-glass-blur));
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn:not(.ant-btn-primary):not(:disabled):hover {
  background: rgb(var(--pf-accent-light-rgb) / 0.2);
  border-color: var(--pf-hero-primary-border);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn-primary:not(.ant-btn-dangerous):not(:disabled) {
  background: var(--pf-brand);
  background-image: none;
  border: 1px solid var(--pf-hero-primary-border);
  box-shadow: var(--pf-hero-cta-shadow);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn-primary:not(.ant-btn-dangerous):not(:disabled):hover {
  background: var(--pf-brand-deep);
  background-image: none;
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn-dangerous:not(.ant-btn-primary):not(:disabled) { color: var(--pf-live); }
/* Triple class: outranks kit.css's neutral disabled state (0,5,1, imported later) — on the navy hero
   the disabled button stays glass. */
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn.ant-btn:disabled {
  background: var(--pf-glass-bg);
  background-image: none;
  border-color: var(--pf-glass-border);
  color: var(--pf-on-navy-caption);
}
html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-hero-actions > a:not(.ant-btn) { color: var(--pf-on-navy); }
/* ── 8. Page body (the canvas .wbody) ────────────────────────────────────
   The canvas lifts the first card row 44px into the hero. That only reads
   when the first thing on the page IS a surface (cards, a table card, alerts,
   a segmented track): a heading or a transparent toolbar would put dark text
   on the navy photo. So the body rises only when the first block (looked up to
   four wrappers deep: pages wrap their content in space-y divs) is one of the
   surfaces below; otherwise it starts 20px under the hero. A screen that draws
   its own first card row opts in with .pf-surface or [data-pf-surface]. */
html[data-skin="platform"] .pf-main {
  --pf-body-rise: var(--pf-hero-overlap);
}
html[data-skin="platform"] .pf-main > .page-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
  margin-block-start: 20px;
  padding: 0 var(--pf-gutter) 24px;
}
html[data-skin="platform"] .pf-main > .page-body:has(> :first-child:is(.ds-stats, .ds-table-wrap, .ds-notices, .ds-alert, .ds-seg, .ds-card-grid, .ant-card, .ant-alert, .pf-surface, [data-pf-surface], :is(.rounded-xl, .rounded-2xl).border:is(.bg-surface-raised, .bg-surface))),
html[data-skin="platform"] .pf-main > .page-body:has(> :first-child > :first-child:is(.ds-stats, .ds-table-wrap, .ds-notices, .ds-alert, .ds-seg, .ds-card-grid, .ant-card, .ant-alert, .pf-surface, [data-pf-surface], :is(.rounded-xl, .rounded-2xl).border:is(.bg-surface-raised, .bg-surface))),
html[data-skin="platform"] .pf-main > .page-body:has(> :first-child > :first-child > :first-child:is(.ds-stats, .ds-table-wrap, .ds-notices, .ds-alert, .ds-seg, .ds-card-grid, .ant-card, .ant-alert, .pf-surface, [data-pf-surface], :is(.rounded-xl, .rounded-2xl).border:is(.bg-surface-raised, .bg-surface))),
html[data-skin="platform"] .pf-main > .page-body:has(> :first-child > :first-child > :first-child > :first-child:is(.ds-stats, .ds-table-wrap, .ds-notices, .ds-alert, .ds-seg, .ds-card-grid, .ant-card, .ant-alert, .pf-surface, [data-pf-surface], :is(.rounded-xl, .rounded-2xl).border:is(.bg-surface-raised, .bg-surface))) {
  margin-block-start: calc(-1 * var(--pf-body-rise));
}
html[data-skin="platform"] .pf-main > .page-body--detail {
  max-inline-size: calc(1200px + 2 * var(--pf-gutter));
  margin-inline: auto;
}
html[data-skin="platform"] .pf-main > .page-body--form {
  max-inline-size: calc(48rem + 2 * var(--pf-gutter));
  margin-inline: auto;
}
/* The sticky form bar bleeds to the body's gutters (classic: to .main-content's 32px). */
@media screen {
  html[data-skin="platform"] .pf-main .ds-form-actions.is-sticky {
    margin-inline: calc(-1 * var(--pf-gutter));
    padding-inline: var(--pf-gutter);
  }
}
/* The Brain dock docks beside the page, not over it (classic: .global-wrap .main-content). */
@media (min-width: 640px) and (max-width: 1279px) {
  html[data-skin="platform"][data-brain-dock="open"][data-brain-dock-pin="on"] .pf-main { padding-inline-end: 320px; }
}
@media (min-width: 1280px) {
  html[data-skin="platform"][data-brain-dock="open"] .pf-main { padding-inline-end: 380px; }
}
/* ── 9. Tablet (769–1180px): 206px hero, 36px gutters ─────────────────────── */
@media (min-width: 769px) and (max-width: 1180px) {
  html[data-skin="platform"] .pf-main {
    --pf-gutter: 36px;
    --pf-body-rise: 40px;
  }
  html[data-skin="platform"] .pf-main > .page-header.pf-hero,
  html[data-skin="platform"] .page-header.pf-hero { min-block-size: var(--pf-hero-h-tablet); }
  html[data-skin="platform"] .pf-main > .page-body { gap: 14px; }
}
/* ── 10. Phone (≤ 768px): compact hero, 16px gutters ─────────────────────── */
@media (max-width: 768px) {
  html[data-skin="platform"] .pf-main {
    --pf-gutter: 16px;
    --pf-body-rise: 28px;
  }
  html[data-skin="platform"] .pf-main > .page-header.pf-hero,
  html[data-skin="platform"] .page-header.pf-hero {
    min-block-size: 0;
    margin: 12px 12px 0;
    padding: 14px 16px 44px;
    border-radius: 18px;
  }
  /* The top bar carries search, bell and the menu here. */
  html[data-skin="platform"] .pf-hero .pf-hero-top .pf-hero-toggle { display: none; }
  html[data-skin="platform"] .pf-hero-top { min-block-size: 36px; align-items: flex-start; }
  html[data-skin="platform"] .pf-hero-tools { gap: 8px; }
  html[data-skin="platform"] .pf-hero :is(.pf-hero-tool > button, .tour-help-btn) {
    inline-size: 38px;
    min-inline-size: 38px;
    block-size: 38px;
  }
  html[data-skin="platform"] .pf-hero .page-header_content.pf-hero-main {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-block-start: 16px;
  }
  html[data-skin="platform"] .pf-hero .pf-hero-title { flex: 0 0 auto; }
  html[data-skin="platform"] .pf-hero .page-header_title { font-size: 24px; }
  html[data-skin="platform"] .pf-hero .page-header_description { font-size: 13.5px; }
  html[data-skin="platform"] .pf-hero .page-header_actions.pf-hero-actions { justify-content: flex-start; }
  html[data-skin="platform"] .pf-hero-actions .ant-btn.ant-btn { block-size: 40px; }
  html[data-skin="platform"] .pf-main > .page-body { margin-block-start: 14px; }
}
/* ── 10b. The shell's own popups: the user menu and the notifications list ──
   Both are classic components (app/routes/app/layout.tsx) whose secondary text
   is hard-coded for a white popup: #434c69 / #a1aac8 read at 1.8-2.3:1, and the
   white logout tile sits alone on the dark card. Tokens instead, both modes. */
html[data-skin="platform"] .user-dropdown-inner-info-email,
html[data-skin="platform"] .user-dropdown-inner-subscription-trial h4,
html[data-skin="platform"] :is(.language-switcher-inner, .theme-switcher-inner) span {
  color: var(--pf-text-2);
}
html[data-skin="platform"] :is(.user-dropdown-inner-settings, .user-dropdown-inner-referral) svg path,
html[data-skin="platform"] :is(.language-switcher-inner, .theme-switcher-inner) span svg path,
html[data-skin="platform"] .theme-switcher-inner .sun path {
  stroke: var(--pf-text-2);
}
html[data-skin="platform"] .language-switcher-inner .language path { fill: var(--pf-text-2); }
html[data-skin="platform"] .user-dropdown-inner-logout {
  background: var(--pf-card);
  box-shadow: 0 0 0 1px var(--pf-border-strong);
  color: var(--pf-danger);
}
html[data-skin="platform"] .user-dropdown-inner-logout:active { background: var(--pf-sunken); }
html[data-skin="platform"] :is(.notif-pop-item-date, .notif-pop-empty) { color: var(--color-foreground-onBaseFaint); }
html[data-skin="platform"] .notif-pop-all { color: var(--pf-primary-text); }
/* ── 11. Print: the page, not the chrome ─────────────────────────────────── */
@media print {
  html[data-skin="platform"] :is(.pf-sidebar, .pf-mobile-bar, .pf-scrim, .pf-hero-photo, .pf-hero-tools, .pf-hero-toggle, .pf-hero-actions) {
    display: none;
  }
  html[data-skin="platform"] .pf-frame { display: block; min-block-size: 0; }
  html[data-skin="platform"] .pf-main { --pf-body-rise: 0px; }
  html[data-skin="platform"] .pf-main > .page-header.pf-hero,
  html[data-skin="platform"] .page-header.pf-hero {
    min-block-size: 0;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: CanvasText;
  }
  html[data-skin="platform"] .pf-hero :is(.page-header_title, .page-header_description, .pf-hero-crumbs, .pf-hero-crumbs .crumb:last-child, .pf-hero-chip) {
    color: CanvasText;
    text-shadow: none;
  }
  html[data-skin="platform"] .pf-main > .page-body:nth-child(n) {
    margin-block-start: 0;
    padding: 0;
  }
}
/* ============================================================================
 * Platform design: the component KIT (cards, DataTable, StatGrid, badges,
 * SegmentedTabs, PageToolbar, forms, alerts, drawers/modals, antd controls).
 *
 * CSS over the EXISTING classes of app/components/*.tsx (no component is edited),
 * so every page built from the kit (and the hand-rolled Tailwind cards/tables
 * that read the semantic tokens) takes the canvas look with no per-page work.
 * Targets: scratchpad/reports/canvas-design-language.md section 5.
 *
 * Rules of this file:
 *  - every selector starts with html[data-skin="platform"] (contract test);
 *  - colours come from ./tokens.css (--pf-* and the semantic tokens), never raw;
 *  - logical properties only, so English (LTR) mirrors the RTL canvas;
 *  - the classic sheets are unlayered and some are specific (the dropship
 *    .ant-btn-primary gradient is (0,3,0), the StatGrid dividers are (0,3,0)),
 *    so a few selectors below carry an extra :nth-child(n) / repeated class to
 *    win on specificity instead of !important. The only !important in this file
 *    beats an inline style (the recharts tooltip).
 *  - no animation lives here (motion.css owns motion); the few colour
 *    transitions are switched off under prefers-reduced-motion at the end.
 *
 * Button hooks for the shell pass: the primary / secondary visuals read
 * --pf-kit-btn-* custom properties (defaults below), so a region such as the
 * hero header can restyle its buttons by setting those variables on an
 * ancestor instead of out-specifying these rules.
 * ============================================================================ */
/* ── 0. Kit-local custom properties (defaults) ──────────────────────────────── */
html[data-skin="platform"] {
  --pf-kit-btn-primary-bg: var(--pf-primary);
  --pf-kit-btn-primary-bg-hover: var(--color-background-primaryHover);
  --pf-kit-btn-primary-fg: var(--color-foreground-onPrimary);
  --pf-kit-btn-primary-border: transparent;
  --pf-kit-btn-primary-shadow: var(--pf-primary-shadow);
  --pf-kit-btn-bg: var(--pf-card);
  --pf-kit-btn-bg-hover: var(--color-background-raisedHover);
  --pf-kit-btn-fg: var(--pf-text);
  --pf-kit-btn-border: var(--pf-border-strong);
  --pf-kit-btn-shadow: var(--pf-e1);
  --pf-kit-focus-ring: 0 0 0 3px var(--pf-primary-tint-strong);
}
/* ── 1. Numbers: Outfit, LTR-isolated (the canvas sets every figure in Outfit) ── */
html[data-skin="platform"] .ltr-island:not(.font-mono),
html[data-skin="platform"] .ds-table td.is-num,
html[data-skin="platform"] .ds-seg-count,
html[data-skin="platform"] .ds-toolbar-total-value,
html[data-skin="platform"] .ds-pagination-info,
html[data-skin="platform"] .ds-entity-figure,
html[data-skin="platform"] .ds-toolbar-filter-count {
  font-family: var(--pf-font-num);
}
/* ── 2. Cards ───────────────────────────────────────────────────────────────── */
/* ui.Card / EntityCard = antd Card: surface, 1px border, radius 20, e1. The fill,
   border colour (colorBorderSecondary) and 20px padding come from the antd theme,
   so a page's own border utility (border-line-primary ...) still wins over them. */
html[data-skin="platform"] .ant-card {
  border-radius: var(--pf-radius-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ant-card .ant-card-head-title {
  font-size: 16px;
  font-weight: 700;
}
/* Hand-rolled Tailwind cards (rounded-xl / rounded-2xl + border + a surface
   background) inside the page body take the same elevation. Radius is already
   20 / 24 through --shape-radius-container / -supercontainer and the border
   colour is the page's own utility. Elements that carry their own shadow utility
   (popovers drawn in the page) keep it. */
html[data-skin="platform"] .page-body :is(.rounded-xl, .rounded-2xl).border:is(.bg-surface-raised, .bg-surface):not([class*="shadow-"]) {
  box-shadow: var(--pf-e1);
}
/* bg-surface is the PAGE colour in this design (#f2f3f6 light), while in classic
   it was a near-white that pages used as "white panel". Inside the page body and
   the overlays, a panel drawn with bg-surface therefore takes the card colour;
   form controls drawn with it take the sunken field colour (section 11). */
html[data-skin="platform"] .page-body .bg-surface:not(input, select, textarea, button),
html[data-skin="platform"] [data-ds-pop].bg-surface,
html[data-skin="platform"] [role="dialog"].bg-surface,
html[data-skin="platform"] .brain-dock.bg-surface {
  background-color: var(--pf-card);
}
/* EntityCard: the cover image bleeds to the card edges like the canvas project card. */
html[data-skin="platform"] .ant-card.ds-entity-card {
  overflow: hidden;
}
html[data-skin="platform"] .ds-entity-card .ds-entity-media {
  margin-block-start: calc(-1 * var(--ant-card-body-padding, 20px));
  margin-inline: calc(-1 * var(--ant-card-body-padding, 20px));
  margin-block-end: 14px;
  border-radius: 0;
}
html[data-skin="platform"] .ds-entity-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-entity-subtitle {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-entity-meta dt {
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-entity-meta dd {
  color: var(--pf-text);
  font-weight: 600;
}
html[data-skin="platform"] .ds-entity-figure {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-entity-footer {
  border-block-start-color: var(--pf-border);
}
/* Semantic utilities some pages use that app.css never defined (line-subtle,
   line-default, fg-default, surface-default / -secondary / -base): Tailwind emits
   nothing for them, so a `border border-line-subtle` card draws its border in
   currentColor (near-black in light, white in dark). The platform maps them onto
   the tokens they were meant to be. */
html[data-skin="platform"] :is(.border-line-subtle, .border-line-default) {
  border-color: var(--pf-border);
}
html[data-skin="platform"] .divide-line-subtle > :not(:last-child) {
  border-color: var(--pf-border);
}
html[data-skin="platform"] .text-fg-default {
  color: var(--pf-text);
}
html[data-skin="platform"] .bg-surface-secondary {
  background-color: var(--pf-segmented);
}
html[data-skin="platform"] .bg-surface-default:not(input, select, textarea) {
  background-color: var(--pf-card);
}
/* ── 3. Section headings (Section / SectionHeader / FormSection legend) ─────── */
html[data-skin="platform"] .ds-section-head {
  margin-block-end: 14px;
}
html[data-skin="platform"] .ds-section-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-section-desc {
  margin-block-start: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-section-head--ruled,
html[data-skin="platform"] .ds-form-legend--ruled {
  border-block-end-color: var(--pf-border);
}
/* DetailHeader (the in-page record header; the shell header is shell.css). */
html[data-skin="platform"] .ds-page-header-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-page-header-desc {
  font-size: 13px;
  color: var(--pf-text-2);
}
/* ── 4. KPI tiles: StatGrid / Stat ─────────────────────────────────────────────
   Classic draws one white panel with hairline dividers; the canvas draws each
   KPI as its own card on a 16px grid. :nth-child(n) lifts the tile rule above
   the classic divider rules (.ds-stats--4 .ds-stat:nth-child(4n+1) is (0,3,0)). */
html[data-skin="platform"] .ds-stats {
  gap: var(--pf-gap);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  margin-block-end: 20px;
}
html[data-skin="platform"] .ds-stats .ds-stat:nth-child(n) {
  container-type: inline-size;
  gap: 0;
  min-block-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ds-stats.ds-stats--compact .ds-stat:nth-child(n) {
  padding: 14px 16px;
}
html[data-skin="platform"] .ds-stat-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-stat-title a {
  color: inherit;
  text-decoration: none;
}
html[data-skin="platform"] .ds-stat-title a:hover {
  color: var(--pf-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Value: Outfit 30/700 -0.5 where the tile is wide enough; the tile is a size
   container, so a long money value in a narrow tile steps down instead of
   overflowing (cqi = 1% of the tile's inner width). */
html[data-skin="platform"] .ds-stat-count {
  margin-block-start: 6px;
  font-family: var(--pf-font-num);
  font-size: clamp(18px, 11.5cqi, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-stat-count.green { color: var(--pf-success-text); }
html[data-skin="platform"] .ds-stat-count.red { color: var(--pf-danger); }
html[data-skin="platform"] .ds-stat-count.warning { color: var(--pf-warning-text); }
/* The dense 6-up grid (dashboards): a 170px tile cannot hold a 30px money value. */
html[data-skin="platform"] .ds-stats:not(.ds-stats--4):not(.ds-stats--3):not(.ds-stats--2) .ds-stat-count {
  font-size: clamp(15px, 11cqi, 24px);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
html[data-skin="platform"] .ds-stats.ds-stats--compact .ds-stat-count {
  margin-block-start: 4px;
  font-size: clamp(15px, 9cqi, 20px);
  line-height: 1.2;
}
/* A narrow tile (the phone's 2-up grid is ~130px inside): a money value is one
   unbreakable run («10,838,276.00 ج.م.» is joined by a no-break space, ~9em
   wide), so the floors above overflowed the card. Size it to the tile instead. */
@container (max-width: 170px) {
  html[data-skin="platform"] .ds-stats.ds-stats .ds-stat:nth-child(n) .ds-stat-count.ds-stat-count {
    font-size: clamp(12px, 10cqi, 18px);
    letter-spacing: -0.3px;
  }
}
html[data-skin="platform"] .ds-stat-desc {
  margin-block-start: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--pf-text-2);
}
/* ── 5. DataTable (.ds-table-wrap > table.ds-table) ─────────────────────────────
   The table sits in a card; the header row is a sunken 38px band with radius 10
   floating inside it; body rows are 54px with a 1px divider, the last row none.
   border-collapse: separate is what lets the header cells carry a radius. */
html[data-skin="platform"] .ds-table-wrap {
  padding: 8px 10px 4px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ds-table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-table caption {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-table thead th {
  block-size: var(--pf-table-head-h);
  padding-block: 0;
  padding-inline: 12px;
  border-block-end: 0;
  background: var(--pf-sunken);
  color: var(--pf-text-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
html[data-skin="platform"] .ds-table thead tr:first-child th:first-child {
  border-start-start-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .ds-table thead tr:last-child th:first-child {
  border-end-start-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .ds-table thead tr:first-child th:last-child {
  border-start-end-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .ds-table thead tr:last-child th:last-child {
  border-end-end-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .ds-table tbody td {
  block-size: calc(var(--pf-table-row-h) + 4px);
  padding-block: 8px;
  padding-inline: 12px;
  border-block-end: 1px solid var(--pf-border);
  font-size: 13.5px;
}
html[data-skin="platform"] .ds-table tbody tr:last-child td {
  border-block-end: 0;
}
/* compact (the dense registers) = the canvas row, 54; the default density keeps a
   little more air (classic drew 80 / 52). */
html[data-skin="platform"] .ds-table.ds-table--compact tbody td {
  block-size: var(--pf-table-row-h);
  padding-block: 6px;
}
/* Selected row: the primary tint (opaque, it paints under sticky cells too). */
html[data-skin="platform"] .ds-table tbody tr:is([aria-selected="true"], .is-selected, .selected) td {
  background: var(--color-background-primarySubtle);
}
html[data-skin="platform"] .ds-table td.is-num {
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-table td.is-negative,
html[data-skin="platform"] .ds-table td.is-negative .ltr-island {
  color: var(--pf-danger);
}
html[data-skin="platform"] .ds-table tfoot td {
  padding-block: 12px;
  padding-inline: 12px;
  border-block-start: 1px solid var(--pf-border);
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-table tbody tr.ds-table-detail td {
  background: var(--pf-sunken);
}
/* The first / last cell keep the canvas 16px row inset (not in the stacked phone rows). */
@media (min-width: 641px) {
  html[data-skin="platform"] .ds-table :is(th, td):first-child { padding-inline-start: 16px; }
  html[data-skin="platform"] .ds-table :is(th, td):last-child { padding-inline-end: 16px; }
  html[data-skin="platform"] .ds-table td.is-actions:last-child { padding-inline-end: 8px; }
}
/* Cells */
html[data-skin="platform"] .ds-cell-primary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] a.ds-cell-primary:hover {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ds-cell-secondary {
  font-size: 12px;
  font-weight: 400;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-cell-avatar {
  border-radius: var(--pf-radius-tile);
  border-color: var(--pf-border);
  background: var(--pf-sunken);
  color: var(--pf-text-3);
}
html[data-skin="platform"] .ds-cell-chip {
  block-size: 23px;
  padding-block: 0;
  padding-inline: 9px;
  gap: 5px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-segmented);
  color: var(--pf-text-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
html[data-skin="platform"] .ds-sort-icon { color: var(--pf-text-3); }
html[data-skin="platform"] .is-sorted .ds-sort-icon { color: var(--pf-primary-text); }
html[data-skin="platform"] .ds-expand-btn {
  border-color: var(--pf-border-strong);
  border-radius: var(--pf-radius-tile);
  background: var(--pf-card);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ds-table-wrap .ds-pagination {
  border-block-start-color: var(--pf-border);
}
/* ── 6. Every other <table> in the content column ──────────────────────────────
   dropship-shell.css restyles them globally; the platform keeps its geometry
   (cell borders stay collapsed, dense editors keep their 12px padding) and
   swaps the paint: a sunken header band, 12/600 secondary, 13.5 body. */
html[data-skin="platform"] .main-content table:not(.ds-table) {
  font-family: var(--font-sans);
}
html[data-skin="platform"] .main-content table:not(.ds-table) thead th {
  background: var(--pf-sunken);
  color: var(--pf-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  border-block-end-color: var(--pf-border);
}
html[data-skin="platform"] .main-content table:not(.ds-table) tbody td {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pf-text);
  border-block-end-color: var(--pf-border);
}
/* ── 7. Badges / chips (ui.Badge = span.ds-badge.ds-badge--{color}) ─────────── */
html[data-skin="platform"] .ds-badge {
  block-size: 23px;
  padding-block: 0;
  padding-inline: 9px;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
html[data-skin="platform"] .ds-badge--gray { background: var(--pf-segmented); color: var(--pf-text-2); }
html[data-skin="platform"] .ds-badge--blue { background: var(--pf-primary-tint); color: var(--pf-primary-text); }
html[data-skin="platform"] .ds-badge--green { background: var(--pf-success-tint); color: var(--pf-success-text); }
html[data-skin="platform"] .ds-badge--red { background: var(--pf-danger-tint); color: var(--pf-danger); }
html[data-skin="platform"] .ds-badge--amber { background: var(--pf-warning-tint); color: var(--pf-warning-text); }
/* ── 8. SegmentedTabs / ChoiceStrip (.ds-seg) ─────────────────────────────────── */
html[data-skin="platform"] .ds-seg {
  block-size: auto;
  min-block-size: 38px;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--pf-radius-control);
  background: var(--pf-segmented);
}
html[data-skin="platform"] .ds-seg-btn {
  block-size: 32px;
  padding-inline: 14px;
  border-radius: var(--pf-radius-seg);
  color: var(--pf-text-2);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--pf-dur-fast) var(--pf-ease-out), background-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .ds-seg-btn:not(.active):not(:disabled):hover {
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-seg-btn.active {
  background: var(--pf-card);
  color: var(--pf-text);
  font-weight: 600;
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ds-seg-count,
html[data-skin="platform"] .ds-seg-btn.active .ds-seg-count {
  color: var(--pf-text-2); /* a count is content: text-3 measured 2.5:1 on the track */
  font-weight: 500;
}
html[data-skin="platform"] .ds-seg-btn:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 1px;
}
/* ── 9. PageToolbar: search, total, filters ──────────────────────────────────── */
html[data-skin="platform"] .ds-toolbar {
  gap: 10px;
}
@media (min-width: 769px) {
  html[data-skin="platform"] .ds-toolbar-search {
    flex: 1 1 240px;
    min-inline-size: 180px;
    max-inline-size: 320px;
  }
}
html[data-skin="platform"] .ds-search {
  block-size: var(--pf-control-h);
  padding-block: 0;
  padding-inline: 12px;
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-control);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .ds-search:focus-within {
  border-color: var(--pf-primary);
  box-shadow: var(--pf-kit-focus-ring);
}
html[data-skin="platform"] .ds-search-icon { color: var(--pf-text-3); }
html[data-skin="platform"] .ds-search-input {
  font-size: 13.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-search-input::placeholder { color: var(--pf-placeholder); }
html[data-skin="platform"] .ds-toolbar-total {
  block-size: var(--pf-control-h);
  padding-inline: 14px;
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  font-size: 13px;
}
html[data-skin="platform"] .ds-toolbar-total-value { font-weight: 700; color: var(--pf-text); }
html[data-skin="platform"] .ds-toolbar-total-value.is-positive { color: var(--pf-success-text); }
html[data-skin="platform"] .ds-toolbar-total-label { color: var(--pf-text-2); }
html[data-skin="platform"] .ds-filterbar .ds-filter-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-pagination-info {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* ── 10. Buttons (antd) ─────────────────────────────────────────────────────────
   Primary = solid primary + the canvas shadow (beats the dropship gradient,
   (0,3,0) / hover (0,5,0)); secondary = surface + strong border + e1; danger =
   the danger tint / text pair (the canvas draws no solid danger button). */
html[data-skin="platform"] .ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success) {
  border: 1px solid var(--pf-kit-btn-primary-border);
  background-color: var(--pf-kit-btn-primary-bg);
  background-image: none;
  color: var(--pf-kit-btn-primary-fg);
  box-shadow: var(--pf-kit-btn-primary-shadow);
}
html[data-skin="platform"] .ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success):not(:disabled):hover,
html[data-skin="platform"] .ant-btn-primary:not(.ant-btn-dangerous):not(.bg-surface-success):not(:disabled):active {
  border-color: var(--pf-kit-btn-primary-border);
  background-color: var(--pf-kit-btn-primary-bg-hover);
  background-image: none;
  color: var(--pf-kit-btn-primary-fg);
}
html[data-skin="platform"] .ant-btn-default:not(.ant-btn-dangerous):not(:disabled) {
  border-color: var(--pf-kit-btn-border);
  background-color: var(--pf-kit-btn-bg);
  background-image: none;
  color: var(--pf-kit-btn-fg);
  box-shadow: var(--pf-kit-btn-shadow);
}
html[data-skin="platform"] .ant-btn-default:not(.ant-btn-dangerous):not(:disabled):hover {
  border-color: var(--pf-kit-btn-border);
  background-color: var(--pf-kit-btn-bg-hover);
  background-image: none;
  color: var(--pf-kit-btn-fg);
}
html[data-skin="platform"] .ant-btn-default:not(.ant-btn-dangerous):not(:disabled):active {
  background-color: var(--color-background-sunkenStrong);
}
/* Disabled: one neutral state for primary, secondary, danger and the green variant alike (the
   primary used to fade its solid blue to 45 % opacity, which read as broken, not unavailable).
   No opacity, no shadow, no hover change; (0,5,1) beats every enabled rule above. */
html[data-skin="platform"] .ant-btn.ant-btn:is(.ant-btn-primary, .ant-btn-default, .ant-btn-dashed):disabled,
html[data-skin="platform"] .ant-btn.ant-btn:is(.ant-btn-primary, .ant-btn-default, .ant-btn-dashed):disabled:hover {
  border: 1px solid var(--pf-border-strong);
  background-color: color-mix(in srgb, var(--pf-text-3) 16%, var(--pf-card));
  background-image: none;
  color: var(--pf-text-3);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
html[data-skin="platform"] .ant-btn-primary.ant-btn-dangerous:not(:disabled) {
  border: 1px solid transparent;
  background-color: var(--color-background-criticalSubtle);
  background-image: none;
  color: var(--pf-danger);
  box-shadow: none;
}
html[data-skin="platform"] .ant-btn-primary.ant-btn-dangerous:not(:disabled):hover,
html[data-skin="platform"] .ant-btn-primary.ant-btn-dangerous:not(:disabled):active {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--pf-danger) 18%, var(--pf-card));
  color: var(--pf-danger);
}
html[data-skin="platform"] .ant-btn-default.ant-btn-dangerous:not(:disabled) {
  border-color: var(--pf-border-strong);
  background-color: var(--pf-card);
  background-image: none;
  color: var(--pf-danger);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ant-btn-default.ant-btn-dangerous:not(:disabled):hover {
  border-color: var(--pf-danger);
  background-color: var(--color-background-criticalSubtle);
  color: var(--pf-danger);
}
/* Row actions / small buttons: 32px, 12.5px. */
html[data-skin="platform"] .ant-btn.ant-btn-sm {
  padding-inline: 10px;
  font-size: 12.5px;
}
/* In-toolbar CTA: dashboard-ds.css layers the dropship shadow in light only. */
html[data-skin="platform"] .ds-toolbar-actions .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous) {
  box-shadow: var(--pf-kit-btn-primary-shadow);
}
/* A router <Link className="ant-btn ant-btn-default"> (FormActions cancel, a few
   pages) carries antd's class names without antd's hashed styles: give it the
   button box so it matches the real buttons beside it. */
html[data-skin="platform"] a.ant-btn:not([class*="css-"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: var(--pf-control-h);
  padding-inline: 15px;
  border: 1px solid var(--pf-kit-btn-border);
  border-radius: var(--pf-radius-control);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
html[data-skin="platform"] a.ant-btn.ant-btn-sm:not([class*="css-"]) {
  block-size: 32px;
  padding-inline: 10px;
  border-radius: var(--pf-radius-seg);
  font-size: 12.5px;
}
/* RowActions kebab (plain button, not ant-btn) */
html[data-skin="platform"] .ds-kebab {
  border-radius: var(--pf-radius-tile);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-kebab:hover {
  background: var(--pf-sunken);
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-kebab:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 1px;
}
/* ── 11. Fields: 40px, radius 11, sunken, strong border, primary-tint focus ring ──
   antd Input / TextArea / InputNumber / DatePicker / Select take the sunken fill
   and radius from the antd theme (app/theme/antd-theme.ts, platform block); the
   rules here cover what the theme cannot: the textarea shape, the kit's custom
   Select trigger and popover, plain fields drawn with Tailwind, and labels. */
html[data-skin="platform"] textarea.ant-input {
  padding-block: 10px;
  padding-inline: 14px;
  border-radius: var(--pf-radius-cta);
  line-height: 1.6;
}
html[data-skin="platform"] .ant-input::placeholder,
html[data-skin="platform"] .ant-input-affix-wrapper input::placeholder {
  color: var(--pf-placeholder);
}
/* ui.Label (label.mb-1.block.text-sm.font-semibold.text-fg; "flex" instead of "block" when
   it carries a hint): 12.5/600 secondary. */
html[data-skin="platform"] label.mb-1.text-sm.font-semibold.text-fg {
  margin-block-end: 5px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* The kit Select (components/Select.tsx): a button[role=combobox] over a hidden <select>. */
html[data-skin="platform"] button[role="combobox"][aria-haspopup="listbox"] {
  min-block-size: var(--pf-control-h);
  border-color: var(--pf-border-strong);
  border-radius: var(--pf-radius-field);
  background-color: var(--pf-sunken);
  color: var(--pf-text);
  box-shadow: none;
  transition: border-color var(--pf-dur-fast) var(--pf-ease-out), box-shadow var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] button[role="combobox"][aria-haspopup="listbox"]:not(:disabled):hover,
html[data-skin="platform"] button[role="combobox"][aria-haspopup="listbox"][aria-expanded="true"] {
  border-color: var(--pf-primary);
}
html[data-skin="platform"] button[role="combobox"][aria-haspopup="listbox"]:focus-visible {
  border-color: var(--pf-primary);
  box-shadow: var(--pf-kit-focus-ring);
}
html[data-skin="platform"] [data-ds-pop] {
  padding: 6px;
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background-color: var(--pf-card);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] [data-ds-pop] [role="option"] {
  border-radius: var(--pf-radius-tile);
  font-size: 13.5px;
}
html[data-skin="platform"] [data-ds-pop] [role="option"][aria-selected="true"] {
  background-color: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] [data-ds-pop] input[role="searchbox"] {
  min-block-size: 36px;
  border-color: var(--pf-border-strong);
  border-radius: var(--pf-radius-tile);
  background-color: var(--pf-sunken);
}
html[data-skin="platform"] [data-ds-pop] input[role="searchbox"]:focus-visible {
  border-color: var(--pf-primary);
  box-shadow: var(--pf-kit-focus-ring);
}
/* Plain fields drawn with Tailwind (border + bg-surface) inside the page body. */
html[data-skin="platform"] .page-body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea).border:is(.bg-surface, .bg-white, .bg-surface-default, .bg-surface-base) {
  border-color: var(--pf-border-strong);
  border-radius: var(--pf-radius-field);
  background-color: var(--pf-sunken);
  color: var(--pf-text);
}
html[data-skin="platform"] .page-body :is(input, select, textarea).border:is(.bg-surface, .bg-white, .bg-surface-default, .bg-surface-base):focus-visible {
  border-color: var(--pf-primary);
  box-shadow: var(--pf-kit-focus-ring);
}
/* Native checkboxes: 20px, radius 6, 1.5px strong border; on = primary + white tick.
   The tick is a mask (no colour in the SVG); focus keeps the global outline. */
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  vertical-align: middle;
  border: 1.5px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-hint);
  background-color: var(--pf-card);
  cursor: pointer;
  transition: background-color var(--pf-dur-fast) var(--pf-ease-out), border-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"])::before {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  background-color: var(--color-foreground-onPrimary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]):hover:not(:disabled) {
  border-color: var(--pf-primary);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]):is(:checked, :indeterminate) {
  border-color: var(--pf-primary);
  background-color: var(--pf-primary);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]):checked::before {
  transform: scale(1);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]):indeterminate::before {
  block-size: 2px;
  -webkit-mask: none;
  mask: none;
  border-radius: 2px;
  transform: scale(1);
}
html[data-skin="platform"] input[type="checkbox"]:not(.ant-checkbox-input, .ant-switch-input, .sr-only, .peer, [role="switch"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html[data-skin="platform"] input[type="radio"] {
  accent-color: var(--pf-primary);
}
/* ── 12. Forms: FormSection cards and the sticky FormActions bar ──────────────────
   On a page, each TITLED FormSection is a card. An untitled one (a field grid
   under a Section heading, as in Settings) or one nested in another card (antd
   Card, a hand-rolled rounded-xl panel, a dialog) stays a plain group. The legend
   is floated so it sits INSIDE the card's padding instead of on its top edge. */
html[data-skin="platform"] .page-body .ds-form-section:has(> .ds-form-legend):not(:is(.ant-card, .rounded-xl, .rounded-2xl, .ds-form-section, [role="dialog"]) .ds-form-section) {
  padding: 18px 20px 20px;
  margin-block-end: var(--pf-gap);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .page-body .ds-form-section:has(> .ds-form-legend):not(:is(.ant-card, .rounded-xl, .rounded-2xl, .ds-form-section, [role="dialog"]) .ds-form-section) > .ds-form-legend {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: 14px;
}
html[data-skin="platform"] .page-body .ds-form-section:has(> .ds-form-legend):not(:is(.ant-card, .rounded-xl, .rounded-2xl, .ds-form-section, [role="dialog"]) .ds-form-section) > .ds-form-legend + * {
  clear: both;
}
html[data-skin="platform"] .ds-form-actions {
  border-block-start-color: var(--pf-border);
}
html[data-skin="platform"] .ds-form-actions-note { color: var(--pf-success-text); }
/* The sticky save bar floats as a card above the page bottom. */
@media screen {
  html[data-skin="platform"] .page-body .ds-form-actions.is-sticky {
    inset-block-end: 12px;
    margin-inline: 0;
    padding-block: 12px;
    padding-inline: 16px;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-panel);
    background: var(--pf-card);
    box-shadow: var(--pf-e1);
  }
}
html[data-skin="platform"] .eng-create-dialog .eng-dialog-footer {
  border-block-start-color: var(--pf-border);
}
/* ── 13. Alerts and PageNotices ──────────────────────────────────────────────── */
html[data-skin="platform"] .ds-alert {
  padding-block: 12px;
  padding-inline: 14px;
  border-radius: var(--pf-radius-inner);
  font-size: 13.5px;
  line-height: 1.55;
}
html[data-skin="platform"] .ds-alert-body { color: var(--pf-text); }
html[data-skin="platform"] .ds-alert-title { font-weight: 700; color: var(--pf-text); }
html[data-skin="platform"] .ds-notices { gap: 10px; }
html[data-skin="platform"] .ds-notices-more > summary { color: var(--pf-text-2); }
/* ── 14. EmptyState ──────────────────────────────────────────────────────────── */
html[data-skin="platform"] .ds-empty {
  gap: 6px;
  padding-block: 40px;
}
html[data-skin="platform"] .ds-empty-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: 8px;
  border-radius: var(--pf-radius-column);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ds-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ds-empty-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pf-text-2);
}
/* ── 15. Progress: Meter, RangeField ──────────────────────────────────────────── */
html[data-skin="platform"] .ds-meter-label {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ds-meter-track { background: var(--pf-track); }
html[data-skin="platform"] .ds-meter-fill { background: var(--pf-primary); }
html[data-skin="platform"] .ds-meter--success .ds-meter-fill { background: var(--pf-success); }
html[data-skin="platform"] .ds-meter--warning .ds-meter-fill { background: var(--pf-warning); }
html[data-skin="platform"] .ds-meter--critical .ds-meter-fill { background: var(--pf-danger); }
html[data-skin="platform"] .ds-range::-webkit-slider-runnable-track { background: var(--pf-track); }
html[data-skin="platform"] .ds-range::-moz-range-track { background: var(--pf-track); }
html[data-skin="platform"] .ds-range::-webkit-slider-thumb {
  background: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-card), var(--pf-e1);
}
html[data-skin="platform"] .ds-range::-moz-range-thumb {
  background: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-card), var(--pf-e1);
}
/* ── 16. Overlays: modals, drawers, menus, popovers, tooltips, toasts ──────────── */
html[data-skin="platform"] .ant-modal .ant-modal-content {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] .ant-modal .ant-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ant-modal-mask {
  background-color: rgb(var(--pf-scrim-rgb) / 0.55);
}
html[data-skin="platform"] .eng-create-dialog .ant-modal-content {
  padding-block: 20px;
  padding-inline: 22px;
}
html[data-skin="platform"] .eng-create-dialog .ant-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .eng-create-dialog .eng-dialog-subtitle {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* Kit Drawer (Radix Dialog content, components/Drawer.tsx): card colour, the free
   edge rounded 20 (end drawers draw border-s, start drawers border-e). */
html[data-skin="platform"] [role="dialog"].fixed.top-0.bottom-0 {
  border-color: var(--pf-border);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] [role="dialog"].fixed.top-0.bottom-0.border-s {
  border-start-start-radius: var(--pf-radius-card);
  border-end-start-radius: var(--pf-radius-card);
}
html[data-skin="platform"] [role="dialog"].fixed.top-0.bottom-0.border-e {
  border-start-end-radius: var(--pf-radius-card);
  border-end-end-radius: var(--pf-radius-card);
}
html[data-skin="platform"] .fixed.inset-0.backdrop-blur-sm[data-state] {
  background-color: rgb(var(--pf-scrim-rgb) / 0.5);
}
/* antd Dropdown menus (RowActions, MoreMenu, SegmentedTabs overflow, user menus). */
html[data-skin="platform"] .ant-dropdown .ant-dropdown-menu {
  padding: 6px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background-color: var(--pf-card);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {
  min-block-size: 36px;
  padding-block: 7px;
  padding-inline: 12px;
  border-radius: var(--pf-radius-tile);
  font-size: 13.5px;
}
html[data-skin="platform"] .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):not(:hover) {
  color: var(--pf-danger);
}
html[data-skin="platform"] .ant-popover .ant-popover-inner {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] .ant-select-dropdown {
  padding: 6px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  box-shadow: var(--shadow-overlay);
}
/* Tooltips: navy chip in light, inverted (light chip) in dark, radius 10. */
html[data-skin="platform"] .ant-tooltip {
  --antd-arrow-background-color: var(--pf-tooltip-bg);
}
html[data-skin="platform"] .ant-tooltip .ant-tooltip-inner {
  min-block-size: 0;
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: var(--pf-radius-tile);
  background-color: var(--pf-tooltip-bg);
  color: var(--pf-tooltip-fg);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: var(--pf-tooltip-shadow);
}
/* antd message = the canvas toast: inverted chip, radius 14, 13.5/600. */
html[data-skin="platform"] .ant-message .ant-message-notice-content {
  padding-block: 12px;
  padding-inline: 18px;
  border-radius: var(--pf-radius-inner);
  background-color: var(--pf-tooltip-bg);
  color: var(--pf-tooltip-fg);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--pf-toast-shadow);
}
/* ── 17. Brain dock and launcher ──────────────────────────────────────────────── */
html[data-skin="platform"] .brain-dock {
  border-color: var(--pf-border);
  box-shadow: var(--shadow-overlay);
}
html[data-skin="platform"] .brain-dock-head,
html[data-skin="platform"] .brain-dock-foot {
  border-color: var(--pf-border);
}
html[data-skin="platform"] .ant-btn-primary.brain-dock-launcher:not(:disabled) {
  border: 1px solid var(--pf-hero-primary-border);
  background-color: var(--pf-brand);
  background-image: var(--pf-brand-gradient);
  color: var(--pf-on-navy);
  box-shadow: var(--pf-logo-shadow);
}
html[data-skin="platform"] .ant-btn-primary.brain-dock-launcher.brain-dock-launcher:not(:disabled):hover,
html[data-skin="platform"] .ant-btn-primary.brain-dock-launcher.brain-dock-launcher:not(:disabled):active {
  border-color: var(--pf-hero-primary-border);
  background-color: var(--pf-brand-deep);
  background-image: var(--pf-brand-gradient);
  color: var(--pf-on-navy);
}
/* ── 18. Charts (recharts): solid gridlines, Outfit ticks, the navy tooltip ────── */
html[data-skin="platform"] .recharts-cartesian-grid line {
  stroke: var(--pf-grid-line);
  stroke-dasharray: none;
}
html[data-skin="platform"] .recharts-cartesian-axis-line {
  stroke: var(--pf-border-strong);
}
html[data-skin="platform"] .recharts-cartesian-axis-tick-line {
  stroke: none;
}
html[data-skin="platform"] .recharts-yAxis .recharts-cartesian-axis-tick-value {
  fill: var(--pf-text-3);
  font-family: var(--pf-font-num);
}
html[data-skin="platform"] .recharts-xAxis .recharts-cartesian-axis-tick-value {
  fill: var(--pf-text-2);
}
/* recharts writes the tooltip box as an inline style (charts.impl.tsx contentStyle). */
html[data-skin="platform"] .recharts-default-tooltip {
  border-color: transparent !important;
  border-radius: var(--pf-radius-tile) !important;
  background-color: var(--pf-tooltip-bg) !important;
  color: var(--pf-tooltip-fg) !important;
  box-shadow: var(--pf-tooltip-shadow);
  font-size: 12px;
}
html[data-skin="platform"] .recharts-legend-item-text {
  font-size: 12px;
}
/* ── 19. Reduced motion: the kit's colour transitions off (motion.css owns motion) ── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .ds-seg-btn,
  html[data-skin="platform"] button[role="combobox"][aria-haspopup="listbox"],
  html[data-skin="platform"] input[type="checkbox"],
  html[data-skin="platform"] input[type="checkbox"]::before {
    transition: none;
  }
}
/* ============================================================================
 * Platform design — the supervision tour (/app/supervision) and the NCR inbox
 * (/app/ncr), board P-Supervision (screen s_tour). Same DOM as classic, restyled
 * through the sv-* hooks the pages and app/components/supervision/* emit.
 * Every selector is scoped to html[data-skin="platform"]; colours are the
 * per-mode --pf-* variables (tokens.css), so one rule serves light and dark.
 * ============================================================================ */
/* ── Cards: the three panels of the tour page ─────────────────────────────── */
html[data-skin="platform"] .sv-card {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  padding: 18px 20px 10px;
}
html[data-skin="platform"] .sv-rings,
html[data-skin="platform"] .sv-ncr-panel {
  padding-block-end: 18px;
}
html[data-skin="platform"] .sv-card .ds-section-head {
  align-items: center;
  margin-block-end: 14px;
}
/* The 150px pill progress bar in the checklist header. */
html[data-skin="platform"] .sv-progress {
  inline-size: 150px;
}
html[data-skin="platform"] .sv-progress .ds-meter-track {
  block-size: 8px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-track);
}
html[data-skin="platform"] .sv-progress .ds-meter-fill {
  border-radius: var(--pf-radius-pill);
}
/* ── Checklist rows ───────────────────────────────────────────────────────── */
html[data-skin="platform"] .sv-item {
  border-color: var(--pf-border);
  padding-block: 12px;
}
html[data-skin="platform"] .sv-item:first-child {
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .sv-item-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pf-text);
}
html[data-skin="platform"] .sv-item[data-status="pending"] .sv-item-text {
  color: var(--pf-text-2);
}
/* The 26px status box: filled green with a check, filled red with an X, empty grey border. */
html[data-skin="platform"] .sv-box {
  border-radius: 8px;
  border-width: 1.5px;
}
html[data-skin="platform"] .sv-box[data-status="pass"] {
  background: var(--pf-success);
  border-color: var(--pf-success);
  color: var(--pf-card);
}
html[data-skin="platform"] .sv-box[data-status="fail"] {
  background: var(--pf-danger);
  border-color: var(--pf-danger);
  color: var(--pf-card);
}
html[data-skin="platform"] .sv-box[data-status="na"] {
  background: var(--pf-sunken);
  border-color: var(--pf-border-strong);
  color: var(--pf-text-3);
}
html[data-skin="platform"] .sv-box[data-status="pending"] {
  background: transparent;
  border-color: var(--pf-border-strong);
}
/* The row's status chip (23px pill). */
html[data-skin="platform"] .sv-item-badge {
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
  border-color: transparent;
}
html[data-skin="platform"] .sv-item-badge[data-status="pass"] {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .sv-item-badge[data-status="fail"] {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .sv-item-badge:is([data-status="pending"], [data-status="na"]) {
  background: var(--pf-segmented);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .sv-item-meta {
  color: var(--pf-text-2);
  font-size: 12px;
}
html[data-skin="platform"] .sv-thumb {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .sv-item-details > summary {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .sv-ncr-link {
  color: var(--pf-danger);
}
html[data-skin="platform"] .sv-other-tours {
  border-color: var(--pf-border);
}
html[data-skin="platform"] .sv-other-tours a {
  border-color: var(--pf-border);
  background: var(--pf-sunken);
  color: var(--pf-text);
}
/* ── Rings: stroke 8, the canvas tones ───────────────────────────────────── */
html[data-skin="platform"] .sv-ring-track {
  color: var(--pf-track);
}
html[data-skin="platform"] .sv-ring--success .sv-ring-arc {
  color: var(--pf-success);
}
html[data-skin="platform"] .sv-ring--primary .sv-ring-arc {
  color: var(--pf-primary);
}
html[data-skin="platform"] .sv-ring--warning .sv-ring-arc {
  color: var(--pf-warning);
}
html[data-skin="platform"] .sv-ring-value {
  font-family: var(--pf-font-num);
  font-size: 19px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .sv-ring-caption {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-text-2);
}
/* ── NCR card: red tint, 1px danger border, 92×74 photo ───────────────────── */
html[data-skin="platform"] .sv-ncr-card {
  border: 1px solid var(--pf-danger);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-danger-tint);
  padding: 12px;
  color: var(--pf-text);
}
html[data-skin="platform"] .sv-ncr-card[data-status="closed"] {
  border-color: var(--pf-border);
  background: var(--pf-card);
}
html[data-skin="platform"] .sv-ncr-photo {
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-3);
}
/* The number reads as the canvas code «NCR-044»: bold red text, no chip. */
html[data-skin="platform"] .sv-ncr-number {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pf-font-num);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pf-danger);
}
html[data-skin="platform"] .sv-ncr-status {
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
}
html[data-skin="platform"] .sv-ncr-card[data-status="open"] .sv-ncr-status {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
  border-color: transparent;
}
html[data-skin="platform"] .sv-ncr-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .sv-ncr-meta,
html[data-skin="platform"] .sv-ncr-due {
  font-size: 12px;
  color: var(--pf-text-2);
}
/* The «إشراف داخلي» chip in the hero header reads on the photo. */
html[data-skin="platform"] .sv-internal-chip {
  background: var(--pf-chip-on-image-bg);
  color: var(--pf-chip-on-image-fg);
  border-color: transparent;
}
/* ============================================================================
 * Platform design — live site meeting (board T-Meeting, 1180x820 tablet).
 * Page: app/routes/app/meetings/live.tsx; markup: app/components/meetings/MeetingLive.tsx.
 * The same DOM renders the classic design through the kit; this sheet only
 * reshapes it to the canvas: 30px checkboxes, a 38px tinted «بند جديد», 28px
 * (items) and 36px (attendance) square avatars, grey date chips, 7px schedule
 * bars with the orange behind-plan bar, 20px cards on --pf-e1, and the glass
 * live-timer chip in the hero. Tokens only (docs/design/platform-skin.md); the
 * light/dark values come from the per-mode --pf-* blocks in tokens.css.
 * ============================================================================ */
/* ── Hero: the running timer is a glass chip with the pulsing live dot ─────── */
html[data-skin="platform"] .pf-hero .mtg-live-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 26px;
  padding-inline: 10px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-glass-chip-bg);
  border: 1px solid var(--pf-glass-chip-border);
  color: var(--pf-on-navy);
  font-size: 12px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur-sm));
  backdrop-filter: blur(var(--pf-glass-blur-sm));
}
html[data-skin="platform"] .pf-hero .mtg-live-timer .mtg-live-dot {
  inline-size: 7px;
  block-size: 7px;
  background: var(--pf-live);
}
html[data-skin="platform"] .mtg-live-timer .ltr-island {
  font-family: var(--pf-font-num);
}
/* ── Grid: 1.65fr / 1fr with the canvas's 14px gap ─────────────────────────── */
html[data-skin="platform"] .mtg-live .mtg-grid,
html[data-skin="platform"] .mtg-live .mtg-side {
  gap: 14px;
}
/* ── Cards ─────────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .mtg-live .mtg-card {
  padding: 18px 20px 8px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .mtg-live .mtg-attendance-card {
  padding-block-end: 10px;
}
html[data-skin="platform"] .mtg-live .mtg-schedule-card {
  padding-block-end: 12px;
}
html[data-skin="platform"] .mtg-live .mtg-card-head {
  margin-block-end: 14px;
}
html[data-skin="platform"] .mtg-live .mtg-card-icon {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .mtg-live .mtg-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .mtg-live .mtg-card-sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* «بند جديد»: tinted, 38px (tablet touch size), radius 12. */
html[data-skin="platform"] .mtg-live .mtg-new-btn.ant-btn.ant-btn {
  block-size: 38px;
  padding-inline: 14px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-control);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 600;
}
/* ── Action items ──────────────────────────────────────────────────────────── */
html[data-skin="platform"] .mtg-live .mtg-item {
  gap: 14px;
  padding-block: 13px;
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .mtg-live .mtg-empty {
  border-block-start-color: var(--pf-border);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-check {
  inline-size: 30px;
  block-size: 30px;
  border: 1.5px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-seg);
  background: transparent;
  color: var(--pf-on-navy);
  cursor: pointer;
  transition: background-color var(--pf-dur-fast) var(--pf-ease-out), border-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .mtg-live span.mtg-check {
  cursor: default;
}
html[data-skin="platform"] .mtg-live .mtg-check[aria-checked="true"],
html[data-skin="platform"] .mtg-live .mtg-item[data-done] .mtg-check {
  border-color: var(--pf-success);
  background: var(--pf-success);
}
html[data-skin="platform"] .mtg-live .mtg-check svg {
  inline-size: 16px;
  block-size: 16px;
}
html[data-skin="platform"] .mtg-live .mtg-check:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .mtg-live .mtg-item-text {
  font-size: 14.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .mtg-live .mtg-item[data-done] .mtg-item-text {
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-assignee {
  gap: 8px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-due.ds-badge {
  background: var(--pf-segmented);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-due .ltr-island {
  font-family: var(--pf-font-ui);
}
html[data-skin="platform"] .mtg-live .mtg-remove {
  color: var(--pf-text-3);
  border-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .mtg-live .mtg-remove:hover {
  color: var(--pf-danger);
}
html[data-skin="platform"] .mtg-live .mtg-new-row,
html[data-skin="platform"] .mtg-live .mtg-guest-row {
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
/* Square initials avatars in the canvas palette (28px on items, 36px in attendance). */
html[data-skin="platform"] .mtg-live .mtg-avatar {
  background: var(--pf-avatar-user);
  color: var(--pf-on-navy);
  font-weight: 700;
  line-height: 1;
}
html[data-skin="platform"] .mtg-live .mtg-avatar[data-tone="contractor"] { background: var(--pf-avatar-contractor); }
html[data-skin="platform"] .mtg-live .mtg-avatar[data-tone="consultant"] { background: var(--pf-avatar-consultant); }
html[data-skin="platform"] .mtg-live .mtg-avatar[data-tone="owner"] { background: var(--pf-avatar-owner); }
html[data-skin="platform"] .mtg-live .mtg-avatar--sm {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--pf-radius-seg);
  font-size: 10px;
}
html[data-skin="platform"] .mtg-live .mtg-avatar--md {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--pf-radius-field);
  font-size: 12px;
}
/* ── Attendance ────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .mtg-live .mtg-person {
  gap: 10px;
  padding-block: 8px;
}
html[data-skin="platform"] .mtg-live .mtg-person-name {
  font-size: 13.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .mtg-live .mtg-person-role {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-toggle {
  inline-size: 34px;
  block-size: 34px;
  border-color: var(--pf-border-strong);
  border-radius: var(--pf-radius-tile);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-toggle[aria-pressed="false"] {
  border-color: transparent;
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .mtg-live .mtg-absent {
  border-block-start-color: var(--pf-border);
}
html[data-skin="platform"] .mtg-live .mtg-absent summary {
  color: var(--pf-text-2);
  font-size: 12.5px;
}
html[data-skin="platform"] .mtg-live .mtg-guest-btn.ant-btn.ant-btn {
  color: var(--pf-primary-text);
}
/* ── Schedule: SPI chip + three 7px bars (behind plan = orange) ────────────── */
html[data-skin="platform"] .mtg-live .mtg-spi {
  font-family: var(--pf-font-num);
}
html[data-skin="platform"] .mtg-live .mtg-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html[data-skin="platform"] .mtg-live .mtg-bar .ds-meter-label {
  margin-block-end: 5px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .mtg-live .mtg-bar .ds-meter-label .ltr-island {
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .mtg-live .mtg-bar .ds-meter-track {
  block-size: 7px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-track);
}
html[data-skin="platform"] .mtg-live .mtg-bar .ds-meter-fill {
  border-radius: var(--pf-radius-pill);
  background: var(--pf-primary);
}
html[data-skin="platform"] .mtg-live .mtg-bar[data-warn] .ds-meter-fill {
  background: var(--pf-orange);
}
html[data-skin="platform"] .mtg-live .mtg-schedule-loading > div {
  border-radius: var(--pf-radius-hint);
  background: var(--pf-sunken);
}
/* ── Ended: read-only hint ─────────────────────────────────────────────────── */
html[data-skin="platform"] .mtg-live .mtg-ended-hint {
  color: var(--pf-text-2);
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .mtg-live .mtg-check {
    transition: none;
  }
  html[data-skin="platform"] .mtg-live .mtg-schedule-loading > div {
    animation: none;
  }
}
/* ============================================================================
 * Platform design — «اعتماد بالتوقيع» (0215): the certificate approval sheet and the signature
 * field (app/components/signature/*). Canvas board T-Approve (1180 x 820).
 *
 * Hooks: .appr-sheet (the Modal), .appr-card (summary / signature cards), .appr-card__icon
 * (the tinted icon tile), .appr-sig__pad (the pad), .appr-sig__btn (clear / undo on the pad),
 * .appr-actions + .appr-btn (return / sign-and-approve), .appr-net (the net box), .appr-line.
 *
 * The pad stays PAPER-WHITE in dark (app/styles/signature-pad.css): only the light mode takes
 * the board's sunken fill. Every selector starts with html[data-skin="platform"]; colours are
 * variables; keyframes are pf-*; motion is off under prefers-reduced-motion.
 * ============================================================================ */
/* ── The sheet ──────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .appr-sheet .ant-modal-content {
  background: var(--pf-page);
  border-radius: var(--pf-radius-hero);
  padding-block: 20px 22px;
  padding-inline: 22px;
}
html[data-skin="platform"] .appr-sheet .ant-modal-header {
  background: transparent;
  margin-block-end: 16px;
}
html[data-skin="platform"] .appr-sheet .appr-sheet__head p:first-child {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--pf-text);
}
html[data-skin="platform"] .appr-sheet .appr-sheet__head p + p {
  font-size: 13px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .appr-sheet .appr-head-btn {
  border-radius: var(--pf-radius-control);
}
html[data-skin="platform"] .appr-sheet .appr-sheet__grid {
  gap: 14px;
}
/* ── Cards ──────────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .appr-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  box-shadow: var(--pf-e1);
  padding-block: 18px 20px;
  padding-inline: 20px;
}
html[data-skin="platform"] .appr-card__icon {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .appr-sig .appr-card__icon {
  inline-size: 34px;
  block-size: 34px;
}
html[data-skin="platform"] .appr-line {
  border-color: var(--pf-border);
  font-size: 14px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .appr-line dd {
  font-family: var(--pf-font-num);
  font-size: 14.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .appr-net {
  background: var(--pf-primary-tint);
  border-radius: var(--pf-radius-panel);
  padding-block: 16px;
  padding-inline: 18px;
}
html[data-skin="platform"] .appr-net__value {
  font-family: var(--pf-font-num);
  font-size: 28px;
  color: var(--pf-primary-text);
}
/* ── The pad ────────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .appr-sig__pad {
  border: 1.5px dashed var(--pf-border-strong);
  border-radius: var(--pf-radius-panel);
}
/* Light only: the board's sunken paper. Dark keeps the white paper (the ink must print). */
html[data-skin="platform"]:not(.dark) .appr-sig__pad {
  background-color: var(--pf-sunken);
}
/* 34px chips drawn inside a 44px hit area: the ::before extends the target, the look shrinks. */
html[data-skin="platform"] .appr-sig__btn {
  min-block-size: 34px;
  min-inline-size: 34px;
  margin: 5px;
  border-radius: var(--pf-radius-tile);
  font-size: 12.5px;
}
html[data-skin="platform"] .appr-sig__btn::before {
  content: "";
  position: absolute;
  inset: -5px;
}
html[data-skin="platform"] .appr-sig__tools {
  inset-block-start: 3px;
  inset-inline-start: 3px;
}
html[data-skin="platform"] .appr-sig__caption {
  font-size: 12px;
}
html[data-skin="platform"] .appr-sig__saved {
  border-radius: var(--pf-radius-panel);
}
/* ── The two buttons (56px) ─────────────────────────────────────────────────── */
html[data-skin="platform"] .appr-actions {
  gap: 10px;
}
html[data-skin="platform"] .appr-btn.ant-btn {
  min-block-size: 56px;
  border-radius: var(--pf-radius-panel);
  font-size: 15px;
  font-weight: 700;
}
html[data-skin="platform"] .appr-btn--approve.ant-btn {
  box-shadow: var(--pf-primary-shadow);
}
html[data-skin="platform"]:not(.dark) .appr-btn--approve.is-done.ant-btn,
html[data-skin="platform"]:not(.dark) .appr-btn--approve.is-done.ant-btn:disabled {
  background: var(--pf-success-text);
  border-color: var(--pf-success-text);
  color: var(--pf-card);
  opacity: 1;
}
html.dark[data-skin="platform"] .appr-btn--approve.is-done.ant-btn,
html.dark[data-skin="platform"] .appr-btn--approve.is-done.ant-btn:disabled {
  background: var(--pf-success);
  border-color: var(--pf-success);
  color: var(--pf-card);
  opacity: 1;
}
html[data-skin="platform"] .appr-btn__check {
  animation: pf-sig-check var(--pf-dur) var(--pf-ease-spring) both;
}
@keyframes pf-sig-check {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .appr-btn__check {
    animation: none;
  }
}
/* 0215 — approve with a drawn signature (board T-Approve) */
/* ============================================================================
 * Platform design: the OWNER PORTAL (board P-Owner, /portal) — 0217.
 *
 * /portal has no /app shell, so app/components/owner-portal/OwnerPortalShell.tsx
 * draws its own frame: a 252px navy sidebar (.op-sidebar, the .pf-* sidebar
 * parts inside it), the shared photo hero (PageHeader → .pf-hero), and the page
 * body (.pf-main > .page-body). Below 1024px the sidebar moves into the kit
 * Drawer (.op-drawer) behind a navy top bar (.op-mobile-bar).
 *
 * The cards (BuildingNowCard, ProgressCurveCard, PaymentsCard, PhotosCard) are
 * drawn with semantic utilities for classic; this sheet restates them with the
 * --pf-* palette. The SVGs read their colours from --op-chart-* variables that
 * fall back to the classic chart tokens, so classic never needs a rule here.
 *
 * Every selector starts with html[data-skin="platform"]; keyframes are pf-*;
 * no raw colours (variables only); logical properties so English mirrors.
 * ============================================================================ */
/* ── 1. Frame ─────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .op-frame {
  display: flex;
  align-items: flex-start;
  min-block-size: 100dvh;
}
html[data-skin="platform"] .op-sidebar {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  flex: 0 0 var(--pf-sidebar-w);
  inline-size: var(--pf-sidebar-w);
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pf-navy);
  border-inline-end: 1px solid var(--pf-on-navy-divider);
  color: var(--pf-on-navy);
  font-family: var(--pf-font-ui);
}
html[data-skin="platform"][lang="en"] .op-sidebar {
  font-family: var(--pf-font-ui-latin);
}
/* The anchors: a static group (no accordion), the active row painted like the
   canvas pill with its 4×24 indicator on the sidebar's outer edge. */
html[data-skin="platform"] .op-nav-list {
  display: flex;
  flex-direction: column;
}
html[data-skin="platform"] .op-nav .pf-nav-item.is-active {
  background: var(--pf-pill-bg);
  box-shadow: inset 0 0 0 1px var(--pf-pill-border);
}
html[data-skin="platform"][dir="ltr"] .op-nav .pf-nav-item.is-active {
  background: linear-gradient(270deg, rgb(var(--pf-brand-rgb) / 0.08) 0%, rgb(var(--pf-brand-rgb) / 0.34) 100%);
}
html[data-skin="platform"] .op-nav .pf-nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  inset-block-start: 50%;
  inline-size: 4px;
  block-size: 24px;
  translate: 0 -50%;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: var(--pf-accent-light);
  box-shadow: var(--pf-pill-glow);
}
html[data-skin="platform"] .op-nav-projects {
  margin-block-start: 6px;
}
/* The lock note (canvas footer): «صلاحية عرض حتى … منحها لك …». */
html[data-skin="platform"] .op-lock {
  padding: 14px;
  border-radius: var(--pf-radius-panel);
  background: var(--pf-switcher-bg);
  border: 1px solid var(--pf-promo-border);
  color: var(--pf-on-navy-nav);
  font-size: 12.5px;
  line-height: 1.6;
}
html[data-skin="platform"] .op-lock > svg {
  color: var(--pf-accent-light);
}
html[data-skin="platform"] .op-lock-text {
  margin-block-start: 6px;
}
html[data-skin="platform"] .op-lock-text b {
  color: var(--pf-on-navy);
  font-weight: 700;
}
/* The phone / tablet top bar and its menu button (hidden on desktop). */
html[data-skin="platform"] .op-mobile-bar {
  display: none;
}
html[data-skin="platform"] .op-menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border-radius: var(--pf-radius-control);
  background: var(--pf-glass-bg);
  border: 1px solid var(--pf-glass-border);
  color: var(--pf-on-navy);
  cursor: pointer;
}
html[data-skin="platform"] .op-menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pf-nav-hover);
  opacity: 0;
  transition: opacity var(--pf-dur-fast) ease;
}
html[data-skin="platform"] .op-menu-btn:hover::after { opacity: 1; }
html[data-skin="platform"] .op-menu-btn:focus-visible {
  outline: 2px solid var(--pf-accent-light);
  outline-offset: 2px;
}
@media (max-width: 1023px) {
  html[data-skin="platform"] .op-frame > .op-sidebar {
    display: none;
  }
  html[data-skin="platform"] .op-mobile-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    block-size: 60px;
    padding-inline: 16px;
    background: var(--pf-navy);
    color: var(--pf-on-navy);
  }
  html[data-skin="platform"] .op-mobile-bar .pf-logo { gap: 10px; }
  html[data-skin="platform"] .op-mobile-bar .pf-brand-mark {
    inline-size: 34px;
    block-size: 34px;
  }
  html[data-skin="platform"] .op-mobile-bar .pf-wordmark-name { font-size: 17px; }
}
/* The drawer: the same navy sidebar inside the kit Drawer. The kit sheet paints
   [role=dialog].bg-surface as a card (0,3,1); this restates it navy above that. */
html[data-skin="platform"] [role="dialog"].op-drawer.op-drawer {
  background: var(--pf-navy);
  border-color: var(--pf-on-navy-divider);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .op-drawer > :first-child {
  border-color: var(--pf-on-navy-divider);
}
html[data-skin="platform"] .op-drawer > :first-child :is(h2, .text-fg) {
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .op-drawer > :first-child .ant-btn.ant-btn {
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .op-drawer .op-drawer-body {
  padding: 0;
}
html[data-skin="platform"] .op-sidebar.op-sidebar--drawer {
  position: relative;
  display: flex;
  inline-size: 100%;
  min-block-size: 100%;
  block-size: auto;
  flex: 1 1 auto;
  border: 0;
}
/* The hero's actions are kit Buttons rendered as <a> (antd href): an icon + label. */
html[data-skin="platform"] .pf-hero-actions .op-action {
  gap: 8px;
  text-decoration: none;
}
/* ── 2. Cards ─────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .op-card-icon {
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .op-card-title {
  color: var(--pf-text);
  font-size: 16px;
  font-weight: 700;
}
html[data-skin="platform"] .op-card-sub {
  color: var(--pf-text-2);
}
html[data-skin="platform"] :is(.op-ring-value, .op-num, .op-curve-tick) {
  font-family: var(--pf-font-num);
}
/* The charts read these; classic falls back to its chart tokens. */
html[data-skin="platform"] .op-card {
  --op-chart-line: var(--pf-chart-1);
  --op-chart-grid: var(--pf-grid-line);
  --op-chart-axis: var(--pf-border-strong);
  --op-chart-planned: var(--pf-chart-neutral);
  --op-chart-text: var(--pf-text-3);
  --op-chart-label: var(--pf-text-2);
  --op-chart-dot-ring: var(--pf-card);
  --op-ring-track: var(--pf-track);
}
html.dark[data-skin="platform"] .op-card {
  --op-chart-area-opacity: 0.18;
}
/* «المبنى الآن»: the soft blue halo behind the render, the callouts. */
html[data-skin="platform"] .op-iso {
  border-radius: var(--pf-radius-panel);
  background: radial-gradient(90% 70% at 40% 45%, var(--pf-primary-tint) 0%, transparent 70%);
}
html[data-skin="platform"][dir="ltr"] .op-iso {
  background: radial-gradient(90% 70% at 60% 45%, var(--pf-primary-tint) 0%, transparent 70%);
}
html[data-skin="platform"] .op-iso-card {
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  border-color: var(--pf-border);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .op-iso-label {
  color: var(--pf-text);
}
html[data-skin="platform"] .op-iso-status {
  color: var(--pf-text-2);
}
html[data-skin="platform"] [data-status="in_progress"] :is(.op-iso-line, .op-iso-dot),
html[data-skin="platform"] [data-status="in_progress"].op-iso-dot {
  background: var(--pf-orange);
}
html[data-skin="platform"] [data-status="done"] :is(.op-iso-line, .op-iso-dot) {
  background: var(--pf-success);
}
html[data-skin="platform"] [data-status="not_started"] :is(.op-iso-line, .op-iso-dot) {
  background: var(--pf-text-3);
}
html[data-skin="platform"] .op-iso .op-iso-dot {
  box-shadow: 0 0 0 4px var(--pf-card);
}
html[data-skin="platform"] .op-iso-caption {
  background: var(--pf-chip-on-image-bg);
  color: var(--pf-chip-on-image-fg);
}
html[data-skin="platform"] .op-phase-track {
  background: var(--pf-track);
}
html[data-skin="platform"] .op-phase-fill {
  background: var(--pf-primary);
}
/* «الدفعات»: the three segments, the rows. */
html[data-skin="platform"] .op-paybar-paid { background: var(--pf-success); }
html[data-skin="platform"] .op-paybar-due { background: var(--pf-warning); }
html[data-skin="platform"] .op-paybar-rest { background: var(--pf-track); }
html[data-skin="platform"] .op-payrow {
  border-color: var(--pf-border);
}
html[data-skin="platform"] .op-payrow .op-num {
  color: var(--pf-text);
}
/* «صور الموقع»: 12px thumbnails, a scrim on hover (never a colour swap). */
html[data-skin="platform"] .op-photo {
  border-radius: var(--pf-radius-control);
}
html[data-skin="platform"] .op-photo img {
  border-radius: var(--pf-radius-control);
}
html[data-skin="platform"] .op-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--pf-navy-rgb) / 0.18);
  opacity: 0;
  transition: opacity var(--pf-dur-fast) ease;
  pointer-events: none;
}
html[data-skin="platform"] .op-photo:hover::after { opacity: 1; }
html[data-skin="platform"] .op-photo:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
/* ── 3. Motion (all off under reduced motion) ─────────────────────────────── */
@keyframes pf-op-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes pf-op-tag {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
html[data-skin="platform"] .op-curve-actual {
  stroke-dasharray: 1;
  animation: pf-op-draw 1.1s var(--pf-ease-out) 0.15s backwards;
}
html[data-skin="platform"] .op-iso-tag {
  animation: pf-op-tag var(--pf-dur-slow) var(--pf-ease-out) backwards;
}
html[data-skin="platform"] .op-iso-tag:nth-of-type(2) { animation-delay: 80ms; }
html[data-skin="platform"] .op-iso-tag:nth-of-type(3) { animation-delay: 160ms; }
html[data-skin="platform"] .op-iso-tag:nth-of-type(4) { animation-delay: 240ms; }
html[data-skin="platform"] .op-iso-tag:nth-of-type(5) { animation-delay: 320ms; }
html[data-skin="platform"] .op-iso-tag:nth-of-type(6) { animation-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] :is(.op-curve-actual, .op-iso-tag) {
    animation: none;
  }
  html[data-skin="platform"] :is(.op-menu-btn, .op-photo)::after {
    transition: none;
  }
}
/* ── 4. Print: the page, not the chrome ───────────────────────────────────── */
@media print {
  html[data-skin="platform"] :is(.op-sidebar, .op-mobile-bar) {
    display: none;
  }
}
/* 0217 — the owner portal (board P-Owner) */
/* ============================================================================
 * Platform design — the Gantt chart under DARK (board W-Schedule-Dark).
 *
 * The bars read the static categorical palette (components/gantt/GanttRow.tsx,
 * GanttLegend.tsx): the planned bar is --color-chart-cat-1-soft (overdue:
 * --color-chart-cat-2-soft) with the progress fill in --color-chart-cat-1 /
 * -cat-2 on top. Classic keeps those two "soft" values pale in dark too
 * (indigo-300 / amber-300), which on the platform's navy track drew glaring
 * light-blue slabs (8.96:1 against the track) that the canvas does not have:
 * its dark board draws the planned bar as a primary TINT with the solid
 * primary fill inside it, and the critical / late bar as an orange tint.
 *
 * So, in platform dark only, the chart re-points the two soft variables for its
 * own subtree (bars AND legend swatches, which read the same variables). The
 * palette itself stays untouched (tokens.css never restates a chart token; the
 * light modes and classic are unchanged). The canvas tint is translucent
 * (rgba(95,134,245,.18) = 1.3:1 on our sunken track), too faint for a 0% bar
 * that has no fill to show where it is, so the same hue is mixed OPAQUE and a
 * little stronger: ~1.7:1 against the track and ~1.9:1 for the fill against it
 * (light mode: 1.9:1 / 2.8:1), a muted navy-blue instead of a pale one.
 *
 * Scope: the chart root is the labelled group whose first child is the chart's
 * own toolbar (data-tour="timeline.ganttToolbar", rendered by GanttChart on
 * every page that uses it). docs/design/platform-skin.md.
 * ============================================================================ */
html.dark[data-skin="platform"] [role="group"]:has(> [data-tour="timeline.ganttToolbar"]) {
  --color-chart-cat-1-soft: color-mix(in srgb, var(--pf-chart-1) 34%, var(--color-background-sunken));
  --color-chart-cat-2-soft: color-mix(in srgb, var(--pf-orange) 34%, var(--color-background-sunken));
}
/* ============================================================================
 * Schedule screen (board W-Schedule / W-Schedule-Dark): /app/timeline and
 * /app/timeline/evm under the platform skin.
 *
 *  · .pf-sched-kpis   the earned-value strip (SPI, CPI, EV, PV, EAC, forecast
 *                     finish): one 20px card, cells split by 1px rules, Outfit
 *                     20px values, SPI/CPI green at >= 1 and amber below.
 *  · .pf-gt-card      the Gantt card: 34px glyph tile, 16px title, the
 *                     critical / activity / baseline key, the chart below.
 *  · .pf-gantt        the chart root (GanttContainer adds it under platform):
 *                     34px rows, 16px bars (primary tint + primary fill;
 *                     critical = orange), the baseline under each bar, the
 *                     14px milestone diamond, the primary today line and chip,
 *                     the current month tinted, a wider name column ending with
 *                     the task %. Hooks are the data-pf-* attributes the gantt
 *                     leaves set only under platform (components/gantt/*).
 * Classic renders none of these classes / attributes.
 * ============================================================================ */
/* ── Bar palette (per mode) ─────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-gantt,
html[data-skin="platform"] .pf-gt-card {
  --pf-gantt-plan-tint: var(--pf-primary-tint-strong);
  --pf-gantt-plan-fill: var(--pf-primary);
  --pf-gantt-crit-tint: var(--pf-orange-tint);
  --pf-gantt-crit-fill: var(--pf-orange);
  --pf-gantt-late-tint: var(--pf-danger-tint);
  --pf-gantt-late-fill: var(--pf-danger);
  --pf-gantt-baseline: var(--pf-chart-neutral);
  --pf-gantt-name-w: 11rem;
  /* the dependency arrows on the critical path follow the critical bars (orange, board) */
  --color-line-critical: var(--pf-orange);
}
/* Dark: the canvas tints are translucent (1.3:1 on the card) — mixed opaque so a 0% bar still shows. */
html.dark[data-skin="platform"] .pf-gantt,
html.dark[data-skin="platform"] .pf-gt-card {
  --pf-gantt-plan-tint: color-mix(in srgb, var(--pf-chart-1) 34%, var(--pf-card));
  --pf-gantt-crit-tint: color-mix(in srgb, var(--pf-orange) 34%, var(--pf-card));
  --pf-gantt-late-tint: color-mix(in srgb, var(--pf-danger) 30%, var(--pf-card));
}
@media (min-width: 1280px) {
  html[data-skin="platform"] .pf-gantt {
    --pf-gantt-name-w: 15rem;
  }
}
/* ── EVM strip ──────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-sched-kpis {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  box-shadow: var(--pf-e1);
  min-width: 0;
}
html[data-skin="platform"] .pf-sched-kpis__row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  margin: 0;
  min-width: 0;
}
html[data-skin="platform"] .pf-sched-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 18px;
  min-width: 0;
}
html[data-skin="platform"] .pf-sched-kpi + .pf-sched-kpi {
  border-inline-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .pf-sched-kpi__label {
  font-size: 12px;
  color: var(--pf-text-2);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-sched-kpi__value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  white-space: nowrap;
}
html[data-skin="platform"] .pf-sched-kpi__num {
  font-family: var(--pf-font-num);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-sched-kpi__num[data-tone="positive"] {
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pf-sched-kpi__num[data-tone="warning"] {
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pf-sched-kpi__unit {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-sched-kpis__more {
  flex-shrink: 0;
  margin-inline-end: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-primary-text);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-sched-kpis__more:hover {
  text-decoration: underline;
}
@media (max-width: 1023.98px) {
  html[data-skin="platform"] .pf-sched-kpis {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 4px 12px;
  }
  html[data-skin="platform"] .pf-sched-kpis__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html[data-skin="platform"] .pf-sched-kpi:nth-child(3n + 1) {
    border-inline-start: 0;
  }
  html[data-skin="platform"] .pf-sched-kpis__more {
    margin-inline: 18px;
  }
}
@media (max-width: 639.98px) {
  html[data-skin="platform"] .pf-sched-kpis__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-skin="platform"] .pf-sched-kpi:nth-child(3n + 1) {
    border-inline-start: 1px solid var(--pf-border);
  }
  html[data-skin="platform"] .pf-sched-kpi:nth-child(2n + 1) {
    border-inline-start: 0;
  }
  html[data-skin="platform"] .pf-sched-kpi {
    padding: 0 14px;
  }
  html[data-skin="platform"] .pf-sched-kpi__num {
    font-size: 18px;
  }
}
/* ── Gantt card ─────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-gt-card {
  padding: 18px 20px;
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  box-shadow: var(--pf-e1);
  min-width: 0;
}
html[data-skin="platform"] .pf-gt-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 14px;
}
html[data-skin="platform"] .pf-gt-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
html[data-skin="platform"] .pf-gt-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-gt-card__title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-gt-card__title p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-gt-card__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-gt-card__keys li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-skin="platform"] .pf-gt-card__keys [data-pf-swatch] {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
@media (max-width: 639.98px) {
  html[data-skin="platform"] .pf-gt-card {
    padding: 14px 12px;
  }
}
/* ── Legend swatches (card key + the chart's own legend) ──────────────────── */
html[data-skin="platform"] [data-pf-swatch="plan"] { background: var(--pf-gantt-plan-tint); }
html[data-skin="platform"] [data-pf-swatch="fill"] { background: var(--pf-gantt-plan-fill); }
html[data-skin="platform"] [data-pf-swatch="done"] { background: var(--color-chart-cat-3); }
html[data-skin="platform"] [data-pf-swatch="late"] { background: var(--pf-gantt-late-tint); }
html[data-skin="platform"] [data-pf-swatch="critical"] { background: var(--pf-gantt-crit-fill); }
html[data-skin="platform"] [data-pf-swatch="phase"] { background: var(--color-chart-cat-8); height: 6px; }
html[data-skin="platform"] [data-pf-swatch="nonWorking"] { background: var(--color-surface-sunken-strong); }
html[data-skin="platform"] [data-pf-gantt-legend] [data-pf-swatch="baseline"] {
  height: 4px;
  border-radius: 2px;
}
html[data-skin="platform"] [data-pf-swatch="baseline"] {
  background: var(--pf-gantt-baseline);
  opacity: 0.55;
}
html[data-skin="platform"] [data-pf-gantt-legend] [data-pf-swatch="today"] {
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-primary-halo);
}
html[data-skin="platform"] [data-pf-crit-glyph] {
  color: var(--pf-orange-text);
}
/* ── The chart ──────────────────────────────────────────────────────────────── */
/* 34px rows on a fine pointer (the 44px coarse-pointer rows stay). */
@media (pointer: fine) {
  html[data-skin="platform"] .pf-gantt div:has(> [data-pf-gantt-axis]) {
    --gantt-row: 2.125rem;
  }
}
html[data-skin="platform"] .pf-gantt [data-gantt-row] {
  height: var(--gantt-row);
  border-color: var(--pf-grid-line);
}
/* The scroll box: the board's 14px inner frame. */
html[data-skin="platform"] .pf-gantt div:has(> div > [data-pf-gantt-axis]) {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-inner);
}
/* Wider name column (the overlay box ends where it starts). */
html[data-skin="platform"] .pf-gantt [data-pf-gantt-name] {
  width: var(--pf-gantt-name-w);
  border-color: var(--pf-border);
  font-size: 13px;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-overlay] {
  right: var(--pf-gantt-name-w);
}
/* The track is the card, not the sunken surface (board). */
html[data-skin="platform"] .pf-gantt [data-pf-gantt-overlay] > div:first-child {
  background: var(--pf-card);
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-pct],
html[data-skin="platform"] .pf-gantt [data-pf-gantt-pct-head] {
  min-width: 2.75rem;
  text-align: center;
  font-family: var(--pf-font-num);
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-pct-head] {
  font-family: inherit;
}
html[data-skin="platform"] .pf-gantt [data-pf-kind="critical"] [data-pf-gantt-name] > span[dir] {
  font-weight: 600;
}
/* Axis: 40px, 12px / 600 labels centred in their period, today's period tinted. */
html[data-skin="platform"] .pf-gantt [data-pf-gantt-axis] {
  border-color: var(--pf-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-ticks] {
  height: 2.5rem;
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-ticks] > span:not([data-pf-gantt-today-chip]) {
  justify-content: center;
  padding-inline-start: 0;
  border-color: var(--pf-grid-line) !important;
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-ticks] > [data-pf-current] {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-gantt [data-pf-gantt-today-chip] {
  top: 2px;
  bottom: auto;
  padding: 1px 6px;
  border-radius: var(--pf-radius-hint);
  background: var(--pf-primary);
  color: var(--color-fg-on-primary);
  font-family: var(--pf-font-num);
  font-size: 10.5px;
  font-weight: 700;
}
/* Today line: primary, with the board's halo. */
html[data-skin="platform"] .pf-gantt [data-pf-gantt-today] {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-primary-halo);
}
/* Bars: 16px, radius 6, centred — raised 2px when a baseline bar sits under them. */
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind] > [data-task-id] {
  top: calc(50% - 8px);
  bottom: auto;
  height: 16px;
  border-radius: 6px;
}
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind]:has(> [data-pf-baseline]) > [data-task-id] {
  top: calc(50% - 11px);
}
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="summary"] > [data-task-id] {
  top: calc(50% - 4px);
  height: 8px;
  border-radius: 3px;
}
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="plan"] > [data-task-id] { background: var(--pf-gantt-plan-tint); }
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="critical"] > [data-task-id] { background: var(--pf-gantt-crit-tint); }
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="late"] > [data-task-id] { background: var(--pf-gantt-late-tint); }
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="done"] > [data-task-id] { background: var(--color-chart-cat-3); }
html[data-skin="platform"] .pf-gantt [data-pf-fill] {
  border-radius: inherit;
  background: var(--pf-gantt-plan-fill);
}
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="critical"] [data-pf-fill] { background: var(--pf-gantt-crit-fill); }
html[data-skin="platform"] .pf-gantt [data-pf-bar-kind="late"] [data-pf-fill] { background: var(--pf-gantt-late-fill); }
html[data-skin="platform"] .pf-gantt [data-pf-baseline] {
  top: calc(50% + 7px);
  height: 4px;
  min-width: 4px;
  border-radius: 2px;
  background: var(--pf-gantt-baseline);
  opacity: 0.55;
}
/* Milestone: the 14px rotated square with a card-coloured ring, and its date. */
html[data-skin="platform"] [data-pf-diamond] {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--pf-gantt-plan-fill);
  box-shadow: 0 0 0 3px var(--pf-card);
}
html[data-skin="platform"] [data-pf-diamond="critical"] {
  background: var(--pf-gantt-crit-fill);
}
html[data-skin="platform"] [data-pf-legend-diamond] {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: none;
}
html[data-skin="platform"] .pf-gantt [data-pf-milestone-date] {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pf-text-2);
}
/* the Gantt bars under dark (board W-Schedule-Dark) */
/* ============================================================================
 * Platform design — the collaborator portal chrome (/collab, /collab/forms/:id,
 * /collab/billing). The three pages draw their frame with the classic neutral
 * ramp (`main.min-h-screen.bg-gray-50 dark:bg-gray-950`, a `bg-white
 * dark:bg-gray-900` header, `bg-white dark:bg-gray-900` project chips and a
 * `text-gray-400` name line). The platform kit already restyles their cards,
 * so in platform dark the page was the classic neutral charcoal (gray-950)
 * around navy cards, and the name line read 2.89:1 in light.
 *
 * These rules put the same frame on the platform surfaces: page grey / navy
 * page, card-coloured header and chips on the platform border, and the muted
 * text token for the name line (>= 4.5:1 in both modes). Markup and classic
 * are untouched. The hook is the collab-only root `main.min-h-screen.bg-gray-50`
 * (no /app or /portal page renders that root). docs/design/platform-skin.md.
 * ============================================================================ */
html[data-skin="platform"] main.min-h-screen.bg-gray-50 {
  background: var(--pf-page);
  color: var(--pf-text);
}
html[data-skin="platform"] main.min-h-screen.bg-gray-50 > header {
  background: var(--pf-card);
  border-color: var(--pf-border);
}
html[data-skin="platform"] main.min-h-screen.bg-gray-50 > header .text-gray-400 {
  color: var(--pf-text-2);
}
/* «المشاريع المشتركة» chips (one per granted project). */
html[data-skin="platform"] main.min-h-screen.bg-gray-50 span.rounded-full.bg-white {
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  border: 1px solid var(--pf-border);
}
/* the /collab frame on the platform surfaces */
/* ============================================================================
 * Platform design — the consultant approvals inbox (/app/approvals on a
 * consultant account), board P-Consultant (screen c_inbox, light + dark).
 * The markup is app/components/approvals/ConsultantInbox.tsx's platform branch
 * (the classic branch draws the kit and matches nothing here). Every selector is
 * scoped to html[data-skin="platform"]; colours are the per-mode --pf-* tokens,
 * so one rule serves light and dark. 0218. docs/design/platform-skin.md.
 * ============================================================================ */
/* ── KPI row: four 20px cards, 36px tinted icon tile, Outfit 30px value ────── */
html[data-skin="platform"] .ci-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-gap);
}
html[data-skin="platform"] .ci-kpi {
  position: relative;
  min-inline-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ci-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html[data-skin="platform"] .ci-kpi__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ci-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-field);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ci-kpi--red .ci-kpi__icon {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .ci-kpi--green .ci-kpi__icon {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .ci-kpi--slate .ci-kpi__icon {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ci-kpi__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-block-start: 6px;
}
html[data-skin="platform"] .ci-kpi__num {
  font-family: var(--pf-font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .ci-kpi__unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ci-kpi__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* The green «+6» chip against the previous month (red when the month is behind). */
html[data-skin="platform"] .ci-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
  font-family: var(--pf-font-num);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
html[data-skin="platform"] .ci-delta--down {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
/* ── The request card ────────────────────────────────────────────────────── */
html[data-skin="platform"] .ci-card {
  min-inline-size: 0;
  padding: 18px 20px 8px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ci-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 14px;
}
/* the tour anchor wrapper around the kind filter must be able to shrink (no sideways scroll at 390) */
html[data-skin="platform"] .ci-card__head > [data-tour="filters"] {
  min-inline-size: 0;
  max-inline-size: 100%;
}
html[data-skin="platform"] .ci-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .ci-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ci-card__title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ci-card__sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* ── The grid table: 34px | 2.4fr | 104px | 1.2fr | 110px | 150px ──────────── */
html[data-skin="platform"] .ci-table {
  overflow-x: auto;
}
html[data-skin="platform"] .ci-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 2.4fr) 104px minmax(0, 1.2fr) 110px 150px;
  gap: 12px;
  align-items: center;
  min-inline-size: 760px;
  min-block-size: 56px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--pf-border);
  font-size: 13.5px;
  color: var(--pf-text);
  transition: background-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .ci-row:last-child {
  border-block-end: 0;
}
html[data-skin="platform"] .ci-row--head {
  min-block-size: var(--pf-table-head-h);
  border: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ci-row--selected {
  background: var(--pf-primary-tint);
}
html[data-skin="platform"] .ci-cell {
  min-inline-size: 0;
  text-align: start;
}
html[data-skin="platform"] .ci-cell--check,
html[data-skin="platform"] .ci-cell--center {
  text-align: center;
}
html[data-skin="platform"] .ci-cell--end {
  text-align: end;
}
/* The request cell: 32px kind tile + the bold title and the submitter / host line. */
html[data-skin="platform"] .ci-req {
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-skin="platform"] .ci-req__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ci-req__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .ci-req__title {
  overflow: hidden;
  font-weight: 600;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
html[data-skin="platform"] a.ci-req__title:hover {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ci-req__sub {
  overflow: hidden;
  font-size: 12px;
  color: var(--pf-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .ci-project {
  overflow: hidden;
  font-size: 13px;
  color: var(--pf-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Type and deadline chips: 23px pills, 11px semibold. */
html[data-skin="platform"] .ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
html[data-skin="platform"] .ci-chip--blue {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ci-chip--gray {
  background: var(--pf-segmented);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ci-chip--green {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .ci-chip--amber {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .ci-chip--red {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
/* The two 32px row buttons («ملاحظات» outline, «اعتماد» primary). */
html[data-skin="platform"] .ci-row-actions {
  justify-content: flex-end;
}
html[data-skin="platform"] .ci-row-actions .ant-btn.ci-btn {
  block-size: 32px;
  padding-inline: 12px;
  border-radius: var(--pf-radius-control);
  font-size: 12.5px;
  font-weight: 600;
}
html[data-skin="platform"] .ci-row-actions .ant-btn.ci-btn--ghost {
  padding-inline: 10px;
}
/* The 20px checkbox: the native input stays (focus, keyboard, the accessible name), transparent over
   the canvas box; checked = a filled primary box with a white tick. */
html[data-skin="platform"] .ci-check {
  position: relative;
  inline-size: 20px;
  block-size: 20px;
}
html[data-skin="platform"] .ci-check__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
html[data-skin="platform"] .ci-check__input:disabled {
  cursor: not-allowed;
}
html[data-skin="platform"] .ci-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-hint);
  background: var(--pf-card);
  color: transparent;
  transition:
    background-color var(--pf-dur-fast) var(--pf-ease-out),
    border-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .ci-check__input:checked + .ci-check__box {
  border-color: var(--pf-primary);
  background: var(--pf-primary);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .ci-check__input:disabled + .ci-check__box {
  opacity: 0.45;
}
html[data-skin="platform"] .ci-check__input:focus-visible + .ci-check__box {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
/* ── Narrow screens: two KPI columns, the table scrolls inside its card ──── */
@media (max-width: 1100px) {
  html[data-skin="platform"] .ci-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  html[data-skin="platform"] .ci-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] .ci-card {
    padding-inline: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .ci-row,
  html[data-skin="platform"] .ci-check__box {
    transition: none;
  }
}
/* 0218 — the consultant approvals inbox (board P-Consultant) */
/* ============================================================================
 * Board W-BOQ («الحصر والكميات»), platform skin only. Pages:
 *   /app/boq/:boqId   — app/routes/app/boq/editor.tsx, platform branch: .boq-pf-grid holds the
 *                       sectioned card .boq-pf-items (head, the classic ds-table, .boq-pf-foot) and
 *                       the side column .boq-pf-aside (.boq-pf-calc calculators, .boq-pf-prices).
 *   /app/boq          — app/routes/app/boq/index.tsx: .boq-pf-register (StatGrid + cards).
 *   /app/estimation   — app/routes/app/estimation/index.tsx: .est-pf-modes tiles, .est-pf-ticker.
 * Board values: cards radius 20 / padding 18 20 / e1; head icon tile 34px radius 10; table head band
 * 38px radius 10 on surface-2; rows ≥ 42px, 13.5px; section rows 36px bold with the subtotal muted;
 * footer box radius 14 surface-2, padding 14 16, buttons 36px radius 12, total 22px bold; grid
 * 2.15fr / 1fr, gap 16; calculator tiles 4 per row, gap 8, radius 12.
 * Every selector starts with html[data-skin="platform"] (test/platform-skin-contracts.test.ts).
 * ============================================================================ */
/* ── Editor: the two-column grid ─────────────────────────────────────────── */
html[data-skin="platform"] .boq-pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pf-gap);
  align-items: start;
}
@media (min-width: 1200px) {
  html[data-skin="platform"] .boq-pf-grid {
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  }
  html[data-skin="platform"] .boq-pf-grid.boq-pf-grid--solo {
    grid-template-columns: minmax(0, 1fr);
  }
}
html[data-skin="platform"] .boq-pf-aside {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-width: 0;
}
/* ── Cards (table, calculators, unit prices) ─────────────────────────────── */
html[data-skin="platform"] .boq-pf-card {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  color: var(--pf-text);
}
html[data-skin="platform"] .boq-pf-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .boq-pf-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .boq-pf-card__titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html[data-skin="platform"] .boq-pf-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pf-text);
}
html[data-skin="platform"] .boq-pf-card__sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .boq-pf-card__tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
/* ── The table inside the card: no second card around it ─────────────────── */
html[data-skin="platform"] .boq-pf-items .ds-table-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-skin="platform"] .boq-pf-items .ds-table {
  inline-size: 100%;
}
html[data-skin="platform"] .boq-pf-items .ds-table thead tr {
  border: 0;
}
html[data-skin="platform"] .boq-pf-items .ds-table thead th {
  white-space: nowrap;
}
/* Item rows: the board's 42px line, 13.5px, amounts in the number face. */
html[data-skin="platform"] .boq-pf-items .ds-table.ds-table--compact tbody td {
  block-size: 42px;
  padding-block: 8px;
  vertical-align: middle;
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr:not(.boq-pf-sec) td:first-child {
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-text-3);
  white-space: nowrap;
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr:not(.boq-pf-sec) td:nth-child(3) {
  color: var(--pf-text-2);
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr:not(.boq-pf-sec) td:nth-child(4) {
  font-family: var(--pf-font-num);
  font-weight: 600;
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr:not(.boq-pf-sec) td:nth-child(5) {
  font-family: var(--pf-font-num);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr:not(.boq-pf-sec) td:nth-child(6) {
  font-family: var(--pf-font-num);
  font-weight: 700;
  color: var(--pf-text);
  white-space: nowrap;
}
/* The per-line catalog picker reads as a quiet 30px control under the description. */
html[data-skin="platform"] .boq-pf-items .ds-table tbody td button[role="combobox"] {
  block-size: 28px;
  min-block-size: 0;
  inline-size: auto;
  min-inline-size: 150px;
  max-inline-size: 240px;
  padding-block: 0;
  padding-inline: 10px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  font-size: 12px;
}
/* «استخدم فئتك» / «اقتراح» links keep to one line under their figure. */
html[data-skin="platform"] .boq-pf-items .ds-table tbody td :is(button, a).text-xs {
  font-size: 11.5px;
}
/* Section rows: 36px, bold title with the fold button, subtotal muted; no band colour. */
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr.boq-pf-sec td {
  block-size: 36px;
  padding-block: 12px 4px;
  border-block-end: 1px solid var(--pf-border);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .boq-pf-items .ds-table tbody tr.boq-pf-sec td:nth-child(2) {
  font-family: var(--pf-font-num);
  color: var(--pf-text-2);
  white-space: nowrap;
}
html[data-skin="platform"] .boq-pf-sec__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  margin-inline-end: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-hint);
  background: transparent;
  color: var(--pf-text-2);
  vertical-align: middle;
  cursor: pointer;
  transition: transform var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .boq-pf-sec__toggle[aria-expanded="false"] {
  transform: rotate(90deg);
}
html[data-skin="platform"][lang="en"] .boq-pf-sec__toggle[aria-expanded="false"] {
  transform: rotate(-90deg);
}
html[data-skin="platform"] .boq-pf-sec__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .boq-pf-sec__toggle:hover::after {
  opacity: 0.08;
}
html[data-skin="platform"] .boq-pf-sec__toggle:active::after {
  opacity: 0.14;
}
html[data-skin="platform"] .boq-pf-sec__toggle:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 1px;
}
/* ── Footer: exports on one side, «إجمالي المقايسة» on the other ─────────── */
html[data-skin="platform"] .boq-pf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 12px;
  padding: 14px 16px;
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .boq-pf-foot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-skin="platform"] .boq-pf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 36px;
  padding-inline: 14px;
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  color: var(--pf-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
html[data-skin="platform"] .boq-pf-btn::after,
html[data-skin="platform"] .boq-pf-calc__tile::after,
html[data-skin="platform"] .boq-pf-calc__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] :is(.boq-pf-btn, .boq-pf-calc__tile, .boq-pf-calc__open):hover::after {
  opacity: 0.06;
}
html[data-skin="platform"] :is(.boq-pf-btn, .boq-pf-calc__tile, .boq-pf-calc__open):active::after {
  opacity: 0.12;
}
html[data-skin="platform"] :is(.boq-pf-btn, .boq-pf-calc__tile, .boq-pf-calc__open):focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .boq-pf-foot__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-inline-start: auto;
}
html[data-skin="platform"] .boq-pf-foot__label {
  font-size: 13px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .boq-pf-total {
  font-family: var(--pf-font-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-text);
}
/* ── Calculators card ────────────────────────────────────────────────────── */
html[data-skin="platform"] .boq-pf-calc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html[data-skin="platform"] .boq-pf-calc__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-block: 10px;
  padding-inline: 4px;
  border: 1px solid transparent;
  border-radius: var(--pf-radius-control);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
html[data-skin="platform"] .boq-pf-calc__tile:hover {
  border-color: var(--pf-primary-text);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .boq-pf-calc__hint {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px dashed var(--pf-primary-text);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-primary-tint);
  color: var(--pf-text-2);
  font-size: 13px;
  line-height: 1.6;
}
html[data-skin="platform"] .boq-pf-calc__open {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: 48px;
  border-radius: var(--pf-radius-cta);
  background: var(--pf-primary);
  box-shadow: var(--pf-primary-shadow);
  color: var(--color-foreground-onPrimary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
}
/* ── Unit prices card ────────────────────────────────────────────────────── */
html[data-skin="platform"] .boq-pf-prices__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .boq-pf-prices__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  font-size: 13px;
}
html[data-skin="platform"] .boq-pf-prices__list li > .ltr-island {
  flex-shrink: 0;
  font-family: var(--pf-font-num);
  font-weight: 700;
}
/* ── /app/estimation: the four start tiles and the market ticker ─────────── */
html[data-skin="platform"] .est-pf-mode {
  position: relative;
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  color: var(--pf-text);
  text-decoration: none;
  transition: transform var(--pf-dur) var(--pf-ease-quint), border-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .est-pf-mode:hover {
  border-color: var(--pf-primary-text);
  transform: translateY(-2px);
}
html[data-skin="platform"] .est-pf-mode:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .est-pf-mode > div:first-of-type {
  margin-block-start: 12px;
  font-size: 15px;
  font-weight: 700;
}
html[data-skin="platform"] .est-pf-mode > div:last-of-type {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .est-pf-mode__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ant-card.est-pf-ticker .ant-card-body {
  padding: 14px 20px;
}
html[data-skin="platform"] .est-pf-ticker .ltr-island.font-semibold {
  font-family: var(--pf-font-num);
}
/* ── Phone: the card keeps its 16px gutter, the table scrolls inside it ─── */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] :is(.est-pf-mode, .boq-pf-sec__toggle) {
    transition: none;
  }
  html[data-skin="platform"] .est-pf-mode:hover {
    transform: none;
  }
}
@media (max-width: 640px) {
  html[data-skin="platform"] .boq-pf-card {
    padding: 14px;
  }
  html[data-skin="platform"] .boq-pf-items .ds-table-wrap {
    overflow-x: auto;
  }
  html[data-skin="platform"] .boq-pf-foot__total {
    margin-inline-start: 0;
  }
  html[data-skin="platform"] .boq-pf-total {
    font-size: 19px;
  }
}
/* board W-BOQ: /app/boq, /app/boq/:id, /app/estimation */
/* ============================================================================
 * Platform design — the resources screens: attendance (/app/attendance), payroll
 * (/app/payroll) on board W-Attendance, inventory (/app/inventory) and purchase
 * orders (/app/purchase-orders) on board W-Inventory. The markup is each route's
 * platform branch (useUiDesign() === "platform"); classic renders none of these
 * classes. Every selector is scoped to html[data-skin="platform"]; colours are
 * the per-mode --pf-* tokens, so one rule serves light and dark.
 * docs/design/platform-skin.md.
 * ============================================================================ */
/* ── Shared card: 20px, 1px border, e1, head with a 34px tinted icon tile ─── */
html[data-skin="platform"] .rs-card {
  position: relative;
  min-inline-size: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .rs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .rs-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .rs-head > .rs-head__icon {
  order: -1;
}
html[data-skin="platform"] .rs-head__text {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .rs-head__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pf-text);
}
html[data-skin="platform"] .rs-head__sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .rs-head__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
}
html[data-skin="platform"] .rs-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-primary-text);
  text-decoration: none;
  white-space: nowrap;
}
html[data-skin="platform"] .rs-link:hover {
  text-decoration: underline;
}
html[data-skin="platform"] .rs-link:focus-visible,
html[data-skin="platform"] .rs-btn:focus-visible,
html[data-skin="platform"] .inv-pf-pill:focus-visible,
html[data-skin="platform"] .inv-pf-po-row:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 32px;
  padding-inline: 12px;
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  color: var(--pf-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
html[data-skin="platform"] .rs-empty {
  margin: 0;
  padding-block: 18px;
  font-size: 13px;
  color: var(--pf-text-2);
  text-align: center;
}
html[data-skin="platform"] .rs-more {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .rs-num {
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .rs-num--primary { color: var(--pf-primary-text); }
html[data-skin="platform"] .rs-num--danger { color: var(--pf-danger); }
html[data-skin="platform"] .rs-num--strong { font-size: 14px; font-weight: 700; }
html[data-skin="platform"] .rs-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
}
/* Initials avatar (the canvas's 32px rounded square in the avatar palette). */
html[data-skin="platform"] .rs-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-avatar-user);
  color: var(--pf-on-navy);
  font-size: 11px;
  font-weight: 700;
}
html[data-skin="platform"] .rs-av--sm { inline-size: 30px; block-size: 30px; border-radius: var(--pf-radius-seg); font-size: 10px; }
html[data-skin="platform"] .rs-av--1 { background: var(--pf-avatar-contractor); }
html[data-skin="platform"] .rs-av--2 { background: var(--pf-avatar-consultant); }
html[data-skin="platform"] .rs-av--3 { background: var(--pf-avatar-owner); }
/* Check-in method chips (GPS / يدوي / بصمة, وجه, inside / outside the fence). */
html[data-skin="platform"] .rs-method {
  display: inline-flex;
  align-items: center;
  block-size: 20px;
  padding-inline: 7px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-segmented);
  color: var(--pf-text-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
html[data-skin="platform"] .rs-method--face { background: var(--pf-primary-tint); color: var(--pf-primary-text); }
html[data-skin="platform"] .rs-method--in { background: var(--pf-success-tint); color: var(--pf-success-text); }
html[data-skin="platform"] .rs-method--out { background: var(--pf-danger-tint); color: var(--pf-danger); }
/* A kit Section drawn as a card (inventory): the icon tile sits beside title + desc,
   and a DataTable inside a card loses its own card frame. */
html[data-skin="platform"] .ds-section.rs-card .ds-section-head-text {
  position: relative;
  min-block-size: 34px;
  padding-inline-start: 44px;
}
html[data-skin="platform"] .ds-section.rs-card .ds-section-title .rs-head__icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
html[data-skin="platform"] .rs-card .ds-table-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* ── Attendance: check-ins (1.55fr) beside «حضور اليوم» (1fr) ──────────────── */
html[data-skin="platform"] .att-pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--pf-gap);
  align-items: start;
}
html[data-skin="platform"] .att-pf-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .att-pf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .att-pf-row__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
html[data-skin="platform"] .att-pf-row__who > b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .att-pf-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .att-pf-row__time {
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .att-pf-ring {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .att-pf-ring .sv-ring-track {
  color: var(--pf-track);
}
html[data-skin="platform"] .att-pf-ring figure {
  flex-shrink: 0;
}
html[data-skin="platform"] .att-pf-tiles {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .att-pf-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  padding: 10px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .att-pf-tile > span {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .att-pf-tile > b {
  font-family: var(--pf-font-num);
  font-size: 20px;
  font-weight: 700;
}
html[data-skin="platform"] .att-pf-tile--green > b { color: var(--pf-success-text); }
html[data-skin="platform"] .att-pf-tile--amber > b { color: var(--pf-warning-text); }
html[data-skin="platform"] .att-pf-tile--red > b { color: var(--pf-danger); }
html[data-skin="platform"] .att-pf-geo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--pf-border);
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .att-pf-geo__title {
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .att-pf-geo__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-skin="platform"] .att-pf-geo__item > b {
  font-family: var(--pf-font-num);
  color: var(--pf-text);
}
html[data-skin="platform"] .att-pf-geo__sw {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
}
html[data-skin="platform"] .att-pf-geo__sw--in { background: var(--pf-success); }
html[data-skin="platform"] .att-pf-geo__sw--out { background: var(--pf-danger); }
/* ── Payroll: the latest run as a sheet (38px sunken head band, 48px rows) ──── */
html[data-skin="platform"] .pr-pf-grid {
  min-inline-size: 640px;
}
html[data-skin="platform"] .pr-pf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) 90px minmax(96px, 0.8fr) minmax(96px, 0.8fr) minmax(110px, 0.9fr);
  gap: 12px;
  align-items: center;
  min-block-size: 48px;
  padding-inline: 16px;
  border-block-end: 1px solid var(--pf-border);
  font-size: 13.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .pr-pf-row:last-child {
  border-block-end: 0;
}
html[data-skin="platform"] .pr-pf-row--head {
  min-block-size: var(--pf-table-head-h);
  border-block-end: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
  font-size: 12px;
  font-weight: 600;
}
html[data-skin="platform"] .pr-pf-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pr-pf-who > b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pr-pf-muted {
  overflow: hidden;
  color: var(--pf-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pr-pf-c { text-align: center; }
html[data-skin="platform"] .pr-pf-e { text-align: end; }
html[data-skin="platform"] .pr-pf-sheet {
  margin-block-end: 0;
}
/* ── Inventory: warehouse pill strip ─────────────────────────────────────────── */
html[data-skin="platform"] .inv-pf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
html[data-skin="platform"] .inv-pf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
}
html[data-skin="platform"] .inv-pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 38px;
  padding-inline: 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  color: var(--pf-text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pf-dur-fast) var(--pf-ease-out), border-color var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .inv-pf-pill:hover {
  border-color: var(--pf-border-strong);
  color: var(--pf-text);
}
html[data-skin="platform"] .inv-pf-pill.is-active {
  border-color: var(--pf-primary);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .inv-pf-strip__end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* ── Inventory: stock card (1.75fr) beside the side cards (1fr) ──────────────── */
html[data-skin="platform"] .inv-pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 296px);
  gap: var(--pf-gap);
  align-items: start;
}
html[data-skin="platform"] .inv-pf-side {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
html[data-skin="platform"] .inv-pf-level {
  display: flex;
  align-items: center;
  min-inline-size: 72px;
}
html[data-skin="platform"] .inv-pf-level__track {
  display: block;
  flex: 1 1 auto;
  block-size: 7px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-track);
}
html[data-skin="platform"] .inv-pf-level__fill {
  display: block;
  block-size: 100%;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-success);
}
html[data-skin="platform"] .inv-pf-level__fill--amber { background: var(--pf-warning); }
html[data-skin="platform"] .inv-pf-level__fill--red { background: var(--pf-danger); }
/* «آخر الحركات» */
html[data-skin="platform"] .inv-pf-move-list,
html[data-skin="platform"] .inv-pf-po-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .inv-pf-move {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
}
html[data-skin="platform"] .inv-pf-move + .inv-pf-move {
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .inv-pf-move__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .inv-pf-move__icon--in { background: var(--pf-success-tint); color: var(--pf-success-text); }
html[data-skin="platform"] .inv-pf-move__icon--out { background: var(--pf-warning-tint); color: var(--pf-warning-text); }
html[data-skin="platform"] .inv-pf-move__text,
html[data-skin="platform"] .inv-pf-po-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .inv-pf-move__text > b,
html[data-skin="platform"] .inv-pf-po-row__text > b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .inv-pf-move__text > span,
html[data-skin="platform"] .inv-pf-po-row__text > span {
  overflow: hidden;
  font-size: 12px;
  color: var(--pf-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .inv-pf-move__qty {
  flex-shrink: 0;
  font-weight: 700;
}
html[data-skin="platform"] .inv-pf-move__qty--in { color: var(--pf-success-text); }
/* «بانتظار الاستلام» */
html[data-skin="platform"] .inv-pf-po-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin-inline: -10px;
  border-radius: var(--pf-radius-control);
  color: inherit;
  text-decoration: none;
}
html[data-skin="platform"] .inv-pf-po-row:hover {
  background: var(--pf-sunken);
}
html[data-skin="platform"] .inv-pf-po-list > li + li {
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .inv-pf-po-row__qty {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
html[data-skin="platform"] .inv-pf-po-row__label {
  font-size: 11px;
  color: var(--pf-text-3);
}
/* ── Purchase orders: tabs + toolbar + register in one card ──────────────────── */
html[data-skin="platform"] .po-pf-register .ds-toolbar,
html[data-skin="platform"] .po-pf-register > [class*="toolbar"] {
  margin-block-end: 12px;
}
html[data-skin="platform"] .po-pf-tabs {
  max-inline-size: 100%;
  overflow-x: auto;
}
/* ── Responsive: stack the grids on tablet portrait / phone ─────────────────── */
@media (max-width: 1100px) {
  html[data-skin="platform"] .att-pf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1279px) {
  html[data-skin="platform"] .inv-pf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] .inv-pf-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 640px) {
  html[data-skin="platform"] .rs-card {
    padding: 14px;
  }
  html[data-skin="platform"] .att-pf-ring {
    flex-direction: column;
    align-items: stretch;
  }
  html[data-skin="platform"] .att-pf-ring figure {
    align-self: center;
  }
  html[data-skin="platform"] .inv-pf-side {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] .inv-pf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-inline-size: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .inv-pf-pill {
    transition: none;
  }
}
/* boards W-Attendance + W-Inventory: attendance, payroll, inventory, purchase orders */
/* ============================================================================
 * Platform design: the projects register (board W-Projects, /app/projects)
 * and the project workspace header (/app/projects/:id, the tab strips).
 *
 * Markup: the platform branch of app/routes/app/projects/index.tsx
 * (.pf-pj*) and the platform-only classes of app/routes/app/projects/detail.tsx
 * (.pf-ws, .pf-ws-head, .pf-ws-tabs). Classic renders none of these classes.
 * Every selector starts with html[data-skin="platform"]; colours are tokens.
 * ============================================================================ */
/* ── 1. Register: the toolbar card that rises 44px into the hero ─────────── */
html[data-skin="platform"] .pf-pj {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-pj-toolbar {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-pj-toolbar .ds-toolbar {
  margin: 0;
  align-items: center;
}
/* The total chip is flat inside the card (the card is the surface). */
html[data-skin="platform"] .pf-pj-toolbar .ds-toolbar-total {
  box-shadow: none;
  background: var(--pf-sunken);
}
html[data-skin="platform"] .pf-pj-cap {
  margin-inline-start: 12px;
  font-size: 12px;
  color: var(--pf-text-2);
}
/* ── 2. The photo cards: 3 columns, 16px gap ─────────────────────────────── */
html[data-skin="platform"] .pf-pj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pf-gap);
  margin-block-end: var(--pf-gap);
}
html[data-skin="platform"] .pf-pj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-pj-media {
  position: relative;
  display: block;
  block-size: 108px;
  overflow: hidden;
  color: var(--pf-on-navy);
  text-decoration: none;
}
html[data-skin="platform"] .pf-pj-media:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: -2px;
}
html[data-skin="platform"] .pf-pj-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform var(--pf-dur-slow) var(--pf-ease-out);
}
html[data-skin="platform"] .pf-pj-card:hover .pf-pj-img { transform: scale(1.04); }
html[data-skin="platform"] .pf-pj-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--pf-scrim-rgb) / 0) 30%, rgb(var(--pf-scrim-rgb) / 0.7) 100%);
}
html[data-skin="platform"] .pf-pj-status {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
}
html[data-skin="platform"] .pf-pj-status .ds-badge {
  block-size: 23px;
  background: var(--pf-chip-on-image-bg);
  color: var(--pf-chip-on-image-fg);
}
html[data-skin="platform"] .pf-pj-name {
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 14px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pf-on-navy);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: var(--pf-photo-title-shadow);
}
html[data-skin="platform"] .pf-pj-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-pj-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-inline-size: 0;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-pj-place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-pj-place > span,
html[data-skin="platform"] .pf-pj-client {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pf-pj-place svg { flex-shrink: 0; color: var(--pf-text-3); }
html[data-skin="platform"] .pf-pj-figure {
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-skin="platform"] .pf-pj-ring { flex-shrink: 0; }
html[data-skin="platform"] .pf-pj-ring .sv-ring-value { font-family: var(--pf-font-num); font-size: 11px; }
html[data-skin="platform"] .pf-pj-ring .sv-ring-track { color: var(--pf-track); }
html[data-skin="platform"] .pf-pj-money {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-pj-label {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-pj-value {
  font-family: var(--pf-font-num);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-text);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-pj-value--none { color: var(--pf-text-3); }
html[data-skin="platform"] .pf-pj-amount { white-space: nowrap; }
html[data-skin="platform"] .pf-pj-unit {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-pj-spend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  margin-block-end: 4px;
  font-size: 11.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-pj-spend-row .ltr-island { font-family: var(--pf-font-num); }
html[data-skin="platform"] .pf-pj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: auto;
}
html[data-skin="platform"] .pf-pj-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-inline-size: 100%;
  block-size: 23px;
  padding-inline: 9px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-pj-chip[data-tone="green"] { background: var(--pf-success-tint); color: var(--pf-success-text); }
html[data-skin="platform"] .pf-pj-chip[data-tone="amber"] { background: var(--pf-warning-tint); color: var(--pf-warning-text); }
html[data-skin="platform"] .pf-pj-chip[data-tone="red"] { background: var(--pf-danger-tint); color: var(--pf-danger); }
html[data-skin="platform"] .pf-pj-chip[data-tone="gray"] { background: var(--pf-segmented); color: var(--pf-text-2); }
html[data-skin="platform"] .pf-pj-chip .ltr-island { font-family: var(--pf-font-num); }
html[data-skin="platform"] .pf-pj-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--pf-border);
  font-size: 12px;
}
html[data-skin="platform"] .pf-pj-closed { color: var(--pf-text-2); }
html[data-skin="platform"] .pf-pj-closing { color: var(--pf-primary-text); text-decoration: underline; }
/* Tablet (769–1180): two columns keep the photo cards readable; phone: one. */
@media (max-width: 1180px) {
  html[data-skin="platform"] .pf-pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html[data-skin="platform"] .pf-pj-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-skin="platform"] .pf-pj-toolbar { padding: 10px; }
  html[data-skin="platform"] .pf-pj-cap { display: block; margin: 4px 0 0; }
}
/* ── 3. Project workspace header: one card (the record line + the tab strips)
   rising into the hero. The hero already carries the project name, so the
   card's own heading is kept for assistive tech but drawn once, in the hero. */
html[data-skin="platform"] .pf-ws > .pf-ws-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0;
  padding: 16px 20px 14px;
  border: 1px solid var(--pf-border);
  border-block-end: 0;
  border-radius: var(--pf-radius-card) var(--pf-radius-card) 0 0;
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-ws-head .ds-page-header {
  flex: 1 1 260px;
  min-inline-size: 0;
  margin: 0;
}
html[data-skin="platform"] .pf-ws-head .ds-page-header-title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-ws-head .ds-page-header-title-row { gap: 8px; }
html[data-skin="platform"] .pf-ws-head .ds-page-header-desc {
  margin: 0;
  font-size: 13px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-ws-head .ds-stats {
  flex: 0 1 300px;
  min-inline-size: 0;
  margin: 0;
}
html[data-skin="platform"] .pf-ws-head .ds-stats .ds-stat:nth-child(n) {
  padding: 10px 14px;
  border-color: transparent;
  background: var(--pf-sunken);
  box-shadow: none;
}
html[data-skin="platform"] .pf-ws > .pf-ws-tabs {
  position: relative;
  margin-block-start: 0;
  padding: 12px 20px 16px;
  border: 1px solid var(--pf-border);
  border-block-start: 0;
  border-radius: 0 0 var(--pf-radius-card) var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-ws > .pf-ws-tabs::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20px;
  border-block-start: 1px solid var(--pf-border);
}
/* The second row (the tabs of the group): underline-free text tabs, the
   active one a primary tint; the group row keeps the kit's segmented track. */
html[data-skin="platform"] .pf-ws-tabs #project-workspace-tabs {
  max-inline-size: 100%;
  padding: 0;
  background: transparent;
}
html[data-skin="platform"] .pf-ws-tabs #project-workspace-tabs .ds-seg-btn {
  block-size: 34px;
  padding-inline: 12px;
}
html[data-skin="platform"] .pf-ws-tabs #project-workspace-tabs .ds-seg-btn.active {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  box-shadow: none;
}
html[data-skin="platform"] .pf-ws-tabs > .ds-seg { max-inline-size: 100%; }
@media (max-width: 640px) {
  html[data-skin="platform"] .pf-ws > .pf-ws-head { padding: 14px 14px 12px; }
  html[data-skin="platform"] .pf-ws > .pf-ws-tabs { padding: 10px 14px 14px; }
  html[data-skin="platform"] .pf-ws > .pf-ws-tabs::before { inset-inline: 14px; }
  html[data-skin="platform"] .pf-ws-head .ds-stats { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .pf-pj-img { transition: none; }
  html[data-skin="platform"] .pf-pj-card:hover .pf-pj-img { transform: none; }
}
/* board W-Projects: /app/projects photo cards + the workspace tab card */
/* ============================================================================
 * Platform skin: certificates (board W-Extracts). /app/extracts/:id and the
 * /app/extracts register. Every selector is scoped to html[data-skin="platform"];
 * the .ext-pf-* markup is rendered by app/routes/app/extracts/detail.tsx only
 * under the platform skin (classic draws its original blocks, byte for byte).
 * docs/design/platform-skin.md.
 * ============================================================================ */
/* ── 1. The page grid: items column + the approval aside (2.35fr / 1fr) ──── */
html[data-skin="platform"] .ext-pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pf-gap);
  align-items: start;
}
@media (min-width: 1280px) {
  html[data-skin="platform"] .ext-pf-grid {
    grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr);
  }
}
html[data-skin="platform"] .ext-pf-main,
html[data-skin="platform"] .ext-pf-aside {
  min-inline-size: 0;
}
html[data-skin="platform"] .ext-pf-aside {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
}
/* ── 2. Card chrome shared by the items card and the aside cards ─────────── */
html[data-skin="platform"] .ext-pf-card,
html[data-skin="platform"] .ds-section.ext-pf-items {
  position: relative;
  min-inline-size: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .ext-pf-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .ext-pf-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .ext-pf-ico {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ext-pf-card__title,
html[data-skin="platform"] .ext-pf-items > .ds-section-head .ds-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ext-pf-items > .ds-section-head {
  margin-block-end: 14px;
}
html[data-skin="platform"] .ext-pf-items > .ds-section-head .ds-section-desc {
  margin-block-start: 2px;
  padding-inline-start: 44px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* ── 3. The items table: the current period's column is highlighted ───────
   Column 6 is «الكمية الحالية» in the head and in every item row (group and
   subtotal rows span columns, so they carry a [colspan] and are left alone). */
html[data-skin="platform"] .ext-pf-items .ds-table thead th:nth-child(6) {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .ext-pf-items .ds-table tbody tr:not(:has(td[colspan])) > td:nth-child(6) {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  font-weight: 700;
}
html[data-skin="platform"] .ext-pf-items .ds-table tbody tr:not(:has(td[colspan])) > td:nth-child(6) input {
  border-color: var(--pf-primary);
  color: var(--pf-primary-text);
  font-weight: 700;
}
html[data-skin="platform"] .ext-pf-items .ds-table td.ltr-island,
html[data-skin="platform"] .ext-pf-items .ds-table td .ltr-island {
  font-family: var(--pf-font-num);
}
/* The trade group heading row (classic: an amber band). */
html[data-skin="platform"] .ext-pf-items .ds-table tbody tr:has(> td[colspan]:only-child) > td {
  background: var(--pf-sunken);
  color: var(--pf-text);
  font-size: 12.5px;
}
/* ── 4. Deductions summary + the net-due box ──────────────────────────────── */
html[data-skin="platform"] .ext-pf-sum {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 14px;
  padding: 16px 18px;
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .ext-pf-sum__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ext-pf-sum__val {
  flex-shrink: 0;
  font-family: var(--pf-font-num);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ext-pf-sum__val--strong {
  color: var(--pf-text);
}
html[data-skin="platform"] .ext-pf-sum__net {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-block-start: 4px;
  padding-block-start: 12px;
  border-block-start: 1px dashed var(--pf-border-strong);
}
html[data-skin="platform"] .ext-pf-sum__net-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ext-pf-sum__net-val {
  font-family: var(--pf-font-num);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-primary-text);
}
/* ── 5. «دورة الاعتماد»: the approval stepper ────────────────────────────── */
html[data-skin="platform"] .ext-pf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .ext-pf-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding-block-end: 16px;
}
html[data-skin="platform"] .ext-pf-step__line {
  position: absolute;
  inset-inline-start: 13px;
  inset-block: 30px -6px;
  inline-size: 2px;
  background: var(--pf-border-strong);
}
html[data-skin="platform"] .ext-pf-step__line[data-done] {
  background: var(--pf-success);
}
html[data-skin="platform"] .ext-pf-step__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  box-sizing: border-box;
  border: 2px solid var(--pf-border-strong);
  border-radius: 50%;
  background: var(--pf-sunken);
  color: var(--pf-text-3);
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 700;
}
html[data-skin="platform"] .ext-pf-step[data-state="done"] .ext-pf-step__dot {
  border-color: var(--pf-success);
  background: var(--pf-success);
  color: var(--pf-card);
}
html[data-skin="platform"] .ext-pf-step[data-state="current"] .ext-pf-step__dot {
  border-color: var(--pf-primary);
  background: var(--pf-primary);
  color: var(--color-fg-on-primary);
  box-shadow: 0 0 0 5px var(--pf-primary-tint);
}
html[data-skin="platform"] .ext-pf-step[data-state="skip"] .ext-pf-step__dot {
  border-style: dashed;
}
html[data-skin="platform"] .ext-pf-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  padding-block-start: 3px;
}
html[data-skin="platform"] .ext-pf-step__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .ext-pf-step[data-state="current"] .ext-pf-step__label {
  font-weight: 700;
}
html[data-skin="platform"] .ext-pf-step:is([data-state="pending"], [data-state="skip"]) .ext-pf-step__label {
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ext-pf-step__sub {
  font-size: 12px;
  color: var(--pf-text-2);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .ext-pf-card__note,
html[data-skin="platform"] .ext-pf-card__warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
  font-size: 12.5px;
  line-height: 1.5;
}
html[data-skin="platform"] .ext-pf-card .ant-btn.ext-pf-approve {
  inline-size: 100%;
  block-size: 50px;
  border-radius: var(--pf-radius-cta);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--pf-hero-cta-shadow);
}
html[data-skin="platform"] .ext-pf-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  block-size: 50px;
  border-radius: var(--pf-radius-cta);
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
  font-size: 14px;
  font-weight: 600;
}
/* ── 6. «ربحية المستخلص» ─────────────────────────────────────────────────── */
html[data-skin="platform"] .ext-pf-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
  font-family: var(--pf-font-num);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
html[data-skin="platform"] .ext-pf-chip[data-tone="danger"] {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .ext-pf-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: 12px;
}
html[data-skin="platform"] .ext-pf-bar__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ext-pf-bar__val {
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .ext-pf-bar__track {
  block-size: 8px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-track);
}
html[data-skin="platform"] .ext-pf-bar__fill {
  block-size: 100%;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-primary);
}
html[data-skin="platform"] .ext-pf-bar__fill[data-tone="orange"] {
  background: var(--pf-orange);
}
html[data-skin="platform"] .ext-pf-card__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .ext-pf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-primary-text);
}
/* ── 7. The register (/app/extracts): trade → contractor tree as cards ──── */
html[data-skin="platform"] [data-tour="extracts.register"] > div > details {
  overflow: hidden;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] [data-tour="extracts.register"] > div > details > summary {
  padding: 14px 20px;
  border-radius: 0;
  background: var(--pf-card);
  color: var(--pf-text);
  font-size: 15px;
}
html[data-skin="platform"] [data-tour="extracts.register"] > div > details[open] > summary {
  border-block-end: 1px solid var(--pf-border);
}
html[data-skin="platform"] [data-tour="extracts.register"] > div > details > div {
  padding: 16px 20px 18px;
}
html[data-skin="platform"] [data-tour="extracts.register"] details details {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
html[data-skin="platform"] [data-tour="extracts.register"] details details > summary {
  padding: 10px 14px;
  color: var(--pf-text);
}
html[data-skin="platform"] [data-tour="extracts.register"] details details a {
  min-block-size: 38px;
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-control);
  background: var(--pf-card);
  color: var(--pf-text);
  transition: border-color var(--pf-dur-fast) var(--pf-ease-out), box-shadow var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] [data-tour="extracts.register"] details details a:hover {
  border-color: var(--pf-primary);
  background: var(--pf-card);
  box-shadow: 0 0 0 3px var(--pf-primary-tint);
}
html[data-skin="platform"] [data-tour="extracts.register"] details details a .ltr-island {
  font-family: var(--pf-font-num);
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] [data-tour="extracts.register"] details details a {
    transition: none;
  }
}
/* ── 8. Phone: the cards keep a 16px gutter, the net value wraps under its label ── */
@media (max-width: 640px) {
  html[data-skin="platform"] .ext-pf-card,
  html[data-skin="platform"] .ds-section.ext-pf-items {
    padding: 14px 14px 16px;
  }
  html[data-skin="platform"] .ext-pf-items > .ds-section-head .ds-section-desc {
    padding-inline-start: 0;
  }
  html[data-skin="platform"] .ext-pf-sum {
    padding: 14px;
  }
}
/* board W-Extracts: /app/extracts register + /app/extracts/:id */
/* ============================================================================
 * Platform design: forms, RFIs, site monitoring and daily logs.
 * Boards W-Forms (list + detail split: status / type chips, thread, attachment,
 * lifecycle steps) and W-Monitoring (camera tiles with the live chip, the day's
 * photo timeline), light + dark.
 *
 * Markup: the platform branches of app/routes/app/forms/index.tsx (.pfd-register),
 * app/routes/app/rfis/index.tsx (.pfd-split), app/routes/app/forms/detail.tsx
 * (.pfd-form, the trail as .pfd-thread + .pfd-steps), app/routes/app/monitoring.tsx
 * (.mn-*) and app/routes/app/daily-logs.tsx (.dl-*). Classic never renders these
 * classes. Every selector starts with html[data-skin="platform"]; colours are the
 * per-mode --pf-* tokens, so one rule serves light and dark.
 * docs/design/platform-skin.md.
 * ============================================================================ */
/* ── The shared card: 20px, e1, 34px tinted icon tile, 16px title ─────────── */
html[data-skin="platform"] .pfd-card {
  position: relative;
  min-inline-size: 0;
  padding: 18px 16px 10px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  box-sizing: border-box;
}
html[data-skin="platform"] .pfd-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  margin-block-end: 14px;
}
html[data-skin="platform"] .pfd-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-card__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pfd-card__sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* ── Request list items (forms register cards + the RFI list) ──────────────── */
html[data-skin="platform"] .pfd-items,
html[data-skin="platform"] .pfd-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .pfd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px 12px;
  margin-block-end: 8px;
}
html[data-skin="platform"] .pfd-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-card);
  color: var(--pf-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color var(--pf-dur-fast) var(--pf-ease-out),
    background-color var(--pf-dur-fast) var(--pf-ease-out),
    box-shadow var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .pfd-items > li + li {
  margin-block-start: 8px;
}
/* The row's file-preview kebab (classic parity: the register's RowActions column). A sibling of the
   item button (a button cannot hold a button), pinned to the item's bottom inline-end corner. */
html[data-skin="platform"] .pfd-items > li {
  position: relative;
}
html[data-skin="platform"] .pfd-items > li.pfd-li--kebab > .pfd-item {
  padding-inline-end: 48px;
}
html[data-skin="platform"] .pfd-item__kebab {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
}
html[data-skin="platform"] .pfd-item:hover {
  border-color: var(--pf-border-strong);
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-item:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
/* Selected: blue tint, blue border and the inline-start edge bar (inset -3px in RTL). */
html[data-skin="platform"] .pfd-item--active,
html[data-skin="platform"] .pfd-item--active:hover {
  border-color: var(--pf-primary);
  background: var(--pf-primary-tint);
  box-shadow: inset -3px 0 0 var(--pf-primary);
}
html[data-skin="platform"][dir="ltr"] .pfd-item--active,
html[data-skin="platform"][dir="ltr"] .pfd-item--active:hover {
  box-shadow: inset 3px 0 0 var(--pf-primary);
}
html[data-skin="platform"] .pfd-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-item__no,
html[data-skin="platform"] .pfd-detail__no {
  font-family: var(--pf-font-num);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pf-text-2);
  white-space: nowrap;
}
html[data-skin="platform"] .pfd-item--active .pfd-item__no,
html[data-skin="platform"] .pfd-detail__no {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-item__title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-item__date {
  margin-inline-start: auto;
  font-family: var(--pf-font-num);
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-item__late,
html[data-skin="platform"] .pfd-item__files {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
html[data-skin="platform"] .pfd-item__late {
  color: var(--pf-danger);
}
html[data-skin="platform"] .pfd-register .ds-pagination {
  margin-block: 6px 4px;
}
/* ── RFI split: list 1fr | detail 1.75fr ───────────────────────────────────── */
html[data-skin="platform"] .pfd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: var(--pf-gap);
  align-items: start;
}
html[data-skin="platform"] .pfd-split--single {
  grid-template-columns: minmax(0, 1fr);
}
html[data-skin="platform"] .pfd-detail {
  padding: 20px 22px;
  scroll-margin-block-start: 16px;
}
html[data-skin="platform"] .pfd-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
html[data-skin="platform"] .pfd-detail__titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  flex: 1 1 260px;
}
html[data-skin="platform"] .pfd-detail__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
html[data-skin="platform"] .pfd-detail__no {
  font-size: 13px;
}
html[data-skin="platform"] .pfd-detail__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-detail__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The four-field grid on the sunken panel. */
html[data-skin="platform"] .pfd-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .pfd-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-meta dt {
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-meta dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-meta dd.pfd-meta__late {
  color: var(--pf-danger);
}
/* Attachments: dashed rows, 48px kind tile, tinted «عرض». */
html[data-skin="platform"] .pfd-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-skin="platform"] .pfd-files__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-files__none {
  margin: 0;
  font-size: 13px;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px dashed var(--pf-border-strong);
  border-radius: var(--pf-radius-inner);
}
html[data-skin="platform"] .pfd-file__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-file__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-file__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pfd-file__size {
  font-family: var(--pf-font-num);
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-file .pfd-file__view {
  --pf-kit-btn-bg: var(--pf-primary-tint);
  --pf-kit-btn-bg-hover: var(--pf-primary-tint-strong);
  --pf-kit-btn-fg: var(--pf-primary-text);
  --pf-kit-btn-border: transparent;
  flex-shrink: 0;
}
/* Lifecycle steps: done = green check, current = primary clock, todo = grey. */
html[data-skin="platform"] .pfd-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-block-start: 1px solid var(--pf-border);
  list-style: none;
}
html[data-skin="platform"] .pfd-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-step--done {
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pfd-step--current {
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-step--rejected {
  color: var(--pf-danger);
}
html[data-skin="platform"] .pfd-step__date {
  font-family: var(--pf-font-num);
  font-weight: 500;
  color: var(--pf-text-3);
}
/* ── Form detail (/app/forms/:id): the record as the board's detail pane ───── */
html[data-skin="platform"] .pfd-form > .ds-detail-header,
html[data-skin="platform"] .pfd-form > .ds-section,
html[data-skin="platform"] .pfd-form > [data-tour="formDetail.attachments"] > .ds-section {
  padding: 20px 22px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
/* The number in the record title reads as the board's blue Outfit id. */
html[data-skin="platform"] .pfd-form .ds-detail-header .ds-page-header-title > .ltr-island {
  font-family: var(--pf-font-num);
  color: var(--pf-primary-text);
}
/* Scalar fields: one sunken panel, label 12 / value 13.5 semibold (the board's meta grid). */
html[data-skin="platform"] .pfd-form [data-tour="formDetail.fields"] > .grid {
  gap: 14px 16px;
  padding: 14px 16px;
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .pfd-form [data-tour="formDetail.fields"] > .grid > div > p:first-child {
  margin-block-end: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-form [data-tour="formDetail.fields"] > .grid > div > p:last-child {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--pf-text);
}
/* The decision form: the signature pad and the buttons keep their own look (signature.css + kit). */
html[data-skin="platform"] .pfd-form [data-tour="formDetail.decision"] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The approval trail as the board's thread: 36px step tile + bubble. */
html[data-skin="platform"] .pfd-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .pfd-msg {
  display: flex;
  gap: 12px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-msg__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--pf-radius-field);
  background: var(--pf-segmented);
  color: var(--pf-text-2);
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 700;
}
html[data-skin="platform"] .pfd-msg--green .pfd-msg__avatar {
  background: var(--pf-success);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pfd-msg--red .pfd-msg__avatar {
  background: var(--pf-danger);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pfd-msg--amber .pfd-msg__avatar {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pfd-msg--pending .pfd-msg__avatar,
html[data-skin="platform"] .pfd-msg--blue .pfd-msg__avatar {
  background: var(--pf-primary);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .pfd-msg__bubble {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  max-inline-size: 640px;
  padding: 12px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-panel);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .pfd-msg--pending .pfd-msg__bubble {
  border-color: var(--pf-primary);
  background: var(--pf-primary-tint);
}
html[data-skin="platform"] .pfd-msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
html[data-skin="platform"] .pfd-msg__who {
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-msg__sig {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-msg__time {
  margin-inline-start: auto;
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-msg__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--pf-text);
  white-space: pre-line;
}
html[data-skin="platform"] .pfd-msg__sigimg {
  align-self: flex-start;
}
/* ── Site monitoring: camera tiles ─────────────────────────────────────────── */
html[data-skin="platform"] .mn-cams {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  grid-auto-rows: 194px;
  gap: var(--pf-gap);
}
html[data-skin="platform"] .mn-cams .mn-cam--main {
  grid-row: span 2;
}
html[data-skin="platform"] .mn-cams[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
html[data-skin="platform"] .mn-cams[data-count="2"] > .mn-cam:not(.mn-cam--main) {
  grid-row: span 2;
}
html[data-skin="platform"] .mn-cams-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  grid-auto-rows: 194px;
  gap: var(--pf-gap);
  margin-block-start: var(--pf-gap);
}
html[data-skin="platform"] .mn-cam {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border-radius: var(--pf-radius-column);
  background: var(--pf-hero-bg);
  box-shadow: var(--pf-e1);
  color: var(--pf-on-navy);
}
html[data-skin="platform"] .mn-cam__stream,
html[data-skin="platform"] .mn-cam__stream > * {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
}
html[data-skin="platform"] .mn-cam__stream :is(video, iframe, img) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
}
html[data-skin="platform"] .mn-cam__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--pf-scrim-rgb) / 0.55) 0%,
    rgb(var(--pf-scrim-rgb) / 0) 30%,
    rgb(var(--pf-scrim-rgb) / 0) 65%,
    rgb(var(--pf-scrim-rgb) / 0.7) 100%
  );
}
html[data-skin="platform"] .mn-cam__top {
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
html[data-skin="platform"] .mn-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-inline-size: 100%;
  block-size: 26px;
  padding-inline: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(var(--pf-scrim-rgb) / 0.55);
  color: var(--pf-on-navy);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur-sm));
  backdrop-filter: blur(var(--pf-glass-blur-sm));
}
html[data-skin="platform"] .mn-live__dot {
  flex-shrink: 0;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--pf-live);
  box-shadow: 0 0 0 0 var(--pf-live-ring);
  animation: pf-mn-live 1.8s var(--pf-ease-out) infinite;
}
html[data-skin="platform"] .mn-cam--off .mn-live__dot {
  background: var(--pf-chart-neutral);
  animation: none;
}
html[data-skin="platform"] .mn-cam__bottom {
  position: absolute;
  inset-block-end: 14px;
  inset-inline: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
html[data-skin="platform"] .mn-cam__name {
  min-inline-size: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: var(--pf-photo-title-shadow);
}
html[data-skin="platform"] .mn-cam--main .mn-cam__name {
  font-size: 18px;
}
html[data-skin="platform"] .mn-cam__actions {
  pointer-events: auto;
}
html[data-skin="platform"] .mn-cam__actions .ds-kebab {
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--pf-glass-border);
  border-radius: var(--pf-radius-control);
  background: var(--pf-glass-bg);
  color: var(--pf-on-navy);
  -webkit-backdrop-filter: blur(var(--pf-glass-blur));
  backdrop-filter: blur(var(--pf-glass-blur));
}
html[data-skin="platform"] .mn-cam__actions .ds-kebab:hover {
  background: rgb(var(--pf-accent-light-rgb) / 0.2);
  color: var(--pf-on-navy);
}
/* The hero eyebrow chip «الكاميرات المتصلة» carries the same pulsing dot. */
html[data-skin="platform"] .mn-eyebrow {
  gap: 7px;
}
/* ── The day's photo timeline (the archive) ─────────────────────────────────── */
html[data-skin="platform"] .mn-archive {
  padding: 16px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .mn-archive .mn-archive__add {
  --pf-kit-btn-bg: var(--pf-primary-tint);
  --pf-kit-btn-bg-hover: var(--pf-primary-tint-strong);
  --pf-kit-btn-fg: var(--pf-primary-text);
  --pf-kit-btn-border: transparent;
}
html[data-skin="platform"] .mn-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .mn-shot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
html[data-skin="platform"] .mn-shot:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
  border-radius: var(--pf-radius-control);
}
html[data-skin="platform"] .mn-shot__img {
  position: relative;
  display: block;
  block-size: 84px;
  overflow: hidden;
  border-radius: var(--pf-radius-control);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .mn-shot__img img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--pf-dur) var(--pf-ease-out);
}
html[data-skin="platform"] .mn-shot:hover .mn-shot__img img {
  transform: scale(1.04);
}
html[data-skin="platform"] .mn-shot__video {
  display: grid;
  place-items: center;
  block-size: 100%;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .mn-shot__badge {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  padding: 1px 6px;
  border-radius: var(--pf-radius-hint);
  background: rgb(var(--pf-scrim-rgb) / 0.6);
  color: var(--pf-on-navy);
  font-family: var(--pf-font-num);
  font-size: 11px;
}
html[data-skin="platform"] .mn-shot__caption {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Daily logs: the recent days strip ─────────────────────────────────────── */
html[data-skin="platform"] .dl-recent {
  padding: 16px 20px;
}
html[data-skin="platform"] .dl-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .dl-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  padding: 12px 14px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-sunken);
}
html[data-skin="platform"] .dl-day__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html[data-skin="platform"] .dl-day__date {
  font-family: var(--pf-font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .dl-day__weather {
  display: inline-flex;
  color: var(--pf-orange-text);
}
html[data-skin="platform"] .dl-day__crew {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-success-text);
}
html[data-skin="platform"] .dl-day__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pf-text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@keyframes pf-mn-live {
  0% { box-shadow: 0 0 0 0 var(--pf-live-ring); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* ── Tablet / phone ─────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  html[data-skin="platform"] .pfd-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  html[data-skin="platform"] .pfd-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  html[data-skin="platform"] .mn-cams {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 194px;
  }
  html[data-skin="platform"] .mn-cams .mn-cam--main {
    grid-row: span 1;
    min-block-size: 230px;
  }
  html[data-skin="platform"] .mn-cams[data-count="2"] > .mn-cam:not(.mn-cam--main) {
    grid-row: span 1;
  }
  html[data-skin="platform"] .pfd-detail,
  html[data-skin="platform"] .pfd-form > .ds-detail-header,
  html[data-skin="platform"] .pfd-form > .ds-section,
  html[data-skin="platform"] .pfd-form > [data-tour="formDetail.attachments"] > .ds-section,
  html[data-skin="platform"] .mn-archive {
    padding: 16px;
  }
}
@media (max-width: 479px) {
  html[data-skin="platform"] .pfd-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .mn-live__dot {
    animation: none;
  }
  html[data-skin="platform"] .pfd-item,
  html[data-skin="platform"] .mn-shot__img img {
    transition: none;
  }
  html[data-skin="platform"] .mn-shot:hover .mn-shot__img img {
    transform: none;
  }
}
/* boards W-Forms + W-Monitoring: forms, RFIs, monitoring, daily logs */
/* ============================================================================
 * Platform design: the finance ledger (/app/finance, board W-Finance, light +
 * dark) and the accounting home (/app/accounting, same board language).
 *
 * Finance: the markup is the platform branch of app/routes/app/finance.tsx
 * (.pf-fin-*): four KPI cards, the balance curve beside the budget bars (or the
 * revenue / expense bars), and the transactions card whose head carries the
 * page toolbar (search, date range, the type pills, the total).
 * Accounting home: no markup of its own; the classic page is re-dressed through
 * its tour anchors (glHome.glance / glHome.inbox / glHome.links).
 *
 * Every selector starts with html[data-skin="platform"]; colours are the per-mode
 * --pf-* tokens, so one rule serves light and dark. docs/design/platform-skin.md.
 * ============================================================================ */
/* ── Page rhythm: 16px between the board's rows ──────────────────────────── */
html[data-skin="platform"] .pf-fin {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
/* ── KPI row: four 20px cards, 36px tinted icon tile, Outfit 30px value ───── */
html[data-skin="platform"] .pf-fin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-gap);
}
html[data-skin="platform"] .pf-fin-kpis:has(> .pf-fin-kpi:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-skin="platform"] .pf-fin-kpi {
  container-type: inline-size;
  position: relative;
  min-inline-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-fin-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html[data-skin="platform"] .pf-fin-kpi__label {
  min-inline-size: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-field);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-fin-kpi--green .pf-fin-kpi__icon {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pf-fin-kpi--amber .pf-fin-kpi__icon {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pf-fin-kpi--red .pf-fin-kpi__icon {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
/* The value is one unbreakable money run («8,120,000.00 ج.م.»): sized to the
   card (cqi) so a narrow card steps it down instead of overflowing. */
html[data-skin="platform"] .pf-fin-kpi__value {
  margin-block-start: 6px;
  font-family: var(--pf-font-num);
  font-size: clamp(15px, 10.5cqi, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--pf-text);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-fin-kpi__value.is-neg {
  color: var(--pf-danger);
}
html[data-skin="platform"] .pf-fin-kpi__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pf-text-2);
}
/* The green net chip under the balance (red when the net is negative). */
html[data-skin="platform"] .pf-fin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
  font-size: 11px;
  font-weight: 600;
}
html[data-skin="platform"] .pf-fin-chip.is-neg {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .pf-fin-chip .ltr-island,
html[data-skin="platform"] .pf-fin-kpi__note .ltr-island {
  font-family: var(--pf-font-num);
}
/* ── Cards ────────────────────────────────────────────────────────────────── */
html[data-skin="platform"] .pf-fin-row {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--pf-gap);
}
html[data-skin="platform"] .pf-fin-row.is-single {
  grid-template-columns: minmax(0, 1fr);
}
html[data-skin="platform"] .pf-fin-card {
  position: relative;
  min-inline-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-fin-balance {
  padding-block-end: 12px;
}
html[data-skin="platform"] .pf-fin-tx {
  padding-block-end: 8px;
}
html[data-skin="platform"] .pf-fin-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .pf-fin-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-fin-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-fin-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-fin-card__text h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-fin-card__text span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-card__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-inline-size: 0;
}
/* The transactions head: the page toolbar sits at the end of the card head
   (the board's pills), and takes the whole line once the title is beside it
   no longer fits. */
html[data-skin="platform"] .pf-fin-tx .pf-fin-card__end {
  flex: 1 1 560px;
}
html[data-skin="platform"] .pf-fin-tx .pf-fin-card__end > .ds-toolbar {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin: 0;
}
html[data-skin="platform"] .pf-fin-tx .pf-fin-card__end .ds-toolbar-search {
  flex: 0 1 240px;
}
/* The table is already inside this card: no second card around it. */
html[data-skin="platform"] .pf-fin-card .ds-table-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-skin="platform"] .pf-fin-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-primary-text);
  text-decoration: none;
  white-space: nowrap;
}
html[data-skin="platform"] .pf-fin-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-skin="platform"] .pf-fin-link:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Legend: 10px swatches (the dashed one is the plan). */
html[data-skin="platform"] .pf-fin-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-skin="platform"] .pf-fin-legend__sw {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  background: var(--pf-chart-1);
}
html[data-skin="platform"] .pf-fin-legend__sw.is-plan {
  border: 1.5px dashed var(--pf-chart-1);
  background: transparent;
  box-sizing: border-box;
}
html[data-skin="platform"] .pf-fin-legend__sw.is-over {
  background: var(--pf-orange);
}
/* ── The balance curve (inline SVG, drawn in the reading direction) ──────── */
html[data-skin="platform"] .pf-fin-chart {
  position: relative;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-fin-chart svg {
  display: block;
  overflow: visible;
}
html[data-skin="platform"] .pf-fin-chart__grid {
  stroke: var(--pf-grid-line);
}
html[data-skin="platform"] .pf-fin-chart__base {
  stroke: var(--pf-border-strong);
}
html[data-skin="platform"] .pf-fin-chart__tick {
  font-family: var(--pf-font-num);
  font-size: 11px;
  fill: var(--pf-text-3);
}
html[data-skin="platform"] .pf-fin-chart__month {
  font-family: var(--pf-font-num);
  font-size: 12px;
  fill: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-chart__month.is-now {
  fill: var(--pf-primary-text);
  font-weight: 600;
}
html[data-skin="platform"] .pf-fin-chart__area {
  fill: var(--pf-primary-tint);
}
html[data-skin="platform"] .pf-fin-chart__line {
  fill: none;
  stroke: var(--pf-chart-1);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: pf-fin-draw var(--pf-dur-hero) var(--pf-ease-out) both;
}
html[data-skin="platform"] .pf-fin-chart__plan {
  fill: none;
  stroke: var(--pf-chart-1);
  stroke-width: 2.2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
}
html[data-skin="platform"] .pf-fin-chart__split {
  stroke: var(--pf-text-3);
  stroke-dasharray: 3 3;
}
html[data-skin="platform"] .pf-fin-chart__zone {
  font-size: 11px;
  fill: var(--pf-text-3);
}
html[data-skin="platform"] .pf-fin-chart__dot {
  fill: var(--pf-chart-1);
  stroke: var(--pf-card);
  stroke-width: 2;
}
html[data-skin="platform"] .pf-fin-chart__dot.is-plan {
  fill: var(--pf-card);
  stroke: var(--pf-chart-1);
  stroke-width: 1.8;
}
html[data-skin="platform"] .pf-fin-chart__tip {
  position: absolute;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-tooltip-bg);
  color: var(--pf-tooltip-fg);
  box-shadow: var(--pf-tooltip-shadow);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
html[data-skin="platform"] .pf-fin-chart__tip b {
  font-family: var(--pf-font-num);
  font-weight: 700;
}
@keyframes pf-fin-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
/* ── Budget vs actual: 14px tracks, orange past the budget ───────────────── */
html[data-skin="platform"] .pf-fin-budget__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .pf-fin-budget__row {
  display: grid;
  grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-budget__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-skin="platform"] .pf-fin-budget__track {
  position: relative;
  display: block;
  block-size: 14px;
  border-radius: 4px;
  background: var(--pf-track);
  overflow: hidden;
}
html[data-skin="platform"] .pf-fin-budget__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 4px;
  background: var(--pf-chart-1);
  transition: inline-size var(--pf-dur-slow) var(--pf-ease-out);
}
html[data-skin="platform"] .pf-fin-budget__row.is-over .pf-fin-budget__fill {
  background: var(--pf-orange);
}
html[data-skin="platform"] .pf-fin-budget__pct {
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--pf-text);
  text-align: end;
}
html[data-skin="platform"] .pf-fin-budget__row.is-over .pf-fin-budget__pct {
  color: var(--pf-orange-text);
}
/* ── Transactions: date, the statement's kind tile, signed Outfit amounts ── */
html[data-skin="platform"] .pf-fin-date {
  font-family: var(--pf-font-num);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pf-text-2);
  white-space: nowrap;
}
html[data-skin="platform"] .pf-fin-stmt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-fin-stmt__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-fin-stmt__icon.is-in {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pf-fin-stmt__text {
  display: block;
  max-inline-size: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-fin-amt {
  font-family: var(--pf-font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-text);
  white-space: nowrap;
  unicode-bidi: isolate;
  direction: ltr;
}
html[data-skin="platform"] .pf-fin-amt.is-in {
  color: var(--pf-success-text);
}
/* ── Accounting home (/app/accounting): the same language, on the classic DOM ──
   The page root is the div that holds [data-tour="glHome.glance"]. Its inbox
   section becomes one card whose head carries the filter form; the links become
   the board's tinted tiles. */
html[data-skin="platform"] div:has(> [data-tour="glHome.glance"]) {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
}
html[data-skin="platform"] div:has(> [data-tour="glHome.glance"]) > * {
  margin-block: 0;
}
html[data-skin="platform"] [data-tour="glHome.glance"] .ds-stats {
  margin-block-end: 0;
}
html[data-skin="platform"] div:has(> [data-tour="glHome.glance"]) > .ds-section :is(.ds-stats) {
  margin-block-end: 0;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"],
html[data-skin="platform"] section[data-tour="glHome.links"] {
  min-inline-size: 0;
  padding: 18px 20px 8px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] section[data-tour="glHome.links"] {
  padding-block-end: 18px;
}
/* Head (title + description) on the start side, the filter form on the end
   side, the table underneath across the card. */
html[data-skin="platform"] section[data-tour="glHome.inbox"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] > .ds-section-head {
  grid-column: 1;
  margin-block-end: 14px;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] > .space-y-4 {
  display: contents;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] > .space-y-4 > form {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-block-end: 14px;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] > .space-y-4 > form .ds-toolbar {
  margin: 0;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] > .space-y-4 > :not(form) {
  grid-column: 1 / -1;
  margin-block-start: 0;
}
html[data-skin="platform"] section[data-tour="glHome.inbox"] .ds-table-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-skin="platform"] section[data-tour="glHome.links"] a {
  min-block-size: 54px;
  gap: 10px;
  padding: 10px 12px;
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
  color: var(--pf-text);
  font-weight: 600;
  transition: border-color var(--pf-dur-fast) var(--pf-ease-out), box-shadow var(--pf-dur-fast) var(--pf-ease-out), transform var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] section[data-tour="glHome.links"] a > svg {
  box-sizing: content-box;
  padding: 7px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] section[data-tour="glHome.links"] a:hover {
  border-color: var(--pf-primary);
  box-shadow: var(--pf-e1);
  transform: translateY(-1px);
}
html[data-skin="platform"] section[data-tour="glHome.links"] a:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
/* ── Tablet and phone ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  html[data-skin="platform"] .pf-fin-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  html[data-skin="platform"] .pf-fin-kpis,
  html[data-skin="platform"] .pf-fin-kpis:has(> .pf-fin-kpi:nth-child(3):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-skin="platform"] section[data-tour="glHome.inbox"] {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] section[data-tour="glHome.inbox"] > .space-y-4 > form {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  html[data-skin="platform"] .pf-fin-kpi {
    padding: 14px 14px;
  }
  html[data-skin="platform"] .pf-fin-kpi__icon {
    inline-size: 30px;
    block-size: 30px;
  }
  html[data-skin="platform"] .pf-fin-card,
  html[data-skin="platform"] section[data-tour="glHome.inbox"],
  html[data-skin="platform"] section[data-tour="glHome.links"] {
    padding-inline: 14px;
  }
  html[data-skin="platform"] .pf-fin-tx .pf-fin-card__end .ds-toolbar-search {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .pf-fin-chart__line {
    animation: none;
  }
  html[data-skin="platform"] .pf-fin-budget__fill,
  html[data-skin="platform"] section[data-tour="glHome.links"] a {
    transition: none;
  }
  html[data-skin="platform"] section[data-tour="glHome.links"] a:hover {
    transform: none;
  }
}
/* /app/finance + /app/accounting (board W-Finance) */
/* ============================================================================
 * Platform design: the dashboard /app (board W-Dash, light + dark).
 * Markup: app/components/platform/dashboard/PlatformDashboardBody.tsx and
 * CashFlowBars.tsx, rendered by app/routes/app/dashboard.tsx ONLY under the
 * platform skin (the classic body matches nothing here). Every selector is
 * scoped to html[data-skin="platform"]; colours are the per-mode --pf-* tokens,
 * so one rule serves light and dark. Classes are pfd-* (dashboard-only).
 * docs/design/platform-skin.md.
 * ============================================================================ */
/* ── Page rhythm: rows of 16px gaps ─────────────────────────────────────────── */
html[data-skin="platform"] .pfd-dash {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dash-row {
  display: grid;
  gap: var(--pf-gap);
  align-items: stretch;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dash-row--main {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
html[data-skin="platform"] .pfd-dash-row--split {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
html[data-skin="platform"] .pfd-dash-row > :only-child {
  grid-column: 1 / -1;
}
html[data-skin="platform"] .pfd-dash-col {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dash-col > .pfd-dcard--feed {
  flex: 1 1 auto;
}
/* The route's RecommendationsSection runs full width below the table + feed: the kit Section keeps its header. */
html[data-skin="platform"] .pfd-dash > [data-tour="dashboard.recommendations"] {
  min-inline-size: 0;
}
/* ── Portfolio eyebrow (title + description of the tiles block) ─────────────── */
html[data-skin="platform"] .pfd-dash-portfolio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dash-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-inline: 2px;
}
html[data-skin="platform"] .pfd-dash-eyebrow__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-dash-eyebrow__desc {
  font-size: 12.5px;
  color: var(--pf-text-2);
}
/* ── KPI tiles: 20px cards, 36px tinted icon tile, Outfit 30px value ───────── */
html[data-skin="platform"] .pfd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-gap);
}
html[data-skin="platform"] .pfd-kpis--mini {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
}
html[data-skin="platform"] .pfd-kpi {
  position: relative;
  display: block;
  min-inline-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--pf-dur-fast) var(--pf-ease-out), transform var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] a.pfd-kpi:hover {
  border-color: var(--pf-border-strong);
  transform: translateY(-1px);
  color: inherit;
}
html[data-skin="platform"] a.pfd-kpi:focus-visible,
html[data-skin="platform"] .pfd-dash a:focus-visible,
html[data-skin="platform"] .pfd-seg__btn:focus-visible,
html[data-skin="platform"] .pfd-cf__month:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .pfd-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html[data-skin="platform"] .pfd-kpi__label {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-field);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-kpi--green .pfd-kpi__icon {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pfd-kpi--warning .pfd-kpi__icon {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pfd-kpi--red .pfd-kpi__icon {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .pfd-kpi__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin-block-start: 6px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-kpi__num {
  font-family: var(--pf-font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-kpi--red .pfd-kpi__num {
  color: var(--pf-danger);
}
html[data-skin="platform"] .pfd-kpi__unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-kpi__note {
  margin-block-start: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pf-text-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html[data-skin="platform"] .pfd-kpi--mini {
  padding: 14px 16px;
}
html[data-skin="platform"] .pfd-kpi--mini .pfd-kpi__icon {
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--pf-radius-tile);
}
html[data-skin="platform"] .pfd-kpi--mini .pfd-kpi__label {
  font-size: 12.5px;
}
html[data-skin="platform"] .pfd-kpi--mini .pfd-kpi__num {
  font-size: 22px;
}
html[data-skin="platform"] .pfd-kpi--mini .pfd-kpi__note {
  margin-block-start: 4px;
  font-size: 12px;
  -webkit-line-clamp: 1;
}
/* ── Cards: 20px radius, e1, 34px icon tile + 16px title ────────────────────── */
html[data-skin="platform"] .pfd-dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 18px 20px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pfd-dcard--cash {
  padding-block-end: 14px;
}
html[data-skin="platform"] .pfd-dcard--projects {
  padding-block-end: 8px;
}
html[data-skin="platform"] .pfd-dcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-block-end: 14px;
}
html[data-skin="platform"] .pfd-dcard__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-dcard__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-dcard__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-dcard__sub {
  font-size: 12.5px;
  color: var(--pf-text-2);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-dcard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex-shrink: 0;
}
html[data-skin="platform"] .pfd-dcard__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-primary-text);
  text-decoration: none;
}
html[data-skin="platform"] .pfd-dcard__link:hover {
  color: var(--pf-primary-text);
  text-decoration: underline;
}
html[data-skin="platform"] .pfd-dcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  block-size: 40px;
  margin-block-start: auto;
  padding-inline: 12px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
html[data-skin="platform"] .pfd-dcard__cta:hover {
  background: var(--pf-primary-tint-strong);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-aprows + .pfd-dcard__cta,
html[data-skin="platform"] .pfd-dcard--approvals .pfd-dcard__cta {
  margin-block-start: 8px;
}
/* ── Chips (23px pills) ─────────────────────────────────────────────────────── */
html[data-skin="platform"] .pfd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 23px;
  padding-inline: 9px;
  border-radius: var(--pf-radius-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
html[data-skin="platform"] .pfd-chip--blue {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-chip--green {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pfd-chip--amber {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pfd-chip--red {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] a.pfd-chip:hover {
  background: var(--pf-primary-tint-strong);
  color: var(--pf-primary-text);
}
/* ── Cash-flow card: legend, segmented range, SVG bars, tooltip ──────────────── */
html[data-skin="platform"] .pfd-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-skin="platform"] .pfd-legend__sw {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  background: var(--pf-chart-1);
}
html[data-skin="platform"] .pfd-legend__sw--out {
  background: var(--pf-orange);
}
html[data-skin="platform"] .pfd-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-segmented);
}
html[data-skin="platform"] .pfd-seg__btn {
  block-size: 32px;
  padding-inline: 14px;
  border: 0;
  border-radius: var(--pf-radius-seg);
  background: transparent;
  color: var(--pf-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
html[data-skin="platform"] .pfd-seg__btn[aria-pressed="true"] {
  background: var(--pf-card);
  color: var(--pf-text);
  font-weight: 600;
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pfd-cf {
  position: relative;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-cf__svg {
  display: block;
  overflow: visible;
}
html[data-skin="platform"] .pfd-cf__grid {
  stroke: var(--pf-grid-line);
  stroke-width: 1;
}
html[data-skin="platform"] .pfd-cf__base {
  stroke: var(--pf-border-strong);
  stroke-width: 1;
}
html[data-skin="platform"] .pfd-cf__ytick {
  font-family: var(--pf-font-num);
  font-size: 11px;
  fill: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-cf__xtick {
  font-size: 12px;
  fill: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-cf__hit {
  fill: transparent;
}
html[data-skin="platform"] .pfd-cf__month {
  cursor: default;
  outline: none;
}
html[data-skin="platform"] .pfd-cf__month[data-active] .pfd-cf__hit {
  fill: var(--pf-primary-tint);
}
html[data-skin="platform"] .pfd-cf__bar--in {
  fill: var(--pf-chart-1);
}
html[data-skin="platform"] .pfd-cf__bar--out {
  fill: var(--pf-orange);
}
html[data-skin="platform"] .pfd-cf__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pf-dash-bar var(--pf-dur-slow) var(--pf-ease-out) both;
}
@keyframes pf-dash-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
html[data-skin="platform"] .pfd-cf__tip {
  position: absolute;
  inset-block-start: 2px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 12px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-tooltip-bg);
  color: var(--pf-tooltip-fg);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: var(--pf-tooltip-shadow);
  pointer-events: none;
}
html[data-skin="platform"] .pfd-cf__tip-pos {
  color: var(--pf-tooltip-positive);
}
html[data-skin="platform"] .pfd-cf__tip-neg {
  color: var(--pf-orange);
}
/* ── Approvals card rows (review inbox) ─────────────────────────────────────── */
html[data-skin="platform"] .pfd-aprows {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .pfd-aprow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 11px;
}
html[data-skin="platform"] .pfd-aprow + .pfd-aprow {
  border-block-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .pfd-aprow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-field);
  background: var(--pf-sunken);
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-aprow__icon--lead {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-aprow__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-aprow__title {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pfd-aprow__sub {
  font-family: var(--pf-font-num);
  font-size: 12px;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-aprow__go {
  flex-shrink: 0;
  block-size: 24px;
  font-size: 12px;
}
/* ── Projects table: 38px head, ≥54px rows, 6px progress bars, SPI chips ─────── */
html[data-skin="platform"] .pfd-ptable {
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-ptable__head,
html[data-skin="platform"] .pfd-ptable__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) 70px minmax(0, 1.8fr);
  gap: 12px;
  align-items: center;
  padding-inline: 12px;
}
html[data-skin="platform"] .pfd-ptable__head {
  block-size: var(--pf-table-head-h);
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pfd-ptable__row {
  min-block-size: var(--pf-table-row-h);
  padding-block: 8px;
  border-block-end: 1px solid var(--pf-border);
  font-size: 13.5px;
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-ptable__row:last-child {
  border-block-end: 0;
}
html[data-skin="platform"] .pfd-ptable__c {
  text-align: center;
}
html[data-skin="platform"] .pfd-ptable__proj {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-ptable__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  font-size: 15px;
  font-weight: 700;
}
html[data-skin="platform"] .pfd-ptable__avatar--1 {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pfd-ptable__avatar--2 {
  background: var(--pf-orange-tint);
  color: var(--pf-orange-text);
}
html[data-skin="platform"] .pfd-ptable__avatar--3 {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pfd-ptable__names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-ptable__name {
  overflow: hidden;
  font-weight: 600;
  color: var(--pf-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
html[data-skin="platform"] .pfd-ptable__name:hover {
  color: var(--pf-primary-text);
  text-decoration: underline;
}
html[data-skin="platform"] .pfd-ptable__city {
  overflow: hidden;
  font-size: 12px;
  color: var(--pf-text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pfd-ptable__prog {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-bar {
  flex: 1 1 auto;
  block-size: 6px;
  overflow: hidden;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-track);
}
html[data-skin="platform"] .pfd-bar__fill {
  display: block;
  block-size: 100%;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-primary);
}
html[data-skin="platform"] .pfd-ptable__pct {
  font-family: var(--pf-font-num);
  font-size: 12.5px;
  font-weight: 700;
}
html[data-skin="platform"] .pfd-ptable__none {
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-ptable__next {
  min-inline-size: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pf-text-2);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pfd-ptable__next--late {
  color: var(--pf-danger);
  font-weight: 600;
}
/* ── Activity feed ──────────────────────────────────────────────────────────── */
html[data-skin="platform"] .pfd-feed {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .pfd-feed__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
}
html[data-skin="platform"] .pfd-feed__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-sunken);
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-feed__row[data-unread] .pfd-feed__icon {
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pfd-feed__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
html[data-skin="platform"] .pfd-feed__row:not([data-unread]) .pfd-feed__title {
  font-weight: 500;
  color: var(--pf-text-2);
}
html[data-skin="platform"] a.pfd-feed__title:hover {
  color: var(--pf-primary-text);
  text-decoration: underline;
}
html[data-skin="platform"] .pfd-feed__time {
  flex-shrink: 0;
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-text-3);
}
/* ── Selected project card: kit StatGrid + three sub-cards ──────────────────── */
html[data-skin="platform"] .pfd-selected {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-selected__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pf-gap);
}
html[data-skin="platform"] .pfd-subcard {
  min-inline-size: 0;
  padding: 14px 16px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-card);
}
html[data-skin="platform"] .pfd-subcard__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-tasks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html[data-skin="platform"] .pfd-tasks__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-skin="platform"] .pfd-tasks__text {
  flex: 1 1 auto;
  min-inline-size: 0;
}
html[data-skin="platform"] .pfd-tasks__name {
  display: block;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
html[data-skin="platform"] a.pfd-tasks__name:hover {
  color: var(--pf-primary-text);
  text-decoration: underline;
}
html[data-skin="platform"] .pfd-tasks__date {
  margin: 0;
  font-size: 12px;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pfd-tasks__meter {
  inline-size: 84px;
  flex-shrink: 0;
}
html[data-skin="platform"] .pfd-tasks__pct {
  inline-size: 40px;
  flex-shrink: 0;
  text-align: end;
  font-family: var(--pf-font-num);
  font-size: 12px;
  font-weight: 700;
}
/* ── Onboarding steps (no project yet) ──────────────────────────────────────── */
html[data-skin="platform"] .pfd-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin="platform"] .pfd-steps__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 56px;
  padding: 12px 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-sunken);
  color: var(--pf-text);
  font-weight: 600;
  text-decoration: none;
}
html[data-skin="platform"] .pfd-steps__item:hover {
  border-color: var(--pf-primary);
  color: var(--pf-text);
}
html[data-skin="platform"] .pfd-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  flex-shrink: 0;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
  font-family: var(--pf-font-num);
  font-weight: 700;
}
/* ── Lean (individual) layout: the route's LeanSections, spaced like the rows ─ */
html[data-skin="platform"] .pfd-dash--lean > [data-tour="dashboard.lean"] {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap);
}
/* ── Tablet (≤ 1280): the 2fr / 1fr row keeps, the split row stacks earlier ─── */
@media (max-width: 1280px) {
  html[data-skin="platform"] .pfd-selected__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-skin="platform"] .pfd-selected__grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1100px) {
  html[data-skin="platform"] .pfd-dash-row--main,
  html[data-skin="platform"] .pfd-dash-row--split {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] .pfd-kpis:not(.pfd-kpis--mini) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ── Phone (≤ 640): one column, the table rows become two-line cards ───────── */
@media (max-width: 640px) {
  html[data-skin="platform"] .pfd-kpis--mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html[data-skin="platform"] .pfd-kpi {
    padding: 14px 14px;
  }
  html[data-skin="platform"] .pfd-kpi__num {
    font-size: 24px;
  }
  html[data-skin="platform"] .pfd-kpi--mini .pfd-kpi__num {
    font-size: 19px;
  }
  html[data-skin="platform"] .pfd-kpi__icon {
    inline-size: 30px;
    block-size: 30px;
  }
  html[data-skin="platform"] .pfd-dcard {
    padding: 16px 14px;
  }
  html[data-skin="platform"] .pfd-selected__grid,
  html[data-skin="platform"] .pfd-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-skin="platform"] .pfd-selected__grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }
  html[data-skin="platform"] .pfd-ptable__head {
    display: none;
  }
  html[data-skin="platform"] .pfd-ptable__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "proj spi"
      "prog prog"
      "next next";
    gap: 8px 12px;
    padding-inline: 2px;
    padding-block: 12px;
  }
  html[data-skin="platform"] .pfd-ptable__proj { grid-area: proj; }
  html[data-skin="platform"] .pfd-ptable__spi { grid-area: spi; }
  html[data-skin="platform"] .pfd-ptable__prog { grid-area: prog; }
  html[data-skin="platform"] .pfd-ptable__next { grid-area: next; }
  html[data-skin="platform"] .pfd-legend {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .pfd-cf__bar {
    animation: none;
  }
  html[data-skin="platform"] .pfd-kpi {
    transition: none;
  }
  html[data-skin="platform"] a.pfd-kpi:hover {
    transform: none;
  }
}
/* the dashboard /app (board W-Dash) */
/* ============================================================================
 * Platform design: CRM and sales (board W-CRM) and the AI assistant
 * (board W-Assistant).
 *
 * Markup: the platform branches of app/routes/app/crm.tsx (.pf-crm-kpis, .pf-kb),
 * app/routes/app/opportunities.tsx (.pf-kb--opp), app/routes/app/clients/index.tsx
 * (.pf-kb-av in the name cell), app/routes/app/ai/assistant.tsx (.pf-ai-*) and
 * app/components/platform/SalesKpiStrip.tsx. Classic renders none of these classes.
 * Every selector starts with html[data-skin="platform"]; colours are tokens.
 * ============================================================================ */
/* ── 1. KPI strip: one card, cells split by hairlines ───────────────────── */
html[data-skin="platform"] .pf-crm-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  overflow: hidden;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-crm-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-crm-kpi + .pf-crm-kpi {
  border-inline-start: 1px solid var(--pf-border);
}
html[data-skin="platform"] .pf-crm-kpi__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--pf-radius-control);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-crm-kpi--green .pf-crm-kpi__icon {
  background: var(--pf-success-tint);
  color: var(--pf-success-text);
}
html[data-skin="platform"] .pf-crm-kpi--amber .pf-crm-kpi__icon {
  background: var(--pf-warning-tint);
  color: var(--pf-warning-text);
}
html[data-skin="platform"] .pf-crm-kpi--red .pf-crm-kpi__icon {
  background: var(--pf-danger-tint);
  color: var(--pf-danger);
}
html[data-skin="platform"] .pf-crm-kpi__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-crm-kpi__label {
  font-size: 12px;
  color: var(--pf-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-crm-kpi__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-crm-kpi__num {
  font-family: var(--pf-font-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pf-crm-kpi__unit {
  font-size: 11.5px;
  color: var(--pf-text-3);
}
/* ── 2. Kanban: columns on the sunken surface, cards on the card surface ── */
html[data-skin="platform"] .pf-kb {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  grid-template-columns: none;
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: 4px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-kb-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-column);
  background: var(--pf-sunken);
  min-inline-size: 0;
  --pf-kb-dot: var(--pf-primary);
}
html[data-skin="platform"] .pf-kb-col[data-stage="contacted"],
html[data-skin="platform"] .pf-kb-col[data-stage="proposal"] {
  --pf-kb-dot: var(--pf-avatar-consultant);
}
html[data-skin="platform"] .pf-kb-col[data-stage="qualified"],
html[data-skin="platform"] .pf-kb-col[data-stage="quotation_sent"] {
  --pf-kb-dot: var(--pf-orange);
}
html[data-skin="platform"] .pf-kb-col[data-stage="negotiation"] {
  --pf-kb-dot: var(--pf-warning);
}
html[data-skin="platform"] .pf-kb-col[data-stage="won"] {
  --pf-kb-dot: var(--pf-success);
}
html[data-skin="platform"] .pf-kb-col[data-stage="lost"] {
  --pf-kb-dot: var(--pf-danger);
}
html[data-skin="platform"] .pf-kb-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 4px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-kb-col__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pf-text);
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-kb-dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--pf-kb-dot);
}
html[data-skin="platform"] .pf-kb-col__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-card);
  border: 1px solid var(--pf-border);
  font-family: var(--pf-font-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-text-2);
}
html[data-skin="platform"] .pf-kb-col__sum {
  margin-inline-start: auto;
  font-family: var(--pf-font-num);
  font-size: 11.5px;
  color: var(--pf-text-3);
  white-space: nowrap;
}
/* the CRM lead card */
html[data-skin="platform"] .pf-kb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
  min-inline-size: 0;
  transition: transform var(--pf-dur-fast) var(--pf-ease-out), box-shadow var(--pf-dur-fast) var(--pf-ease-out);
}
html[data-skin="platform"] .pf-kb-card:hover {
  transform: translateY(-1px);
}
html[data-skin="platform"] .pf-kb-card__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pf-text);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pf-kb-card__desc {
  font-size: 12px;
  color: var(--pf-text-2);
  overflow-wrap: anywhere;
}
html[data-skin="platform"] .pf-kb-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-kb-card__value {
  font-family: var(--pf-font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-primary-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-skin="platform"] .pf-kb-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--pf-avatar-user);
  color: var(--pf-on-navy);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
html[data-skin="platform"] .pf-kb-av--1 {
  background: var(--pf-avatar-contractor);
}
html[data-skin="platform"] .pf-kb-av--2 {
  background: var(--pf-avatar-consultant);
}
html[data-skin="platform"] .pf-kb-av--3 {
  background: var(--pf-avatar-owner);
}
/* the clients register: avatar + name stack in one row */
html[data-skin="platform"] .ds-cell-primary:has(> .pf-cl-av) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-cl-av {
  inline-size: 30px;
  block-size: 30px;
  font-size: 11px;
}
html[data-skin="platform"] .pf-kb-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block-start: 6px;
  border-block-start: 1px solid var(--pf-border);
  font-size: 11.5px;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pf-kb-card__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--pf-primary-text);
  text-decoration: none;
}
html[data-skin="platform"] .pf-kb-card__link:hover {
  text-decoration: underline;
}
/* the dashed «إضافة» slot at the foot of a column */
html[data-skin="platform"] .pf-kb-add,
html[data-skin="platform"] .pf-kb-add > button,
html[data-skin="platform"] .pf-kb-add > .ant-btn {
  inline-size: 100%;
}
html[data-skin="platform"] .pf-kb-add > button,
html[data-skin="platform"] .pf-kb-add > .ant-btn,
html[data-skin="platform"] .pf-kb-add--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  block-size: 40px;
  border: 1.5px dashed var(--pf-border-strong);
  border-radius: var(--pf-radius-control);
  background: transparent;
  box-shadow: none;
  color: var(--pf-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
html[data-skin="platform"] .pf-kb-add > button:hover,
html[data-skin="platform"] .pf-kb-add > .ant-btn:hover,
html[data-skin="platform"] .pf-kb-add--btn:hover {
  border-color: var(--pf-primary);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-kb-add--btn:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
html[data-skin="platform"] .pf-kb-empty {
  grid-column: 1 / -1;
}
/* the opportunities board: EntityCards restyled as kanban cards */
html[data-skin="platform"] .pf-kb--opp {
  grid-auto-columns: minmax(236px, 1fr);
}
html[data-skin="platform"] .pf-kb--opp .ds-card-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
html[data-skin="platform"] .pf-kb-entity.ds-entity-card {
  border-radius: var(--pf-radius-inner);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-kb-entity.ds-entity-card > .ant-card-body {
  padding: 12px;
}
html[data-skin="platform"] .pf-kb-entity .ds-entity-head {
  gap: 6px;
}
html[data-skin="platform"] .pf-kb-entity .ds-entity-head-end {
  gap: 2px;
}
html[data-skin="platform"] .pf-kb-entity .ds-entity-title {
  font-size: 13.5px;
  line-height: 1.45;
}
html[data-skin="platform"] .pf-kb-entity .ds-entity-subtitle {
  font-size: 11.5px;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pf-kb-entity .ds-entity-figure {
  display: block;
  margin-block-start: 8px;
}
html[data-skin="platform"] .pf-kb-col__name {
  white-space: nowrap;
}
/* ── 3. The AI assistant (board W-Assistant) ───────────────────────────── */
html[data-skin="platform"] .pf-ai-aside {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-skin="platform"] .pf-ai-history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  padding: 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-ai-side {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-ai-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-skin="platform"] .pf-ai-side__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-primary-tint);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-ai-side--drawing .pf-ai-side__icon {
  background: var(--pf-orange-tint);
  color: var(--pf-orange-text);
}
html[data-skin="platform"] .pf-ai-side__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pf-text);
}
html[data-skin="platform"] .pf-ai-side__sub {
  font-size: 11.5px;
  color: var(--pf-text-3);
}
html[data-skin="platform"] .pf-ai-side__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html[data-skin="platform"] .pf-ai-side__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-sunken);
  color: var(--pf-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
html[data-skin="platform"] .pf-ai-side__link:hover {
  border-color: var(--pf-primary);
  color: var(--pf-primary-text);
}
html[data-skin="platform"] .pf-ai-side__link:focus-visible,
html[data-skin="platform"] .pf-ai-chip:focus-visible {
  outline: 2px solid var(--pf-primary);
  outline-offset: 2px;
}
/* the chat card */
html[data-skin="platform"] .pf-ai-chat {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-card);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
html[data-skin="platform"] .pf-ai-chat .pf-ai-thread {
  background: var(--pf-card);
}
html[data-skin="platform"] .pf-ai-avatar {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--pf-radius-tile);
  background: var(--pf-brand-gradient);
  color: var(--pf-on-navy);
  box-shadow: var(--pf-primary-shadow);
}
html[data-skin="platform"] .pf-ai-bubble {
  border-radius: 18px;
  border-end-end-radius: 6px;
  background: var(--pf-primary);
  color: var(--pf-on-navy);
  box-shadow: var(--pf-primary-shadow);
}
html[data-skin="platform"] .pf-ai-answer > div {
  border-radius: var(--pf-radius-panel);
  border-start-start-radius: 6px;
}
html[data-skin="platform"] .pf-ai-typing {
  border: 1px solid var(--pf-border);
  background: var(--pf-sunken);
  box-shadow: none;
}
/* suggestion chips above the composer */
html[data-skin="platform"] .pf-ai-chips {
  display: flex;
  gap: 8px;
  margin-block-end: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  min-inline-size: 0;
}
html[data-skin="platform"] .pf-ai-chips::-webkit-scrollbar {
  display: none;
}
html[data-skin="platform"] .pf-ai-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  block-size: 32px;
  padding-inline: 12px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-card);
  color: var(--pf-text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
html[data-skin="platform"] .pf-ai-chip:hover:not(:disabled) {
  border-color: var(--pf-primary);
  color: var(--pf-primary-text);
  background: var(--pf-primary-tint);
}
html[data-skin="platform"] .pf-ai-chip:disabled {
  opacity: 0.55;
  cursor: default;
}
/* the 54px composer */
html[data-skin="platform"] .pf-ai-composer {
  border-radius: 16px;
  border-color: var(--pf-border-strong);
  background: var(--pf-sunken);
  box-shadow: none;
}
html[data-skin="platform"] .pf-ai-composer:focus-within {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px var(--pf-primary-halo);
}
html[data-skin="platform"] .pf-ai-composer textarea {
  min-block-size: 38px;
  font-size: 14px;
}
/* the welcome (empty) state */
html[data-skin="platform"] .pf-ai-hello {
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--pf-radius-card);
  background: var(--pf-brand-gradient);
  color: var(--pf-on-navy);
  box-shadow: var(--pf-primary-shadow);
}
html[data-skin="platform"] .pf-ai-starter {
  border-color: var(--pf-border);
  border-radius: var(--pf-radius-inner);
  background: var(--pf-card);
  box-shadow: var(--pf-e1);
}
/* ── 4. Responsive: tablet and phone never scroll the page sideways ──────── */
@media (max-width: 1280px) {
  html[data-skin="platform"] .pf-crm-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-skin="platform"] .pf-crm-kpi:nth-child(3) {
    border-inline-start: 0;
  }
  html[data-skin="platform"] .pf-crm-kpi:nth-child(n + 3) {
    border-block-start: 1px solid var(--pf-border);
  }
}
@media (max-width: 640px) {
  html[data-skin="platform"] .pf-crm-kpi {
    padding: 12px;
    gap: 10px;
  }
  html[data-skin="platform"] .pf-crm-kpi__icon {
    inline-size: 34px;
    block-size: 34px;
  }
  html[data-skin="platform"] .pf-crm-kpi__num {
    font-size: 18px;
  }
  html[data-skin="platform"] .pf-kb,
  html[data-skin="platform"] .pf-kb--opp {
    grid-auto-columns: minmax(78%, 1fr);
    scroll-snap-type: x mandatory;
  }
  html[data-skin="platform"] .pf-kb-col {
    scroll-snap-align: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] .pf-kb-card {
    transition: none;
  }
  html[data-skin="platform"] .pf-kb-card:hover {
    transform: none;
  }
}
/* the stage picker on a lead card: compact, not a full 40px field */
html[data-skin="platform"] .pf-kb-card__move [role="combobox"] {
  block-size: 32px;
  min-block-size: 32px;
  padding-block: 0;
  font-size: 12px;
  border-radius: var(--pf-radius-tile);
}
/* boards W-CRM + W-Assistant: crm, opportunities, clients, /app/ai */
/* ============================================================================
 * Platform design: MOTION (hero image settle, title and card stagger, pill
 * glide, card hover lift).
 *
 * Every selector starts with html[data-skin="platform"]; every @keyframes is
 * named pf-*; everything here is switched off inside
 * @media (prefers-reduced-motion: reduce). Easings: --pf-ease-* in tokens.css.
 *
 * The route entrance itself (hero photo settle 1300ms, title stagger, actions,
 * the first five body blocks, the active-icon pop) runs on the Web Animations
 * API from app/lib/platform-motion.client.ts, which checks
 * prefers-reduced-motion itself and animates FROM an offset frame TO the
 * element's own style (fill: backwards). Nothing in CSS starts hidden, so a
 * page is never invisible waiting for a script.
 * ============================================================================ */
/* The sidebar pill: glides 560ms quint to the new active row on a route change
   (navPill.ts sets data-anim="glide"); follows instantly otherwise. */
html[data-skin="platform"] .pf-pill[data-anim="glide"] {
  transition:
    transform var(--pf-dur-slow) var(--pf-ease-quint),
    height var(--pf-dur-slow) var(--pf-ease-quint),
    opacity var(--pf-dur-fast) linear;
}
/* Card hover lift (canvas .pj-card): mark an element with .pf-lift. */
html[data-skin="platform"] .pf-lift {
  transition:
    transform 0.35s var(--pf-ease-quint),
    box-shadow 0.35s var(--pf-ease-quint);
}
html[data-skin="platform"] .pf-lift:hover {
  transform: translateY(-3px);
}
/* Live dot (canvas t3live): a pulsing ring for anything marked .pf-live-dot. */
@keyframes pf-live {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--pf-live-ring);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}
html[data-skin="platform"] .pf-live-dot {
  animation: pf-live 1.6s ease-in-out infinite;
}
/* Reduced motion: every platform transition and animation off (the WAAPI
   entrance checks the same media query and does not run). */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="platform"] :is(.pf-pill, .pf-lift, .pf-sidebar, .pf-nav-fold, .pf-nav-chevron, .pf-nav-item, .pf-live-dot),
  html[data-skin="platform"] .pf-nav-item::after,
  html[data-skin="platform"] .pf-billing-alert::after,
  html[data-skin="platform"] .pf-user::after,
  html[data-skin="platform"] .pf-user-gear::after,
  html[data-skin="platform"] .pf-pill[data-anim="glide"],
  html[data-skin="platform"] .pf-mobile-bar :is(.notif-bell, .sidebar-toggle)::after,
  html[data-skin="platform"] .pf-hero :is(.notif-bell, .pf-hero-toggle, .pf-hero-tool > button)::after {
    transition: none !important;
    animation: none !important;
  }
  html[data-skin="platform"] .pf-lift:hover {
    transform: none;
  }
}
/* ============================================================================
 * Navigation feedback (app/components/NavProgress.tsx, rules in app/lib/nav-progress.ts).
 * Both skins, both modes: every colour is a semantic token, so nothing here needs a dark: pair or
 * an html[data-skin] branch.
 * ============================================================================ */

/* ── The top bar ─────────────────────────────────────────────────────────────────────────────────
   Fixed and out of the layout flow. z-index: above the sticky beta strip (38), the shells' fixed
   sidebars and phone bars (≤ 40) and antd's drawer/modal masks (1000), below the motion kit's
   toasts (1100). The fill is the `bg-surface-primary` utility on the inner bar. */
.nav-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1050;
  block-size: 3px;
  pointer-events: none;
  transition: opacity 240ms ease 160ms;
}
.nav-progress[data-phase="done"] {
  opacity: 0;
}
.nav-progress-bar {
  block-size: 100%;
  inline-size: 100%;
  transform-origin: left center;
  transition: transform 280ms ease-out;
  box-shadow: 0 0 6px var(--color-background-primary);
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
}
[dir="rtl"] .nav-progress-bar {
  transform-origin: right center;
}

/* ── The outgoing page while the next one loads ──────────────────────────────────────────────────
   Set on a page body by the shell (`data-nav-pending`, after 250 ms of a pathname swap). The old
   page stays mounted and keeps its height (no scroll jump); it only fades out. Opacity, never a filter
   or a transform: those would re-anchor the page's `position: fixed` descendants. The transition is
   declared on the pending rule only, so the way back is instant and the entrance takes over. */
[data-nav-pending] {
  position: relative;
  /* Room for the skeleton under a short outgoing page: the classic content column clips overflow,
     which cut the skeleton's table off. It only ever grows the body, below what is on screen. */
  min-block-size: 40rem;
}
[data-nav-pending] > :not(.nav-skeleton) {
  /* Faded right out: the skeleton is drawn where the old page was, and an old toolbar showing through
     the new skeleton reads as a broken page. Still mounted, still holding its height. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.nav-skeleton {
  position: absolute;
  inset: 0;
  padding: inherit;
  pointer-events: none;
}
/* Sticky inside the absolute overlay: a user scrolled down a long page still sees the skeleton. */
.nav-skeleton-inner {
  position: sticky;
  inset-block-start: 16px;
}
[data-beta-strip] .nav-skeleton-inner {
  inset-block-start: calc(var(--beta-strip-h) + 16px);
}

/* ── The shimmer (Skeleton `shimmer`) ────────────────────────────────────────────────────────────
   A band of the card colour sweeps across the bar (`bg-line`): lighter than the bar in light mode,
   darker in dark mode — either way the bar visibly "breathes", from semantic tokens only. */
.ds-skeleton-shimmer {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--color-background-raised) 60%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ds-skeleton-shimmer 1.3s linear infinite;
}
[dir="rtl"] .ds-skeleton-shimmer {
  animation-direction: reverse;
}
@keyframes ds-skeleton-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-progress,
  .nav-progress-bar,
  [data-nav-pending] > :not(.nav-skeleton) {
    transition: none !important;
  }
  .ds-skeleton-shimmer {
    animation: none !important;
    background-image: none;
  }
}
/*
 * Auth-page entrance (app/components/AuthMotion.tsx). The glow is a soft brand bloom behind the
 * form card: invisible at rest (opacity 0), animated only by the Web Animations call when a screen
 * arrives or a signup step changes. Colours come from the semantic primary token, so it follows
 * the theme; it never takes pointer events and never widens the page (inline inset 0).
 */
.auth-stage {
  position: relative;
  isolation: isolate;
}
.auth-stage > .login-card {
  position: relative;
  z-index: 1;
}
.auth-glow {
  position: absolute;
  inset: -48px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 48px;
  background:
    radial-gradient(60% 45% at 50% 30%, color-mix(in oklab, var(--color-surface-primary) 22%, transparent), transparent 70%),
    radial-gradient(40% 35% at 75% 70%, color-mix(in oklab, var(--color-surface-primary) 12%, transparent), transparent 70%);
  filter: blur(18px);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .auth-glow {
    display: none;
  }
}

/*
 * Focus mode — the signup funnel (AuthShell `focus`: register steps, verify-email, pending). The
 * brand panel is not rendered; the form takes the whole width, centred, under a faint primary glow
 * that fades out below the fold (the drafting grid it once had was removed at the owner's request,
 * 2026-10-04). Tokens only, so it follows the theme.
 * Below 900px the panel is hidden on every auth page anyway (dropship-shell.css), so this only
 * changes the desktop layout.
 */
.login-wrapper.is-focus .login-content {
  /* The base token, not the parity sheet's literal white, so the plan card's notches (filled with the
     same token) are invisible against the page in light and dark alike. */
  background: var(--color-background-base);
  position: relative;
  isolation: isolate;
  width: 100%;
}
.login-wrapper.is-focus .login-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 560px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--color-surface-primary) 10%, transparent), transparent 72%);
  -webkit-mask-image: radial-gradient(75% 100% at 50% 0%, black 25%, transparent 78%);
  mask-image: radial-gradient(75% 100% at 50% 0%, black 25%, transparent 78%);
}

/*
 * The signup frame (app/routes/auth/signup-funnel.tsx, owner 2026-10-04 «the plan and the progress
 * stay put, only the form side changes»): one persistent grid around /register's account step,
 * /verify-email and /checkout. AuthShell `split` widens the column to 1080px; from 960px the stepper
 * runs across the top, the form pane takes the inline-start column and «your plan» the inline-end
 * one, so Arabic reads details on the right, English on the left, with no direction-specific rule.
 * Below 960px it is one column: stepper, the plan condensed, the pane. Tokens only.
 */
.signup-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.signup-frame > .signup-frame-pane { min-inline-size: 0; }
.signup-pane-head { margin-block-end: 16px; }
@media (min-width: 960px) {
  .signup-frame.is-split {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 392px);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    row-gap: 28px;
    align-items: start;
  }
  .signup-frame.is-split > .signup-frame-steps { grid-column: 1 / -1; grid-row: 1; }
  .signup-frame.is-split > .signup-frame-pane { grid-column: 1; grid-row: 2; }
  /* Stretches down the pane's row, so the card inside can stay in view while the form scrolls. */
  .signup-frame.is-split > .signup-frame-plan { grid-column: 2; grid-row: 2; align-self: stretch; }
  /* No stepper (a trial signup): the two panes take the first row. */
  .signup-frame.is-split:not(:has(> .signup-frame-steps)) > * { grid-row: 1; }
  .signup-frame-plan > .signup-plan { position: sticky; top: 24px; }
  .signup-plan-toggle { display: none !important; }
}

/*
 * The stepper (app/components/SignupSteps.tsx). It stays mounted across the funnel, so every change
 * is a CSS transition between two server-rendered states: the track fills toward the next step from
 * the reading start, the dot it reaches fills and draws its check, and the new active dot pops into
 * a breathing halo. Nothing animates on a first paint or a reload.
 */
.signup-steps-wrap { inline-size: 100%; }
.signup-steps {
  --dot: 34px;
  --steps-ease: cubic-bezier(0.625, 0.05, 0, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  max-inline-size: 600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.signup-steps-track {
  position: absolute;
  inset-block-start: calc(var(--dot) / 2 - 2px);
  inset-inline: calc(100% / var(--steps) / 2);
  block-size: 4px;
  border-radius: 999px;
  background: var(--color-surface-sunken-strong);
  overflow: hidden;
}
.signup-steps-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, color-mix(in oklab, var(--color-surface-primary) 55%, var(--color-surface-raised)), var(--color-surface-primary));
  transform: scaleX(var(--progress));
  transform-origin: left center;
  transition: transform 760ms var(--steps-ease);
}
[dir="rtl"] .signup-steps-fill {
  background: linear-gradient(to left, color-mix(in oklab, var(--color-surface-primary) 55%, var(--color-surface-raised)), var(--color-surface-primary));
  transform-origin: right center;
}
.signup-step {
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.signup-step-dot {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  border: 2px solid var(--color-line-strong);
  background: var(--color-surface-raised);
  color: var(--color-fg-muted);
  font-size: 13px;
  font-weight: 700;
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    color 320ms ease,
    box-shadow 420ms ease,
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.signup-step-num,
.signup-step-check { grid-area: 1 / 1; }
.signup-step-num { transition: opacity 200ms ease, transform 260ms ease; }
.signup-step-check {
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signup-step-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 420ms cubic-bezier(0.65, 0, 0.35, 1);
}
.signup-step[data-state="done"] .signup-step-dot,
.signup-step[data-state="active"] .signup-step-dot {
  border-color: var(--color-surface-primary);
  background: var(--color-surface-primary);
  color: var(--color-fg-on-primary);
}
/* Done: the fill reaches the dot first, then its number gives way to a check that draws itself. */
.signup-step[data-state="done"] .signup-step-dot { transition-delay: 120ms; }
.signup-step[data-state="done"] .signup-step-num { opacity: 0; transform: scale(0.4); transition-delay: 120ms; }
.signup-step[data-state="done"] .signup-step-check path { stroke-dashoffset: 0; transition-delay: 240ms; }
/* Active: arrives as the fill lands, a touch larger, inside a soft halo that breathes. */
.signup-step[data-state="active"] .signup-step-dot {
  transform: scale(1.1);
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--color-surface-primary) 16%, transparent),
    0 10px 20px -8px color-mix(in oklab, var(--color-surface-primary) 70%, transparent);
  transition-delay: 480ms;
}
.signup-step[data-state="active"] .signup-step-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--color-surface-primary);
  pointer-events: none;
  animation: signup-step-halo 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1s infinite;
  opacity: 0;
}
@keyframes signup-step-halo {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.8); opacity: 0; }
}
.signup-step-label {
  max-inline-size: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 320ms ease;
}
.signup-step[data-state="done"] .signup-step-label { color: var(--color-fg); }
.signup-step[data-state="active"] .signup-step-label { color: var(--color-fg); font-weight: 800; }
/* Phones: smaller dots, quieter labels; the active one keeps its weight. */
@media (max-width: 639.98px) {
  .signup-steps { --dot: 28px; }
  .signup-step { gap: 6px; }
  .signup-step-dot { font-size: 12px; }
  .signup-step-check { inline-size: 14px; block-size: 14px; }
  .signup-step-label { font-size: 12px; font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-steps-fill,
  .signup-step-dot,
  .signup-step-num,
  .signup-step-check path,
  .signup-step-label { transition: none !important; }
  .signup-step[data-state="active"] .signup-step-dot::after { animation: none; }
}

/* The order-summary card: a soft primary tint fading down a raised surface, a hairline border that
   warms toward primary at the top, a gradient accent bar, and a receipt's tear line before the total.
   The tear line is a ticket edge (owner 2026-10-05): a true concave notch is CUT into each side at the
   divider, so the page shows through it. The card paints itself in two masked layers instead of its
   own background: ::before is the border gradient with a 9px hole on each edge, ::after the fill
   (and the top accent bar) with a 10px hole (owner: «the cut is perfect, but smaller, like the
   original» half-disc bites), so the 1px of border between the two radii IS the border
   curving into the notch, in its own colour. A mask clips box-shadow, so the shadow is a drop-shadow
   on the card itself, which follows the cut shape. --notch-y (the divider's y from the card's outer
   top) is measured in SignupPlanCard; until then it sits off the card and no notch shows. The notches
   are on the physical left and right edges, the same in RTL and LTR. */
.signup-plan {
  --plan-pad: 20px;
  --notch-y: -40px;
  position: relative;
  isolation: isolate;
  padding: var(--plan-pad);
  border: 1px solid transparent;
  border-radius: 20px;
  filter:
    drop-shadow(0 14px 16px color-mix(in oklab, var(--color-surface-primary) 12%, transparent))
    drop-shadow(var(--shadow-raised));
}
.signup-plan::before,
.signup-plan::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  --notch-mask:
    radial-gradient(circle at 0 var(--notch-y), transparent var(--notch-r), #000 calc(var(--notch-r) + 1px)),
    radial-gradient(circle at 100% var(--notch-y), transparent var(--notch-r), #000 calc(var(--notch-r) + 1px));
  -webkit-mask: var(--notch-mask);
  -webkit-mask-composite: source-in;
  mask: var(--notch-mask);
  mask-composite: intersect;
}
.signup-plan::before {
  --notch-r: 8.5px;
  /* The card's original border (owner 2026-10-05: no blue outline all round), warming toward primary
     at the top; the notch rim follows it. */
  background: linear-gradient(170deg, color-mix(in oklab, var(--color-surface-primary) 45%, var(--color-line)), var(--color-line) 40%) border-box;
}
.signup-plan::after {
  --notch-r: 9.5px;
  background:
    linear-gradient(90deg, transparent, var(--color-surface-primary) 30%, var(--color-surface-primary) 70%, transparent) 29px 0 / calc(100% - 58px) 3px no-repeat border-box,
    linear-gradient(180deg, color-mix(in oklab, var(--color-surface-primary) 6%, var(--color-surface-raised)), var(--color-surface-raised) 50%) padding-box;
}
@media (min-width: 960px) {
  .signup-plan { --plan-pad: 24px; }
}
.signup-plan-total {
  --plan-edge: calc(var(--plan-pad) + 1px); /* content edge to the card's outer edge (padding + border) */
  position: relative;
  margin-block-start: 20px;
  /* The tear line runs from notch to notch: it stops 4px short of each 10px cut (the card's mask does
     not reach it, so running it edge to edge would draw it across the see-through notch). */
  --plan-tear: 14px;
  margin-inline: calc(var(--plan-tear) - var(--plan-edge));
  padding: 20px calc(var(--plan-edge) - var(--plan-tear)) 0;
  border-block-start: 1.5px dashed var(--color-line-strong);
}
.signup-plan-toggle {
  display: flex;
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-start: 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px dashed var(--color-line);
  background: transparent;
  color: var(--color-fg-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.signup-plan-toggle:hover { text-decoration: underline; }
.signup-plan-toggle:focus-visible { outline: 2px solid var(--color-line-primary); outline-offset: 2px; }

/*
 * Sign-in ⇄ sign-up: the view transition (owner 2026-10-04 «a beautiful, creative, animated show/
 * hide»). Each route mounts its own AuthShell, so nothing persists across the navigation to put a
 * CSS transition on; the Links between /login and the funnel carry React Router's `viewTransition`,
 * and these names pick the pieces out of the two snapshots:
 *
 *  - auth-panel          the blue brand panel. Going to sign-up it sweeps off toward its own edge
 *                        (inline end: right in English, left in Arabic); coming back it sweeps in.
 *  - auth-panel-content  the panel's cards + copy, lifted out so they can leave FIRST (shrink, blur,
 *                        fade) before the board moves, and arrive LAST on the way back.
 *  - auth-card           the form column. Its box glides from the half-screen to the centre (and
 *                        back); the two snapshots keep their natural size (no stretched text), the
 *                        old one fades fast and the new one is live, so AuthMotion's stagger plays
 *                        inside it.
 *  - auth-logo/-region   the logo and the language picker glide to their new places.
 *
 * Only these Links start a transition, so a step change inside the funnel never replays it, and a
 * browser without the API just navigates. Pseudo-elements live in the top layer, so the sweep can
 * never widen the page. Under prefers-reduced-motion every piece swaps instantly.
 */
.login-wrapper .login-slider { view-transition-name: auth-panel; }
.login-wrapper .abp-inner { view-transition-name: auth-panel-content; }
.login-wrapper .login-content-wrap { view-transition-name: auth-card; }
.login-wrapper .login-logo-wrapper .eng-logo { view-transition-name: auth-logo; }
.login-wrapper .auth-region { view-transition-name: auth-region; }
/* A view-transition-name makes the picker its own stacking context, and `.auth-stage` (isolated,
   later in the DOM) painted the form card and the sticky plan card over its open panel. Lift the
   picker above the stage so its panel always opens on top. */
.login-wrapper .auth-region { position: relative; z-index: 2; }

::view-transition-group(auth-panel),
::view-transition-group(auth-card),
::view-transition-group(auth-logo),
::view-transition-group(auth-region) {
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
}

/* The form column: natural-size snapshots centred in the moving box, no blend, old out fast. */
::view-transition-image-pair(auth-card) { isolation: auto; }
::view-transition-old(auth-card),
::view-transition-new(auth-card) {
  left: 50%;
  inline-size: auto;
  block-size: auto;
  translate: -50% 0;
  mix-blend-mode: normal;
}
::view-transition-old(auth-card) { animation: auth-vt-fade-out 220ms ease-out both; }
::view-transition-new(auth-card) { animation: none; }

/* The board: one sweep toward / from its edge, a slight depth tilt, a shade on its leading edge. */
::view-transition-old(auth-panel) {
  animation: auth-vt-panel-out 760ms cubic-bezier(0.625, 0.05, 0, 1) 60ms both;
  transform-origin: right center;
}
::view-transition-new(auth-panel) {
  animation: auth-vt-panel-in 760ms cubic-bezier(0.625, 0.05, 0, 1) both;
  transform-origin: right center;
}
html[dir="rtl"]::view-transition-old(auth-panel) { animation-name: auth-vt-panel-out-rtl; transform-origin: left center; }
html[dir="rtl"]::view-transition-new(auth-panel) { animation-name: auth-vt-panel-in-rtl; transform-origin: left center; }

/* Its content: leaves first, arrives last. */
::view-transition-old(auth-panel-content) { animation: auth-vt-content-out 300ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(auth-panel-content) { animation: auth-vt-content-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 360ms both; }

@keyframes auth-vt-fade-out { to { opacity: 0; } }
@keyframes auth-vt-panel-out {
  from { transform: none; filter: brightness(1); }
  to { transform: translateX(100%) scaleX(0.92); filter: brightness(0.82); }
}
@keyframes auth-vt-panel-in {
  from { transform: translateX(100%) scaleX(0.92); filter: brightness(0.82); }
  to { transform: none; filter: brightness(1); }
}
@keyframes auth-vt-panel-out-rtl {
  from { transform: none; filter: brightness(1); }
  to { transform: translateX(-100%) scaleX(0.92); filter: brightness(0.82); }
}
@keyframes auth-vt-panel-in-rtl {
  from { transform: translateX(-100%) scaleX(0.92); filter: brightness(0.82); }
  to { transform: none; filter: brightness(1); }
}
@keyframes auth-vt-content-out {
  to { opacity: 0; transform: scale(0.9) translateY(12px); filter: blur(6px); }
}
@keyframes auth-vt-content-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/*
 * The billing-cycle toggle (app/components/signup/CycleToggle.tsx; owner 2026-10-04, after a reference
 * shot). Three equal tiles on a faint track: each option a soft translucent card with a hairline edge,
 * label over saving chip; the chosen one is the THUMB — a solid surface card with a 1.5px primary
 * outline — sliding beneath the tiles (useSlidingPill moves it; the tiles are translucent, so the move
 * reads). One radius family: track 14, tiles and thumb 11 (14 minus the 3px inset). No pointer scrim:
 * a tile that is not chosen only firms up its edge on hover, so nothing grey stands on an unchosen
 * cycle. Savings are chips: the quarterly one outlined and pale, the yearly one solid.
 */
.cycle-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  inline-size: 100%;
  padding: 3px;
  border-radius: 14px;
  background: var(--color-surface-sunken);
}
.seg-anim > .seg-thumb.cycle-seg-thumb {
  box-sizing: border-box;
  border-radius: 11px;
  border: 1.5px solid color-mix(in oklab, var(--color-line-primary) 80%, var(--color-surface));
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.cycle-seg-btn {
  position: relative;
  display: flex;
  min-inline-size: 0;
  min-block-size: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--color-line-faint) 70%, transparent);
  border-radius: 11px;
  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
  color: var(--color-fg);
  font: inherit;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
}
/* The chosen tile lets the thumb (its card and outline) show through. */
.cycle-seg-btn[aria-checked="true"] { border-color: transparent; background: transparent; color: var(--color-fg-primary); }
.cycle-seg-btn:not([aria-checked="true"]):hover { border-color: var(--color-line); }
.cycle-seg-btn:focus-visible { outline: 2px solid var(--color-line-primary); outline-offset: 2px; }
.cycle-seg-label { max-inline-size: 100%; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .cycle-seg-btn { transition: none; }
}
.cycle-chip {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-surface-success-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-line-success) 40%, transparent);
  color: var(--color-fg-success);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.cycle-chip--strong { background: var(--color-surface-success); box-shadow: none; color: var(--color-fg-on-success); }
/* A 390px phone gives each option ~100px: tighter insets so «2 months free» never clips. */
@media (max-width: 479.98px) {
  .cycle-seg-btn { padding-inline: 2px; }
  .cycle-chip { padding-inline: 6px; font-size: 11px; letter-spacing: -0.01em; }
}
/* After step 1 the cycle is fixed: the toggle's place and height, as one line on the same track. */
.signup-cycle-chosen {
  display: flex;
  min-block-size: 66px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-surface-sunken);
}

/*
 * Collapsibles (app/components/signup/Collapse.tsx): height through grid rows 0fr → 1fr, the content
 * fading up with a light stagger, `visibility: hidden` once folded so nothing inside takes focus.
 * `--mobile` folds below 960px only. The chevron of a disclosure turns with aria-expanded.
 */
.sp-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sp-collapse[data-open] { grid-template-rows: 1fr; }
.sp-collapse-inner {
  min-block-size: 0;
  overflow: hidden;
  /* Room for focus rings at the edges of what it clips. */
  margin-inline: -4px;
  padding-inline: 4px;
  visibility: hidden;
  transition: visibility 0s linear 440ms;
}
.sp-collapse[data-open] > .sp-collapse-inner { visibility: visible; transition-delay: 0s; }
.sp-collapse[data-open] > .sp-collapse-inner > *,
.sp-collapse[data-open] > .sp-collapse-inner > ul > li {
  animation: sp-collapse-item 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(60ms + var(--sp-i, 0) * 40ms);
}
.sp-collapse-inner > :nth-child(2), .sp-collapse-inner > ul > li:nth-child(2) { --sp-i: 1; }
.sp-collapse-inner > :nth-child(3), .sp-collapse-inner > ul > li:nth-child(3) { --sp-i: 2; }
.sp-collapse-inner > :nth-child(4), .sp-collapse-inner > ul > li:nth-child(4) { --sp-i: 3; }
.sp-collapse-inner > :nth-child(5), .sp-collapse-inner > ul > li:nth-child(5) { --sp-i: 4; }
.sp-collapse-inner > :nth-child(6), .sp-collapse-inner > ul > li:nth-child(6) { --sp-i: 5; }
.sp-collapse-inner > :nth-child(7), .sp-collapse-inner > ul > li:nth-child(7) { --sp-i: 6; }
.sp-collapse-inner > :nth-child(n + 8), .sp-collapse-inner > ul > li:nth-child(n + 8) { --sp-i: 7; }
@keyframes sp-collapse-item {
  from { opacity: 0; transform: translateY(-6px); }
}
@media (min-width: 960px) {
  .sp-collapse--mobile { grid-template-rows: 1fr; transition: none; }
  .sp-collapse--mobile > .sp-collapse-inner { overflow: visible; visibility: visible; transition: none; }
  .sp-collapse--mobile > .sp-collapse-inner > *,
  .sp-collapse--mobile > .sp-collapse-inner > ul > li { animation: none !important; }
}
.signup-disclosure .signup-chevron { transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.signup-disclosure[aria-expanded="true"] .signup-chevron { transform: rotate(180deg); }
.signup-disclosure:focus-visible { outline: 2px solid var(--color-line-primary); outline-offset: 2px; border-radius: 8px; }
/* A panel that opens in place inside the funnel (the checkout plan change). */
.signup-reveal { animation: sp-collapse-item 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .sp-collapse,
  .sp-collapse-inner,
  .signup-disclosure .signup-chevron { transition: none !important; }
  .sp-collapse-inner > *,
  .sp-collapse-inner > ul > li,
  .signup-reveal { animation: none !important; }
}

/*
 * The funnel's pane swap (owner 2026-10-04): register → verify-email → checkout as ONE view
 * transition in which only the form pane moves. app/routes/auth/signup-funnel.tsx sets
 * `data-signup-vt` on <html> while a navigation crosses funnel routes (and `data-signup-travel`),
 * which names three pieces for that transition only (the login ⇄ register sweep above never sees
 * them):
 *  - signup-pane   «next» reads like turning a page: the old form slides and fades toward the reading
 *                  START and blurs away; the new one comes in from the reading END a beat later,
 *                  settling from a slight scale and blur (the same sense as the login ⇄ register
 *                  entrance). Back travel reverses both; RTL mirrors through --signup-dir.
 *  - signup-steps  only the live stepper shows, so its own CSS transitions (fill, check, halo) play.
 *  - signup-plan   the card stays in place: the live card shows at once (its cycle toggle becomes a
 *                  line of text after step 1) while the old snapshot fades off it.
 */
html { --signup-dir: 1; --signup-travel: 1; }
html[dir="rtl"] { --signup-dir: -1; }
html[data-signup-travel="back"] { --signup-travel: -1; }
html[data-signup-vt] .signup-frame-pane { view-transition-name: signup-pane; }
html[data-signup-vt] .signup-frame-steps { view-transition-name: signup-steps; }
html[data-signup-vt] .signup-frame-plan > .signup-plan { view-transition-name: signup-plan; }

::view-transition-group(signup-pane) {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
}
::view-transition-image-pair(signup-pane) { isolation: auto; }
::view-transition-old(signup-pane),
::view-transition-new(signup-pane) { mix-blend-mode: normal; block-size: auto; }
::view-transition-old(signup-pane) { animation: signup-pane-out 380ms cubic-bezier(0.55, 0, 1, 0.45) both; }
::view-transition-new(signup-pane) { animation: signup-pane-in 680ms cubic-bezier(0.22, 0.61, 0.36, 1) 170ms both; }
@keyframes signup-pane-out {
  to {
    opacity: 0;
    transform: translateX(calc(var(--signup-dir) * var(--signup-travel) * -64px)) scale(0.97);
    filter: blur(8px);
  }
}
@keyframes signup-pane-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--signup-dir) * var(--signup-travel) * 72px)) scale(0.97);
    filter: blur(10px);
  }
}
::view-transition-group(signup-steps) { animation: none; }
/* The card does not move: the live one shows at once and the old snapshot just fades off it. It
   paints over the pane, so on a phone (where the page height changes under a scrolled view and the
   old pane can start higher than the new one) the leaving form slides UNDER the card, never over it. */
::view-transition-group(signup-plan) { animation: none; z-index: 2; }
::view-transition-group(signup-steps) { z-index: 2; }
::view-transition-image-pair(signup-plan) { isolation: auto; }
::view-transition-old(signup-plan) { animation: auth-vt-fade-out 200ms ease-out both; mix-blend-mode: normal; }
::view-transition-new(signup-plan) { animation: none; mix-blend-mode: normal; }
::view-transition-old(signup-steps) { display: none; }
::view-transition-new(signup-steps) { animation: none; }

/*
 * The signup type cards (PickCard in app/routes/auth/register.tsx): on hover or keyboard focus the
 * «go» chip's arrow nudges towards the reading end. `translate` is its own property, so it composes
 * with `.dir-flip`'s mirroring transform instead of replacing it. The card's own lift is
 * `motion-safe:` in the markup. Both stay still under reduced motion.
 */
.pick-card-arrow {
  transition: translate 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pick-card:hover .pick-card-arrow,
.pick-card:focus-visible .pick-card-arrow {
  translate: 3px 0;
}
[dir="rtl"] .pick-card:hover .pick-card-arrow,
[dir="rtl"] .pick-card:focus-visible .pick-card-arrow {
  translate: -3px 0;
}
@media (prefers-reduced-motion: reduce) {
  .pick-card-arrow { transition: none; }
  .pick-card:hover .pick-card-arrow,
  .pick-card:focus-visible .pick-card-arrow { translate: none; }
}