/* Minification failed. Returning unminified contents.
(135,43): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(135,74): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(135,105): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(138,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(174,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(175,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(176,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(178,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(179,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(180,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,25): run-time error CSS1039: Token not allowed after unary operator: '-easify-radius'
(267,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(280,22): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-200'
(287,45): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(306,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-navy'
(313,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-400'
(316,24): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(331,25): run-time error CSS1039: Token not allowed after unary operator: '-easify-radius-sm'
(366,46): run-time error CSS1039: Token not allowed after unary operator: '-easify-navy'
(429,22): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-50'
(430,28): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-200'
(431,25): run-time error CSS1039: Token not allowed after unary operator: '-easify-radius'
(437,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-600'
(451,28): run-time error CSS1039: Token not allowed after unary operator: '-easify-gray-200'
(452,25): run-time error CSS1039: Token not allowed after unary operator: '-easify-radius-sm'
(454,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-navy'
(461,24): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(462,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(595,24): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(596,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(633,1): run-time error CSS1019: Unexpected token, found '@import'
(633,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap')'
(638,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(639,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(640,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(642,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(645,5): run-time error CSS1035: Expected colon, found '-'
(646,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(647,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(648,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(649,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(651,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(652,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(653,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(655,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(656,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(657,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(658,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(659,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(660,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(661,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(663,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(664,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(665,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(667,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(668,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(669,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(670,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(672,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(673,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(674,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(675,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(676,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(678,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(679,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(680,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(683,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(684,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(685,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(686,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(688,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(689,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(690,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(691,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(693,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(694,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(695,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(696,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(699,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(700,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(702,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(703,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(704,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(705,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(706,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(707,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(708,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(709,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(711,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(712,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(713,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(714,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(715,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(716,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(718,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(719,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(720,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(721,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(722,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(723,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(724,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(725,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(726,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(728,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(729,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(730,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(731,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(732,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(735,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(736,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(737,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(742,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(743,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(744,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(745,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(746,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(748,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(749,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(750,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(751,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(753,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(754,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(756,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(757,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(758,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(759,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(760,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(762,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(763,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(765,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(766,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(767,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(768,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(769,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(780,25): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(785,46): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(785,82): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(786,52): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(788,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(788,72): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(791,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(792,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(793,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-normal'
(794,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(795,26): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(796,37): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(796,67): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(803,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(805,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-tight'
(806,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(810,28): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(810,50): run-time error CSS1039: Token not allowed after unary operator: '-text-5xl'
(811,28): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(811,52): run-time error CSS1039: Token not allowed after unary operator: '-text-4xl'
(812,28): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(812,51): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(813,22): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(814,22): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(815,22): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(817,25): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(817,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(820,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(820,79): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(821,23): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(825,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(826,25): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(829,21): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(831,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(833,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(834,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-purple'
(838,21): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(839,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(840,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(841,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(842,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(844,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(849,27): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(851,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(857,19): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(859,22): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(860,23): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(863,26): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(864,29): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(865,29): run-time error CSS1039: Token not allowed after unary operator: '-space-24'
(868,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(891,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(893,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(894,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(897,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(901,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(906,49): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(906,80): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(907,54): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(907,87): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(910,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(912,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(913,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(916,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(917,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(918,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(924,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(927,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(930,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent-hover'
(931,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(938,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(939,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(942,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(949,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(950,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(953,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(954,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(955,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(961,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(963,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(967,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(968,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(977,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(979,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(980,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(987,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(988,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(991,20): run-time error CSS1039: Token not allowed after unary operator: '-color-success-light'
(992,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(995,20): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-light'
(1005,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1006,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1015,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1016,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1017,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1018,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1019,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1024,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(1028,28): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1029,31): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1030,31): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1037,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1038,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1039,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1040,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1041,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1042,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1043,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1043,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1047,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1048,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(1050,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1058,16): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1063,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1064,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1064,66): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1064,103): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1071,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-header-line'
(1078,21): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1080,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1088,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1093,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1100,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1107,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(1115,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1116,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(1121,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1123,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(1132,31): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1138,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(1148,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(1150,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1152,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(1154,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1155,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1173,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1177,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1180,59): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1192,13): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1196,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1197,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1198,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1199,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2xl'
(1200,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1204,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1205,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1206,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1221,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1222,24): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1223,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(1227,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1228,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1230,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1238,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1244,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1245,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1245,32): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1246,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1248,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1253,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1254,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1259,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1272,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1274,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1283,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1284,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1296,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1297,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1298,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(1299,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1302,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1306,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1307,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1308,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(1347,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1359,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1374,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1452,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1468,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1473,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1477,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1502,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1552,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1593,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1610,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1631,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1641,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1654,61): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1659,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1671,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1697,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1737,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1738,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1740,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1749,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1750,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1751,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1756,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1757,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1758,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1805,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1806,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1808,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1810,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1811,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1811,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1814,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1815,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1847,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1858,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1859,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1861,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1866,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1869,37): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1876,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(1878,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1881,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(1892,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1897,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1898,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1904,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1906,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1909,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1912,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1916,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1920,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1921,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1922,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1928,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1929,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1930,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1932,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(1933,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(1935,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1940,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1941,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1946,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1957,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1959,17): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(1964,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1970,13): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(1971,24): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(1976,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1977,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(1979,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1980,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1986,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1991,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1998,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2009,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2010,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2013,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2020,40): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2023,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2026,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2033,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2034,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2042,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2043,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2044,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2047,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2051,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2058,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2062,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2067,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2073,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2077,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2080,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2086,35): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(2096,32): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(2110,44): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(2110,74): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(2110,95): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(2174,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2175,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2179,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2180,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2184,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2185,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2193,50): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2228,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2229,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2239,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2282,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2283,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2287,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2288,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2292,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2293,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2307,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2309,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(2310,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(2311,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2313,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2314,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2317,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2321,25): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(2325,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2326,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2330,25): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2331,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2333,23): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2341,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2347,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2348,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2349,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2350,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2352,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2354,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2359,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2363,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(2370,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2386,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2393,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2395,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2396,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2397,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2398,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2400,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(2402,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2403,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xs'
(2407,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2408,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2411,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(2415,59): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2419,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2421,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2422,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2425,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2429,25): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(2429,47): run-time error CSS1039: Token not allowed after unary operator: '-text-4xl'
(2431,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2433,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2437,19): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(2438,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2441,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(2448,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2452,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2477,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2477,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2480,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2486,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2499,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2500,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2502,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2503,23): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2508,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2509,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2510,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(2518,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2518,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2519,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2526,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2528,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2533,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(2534,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2543,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2547,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2550,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2554,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2570,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2575,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2584,46): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2624,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2664,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2665,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2667,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2668,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(2669,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2672,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2675,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2676,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2677,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(2688,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2689,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2691,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2693,21): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2694,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2701,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2705,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2706,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2707,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2708,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2710,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2711,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(2716,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(2717,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(2722,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2723,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(2729,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2730,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(2734,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2735,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2737,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2738,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2742,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2743,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2744,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(2761,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2762,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2768,25): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(2768,46): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(2770,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2771,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2777,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2778,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2782,41): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2795,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2816,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2819,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(2820,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2832,19): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(2834,17): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2834,32): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(2839,35): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width'
(2840,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2848,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2850,20): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2860,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2866,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2875,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2883,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2884,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2885,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2886,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2887,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2887,32): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2888,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2888,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2888,102): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2892,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2900,44): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(2900,73): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent-to'
(2910,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2912,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2925,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2926,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2933,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2940,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2941,63): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(2941,128): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent-to'
(2942,45): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(2943,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2944,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2950,17): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2956,21): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2971,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2972,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2976,23): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2993,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2995,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(2996,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(2997,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2999,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3001,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3002,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3005,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3008,25): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3008,46): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(3010,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3011,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3016,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3017,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3020,20): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3025,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3030,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3032,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3035,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3035,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3039,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3042,63): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3042,111): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3045,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3047,15): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(3047,34): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3052,38): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3056,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3060,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3062,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3068,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3073,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3076,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3080,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3094,20): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(3099,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3106,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3108,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3113,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3114,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3115,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3121,34): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3121,64): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3121,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3122,36): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(3122,78): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3122,112): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3122,141): run-time error CSS1039: Token not allowed after unary operator: '-leading-tight'
(3123,36): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(3123,77): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3123,108): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3123,139): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3124,35): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3124,60): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3124,98): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3124,137): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3125,57): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3125,88): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3126,36): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3126,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3126,99): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3126,138): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3127,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3129,117): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3130,95): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3130,122): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3130,147): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3130,185): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3131,100): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(3131,229): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3135,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3136,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3137,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3138,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3139,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3141,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3145,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3145,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3150,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3154,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3157,19): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(3159,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3162,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3167,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3168,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3171,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3172,64): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3178,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3178,63): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3179,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3184,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3184,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3184,47): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3188,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3190,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3191,16): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3191,33): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3197,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3198,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3199,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3200,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3204,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3205,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3206,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3207,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3208,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3213,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3217,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3219,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3222,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3226,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3227,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3228,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3229,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3231,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3231,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3232,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3235,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3236,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3240,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3240,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3241,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3245,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3249,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3252,40): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3255,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3257,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3258,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(3263,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3265,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3274,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3274,63): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3275,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3280,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3280,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3280,47): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3284,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3285,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3286,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3291,50): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(3294,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3295,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3296,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3298,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3299,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3303,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3304,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3305,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(3309,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3311,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3316,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3319,36): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3319,51): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3326,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3327,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3327,32): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3328,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3330,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3334,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3338,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3348,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3350,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3351,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(3352,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3355,59): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3358,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3359,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3360,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3361,17): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3363,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3367,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3368,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3376,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3377,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3378,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3383,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3384,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3386,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3389,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3392,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3396,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3400,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3401,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3407,17): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3408,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3409,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3414,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3418,24): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3427,29): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3435,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3436,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3437,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3443,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3449,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3450,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3466,17): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3467,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-hero'
(3468,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3474,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(3480,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3481,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3487,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3488,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3493,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3495,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3500,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3502,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3503,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3505,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3507,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3512,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3513,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3525,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3530,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3531,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3532,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3533,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3533,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3534,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(3537,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3538,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3540,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3545,52): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(3546,50): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(3547,49): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(3548,52): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(3551,42): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(3552,40): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(3553,39): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(3554,42): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(3563,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3569,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3572,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3572,75): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3580,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3581,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(3589,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(3593,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3603,68): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(3610,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3611,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3612,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3613,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(3625,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3626,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3626,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3628,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3629,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3634,47): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3639,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3640,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3640,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3641,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3643,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3645,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3646,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3648,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3656,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3657,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3658,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3659,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(3670,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3680,39): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3680,80): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3681,43): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3681,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3689,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3690,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3695,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3697,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(3698,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3699,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3700,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3701,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3703,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3704,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3705,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3706,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3711,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3712,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3713,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(3717,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(3728,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3729,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3730,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3730,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3731,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3732,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3733,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3737,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3738,8): run-time error CSS1035: Expected colon, found '{'
(3743,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3745,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3748,22): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3753,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3755,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(3756,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3757,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3758,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3759,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3761,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3762,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3763,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3767,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3768,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3772,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3773,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3778,33): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3782,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3786,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3787,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3795,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(3796,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3798,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3799,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3800,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3801,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3805,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3805,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3809,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3810,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(3813,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3816,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(3817,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3823,20): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3824,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3825,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3826,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3833,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3834,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3835,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3836,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3837,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3843,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3846,48): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(3847,87): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(3851,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3852,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3853,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3857,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3858,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3861,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(3862,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3865,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3866,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3867,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3870,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(3871,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3872,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3875,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(3876,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3881,34): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3882,27): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3907,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3913,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3920,29): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3926,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3963,60): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3970,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3971,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3972,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3973,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3974,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3978,35): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3978,50): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3979,40): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3980,42): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3980,57): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3981,43): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3982,33): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3983,39): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3986,41): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3990,71): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3997,56): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4000,32): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4000,47): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4003,38): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4004,36): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4005,33): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4007,46): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4007,61): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4007,76): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4008,32): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(4008,63): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4016,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4019,32): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(4022,35): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4022,50): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4023,40): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4024,42): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4027,31): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4027,56): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4031,41): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4041,33): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(4042,36): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(4047,74): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4062,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4069,46): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4072,45): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4075,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4082,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4083,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4087,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4092,55): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4092,91): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4094,64): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4097,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4097,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4099,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4102,54): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4102,90): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4105,61): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4105,97): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4106,63): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4106,103): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4109,54): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4109,90): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4110,61): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4110,101): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4111,65): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4112,64): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4112,104): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4115,50): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4115,86): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4116,54): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4117,60): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4118,52): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4119,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4122,60): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4122,96): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4123,65): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4126,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4126,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4130,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4131,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4132,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4135,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4136,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4142,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4143,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4144,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4145,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4148,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4149,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4154,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4155,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4156,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4159,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4160,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4166,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4167,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4170,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4171,62): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4171,105): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4174,61): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4178,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4179,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4185,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4186,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4189,62): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4190,66): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4194,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4195,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4199,45): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4200,44): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4200,84): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4203,45): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4206,62): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4206,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4210,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4211,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4212,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4215,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4218,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4221,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4222,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4224,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4227,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4231,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4232,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4233,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4236,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4241,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4242,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4246,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4247,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4248,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4250,63): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4250,91): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4251,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4251,97): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4253,60): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4256,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4257,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4261,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4264,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4265,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4266,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4269,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4270,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4272,76): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4274,57): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4278,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4279,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4280,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4283,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4284,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4285,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4288,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4289,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4291,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4294,58): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4297,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4297,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4300,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4303,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4304,52): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4304,88): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4305,59): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4305,94): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4327,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-spring'
(4327,64): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(4331,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4332,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4335,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(4336,15): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(4356,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4357,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4359,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4362,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4379,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4398,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4399,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4401,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4404,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4423,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4424,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4445,15): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4449,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4451,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4454,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4486,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4499,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4500,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4501,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(4520,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4521,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4521,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4522,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4523,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4524,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4526,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4541,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4541,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4543,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4548,17): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4550,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4554,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4555,23): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(4562,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4563,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4563,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4565,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4566,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4567,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4573,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4574,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4593,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4602,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4614,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4618,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4626,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4626,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4627,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4628,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4633,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4633,34): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4635,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4636,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4637,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4638,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4641,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4649,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4650,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4651,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4675,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4681,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4693,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4694,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4696,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4699,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4713,15): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4715,46): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4717,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4719,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4722,51): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4722,86): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4760,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4830,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4843,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4845,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4850,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4869,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4876,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4885,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4906,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4935,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4936,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(4969,59): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4970,57): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-tertiary'
(5010,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5011,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5012,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5013,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5014,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5018,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5023,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5024,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5045,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5046,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5047,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(5058,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5059,10): run-time error CSS1035: Expected colon, found '{'
(5075,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5077,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(5078,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5079,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5083,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5098,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5108,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(5110,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5111,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5112,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5117,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5118,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(5124,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5134,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5135,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5140,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5146,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5157,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5159,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5163,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5194,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(5194,46): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(5208,1): run-time error CSS1019: Unexpected token, found '}'
 */
/* ================================================
   EASIFYME — ANIMATIONS & KEYFRAMES
   ================================================ */

/* ---- Fade In ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Fade In Up ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Fade In Down ---- */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Slide In Right ---- */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Slide In Left ---- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Slide Up (mobile menu) ---- */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---- Gentle Float (hero shapes) ---- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(3deg); }
  66% { transform: translateY(10px) rotate(-2deg); }
}

/* ---- Subtle Pulse (hero center shape) ---- */
@keyframes pulse-subtle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.2; }
}

/* ---- Spin ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Shimmer (skeleton loading) ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Scale In ---- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Bounce In ---- */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.05); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ---- Gradient Shift (for CTA background) ---- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Typing Cursor ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Toast Exit ---- */
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* =========================================
   UTILITY ANIMATION CLASSES
   ========================================= */

.animate-fade-in { animation: fadeIn 0.4s ease-out both; }
.animate-fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-fade-in-down { animation: fadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-slide-in-right { animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-scale-in { animation: scaleIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-bounce-in { animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-spin { animation: spin 1s linear infinite; }

/* Staggered children animation */
.stagger-children > * { animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(11) { animation-delay: 0.55s; }
.stagger-children > *:nth-child(12) { animation-delay: 0.6s; }

/* Animation delays */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border-light) 50%, var(--color-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}

/* Page transition */
.page-enter {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Toast exit animation */
.toast.dismissing {
  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

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

  .hero-shape { animation: none !important; }
  .stagger-children > * { animation: none !important; }
}

/* =============================================
   EasifyMe Brand Identity System - Global CSS
   ============================================= */

/* ---- CSS Variables ---- */
:root {
    --easify-blue: #3B82F6;
    --easify-navy: #0F172A;
    --easify-green: #10B981;
    --easify-green-light: #D1FAE5;
    --easify-amber: #F59E0B;
    --easify-red: #EF4444;
    --easify-gray-50: #F8FAFC;
    --easify-gray-100: #F1F5F9;
    --easify-gray-200: #E2E8F0;
    --easify-gray-400: #94A3B8;
    --easify-gray-600: #475569;
    --easify-gray-900: #0F172A;
    --easify-radius: 12px;
    --easify-radius-sm: 8px;
    --easify-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --easify-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
    --easify-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =============================================
   EASIFIED CELEBRATION
   ============================================= */
.easify-celebration {
    margin-top: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #A7F3D0;
    border-radius: var(--easify-radius);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.easify-celebration--visible {
    opacity: 1;
    transform: translateY(0);
}
.easify-celebration__headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 4px;
}
.easify-celebration__summary {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #047857;
    line-height: 1.5;
}

/* Share prompt */
.easify-celebration__share {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #A7F3D0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.easify-celebration__share-label {
    font-size: 13px;
    color: #065F46;
    font-weight: 500;
}
.easify-share-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #A7F3D0;
    background: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #065F46;
}
.easify-share-btn:hover {
    background: #065F46;
    color: white;
    border-color: #065F46;
}

/* =============================================
   LOADING STATE
   ============================================= */
.easify-loader {
    text-align: center;
    padding: 24px 16px;
}
.easify-loader__text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--easify-blue);
    display: block;
    margin-bottom: 12px;
    animation: easifyPulse 1.5s ease-in-out infinite;
}
@keyframes easifyPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.easify-loader__bar {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: var(--easify-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}
.easify-loader__progress {
    height: 100%;
    background: linear-gradient(90deg, var(--easify-blue), #60A5FA);
    border-radius: 2px;
    width: 0%;
    animation: easifyProgress 2s ease-in-out infinite;
}
@keyframes easifyProgress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 60%; margin-left: 20%; }
    100% { width: 0%; margin-left: 100%; }
}

/* =============================================
   DROP ZONE BRANDING
   ============================================= */
.easify-drop-main {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--easify-navy);
    margin-bottom: 6px;
}
.easify-drop-sub {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--easify-gray-400);
}
.easify-drop--active {
    border-color: var(--easify-blue) !important;
    background: rgba(59, 130, 246, 0.04) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* =============================================
   ERROR MESSAGES
   ============================================= */
.easify-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--easify-radius-sm);
    margin-top: 12px;
    animation: easifySlideIn 0.3s ease;
}
.easify-error--hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.3s ease;
}
.easify-error__icon {
    flex-shrink: 0;
    font-size: 16px;
}
.easify-error__text {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #991B1B;
    font-weight: 500;
}
.easify-error__suggestion {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #B91C1C;
    margin-top: 4px;
}

/* =============================================
   FIRST-VISIT WELCOME BANNER
   ============================================= */
.easify-welcome {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, var(--easify-navy) 0%, #1E293B 100%);
    color: white;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
}
.easify-welcome--visible {
    transform: translateY(0);
}
.easify-welcome--hiding {
    transform: translateY(100%);
}
.easify-welcome__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 0 3px 3px 0;
    transition: width 0.1s linear;
    width: 100%;
}
.easify-welcome__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.easify-welcome__text {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #CBD5E1;
}
.easify-welcome__text strong {
    color: white;
    font-weight: 600;
}
.easify-welcome__close {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}
.easify-welcome__close:hover {
    color: white;
}

/* =============================================
   CROSS-TOOL SUGGESTIONS
   ============================================= */
.easify-next {
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--easify-gray-50);
    border: 1px solid var(--easify-gray-200);
    border-radius: var(--easify-radius);
}
.easify-next__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--easify-gray-600);
    margin-bottom: 12px;
}
.easify-next__links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.easify-next__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--easify-gray-200);
    border-radius: var(--easify-radius-sm);
    text-decoration: none;
    color: var(--easify-navy);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.easify-next__link:hover {
    border-color: var(--easify-blue);
    color: var(--easify-blue);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}
.easify-next__icon {
    font-size: 16px;
}

/* =============================================
   HERO TRUST LINE
   ============================================= */
.hero-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.hero-trust__item {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
}
.hero-trust__divider {
    color: #CBD5E1;
    font-size: 10px;
}

/* =============================================
   TOOL PAGE "EASIFY" SUBTITLE
   ============================================= */
.tool-easify-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #64748B;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.5;
}
[data-theme="dark"] .tool-easify-subtitle {
    color: #94A3B8;
}

/* =============================================
   FOOTER BRAND
   ============================================= */
.footer-tagline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #E2E8F0;
    margin-top: 12px;
    margin-bottom: 8px;
}

/* =============================================
   CATEGORY SUBTITLE
   ============================================= */
.category-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #64748B;
    font-weight: 400;
    margin-top: 4px;
    margin-bottom: 24px;
}

/* =============================================
   UTILITY ANIMATION
   ============================================= */
@keyframes easifySlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================
   DARK MODE OVERRIDES
   ============================================= */
[data-theme="dark"] .easify-celebration {
    background: linear-gradient(135deg, #064E3B 0%, #065F46 100%);
    border-color: #047857;
}
[data-theme="dark"] .easify-celebration__headline {
    color: #A7F3D0;
}
[data-theme="dark"] .easify-celebration__summary {
    color: #6EE7B7;
}
[data-theme="dark"] .easify-celebration__share {
    border-color: #047857;
}
[data-theme="dark"] .easify-celebration__share-label {
    color: #A7F3D0;
}
[data-theme="dark"] .easify-share-btn {
    background: #064E3B;
    border-color: #047857;
    color: #A7F3D0;
}
[data-theme="dark"] .easify-share-btn:hover {
    background: #047857;
    color: white;
}
[data-theme="dark"] .easify-error {
    background: #450A0A;
    border-color: #7F1D1D;
}
[data-theme="dark"] .easify-error__text {
    color: #FCA5A5;
}
[data-theme="dark"] .easify-error__suggestion {
    color: #F87171;
}
[data-theme="dark"] .easify-drop-main {
    color: #E2E8F0;
}
[data-theme="dark"] .easify-next {
    background: #1E293B;
    border-color: #334155;
}
[data-theme="dark"] .easify-next__title {
    color: #94A3B8;
}
[data-theme="dark"] .easify-next__link {
    background: #0F172A;
    border-color: #334155;
    color: #E2E8F0;
}
[data-theme="dark"] .easify-next__link:hover {
    border-color: var(--easify-blue);
    color: var(--easify-blue);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .easify-celebration {
        padding: 16px 18px;
    }
    .easify-celebration__headline {
        font-size: 18px;
    }
    .easify-celebration__share {
        flex-direction: column;
        align-items: flex-start;
    }
    .easify-next__links {
        flex-direction: column;
    }
    .easify-next__link {
        width: 100%;
    }
    .easify-welcome__content {
        padding: 12px 16px;
    }
    .easify-welcome__text {
        font-size: 13px;
    }
}

/* ================================================
   EASIFYME — DESIGN SYSTEM
   Premium Modern Utility Tools Website
   ================================================ */

/* ---- 1. GOOGLE FONTS IMPORT ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ---- 2. CSS CUSTOM PROPERTIES (LIGHT MODE) ---- */
:root {
    /* Background Colors */
    --color-bg: #F8FAFC;
    --color-bg-secondary: #EDF1F7;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F3F7FB;
    --color-surface-raised: #FFFFFF;
    .hero-subtitle
    /* Text Colors */
    --color-text: #0F172A;
    --color-text-secondary: #334155;
    --color-text-muted: #64748B;
    --color-text-subtle: #94A3B8;
    --color-text-inverse: #FFFFFF;
    /* Border Colors */
    --color-border: #E2E8F0;
    --color-border-light: #E8EDF4;
    --color-border-focus: #3B82F6;
    /* Brand Colors */
    --color-primary: #0F172A;
    --color-accent: #3B82F6;
    --color-accent-dark: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-accent-light: #DBEAFE;
    --color-accent-purple: #8B5CF6;
    --color-accent-purple-light: #EDE9FE;
    /* Status Colors */
    --color-success: #10B981;
    --color-success-light: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-error: #EF4444;
    --color-error-light: #FEE2E2;
    --color-info: #06B6D4;
    --color-info-light: #CFFAFE;
    /* Gradients */
    --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    --gradient-accent-hover: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    --gradient-hero: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 50%, #ECFDF5 100%);
    --gradient-header-line: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(139,92,246,0.04) 100%);
    /* Typography */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    /* Type Scale */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --shadow-accent: 0 4px 14px rgba(59, 130, 246, 0.25);
    --shadow-accent-hover: 0 8px 25px rgba(59, 130, 246, 0.35);
    --shadow-card-hover: 0 12px 28px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.06);
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Layout */
    --header-height: 72px;
    --sidebar-width: 300px;
    --container-max: 1280px;
    --container-padding: clamp(1rem, 4vw, 1.5rem);
}

/* ---- 3. DARK MODE VARIABLES ---- */
[data-theme="dark"] {
  --color-bg: #0F172A;
  --color-bg-secondary: #0D1526;
  --color-surface: #1E293B;
  --color-surface-alt: #162032;
  --color-surface-raised: #243447;

  --color-text: #F1F5F9;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-text-subtle: #64748B;

  --color-border: #334155;
  --color-border-light: #243447;

  --color-accent-light: rgba(59, 130, 246, 0.15);
  --color-accent-purple-light: rgba(139, 92, 246, 0.15);
  --color-success-light: rgba(16, 185, 129, 0.15);
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --color-error-light: rgba(239, 68, 68, 0.15);

  --gradient-hero: linear-gradient(135deg, #0F172A 0%, #162032 50%, #0F1F1A 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.08) 100%);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ---- 4. BASE RESET & GLOBAL ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

::selection { background-color: var(--color-accent-light); color: var(--color-accent-dark); }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- 5. TYPOGRAPHY ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 800; }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); font-weight: 700; }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); font-weight: 700; }
h4 { font-size: var(--text-xl); font-weight: 600; }
h5 { font-size: var(--text-lg); font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p { margin-bottom: var(--space-4); color: var(--color-text-secondary); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-dark); }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 600; color: var(--color-text); }
small { font-size: var(--text-sm); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-secondary);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent-purple);
}

pre {
  font-family: var(--font-mono);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--text-sm);
}

/* ---- 6. FOCUS STYLES (ACCESSIBILITY) ---- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- 7. LAYOUT UTILITIES ---- */
.container-main {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section { padding: var(--space-16) 0; }
.section-sm { padding: var(--space-10) 0; }
.section-lg { padding: var(--space-24) 0; }

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .glass-effect {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- 8. BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-base); border-radius: var(--radius-lg); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-accent-hover);
  transform: translateY(-1px);
  color: #fff;
}

.btn-gradient {
  background: var(--gradient-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}
.btn-gradient:hover {
  background: var(--gradient-accent-hover);
  box-shadow: var(--shadow-accent-hover);
  transform: translateY(-1px);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-icon:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

/* ---- 9. BADGES ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2em 0.65em;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-full);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.badge-category {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}
.badge-new {
  background: var(--color-success-light);
  color: var(--color-success);
}
.badge-popular {
  background: var(--color-warning-light);
  color: #92400E;
}
.badge-dev {
  background: rgba(245,158,11,0.12);
  color: #B45309;
  border: 1px solid rgba(245,158,11,0.3);
}
[data-theme="dark"] .badge-dev { background: rgba(245,158,11,0.15); color: #FCD34D; border-color: rgba(245,158,11,0.25); }
.badge-count {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}
.badge-dark {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

/* ---- 10. CARDS ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

.card-body { padding: var(--space-6); }
.card-body-sm { padding: var(--space-4); }
.card-body-lg { padding: var(--space-8); }

/* ---- 11. FORM INPUTS ---- */
.form-control {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.form-control::placeholder { color: var(--color-text-subtle); }

textarea.form-control { resize: vertical; min-height: 120px; }

/* ---- 12. STICKY HEADER ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.header-accent-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-header-line);
  z-index: 1;
}

.header-inner {
  display: flex;
  align-items: center;
  height: calc(var(--header-height) - 3px);
  margin-top: 3px;
  gap: var(--space-6);
}

/* Header scrolled state — strengthens the existing base */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .site-header.scrolled {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--color-border);
}

/* ---- 13. LOGO ---- */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  width: 36px; height: 36px;
  background: var(--gradient-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-heading);
  box-shadow: var(--shadow-accent);
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-xl);
  color: #000000;
  letter-spacing: -0.03em;
  line-height: 1;
}
[data-theme="dark"] .logo-text {
  color: #F1F5F9;
}

.logo-text span { color: var(--color-accent); }

/* ---- 14. MAIN NAVIGATION ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
  overflow: hidden;
}


.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.5rem 0.625rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link:hover {
  color: #fff;
}

.nav-link.active {
  color: #fff;
}

[data-theme="light"] .nav-link:hover {
  color: var(--color-accent);
}

[data-theme="light"] .nav-link.active {
  color: var(--color-accent);
}

.nav-link i { font-size: 12px; transition: transform var(--transition-fast); }
.nav-link:hover i { transform: rotate(180deg); }

/* ---- 15. MEGA MENU ---- */
.mega-menu-wrapper {
  /* No position: relative — let the fixed header be the containing block
     so the menu can center itself against the full viewport width. */
  position: static;
}

.mega-menu {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(900px, 92vw);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base),
              visibility var(--transition-base),
              transform var(--transition-base);
  z-index: 1100;
}

.mega-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.mega-menu-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.mega-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.mega-menu-item:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.mega-menu-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mega-menu-item-info { flex: 1; min-width: 0; }

.mega-menu-item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  display: block;
}

.mega-menu-item-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
  display: block;
}

/* ---- 16. HEADER SEARCH BAR ---- */
/* Search toggle icon button */
.header-search-toggle {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.header-search-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

/* ============================================================
   SEARCH OVERLAY — 3-Panel Command Palette
   ============================================================ */
.header-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .header-search-overlay {
  background: rgba(0, 0, 0, 0.5);
}
.header-search-overlay.open {
  display: flex;
}
.search-overlay-watermark { display: none; }

/* ---- Top Search Bar ---- */
.header-search-overlay__inner {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #E2E8F0;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  z-index: 2;
}
[data-theme="dark"] .header-search-overlay__inner {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.header-search-overlay__icon {
  color: #3B82F6;
  font-size: 20px;
  flex-shrink: 0;
}
.header-search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: #0F172A;
  background: transparent;
  caret-color: #3B82F6;
  padding: 0;
}
[data-theme="dark"] .header-search-overlay__input { color: #F1F5F9; }
.header-search-overlay__input::placeholder { color: #94A3B8; font-weight: 400; }
.search-kbd {
  padding: 4px 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  flex-shrink: 0;
}
[data-theme="dark"] .search-kbd {
  background: rgba(51, 65, 85, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  color: #94A3B8;
}
.header-search-overlay__close {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748B;
  font-size: 18px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.header-search-overlay__close:hover {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #EF4444;
}
[data-theme="dark"] .header-search-overlay__close {
  background: rgba(51, 65, 85, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  color: #94A3B8;
}

/* ---- Search Results ---- */
.header-search-overlay .search-results-dropdown {
  position: relative;
  top: auto; left: auto;
  max-width: 700px;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: calc(100vh - 80px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .header-search-overlay .search-results-dropdown {
  background: rgba(15, 23, 42, 0.95);
}
.header-search-overlay .search-results-dropdown.visible { display: block; }

/* ---- Search Home — 3-Column Body ---- */
.search-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-home.hidden { display: none; }
.search-home__columns {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  overflow: hidden;
}

/* Panels */
.search-panel { padding: 28px 24px; overflow-y: auto; }
.search-panel--left {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-right: 1px solid #E2E8F0;
}
[data-theme="dark"] .search-panel--left {
  background: rgba(15, 23, 42, 0.5);
  border-right-color: var(--color-border);
}
.search-panel--center {
  background: rgba(255, 255, 255, 0.92);
  padding: 28px 36px;
}
[data-theme="dark"] .search-panel--center {
  background: rgba(15, 23, 42, 0.7);
}
.search-panel--right {
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(10px);
  border-left: 1px solid #E2E8F0;
}
[data-theme="dark"] .search-panel--right {
  background: rgba(15, 23, 42, 0.4);
  border-left-color: var(--color-border);
}
.search-panel__section { margin-bottom: 24px; }
.search-panel__section:last-child { margin-bottom: 0; }
.search-panel__divider { height: 1px; background: #F1F5F9; margin: 20px 0; }
[data-theme="dark"] .search-panel__divider { background: var(--color-border); }

/* Section Labels */
.search-panel__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-panel__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.search-panel__dot--blue   { background: #3B82F6; }
.search-panel__dot--orange { background: #F59E0B; }
.search-panel__dot--amber  { background: #F59E0B; }
.search-panel__dot--green  { background: #10B981; }
.search-panel__dot--purple { background: #8B5CF6; }
.search-panel__dot--gray   { background: #94A3B8; }

/* Left Panel Items */
.search-panel__list { display: flex; flex-direction: column; gap: 2px; }
.search-panel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s; color: var(--color-text);
}
.search-panel-item:hover { background: rgba(59, 130, 246, 0.06); }
[data-theme="dark"] .search-panel-item:hover { background: rgba(59, 130, 246, 0.1); }
.search-panel-item__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; flex-shrink: 0;
}
.search-panel-item__info { min-width: 0; flex: 1; }
.search-panel-item__name {
  font-size: 13px; font-weight: 500; color: #334155;
  line-height: 1.3; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .search-panel-item__name { color: #E2E8F0; }
.search-panel-item__meta { font-size: 11px; color: #94A3B8; font-weight: 400; display: block; }
.search-panel-item__star { color: #F59E0B; font-size: 14px; flex-shrink: 0; }

/* Center: Popular Tools Grid */
.search-home__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 28px;
}
.search-tool-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: white;
  border: 1px solid #F1F5F9; border-radius: 12px;
  text-decoration: none; cursor: pointer; transition: all 0.2s;
}
.search-tool-item:hover {
  border-color: #3B82F6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}
[data-theme="dark"] .search-tool-item {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(51, 65, 85, 0.5);
}
[data-theme="dark"] .search-tool-item:hover {
  border-color: #3B82F6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.search-tool-item__icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.search-tool-item__info { flex: 1; min-width: 0; }
.search-tool-item__name {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600; color: #0F172A;
  margin-bottom: 2px; display: block;
}
[data-theme="dark"] .search-tool-item__name { color: #F1F5F9; }
.search-tool-item__cat { font-size: 11px; color: #94A3B8; }

/* Center: Category Pills */
.search-home__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.search-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: white;
  border: 1px solid #E2E8F0; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.search-cat-chip:hover { border-color: #3B82F6; color: #3B82F6; background: rgba(59, 130, 246, 0.03); }
[data-theme="dark"] .search-cat-chip {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(51, 65, 85, 0.5); color: #CBD5E1;
}
.search-cat-chip i { font-size: 12px; }
.search-cat-chip__count {
  background: #F1F5F9; padding: 1px 7px; border-radius: 100px;
  font-size: 10px; font-weight: 700; color: #94A3B8;
}
[data-theme="dark"] .search-cat-chip__count { background: rgba(51, 65, 85, 0.5); }

/* Right: Quick Actions */
.search-quick-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  cursor: pointer; transition: all 0.15s;
  margin-bottom: 4px; border: 1px solid transparent;
  text-decoration: none;
}
.search-quick-item:hover {
  background: white; border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] .search-quick-item:hover {
  background: rgba(30, 41, 59, 0.6); border-color: var(--color-border);
}
.search-quick-item__icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.search-quick-item__info { min-width: 0; }
.search-quick-item__name { font-size: 13px; font-weight: 600; color: #334155; display: block; }
[data-theme="dark"] .search-quick-item__name { color: #E2E8F0; }
.search-quick-item__desc { font-size: 11px; color: #94A3B8; font-weight: 400; margin-top: 1px; }

/* Right: Keyboard Shortcuts */
.search-shortcuts { display: flex; flex-direction: column; gap: 8px; }
.search-shortcut { display: flex; align-items: center; gap: 10px; }
.search-shortcut kbd {
  padding: 3px 8px; background: white; border: 1px solid #E2E8F0;
  border-radius: 5px; font-family: var(--font-body);
  font-size: 10px; font-weight: 700; color: #64748B;
  min-width: 24px; text-align: center;
}
[data-theme="dark"] .search-shortcut kbd {
  background: rgba(51, 65, 85, 0.5); border-color: rgba(51, 65, 85, 0.6); color: #94A3B8;
}
.search-shortcut span { font-size: 11px; color: #94A3B8; }

/* Right: Tip Card */
.search-tip-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border: 1px solid #DBEAFE; border-radius: 14px;
  padding: 18px 16px; margin-top: 4px;
}
[data-theme="dark"] .search-tip-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.2);
}
.search-tip-card__icon { font-size: 16px; margin-bottom: 6px; }
.search-tip-card__title {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  color: #1E40AF; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
[data-theme="dark"] .search-tip-card__title { color: #60A5FA; }
.search-tip-card__text { font-size: 12px; color: #3B82F6; line-height: 1.5; }
[data-theme="dark"] .search-tip-card__text { color: #93C5FD; }
.search-tip-card__text kbd {
  padding: 2px 6px; background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 4px;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; color: #1E40AF;
}
[data-theme="dark"] .search-tip-card__text kbd { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }

/* Footer */
.search-home__footer {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 32px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #E2E8F0;
  font-size: 11px; color: #94A3B8;
}
[data-theme="dark"] .search-home__footer {
  background: rgba(15, 23, 42, 0.8); border-top-color: var(--color-border);
}
.search-home__footer-keys { display: flex; align-items: center; gap: 4px; }
.search-home__footer-keys kbd {
  padding: 2px 6px; background: #F1F5F9; border: 1px solid #E2E8F0;
  border-radius: 4px; font-family: var(--font-body);
  font-size: 10px; font-weight: 700; color: #64748B;
}
[data-theme="dark"] .search-home__footer-keys kbd {
  background: rgba(51, 65, 85, 0.5); border-color: rgba(51, 65, 85, 0.6); color: #94A3B8;
}
.search-home__footer-tip {
  font-size: 11px;
  color: #94A3B8;
}
.search-home__footer-tip kbd {
  padding: 2px 6px; background: #F1F5F9; border: 1px solid #E2E8F0;
  border-radius: 4px; font-family: var(--font-body);
  font-size: 10px; font-weight: 700; color: #3B82F6;
}
[data-theme="dark"] .search-home__footer-tip kbd {
  background: rgba(51, 65, 85, 0.5); border-color: rgba(51, 65, 85, 0.6); color: #60A5FA;
}
.search-home__footer-brand { margin-left: auto; color: #64748B; font-size: 11px; font-weight: 500; }
[data-theme="dark"] .search-home__footer-brand { color: #94A3B8; }

/* Scrollbars */
.search-panel::-webkit-scrollbar { width: 4px; }
.search-panel::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
[data-theme="dark"] .search-panel::-webkit-scrollbar-thumb { background: #475569; }

/* Backdrop hidden */
.header-search-backdrop { display: none; }

/* Responsive search */
@media (max-width: 1100px) {
  .search-home__columns { grid-template-columns: 1fr !important; }
  .search-panel--left,
  .search-panel--right { display: none !important; }
}
@media (max-width: 768px) {
  .header-search-overlay__inner {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    gap: 10px;
  }
  .header-search-overlay__input {
    font-size: 16px;
    min-height: 40px;
  }
  .search-kbd { display: none; }
  .search-panel--center {
    padding: 16px;
    border-left: none;
    border-right: none;
  }
  .search-home__grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .search-home__cats {
    gap: 6px;
  }
  .search-cat-chip {
    font-size: 11px;
    padding: 5px 10px;
  }
  .search-home__footer {
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .search-home__footer-brand,
  .search-home__footer-tip { display: none; }
  .header-search-overlay .search-results-dropdown {
    max-height: calc(100vh - 70px);
    padding: 8px;
  }
}
/* ---- 17. DARK MODE TOGGLE ---- */
.dark-mode-toggle {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  /* Button-level transitions: bg/border on hover, scale on press */
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark-mode-toggle:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-text-subtle);
}

.dark-mode-toggle:active {
  transform: scale(0.85);
}

/* Both icons sit at the button center — only transform/opacity changes */
.dark-mode-toggle .icon-moon,
.dark-mode-toggle .icon-sun {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 15px;
  transition: opacity 0.2s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
  pointer-events: none;
}

/* ── LIGHT mode: moon visible, sun hidden (behind, rotated) ── */
.dark-mode-toggle .icon-moon {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
}
.dark-mode-toggle .icon-sun {
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.2);
  opacity: 0;
}

/* ── DARK mode: sun visible, moon hidden (above, rotated) ── */
[data-theme="dark"] .dark-mode-toggle .icon-moon {
  transform: translate(-50%, -50%) rotate(90deg) scale(0.2);
  opacity: 0;
}
[data-theme="dark"] .dark-mode-toggle .icon-sun {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
}

/* ---- 17b. MOBILE DARK MODE TOGGLE ---- */
.mobile-dark-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mobile-dark-toggle:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-subtle);
}
.mobile-dark-toggle__icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}
.mobile-dark-toggle__icon .icon-moon,
.mobile-dark-toggle__icon .icon-sun {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 15px;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.mobile-dark-toggle__icon .icon-moon {
  transform: translate(-50%,-50%) rotate(0deg) scale(1);
  opacity: 1;
}
.mobile-dark-toggle__icon .icon-sun {
  transform: translate(-50%,-50%) rotate(-90deg) scale(0.2);
  opacity: 0;
}
[data-theme="dark"] .mobile-dark-toggle__icon .icon-moon {
  transform: translate(-50%,-50%) rotate(90deg) scale(0.2);
  opacity: 0;
}
[data-theme="dark"] .mobile-dark-toggle__icon .icon-sun {
  transform: translate(-50%,-50%) rotate(0deg) scale(1);
  opacity: 1;
}
.mobile-dark-toggle__label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.mobile-dark-toggle__label--dark { display: none; }
[data-theme="dark"] .mobile-dark-toggle__label--light { display: none; }
[data-theme="dark"] .mobile-dark-toggle__label--dark { display: inline; }

/* ---- 18. HAMBURGER / MOBILE NAV ---- */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.hamburger:hover { background: var(--color-bg-secondary); }

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--color-bg);
  flex-direction: column;
  padding: var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
}

.mobile-menu-overlay.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.mobile-menu-close {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  font-size: 18px;
  transition: all var(--transition-fast);
}

.mobile-menu-close:hover { background: var(--color-bg-secondary); }

.mobile-nav-section {
  margin-bottom: var(--space-6);
}

.mobile-nav-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}

.mobile-nav-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-accent);
}

.mobile-nav-item .nav-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

/* ---- 19. FOOTER ---- */
.site-footer {
  background: var(--color-primary);
  color: #94A3B8;
  padding: var(--space-16) 0 0;
}

[data-theme="dark"] .site-footer {
  background: #060D1A;
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: #64748B;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: var(--space-2);
}

.footer-social-link {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 15px;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #E2E8F0;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-links { list-style: none; }

.footer-links li { margin-bottom: var(--space-2); }

.footer-links a {
  font-size: var(--text-sm);
  color: #64748B;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover { color: #CBD5E1; }

.footer-newsletter-input-wrap {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.footer-newsletter-input {
  flex: 1;
  padding: 0.6rem 0.875rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #E2E8F0;
  outline: none;
  transition: all var(--transition-fast);
}

.footer-newsletter-input:focus {
  border-color: var(--color-accent);
  background: rgba(59,130,246,0.08);
}

.footer-newsletter-input::placeholder { color: #475569; }

.footer-bottom {
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-bottom-text {
  font-size: var(--text-xs);
  color: #475569;
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-4);
}

.footer-bottom-links a {
  font-size: var(--text-xs);
  color: #475569;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover { color: #94A3B8; }

/* ---- 20. MAIN CONTENT OFFSET ---- */
.main-content { padding-top: var(--header-height); }

/* Offset scrollIntoView for fixed header — prevents results hiding behind header */
[id],
.tool-interface-card,
.tool-interface-body > *,
[class*="result"],
[class*="output"],
[class*="compare"],
canvas {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* ---- 21. HERO SECTION ---- */
.hero-section {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 50px 0 80px;
  overflow: hidden;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 60%, #F8FAFC 100%);
}
[data-theme="dark"] .hero-section {
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 60%, var(--color-bg-secondary) 100%);
}
/* Pseudo-element orbs replaced by animated .hero-mesh blobs */
.hero-title__accent {
  color: #3B82F6;
  display: block;
}

.hero-bg-shapes {
  display: none;
}

/* ---- Animated gradient orbs ---- */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at 40% 40%, #3B82F6, transparent 70%);
  top: -160px; right: -120px;
  opacity: 0.45;
  animation: hero-drift-a 13s ease-in-out infinite;
}
.hero-orb-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle at 55% 55%, #8B5CF6, transparent 70%);
  bottom: -130px; left: -100px;
  opacity: 0.4;
  animation: hero-drift-b 16s ease-in-out infinite;
}
.hero-orb-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle at 50% 50%, #10B981, transparent 70%);
  top: 18%; left: 4%;
  opacity: 0.28;
  animation: hero-drift-c 11s ease-in-out infinite;
}
.hero-orb-4 {
  width: 260px; height: 260px;
  background: radial-gradient(circle at 50% 50%, #F59E0B, transparent 70%);
  bottom: 8%; right: 8%;
  opacity: 0.22;
  animation: hero-drift-a 14s ease-in-out infinite reverse;
}
.hero-orb-5 {
  width: 200px; height: 200px;
  background: radial-gradient(circle at 50% 50%, #EC4899, transparent 70%);
  top: 12%; right: 22%;
  opacity: 0.2;
  animation: hero-drift-b 10s ease-in-out infinite reverse;
}
.hero-orb-6 {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 50% 50%, #06B6D4, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  animation: pulse-subtle 9s ease-in-out infinite;
}

@keyframes hero-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-28px, 18px) scale(1.04); }
  66%       { transform: translate(18px, -14px) scale(0.96); }
}
@keyframes hero-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -22px) scale(1.05); }
  66%       { transform: translate(-18px, 14px) scale(0.97); }
}
@keyframes hero-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(14px, -22px); }
}

/* ---- Dot grid overlay ---- */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 20%, transparent 100%);
}

/* ---- Floating tool icons ---- */
.hero-floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-fi {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  font-size: 18px;
  opacity: 0.2;
  animation: hero-fi-float 6s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.hero-fi-1 { width: 50px; height: 50px; background: linear-gradient(135deg,#3B82F6,#6366F1); top: 11%; left: 7%; animation-delay: 0s;    animation-duration: 7s; }
.hero-fi-2 { width: 42px; height: 42px; background: linear-gradient(135deg,#10B981,#34D399); top: 32%; left: 3%; animation-delay: 1.1s;  animation-duration: 8s; }
.hero-fi-3 { width: 46px; height: 46px; background: linear-gradient(135deg,#F59E0B,#FBBF24); top: 56%; left: 8%; animation-delay: 2.2s;  animation-duration: 6.5s; }
.hero-fi-4 { width: 40px; height: 40px; background: linear-gradient(135deg,#EF4444,#F87171); bottom: 16%; left: 4%; animation-delay: 0.6s;  animation-duration: 9s; }
.hero-fi-5 { width: 54px; height: 54px; background: linear-gradient(135deg,#8B5CF6,#A78BFA); top: 9%;  right: 7%; animation-delay: 1.6s;  animation-duration: 7.5s; }
.hero-fi-6 { width: 44px; height: 44px; background: linear-gradient(135deg,#EC4899,#F9A8D4); top: 36%; right: 4%; animation-delay: 3.1s;  animation-duration: 8.5s; }
.hero-fi-7 { width: 46px; height: 46px; background: linear-gradient(135deg,#06B6D4,#22D3EE); top: 62%; right: 7%; animation-delay: 2.0s;  animation-duration: 7s; }
.hero-fi-8 { width: 38px; height: 38px; background: linear-gradient(135deg,#14B8A6,#2DD4BF); bottom: 14%; right: 5%; animation-delay: 0.9s;  animation-duration: 6s; }

@keyframes hero-fi-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-11px) rotate(4deg); }
  66%       { transform: translateY(7px) rotate(-3deg); }
}

/* ---- Word rotator ---- */
.hero-rotator-wrap { display: inline-block; position: relative; }
#hero-rotator,
.hero-rotator {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-rotator--out {
  opacity: 0;
  transform: translateY(-8px);
}

/* ---- Animated mesh gradient background ---- */
.hero-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}
.hero-mesh__blob--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
  top: -100px; right: -60px;
  animation: heroMesh1 12s ease-in-out infinite;
}
.hero-mesh__blob--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation: heroMesh2 15s ease-in-out infinite;
}
.hero-mesh__blob--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation: heroMesh3 10s ease-in-out infinite;
}

@keyframes heroMesh1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-30px, 20px) scale(1.05); }
  66%      { transform: translate(20px, -15px) scale(0.95); }
}
@keyframes heroMesh2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25px, -20px) scale(1.06); }
  66%      { transform: translate(-20px, 15px) scale(0.96); }
}
@keyframes heroMesh3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.3; }
}

/* Dark mode: slightly more visible blobs */
[data-theme="dark"] .hero-mesh__blob--1 { background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%); }
[data-theme="dark"] .hero-mesh__blob--2 { background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%); }
[data-theme="dark"] .hero-mesh__blob--3 { background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, transparent 70%); }

.hero-content { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.875rem;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}

.hero-title {
  font-size: clamp(var(--text-3xl), 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  color: var(--color-text);
}

.hero-subtitle {
  font-size: clamp(var(--text-base), 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 700px;
  margin: 0 auto var(--space-10);
  line-height: 1.7;
}

/* Hero Search Bar */
.hero-search-wrap {
  position: relative;
  max-width: 580px;
  margin: 0 auto var(--space-8);
}

.hero-search-input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3.25rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  color: var(--color-text);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all var(--transition-fast);
  outline: none;
}

.hero-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1), 0 0 0 4px rgba(59, 130, 246, 0.06);
}

.hero-search-input::placeholder { color: var(--color-text-subtle); }

.hero-search-icon {
  position: absolute;
  left: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 18px;
  pointer-events: none;
}

.hero-search-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Category Pills */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.875rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.hero-pill:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* ---- 22. SECTION TITLES ---- */
.section-header { text-align: center; margin-bottom: var(--space-10); }

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.section-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* ---- 23. CATEGORY CARDS ---- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.category-card {
  background: var(--color-surface);
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: #E2E8F0;
}

.category-card-accent {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}

.category-card-body {
  padding: var(--space-5) var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1;
}

.category-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.category-card-info { flex: 1; min-width: 0; }

.category-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  display: block;
}

.category-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-card-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.category-card-arrow {
  font-size: 13px;
  color: var(--color-text-subtle);
  transition: transform var(--transition-fast);
}

.category-card:hover .category-card-arrow { transform: translateX(4px); }

/* ---- 24. TOOL CARDS ---- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.tool-card {
  background: var(--color-surface);
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  padding: var(--space-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  border-color: #E2E8F0;
}

.tool-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.tool-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.tool-card-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }

/* ---- Under Development indicator ---- */
.tool-card--dev {
  opacity: .72;
}
.tool-card--dev:hover {
  opacity: .88;
}

.dev-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.4);
  color: #B45309;
  font-size: 10px;
  cursor: default;
  pointer-events: auto;
  flex-shrink: 0;
  z-index: 1;
}
[data-theme="dark"] .dev-badge { background: rgba(245,158,11,0.2); color: #FCD34D; border-color: rgba(245,158,11,0.35); }

.dev-badge::after {
  content: 'Under Development';
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: #0F172A;
  color: #F8FAFC;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 9999;
}

.dev-badge::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0F172A;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.dev-badge:hover {
  z-index: 9998;
}

.dev-badge:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dev-badge:hover::before {
  opacity: 1;
}

.tool-card--dev:hover {
  z-index: 10;
}

.tool-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--leading-snug);
  transition: color var(--transition-fast);
}

.tool-card:hover .tool-card-name { color: var(--color-accent); }

.tool-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.tool-card-cta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ---- 25. FEATURE CARDS ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-light);
}

.feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-accent);
}

.feature-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- 26. CTA SECTION ---- */
.cta-section {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}
[data-theme="dark"] .cta-section {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.cta-section::before { display: none; }

.cta-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  position: relative;
}

.cta-desc {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  position: relative;
}

.cta-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; position: relative; }

.btn-cta-primary {
  background: #3B82F6;
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-cta-primary:hover {
  background: #2563EB;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  color: #fff;
}

.btn-cta-outline {
  background: transparent;
  color: #475569;
  border: 1.5px solid #E2E8F0;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
[data-theme="dark"] .btn-cta-outline {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-cta-outline:hover {
  border-color: #3B82F6;
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.03);
  transform: translateY(-1px);
}

/* ---- 27. TOOL PAGE LAYOUT ---- */
.tool-page-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding);
}

.tool-main-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-8);
  align-items: start;
}

/* Bottom row: Related Tools (left) + Popular Tools (right) */
.tool-bottom-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-10);
}

.tool-bottom-row--no-related {
  grid-template-columns: 1fr;
  max-width: 400px;
}

/* Tool Header */
.tool-header {
  margin-bottom: var(--space-6);
}

.tool-header--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

.tool-header-main { min-width: 0; }

.tool-header-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
  width: 260px;
}

.tool-highlight-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.tool-highlight-item:hover {
  border-color: var(--color-accent);
  background: rgba(99,102,241,0.04);
  transform: translateX(2px);
}

.tool-highlight-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tool-accent, #3B82F6), var(--tool-accent-to, #8B5CF6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}

.tool-highlight-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-highlight-desc {
  display: none;
}

.tool-highlights-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Highlights sidebar — right side of tool header */
.tool-header--with-highlights {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-6);
  align-items: center;
}

.tool-highlights-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tool-accent, #3B82F6) 5%, transparent), color-mix(in srgb, var(--tool-accent-to, #8B5CF6) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--tool-accent, #3B82F6) 10%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

.tool-highlights-sidebar .tool-highlight-item {
  border: none;
  background: transparent;
  padding: var(--space-1) 0;
  border-radius: 0;
}

.tool-highlights-sidebar .tool-highlight-item + .tool-highlight-item {
  border-top: 1px solid rgba(59,130,246,0.06);
  padding-top: var(--space-2);
}

.tool-highlights-sidebar .tool-highlight-item:hover {
  background: transparent;
  transform: none;
}

@media (max-width: 900px) {
  .tool-header--with-highlights {
    grid-template-columns: 1fr;
  }
  .tool-highlights-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .tool-highlights-sidebar .tool-highlight-item + .tool-highlight-item {
    border-top: none;
    padding-top: var(--space-1);
  }
}

@media (max-width: 900px) {
  .tool-header--split {
    grid-template-columns: 1fr;
  }
  .tool-header-highlights {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}

.tool-category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.75rem;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: all var(--transition-fast);
}

.tool-category-badge:hover { background: var(--color-accent); color: #fff; }

.tool-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.tool-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 720px;
  margin-top: var(--space-2);
}

/* Tool Interface Card */
.tool-interface-card {
  background: var(--color-surface);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
[data-theme="dark"] .tool-interface-card { border-color: var(--color-border); }

.tool-interface-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #F8FAFC;
}
[data-theme="dark"] .tool-interface-header { background: var(--color-bg-secondary); border-bottom-color: var(--color-border); }

.tool-interface-title {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--tool-accent, var(--color-accent));
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tool-interface-body { padding: var(--space-6); }

/* How to Use */
.how-to-use-section {
  margin-bottom: var(--space-6);
}

.how-to-use-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.step-card {
  background: var(--color-bg-secondary, #F8FAFC);
  border: none;
  border-radius: 14px;
  padding: var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.step-number {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--tool-accent, #3B82F6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
}

/* Tool Section (used by individual tool views for How-to / About content) */
.tool-section { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.tool-section h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-4); line-height: var(--leading-tight); }
.tool-section h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.tool-section p { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.tool-section ul, .tool-section ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.tool-section li { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); }
.tool-section strong { color: var(--color-text); font-weight: 600; }

.how-to-list { list-style: none; padding: 0; counter-reset: steps; display: flex; flex-direction: column; gap: var(--space-3); }
.how-to-list li { counter-increment: steps; display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: 0; }
.how-to-list li::before { content: counter(steps); min-width: 28px; height: 28px; background: var(--gradient-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* About Tool Section */
.about-tool-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.about-tool-header {
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.about-tool-header:hover { background: var(--color-bg-secondary); }

.about-tool-header-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-tool-toggle {
  font-size: 16px;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.about-tool-section.open { border-color: var(--color-accent); }
.about-tool-section.open .about-tool-header { background: var(--color-bg-secondary); }
.about-tool-section.open .about-tool-toggle { transform: rotate(180deg); }

.about-tool-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  padding: 0 var(--space-6);
}

.about-tool-section.open .about-tool-body {
  max-height: 5000px;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.about-tool-body h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
}

.about-tool-body h3:first-child { margin-top: 0; }

.about-tool-body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.about-tool-body ul, .about-tool-body ol {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-5);
  margin: 0 0 var(--space-3);
}

/* FAQ Section */
.faq-section {
  margin-bottom: var(--space-6);
}

.faq-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.faq-item.open { border-color: var(--color-accent); }
.faq-item.open .faq-question { background: var(--color-bg-secondary); }

.faq-question {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  text-align: left;
  border: none;
  transition: background var(--transition-fast);
}

.faq-question:hover { background: var(--color-bg-secondary); }

.faq-question-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.faq-chevron {
  font-size: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  background: var(--color-surface);
}

.faq-item.open .faq-answer {
  max-height: 600px;
  padding: var(--space-4) var(--space-6) var(--space-5);
}

.faq-answer-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- 28. SIDEBAR ---- */
.tool-sidebar { position: sticky; top: calc(var(--header-height) + 24px); }

.sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.sidebar-card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface-alt);
}

.sidebar-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar-card-body { padding: var(--space-3) var(--space-4); }

.sidebar-tool-list { list-style: none; padding-left: 0; margin-bottom: 0; }

.sidebar-tool-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}

.sidebar-tool-item:hover { background: var(--color-bg-secondary); }

.sidebar-tool-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-tool-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  transition: color var(--transition-fast);
}

.sidebar-tool-item:hover .sidebar-tool-name { color: var(--color-accent); }

.sidebar-ad-placeholder {
  background: var(--color-bg-secondary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-4);
}

.sidebar-ad-text {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-style: italic;
}

/* ---- 29. BREADCRUMB ---- */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.breadcrumb-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb-link:hover { color: var(--color-accent); }

.breadcrumb-sep {
  font-size: 10px;
  color: var(--color-text-subtle);
}

.breadcrumb-current {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
}

/* ---- 30. RELATED TOOLS CAROUSEL ---- */
.related-tools-section {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-8);
}

.related-carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.related-carousel::-webkit-scrollbar { display: none; }

.related-carousel .tool-card {
  min-width: 220px;
  max-width: 260px;
  flex: 0 0 calc(25% - var(--space-4));
  scroll-snap-align: start;
  flex-shrink: 0;
}

.carousel-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.carousel-nav-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(99,102,241,0.08);
  box-shadow: 0 4px 12px rgba(99,102,241,0.2);
  transform: translateY(-1px);
}

.carousel-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ---- 31. CATEGORY PAGE ---- */
.category-page-header {
  padding: var(--space-10) 0;
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}

.category-page-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-lg);
}

.category-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.filter-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.filter-btn {
  padding: 0.4rem 1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.filter-btn.active, .filter-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ---- 32. TOAST NOTIFICATIONS ---- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 340px;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.toast.toast-success { border-left: 4px solid var(--color-success); }
.toast.toast-error { border-left: 4px solid var(--color-error); }
.toast.toast-info { border-left: 4px solid var(--color-info); }
.toast.toast-warning { border-left: 4px solid var(--color-warning); }

.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon { color: var(--color-error); }
.toast-info .toast-icon { color: var(--color-info); }
.toast-warning .toast-icon { color: var(--color-warning); }

.toast-dismiss {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.toast-dismiss:hover { background: var(--color-bg-secondary); color: var(--color-text); }

/* ---- 33. BACK TO TOP ---- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: var(--gradient-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition-base);
  z-index: 990;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-accent-hover); }

/* ---- 34. SEARCH RESULTS DROPDOWN ---- */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1001;
  max-height: 360px;
  overflow-y: auto;
  display: none;
}

.search-results-dropdown.visible { display: block; }

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item.active { background: var(--color-bg-secondary); }

.search-result-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.search-result-all:hover { background: var(--color-bg-secondary); }

/* Hero search dropdown — positioned below the hero search bar */
#hero-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1001;
  max-height: 360px;
  overflow-y: auto;
  display: none;
  text-align: left;
}
#hero-search-dropdown.visible { display: block; }

.search-result-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.search-result-info { flex: 1; }
.search-result-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.search-result-category { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- 35. CASE CONVERTER TOOL ---- */

/* Mode button grid */
.cc-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cc-mode-btn {
  padding: 0.45rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}

.cc-mode-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.cc-mode-btn.active {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

/* Title case style sub-buttons */
.cc-title-styles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  animation: cc-slide-in 0.18s ease-out both;
}

@keyframes cc-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-title-styles-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-right: var(--space-1);
}

.cc-style-btn {
  padding: 0.28rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-body);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
}

.cc-style-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cc-style-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Field label */
.cc-field { margin-bottom: var(--space-1); }

.cc-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Textareas */
.cc-textarea {
  width: 100%;
  min-height: 200px;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  outline: none;
  display: block;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cc-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.cc-textarea::placeholder { color: var(--color-text-subtle); }

.cc-textarea-output {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: default;
}

/* Word / char info */
.cc-meta {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Toolbar */
.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.cc-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cc-clear-btn { margin-left: auto; color: var(--color-error) !important; }
.cc-clear-btn:hover { background: rgba(239,68,68,0.08) !important; border-color: var(--color-error) !important; }

/* Dark mode overrides */
[data-theme="dark"] .cc-mode-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .cc-mode-btn:hover {
  background: rgba(59,130,246,0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[data-theme="dark"] .cc-title-styles {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}
[data-theme="dark"] .cc-style-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .cc-textarea {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .cc-textarea-output {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .cc-mode-btn { font-size: var(--text-xs); padding: 0.4rem 0.75rem; }
  .cc-toolbar { gap: var(--space-1); }
}

/* ---- 36. PRINT STYLES ---- */
@media print {
  .site-header, .site-footer, .tool-sidebar, .back-to-top, .toast-container { display: none !important; }
  .main-content { padding-top: 0; }
  .tool-main-layout { grid-template-columns: 1fr; }
  body { font-size: 12pt; background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---- 36. RESPONSIVE BREAKPOINTS ---- */

/* Prevent ANY element from causing horizontal scroll */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
* { min-width: 0; }

/* Category page two-column layout — collapses on tablet/mobile */
.category-content-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-8);
  align-items: start;
}

/* XL: 1400px */
@media (max-width: 1400px) {
  :root { --container-max: 1180px; }
  .nav-link { padding: 6px 10px; font-size: 13px; }
  .nav-link-finance { display: none; }
}

/* LG: 1200px */
@media (max-width: 1200px) {
  .header-inner { gap: var(--space-3); }
  .nav-link { padding: 6px 6px; font-size: 12px; }
  .header-search-toggle { width: 36px; height: 36px; font-size: 13px; }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu-grid { grid-template-columns: repeat(3, 1fr); }
  :root { --sidebar-width: 260px; }
}

/* MD: 992px — tablet */
@media (max-width: 992px) {
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .mobile-menu-overlay { display: flex; }
  /* Compact mobile header: all features, icon-only */
  .header-inner { gap: 6px; }
  .header-search-toggle { margin-left: auto; }
  /* Uniform small icon buttons */
  .header-search-toggle,
  .dark-mode-toggle,
  .hamburger { width: 34px; height: 34px; font-size: 13px; }
  /* Favorites: icon-only */
  .fav-header-btn { padding: 5px 7px; gap: 0; }
  .fav-header-label { display: none; }
  .fav-badge { font-size: 9px; min-width: 14px; height: 14px; padding: 0 3px; }
  /* Language: icon-only, hide label + chevron */
  .lang-switch-btn { padding: 5px 7px; gap: 0; min-width: unset; }
  .lang-switch-label,
  .lang-switch-btn .fa-chevron-down { display: none; }
  /* PWA: icon-only */
  .pwa-install-btn span { display: none; }
  .pwa-install-btn { padding: 5px 7px !important; min-width: unset !important; }

  /* Tool page: collapse sidebar below main content */
  .tool-main-layout { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
  .tool-sidebar-col { display: none; } /* hide sidebar on tablet/mobile — too cramped */
  .tool-bottom-row { grid-template-columns: 1fr; }

  /* Category page: collapse sidebar below tools */
  .category-content-grid { grid-template-columns: 1fr; }

  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* SM: 768px — large mobile */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --container-padding: 1rem;
    --space-16: 3rem;
    --space-20: 4rem;
    --space-24: 5rem;
  }

  /* Tool page spacing */
  .tool-page-wrap { padding: var(--space-5) var(--space-4); }
  .tool-interface-body { padding: var(--space-4); }
  .tool-interface-header { padding: var(--space-3) var(--space-4); }
  .tool-interface-title { font-size: var(--text-xs); letter-spacing: 0.04em; }
  .tool-title { font-size: var(--text-xl); }
  .tool-description { font-size: var(--text-sm); }

  /* Category page hero */
  .category-page-header { padding: var(--space-6) 0; }
  .category-page-icon { width: 52px; height: 52px; font-size: 20px; }

  /* General grids */
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: 1fr; }
  .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-section { min-height: 380px; padding: 48px 0 40px; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-brand-desc { max-width: 100%; }

  .cta-section { padding: var(--space-8) var(--space-5); margin: 0 auto; border-radius: 16px; }

  /* FAQ / About sections */
  .about-tool-header { padding: var(--space-4); }
  .about-tool-body { padding: var(--space-4); }
  .faq-question { padding: var(--space-4); }
  /* only reduce padding on OPEN answers — closed answers must keep padding:0 for proper collapse */
  .faq-item.open .faq-answer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .faq-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }

  /* How to Use */
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* XS: 480px — small mobile (iPhone SE etc.) */
@media (max-width: 480px) {
  :root { --container-padding: 0.875rem; }

  /* Header stays readable */
  .logo-text { font-size: var(--text-lg); }

  /* Tool page tighter padding */
  .tool-page-wrap { padding: var(--space-4) var(--space-3); }
  .tool-interface-body { padding: var(--space-3); }
  .tool-interface-header { padding: var(--space-3); }

  /* Breadcrumb wraps gracefully */
  .breadcrumb-nav { gap: var(--space-1); padding: var(--space-2) 0; }
  .breadcrumb-link span { display: none; } /* hide "Home" text, keep icon */

  /* Category page */
  .category-page-header { padding: var(--space-5) 0; }

  /* Grids */
  .categories-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .related-carousel { grid-template-columns: 1fr; }

  /* Typography */
  .hero-title { font-size: var(--text-3xl); }
  .section-title { font-size: var(--text-2xl); }

  /* Misc */
  .toast-container { bottom: 12px; right: 12px; left: 12px; max-width: none; }
  .back-to-top { bottom: 12px; right: 12px; width: 40px; height: 40px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-2); }
}

/* ================================================
   EASIFYME — DARK MODE OVERRIDES
   Applied when [data-theme="dark"] is set on <html>
   ================================================ */

[data-theme="dark"] {
  color-scheme: dark;
}

/* Header in dark mode */
[data-theme="dark"] .site-header {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .site-header.scrolled {
  background: rgba(15, 23, 42, 0.97);
}

/* Logo */
[data-theme="dark"] .logo-text { color: var(--color-text); }

/* Nav links */
[data-theme="dark"] .nav-link { color: var(--color-text-muted); }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--color-accent);
  background: rgba(59, 130, 246, 0.12);
}

/* Search */
[data-theme="dark"] .header-search-input {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .header-search-input:focus {
  background: rgba(59,130,246,0.08);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

/* Category cards */
[data-theme="dark"] .category-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .category-card:hover { border-color: transparent; }
[data-theme="dark"] .category-card-footer { border-color: var(--color-border); }

/* Tool cards */
[data-theme="dark"] .tool-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .tool-card:hover { border-color: rgba(59,130,246,0.3); }
[data-theme="dark"] .tool-card-cta { border-color: var(--color-border); }

/* Feature cards */
[data-theme="dark"] .feature-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }

/* Tool interface */
[data-theme="dark"] .tool-interface-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .tool-interface-header { background: var(--color-surface-alt); border-color: var(--color-border); }

/* Sidebar */
[data-theme="dark"] .sidebar-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .sidebar-card-header { background: var(--color-surface-alt); border-color: var(--color-border); }
[data-theme="dark"] .sidebar-tool-item:hover { background: var(--color-surface-raised); }
[data-theme="dark"] .sidebar-ad-placeholder { background: var(--color-surface-alt); border-color: var(--color-border); }

/* FAQ */
[data-theme="dark"] .faq-item { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .faq-question { background: var(--color-surface); }
[data-theme="dark"] .faq-question:hover { background: var(--color-surface-alt); }
[data-theme="dark"] .faq-answer { background: var(--color-surface); }
[data-theme="dark"] .faq-item.open { border-color: var(--color-accent); }

/* About tool */
[data-theme="dark"] .about-tool-section { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .about-tool-header:hover { background: var(--color-surface-alt); }

/* Step cards */
[data-theme="dark"] .step-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }

/* Forms */
[data-theme="dark"] .form-control {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .form-control:focus {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

/* Hero search */
[data-theme="dark"] .hero-search-input {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .hero-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(59,130,246,0.2);
}

/* Hero pills */
[data-theme="dark"] .hero-pill {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .hero-pill:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Mega menu */
[data-theme="dark"] .mega-menu {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}
[data-theme="dark"] .mega-menu-header { border-color: var(--color-border); }
[data-theme="dark"] .mega-menu-item:hover { background: var(--color-surface-raised); border-color: var(--color-border); }

/* Mobile menu */
[data-theme="dark"] .mobile-menu-overlay { background: var(--color-bg); }

/* Toasts */
[data-theme="dark"] .toast {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Search results */
[data-theme="dark"] .search-results-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
[data-theme="dark"] .search-result-item { border-color: var(--color-border); }
[data-theme="dark"] .search-result-item:hover { background: var(--color-surface-raised); }

/* Filter buttons */
[data-theme="dark"] .filter-btn {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Code */
[data-theme="dark"] code { background: var(--color-surface-raised); }
[data-theme="dark"] pre { background: var(--color-surface-alt); border-color: var(--color-border); }

/* Scrollbar */
[data-theme="dark"] { scrollbar-color: var(--color-border) transparent; }

/* Category page */
[data-theme="dark"] .category-page-header { background: var(--color-surface-alt); border-color: var(--color-border); box-shadow: none; }

/* ---- WORD COUNTER TOOL ---- */
[data-theme="dark"] .wc-textarea {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .wc-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
[data-theme="dark"] .wc-textarea::placeholder { color: var(--color-text-subtle); }

[data-theme="dark"] .wc-stat-card {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}
[data-theme="dark"] .wc-stat-card:hover { border-color: var(--color-accent); }

[data-theme="dark"] .wc-toolbar {
  border-color: var(--color-border);
}

[data-theme="dark"] .wc-limit-number-input {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .wc-limit-number-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

[data-theme="dark"] .wc-limit-section {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .wc-preset-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .wc-preset-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
[data-theme="dark"] .wc-preset-btn.active { background: var(--color-accent); border-color: var(--color-accent); }

[data-theme="dark"] .wc-limit-bar-track { background: var(--color-surface-raised); }

[data-theme="dark"] .wc-secondary-item {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .wc-keyword-table {
  border-color: var(--color-border);
}
[data-theme="dark"] .wc-keyword-table thead th {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .wc-keyword-table tbody td {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .wc-keyword-table tbody tr:hover td { background: var(--color-surface-raised); }

[data-theme="dark"] .wc-kw-bar-track { background: var(--color-surface-raised); }

/* ---- COMING SOON (GENERIC TOOL) ---- */
[data-theme="dark"] .cs-feature-chip {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .cs-notify-input {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .cs-tool-card {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}
[data-theme="dark"] .cs-tool-card:hover { border-color: var(--color-accent); }

/* ---- BREADCRUMB ---- */
[data-theme="dark"] .breadcrumb-nav { border-color: var(--color-border); }

/* ---- HOW TO USE STEPS ---- */
[data-theme="dark"] .step-card { background: var(--color-surface); border-color: var(--color-border); }

/* ---- RELATED TOOLS CAROUSEL ---- */
[data-theme="dark"] .tool-card-cta { border-color: var(--color-border); }

/* ---- FILTER BAR ---- */
[data-theme="dark"] .category-filter-bar { border-color: var(--color-border); }
[data-theme="dark"] .filter-btn { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ---- BADGES ---- */
[data-theme="dark"] .badge-new {
  background: rgba(16, 185, 129, 0.22);
  color: #34D399;
}
[data-theme="dark"] .badge-popular {
  background: rgba(245, 158, 11, 0.22);
  color: #FBBF24;
}

/* ---- HERO ENHANCEMENTS ---- */
[data-theme="dark"] .hero-dot-grid { opacity: 0.3; }
[data-theme="dark"] .hero-orb-1 { opacity: 0.3; }
[data-theme="dark"] .hero-orb-2 { opacity: 0.28; }
[data-theme="dark"] .hero-orb-3 { opacity: 0.2; }
[data-theme="dark"] .hero-fi { opacity: 0.25; }

/* Dark mode toggle ring animation */
.dark-mode-toggle .fa-sun,
.dark-mode-toggle .fa-moon {
  transition: transform var(--transition-spring), opacity var(--transition-base);
}

[data-theme="dark"] .dark-mode-toggle {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .dark-mode-toggle:hover {
  background: var(--color-surface-raised);
  color: var(--color-warning);
}

/* Step cards — stronger accent border in dark mode */
[data-theme="dark"] .step-card {
  border-top-color: #60A5FA;
}

/* ══════════════════════════════════════════════════════════
   Favorites System + Bookmark Hint
   ══════════════════════════════════════════════════════════ */

/* ── Star button on tool pages ── */
.fav-star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.fav-star-btn:hover {
    border-color: #F59E0B;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.08);
    transform: scale(1.08);
}

.fav-star-btn--active {
    border-color: #F59E0B;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
}

@keyframes fav-star-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); }
    55%  { transform: scale(0.9); }
    75%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.fav-star-btn--pop {
    animation: fav-star-pop 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Star button on tool cards ── */
.tool-card-fav-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    opacity: 0;
    margin-left: auto;
}

.tool-card:hover .tool-card-fav-btn,
.tool-card-fav-btn--active {
    opacity: 1;
}

.tool-card-fav-btn:hover,
.tool-card-fav-btn--active {
    border-color: #F59E0B;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
    transform: scale(1.1);
}

@keyframes fav-card-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); }
    70%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.tool-card-fav-btn--pop {
    animation: fav-card-pop 0.42s ease;
}

/* Ensure tool-card has position:relative for the star overlay */
.tool-card { position: relative; }

/* ── Header My Tools button ── */
.fav-wrap {
    position: relative;
}

.fav-header-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.07);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-full);
    color: #D97706;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: inherit;
}

[data-theme="dark"] .fav-header-btn {
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.fav-header-btn:hover {
    background: rgba(245, 158, 11, 0.14);
    border-color: #F59E0B;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.fav-header-btn i {
    font-size: 12px;
    color: #F59E0B;
}

.fav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #F87171;
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(248,113,113,0.35);
}

/* ── Favorites dropdown ── */
.fav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    z-index: 500;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.fav-dropdown--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fav-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fav-dropdown-header i { color: #F59E0B; }

.fav-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.fav-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.fav-empty i {
    font-size: 2rem;
    color: var(--color-border);
    display: block;
    margin-bottom: var(--space-3);
}

.fav-empty p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.fav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.fav-item:last-child { border-bottom: none; }

.fav-item:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    text-decoration: none;
}

.fav-item-star {
    font-size: 12px;
    color: #F59E0B;
    flex-shrink: 0;
}

.fav-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.fav-item-name {
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-item-cat {
    font-size: 11px;
    color: var(--color-text-muted);
}

.fav-item-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--color-text-subtle);
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    opacity: 0;
}

.fav-item:hover .fav-item-remove { opacity: 1; }
.fav-item-remove:hover { border-color: #EF4444; color: #EF4444; }

.fav-dropdown-footer {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.fav-clear-btn {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.fav-clear-btn:hover { border-color: #EF4444; color: #EF4444; }

/* ── Home page favorites section ── */
#fav-home-section {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.fav-home-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.fav-home-card-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.fav-home-card-link:hover { color: inherit; text-decoration: none; }

.fav-home-card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #F59E0B, #FCD34D);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: var(--space-3);
}

.fav-home-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 9px;
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0;
    z-index: 2;
}

.fav-home-card:hover .fav-home-remove { opacity: 1; }
.fav-home-remove:hover { border-color: #EF4444; color: #EF4444; }

/* ── PWA Install Button (header) ── */
.pwa-install-btn {
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--color-accent), #7C3AED);
    border: none;
    border-radius: var(--radius-full);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.4s ease, transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

.pwa-install-btn.visible {
    visibility: visible;
    opacity: 1;
}

.pwa-install-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.4); }
.pwa-install-btn i { font-size: 11px; }

/* ── PWA Install Modal ── */
.pwa-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pwa-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.pwa-modal {
    width: 400px;
    max-width: 92vw;
    background: var(--color-surface);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.pwa-modal-overlay.open .pwa-modal {
    transform: scale(1) translateY(0);
}

.pwa-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
    line-height: 1;
}

.pwa-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.pwa-modal-hero {
    position: relative;
    background: linear-gradient(135deg, #3B82F6, #7C3AED, #EC4899);
    padding: 40px 20px 36px;
    text-align: center;
    overflow: hidden;
}

.pwa-modal-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 80%, rgba(255,255,255,0.2) 0%, transparent 60%);
    pointer-events: none;
}

.pwa-modal-icon {
    position: relative;
    z-index: 1;
}

.pwa-modal-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-heading);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.pwa-modal-body {
    padding: 24px 28px 28px;
    text-align: center;
}

.pwa-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
    font-family: var(--font-heading);
}

.pwa-modal-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.pwa-modal-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
}

.pwa-modal-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.pwa-modal-feature i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    color: var(--color-accent);
}

.pwa-modal-install-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #3B82F6, #7C3AED);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}

.pwa-modal-install-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(59,130,246,0.4);
    filter: brightness(1.1);
}

.pwa-modal-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .pwa-modal-features {
        grid-template-columns: 1fr;
    }
    .pwa-modal-body {
        padding: 20px 20px 24px;
    }
}

/* ── Bookmark Hint ── */
.bookmark-hint {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F1F5F9;
    border-radius: 14px;
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
    transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    max-width: min(90vw, 480px);
    white-space: nowrap;
}

.bookmark-hint--visible  { bottom: 28px; }
.bookmark-hint--hiding   { bottom: -80px; transition-timing-function: ease-in; }

.bookmark-hint-icon { font-size: 16px; flex-shrink: 0; }

.bookmark-hint-text { flex: 1; white-space: normal; line-height: 1.4; }

.bookmark-hint-text strong { color: #60A5FA; font-weight: 600; }

.bookmark-hint-close {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.bookmark-hint-close:hover { color: #F1F5F9; background: rgba(255,255,255,0.12); }

/* ── Dark mode adjustments ── */
[data-theme="dark"] .fav-dropdown { box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
[data-theme="dark"] .tool-card-fav-btn { background: var(--color-bg-secondary); }
[data-theme="dark"] .fav-home-remove { background: var(--color-bg-tertiary); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .fav-header-label { display: none; }
    .fav-header-btn { padding: 6px 10px; }
    .fav-dropdown { right: auto; left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.97); width: min(300px, 90vw); }
    .fav-dropdown--open { transform: translateX(-50%) translateY(0) scale(1); }

    .bookmark-hint {
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
        bottom: -120px;
        white-space: normal;
    }
    .bookmark-hint--visible  { bottom: 16px; }
    .bookmark-hint--hiding   { bottom: -120px; }
}

@media (max-width: 480px) {
    .pwa-install-btn { padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════
   Language Switcher
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.lang-switch-wrap {
    position: relative;
}

/* ── Trigger Button ── */
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.lang-switch-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(59, 130, 246, 0.06);
}

.lang-switch-btn .fa-globe {
    font-size: 14px;
}

.lang-switch-label {
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* ── Dropdown ── */
.lang-switch-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-height: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    overflow: hidden;
    animation: lang-dropdown-in 0.2s ease-out;
}

.lang-switch-dropdown.show {
    display: block;
}

@keyframes lang-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Dropdown Header ── */
.lang-switch-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.lang-switch-dropdown-header .fa-globe {
    color: var(--color-accent);
}

/* ── Scrollable List ── */
.lang-switch-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}

.lang-switch-list::-webkit-scrollbar {
    width: 5px;
}

.lang-switch-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

/* ── Language Item ── */
.lang-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.lang-switch-item:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    text-decoration: none;
}

.lang-switch-item.active {
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-accent);
    font-weight: 600;
}

.lang-switch-native {
    flex: 1;
    font-weight: 600;
}

.lang-switch-name {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.lang-switch-item.active .lang-switch-name {
    color: var(--color-accent);
    opacity: 0.7;
}

.lang-switch-check {
    font-size: 11px;
    color: var(--color-accent);
}

/* ── Footer Language Switcher ── */
.footer-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    color: #94A3B8;
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.footer-lang-switch:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #CBD5E1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .lang-switch-label {
        display: none;
    }

    .lang-switch-btn {
        padding: 6px 8px;
    }

    .lang-switch-btn .fa-chevron-down {
        display: none;
    }

    .lang-switch-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: lang-dropdown-slide-up 0.25s ease-out;
    }

    @keyframes lang-dropdown-slide-up {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ── RTL Support ── */
[dir="rtl"] .lang-switch-dropdown {
    right: auto;
    left: 0;
}

[dir="rtl"] .lang-switch-check {
    margin-left: 0;
    margin-right: auto;
}