/* 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'
(605,24): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(606,17): run-time error CSS1039: Token not allowed after unary operator: '-easify-blue'
(643,1): run-time error CSS1019: Unexpected token, found '@import'
(643,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')'
(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 '-'
(650,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 '-'
(655,5): run-time error CSS1035: Expected colon, 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 '-'
(661,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(662,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 '-'
(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 '-'
(671,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 '-'
(677,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 '-'
(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 '-'
(692,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 '-'
(697,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 '-'
(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 '-'
(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 '-'
(710,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 '-'
(717,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 '-'
(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 '-'
(733,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 '-'
(738,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(739,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(740,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(741,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(742,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(744,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(745,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(746,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(747,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(752,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 '-'
(755,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 '-'
(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 '-'
(761,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 '-'
(764,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 '-'
(770,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(772,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(773,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(775,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(776,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(777,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(778,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(779,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(826,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(826,72): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(829,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(830,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(831,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-normal'
(832,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(833,26): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(834,37): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(834,67): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(841,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(843,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-tight'
(844,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(848,28): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(848,50): run-time error CSS1039: Token not allowed after unary operator: '-text-5xl'
(849,28): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(849,52): run-time error CSS1039: Token not allowed after unary operator: '-text-4xl'
(850,28): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(850,51): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(851,22): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(852,22): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(853,22): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(855,25): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(855,48): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(858,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(858,79): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(859,23): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(863,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(864,25): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(867,21): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(869,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(871,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(872,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-purple'
(876,21): run-time error CSS1039: Token not allowed after unary operator: '-font-mono'
(877,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(878,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(879,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(880,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(882,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(887,27): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(889,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(895,19): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(897,22): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(898,23): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(901,26): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(902,29): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(903,29): run-time error CSS1039: Token not allowed after unary operator: '-space-24'
(906,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(929,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(931,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(932,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(935,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(939,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(944,49): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(944,80): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(945,54): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(945,87): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(948,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(950,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(951,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(954,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(955,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(956,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(962,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(965,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(968,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent-hover'
(969,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(976,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(977,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(980,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(987,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(988,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(991,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(992,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(993,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(999,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1001,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(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'
(1015,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1017,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1018,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(1025,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(1026,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-dark'
(1029,20): run-time error CSS1039: Token not allowed after unary operator: '-color-success-light'
(1030,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(1033,20): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-light'
(1043,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1044,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1053,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1054,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1055,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1056,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1057,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1062,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-card-hover'
(1066,28): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1067,31): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1068,31): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1075,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1076,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1077,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1078,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1079,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1080,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1081,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1081,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1085,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1086,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(1088,42): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1096,16): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1101,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1102,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1102,66): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1102,103): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1109,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-header-line'
(1116,21): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1118,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1126,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1131,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1165,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1175,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(1177,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1179,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(1181,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1182,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1182,61): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1197,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1201,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1204,59): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1216,13): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(1220,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1221,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1222,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1223,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2xl'
(1224,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1228,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1229,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1230,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(1245,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1246,24): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1247,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(1251,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1252,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1254,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1262,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1268,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1269,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1269,32): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1270,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1272,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1277,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1278,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1283,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1296,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1298,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1307,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1308,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1320,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1321,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1322,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(1323,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1326,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1330,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1331,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1332,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(1371,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1383,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1398,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1476,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1492,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1497,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1501,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1526,38): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1576,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1617,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1634,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1655,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(1665,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1678,61): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1683,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1695,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1721,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1761,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1762,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1764,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(1773,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1774,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1775,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1780,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1781,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1782,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1829,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1830,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1832,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1834,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1835,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1835,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1838,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1839,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1871,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(1882,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1883,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1885,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1890,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1893,37): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1900,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(1902,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1905,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(1916,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1921,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1922,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1928,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1930,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1933,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1936,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1940,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(1944,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(1945,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1946,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1952,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1953,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1954,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1956,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(1957,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(1959,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1964,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(1965,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(1970,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1983,17): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(2016,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2017,24): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(2022,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2023,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(2025,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2026,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2032,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2037,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2063,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2067,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2087,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2090,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2113,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2114,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2122,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2123,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2124,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2127,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2131,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2138,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2142,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2148,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2154,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2158,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2161,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2190,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2192,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2194,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2201,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2208,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2209,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2214,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2233,32): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(2247,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(2291,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2292,8): run-time error CSS1035: Expected colon, found '{'
(2295,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2296,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2300,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2301,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2305,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2306,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2329,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2339,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2340,8): run-time error CSS1035: Expected colon, found '{'
(2408,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2409,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2413,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2414,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2418,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2419,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2498,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2499,8): run-time error CSS1035: Expected colon, found '{'
(2502,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2503,6): run-time error CSS1035: Expected colon, found '{'
(2526,36): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2527,37): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2540,30): run-time error CSS1039: Token not allowed after unary operator: '-stagger'
(2542,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2543,6): run-time error CSS1035: Expected colon, found '{'
(2569,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2571,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2572,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(2573,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2575,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2576,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2578,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2579,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2590,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2591,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2601,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2602,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2621,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2622,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2632,25): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2633,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2635,23): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2666,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2667,8): run-time error CSS1035: Expected colon, found '{'
(2682,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2683,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2690,28): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2692,15): run-time error CSS1039: Token not allowed after unary operator: '-glow-angle'
(2721,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2722,6): run-time error CSS1035: Expected colon, found '{'
(2730,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2731,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2736,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2737,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2754,47): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(2762,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2769,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2801,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2802,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2803,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2804,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2806,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(2819,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2820,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2830,59): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2834,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2836,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2837,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(2840,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2844,25): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(2844,47): run-time error CSS1039: Token not allowed after unary operator: '-text-4xl'
(2846,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2848,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2852,19): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(2853,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2856,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(2863,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2867,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2892,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2892,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2895,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2901,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2914,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(2915,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(2917,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2918,23): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(2923,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(2924,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2925,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(2933,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2933,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2934,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2941,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(2943,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2948,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(2949,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(2958,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2965,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2969,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2986,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2987,6): run-time error CSS1035: Expected colon, found '{'
(2995,15): run-time error CSS1039: Token not allowed after unary operator: '-card-glow-angle'
(3014,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3034,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3039,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3048,46): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3088,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3128,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3129,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3131,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3132,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(3133,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3136,48): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3139,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3140,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3141,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3152,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3153,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3155,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3157,21): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3158,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3165,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3169,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3170,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3171,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3172,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3174,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3175,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3180,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3181,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(3186,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3187,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(3193,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3194,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(3198,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3199,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3201,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3202,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3206,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3207,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3208,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3225,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3226,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3232,25): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3232,46): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(3234,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3235,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3241,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3242,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3246,41): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3259,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3280,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3283,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3284,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3296,19): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(3298,17): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(3298,33): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(3298,58): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3303,35): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width'
(3304,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3312,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3314,20): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3324,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3330,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3339,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3347,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3348,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3349,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3350,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3351,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3351,32): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3352,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3352,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3352,102): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3356,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3364,44): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(3364,73): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent-to'
(3374,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3376,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3389,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3390,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3398,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3404,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(3405,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3445,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3446,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3465,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3470,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3473,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3479,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3480,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3486,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3491,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3493,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3497,38): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3501,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3505,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xl'
(3507,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3513,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3518,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3521,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3525,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3539,20): run-time error CSS1039: Token not allowed after unary operator: '-tool-accent'
(3544,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3551,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3553,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3558,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3559,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3560,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3566,34): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3566,64): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3566,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3567,36): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(3567,78): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3567,112): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3567,141): run-time error CSS1039: Token not allowed after unary operator: '-leading-tight'
(3568,36): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(3568,77): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3568,108): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3568,139): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3569,35): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3569,60): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3569,98): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3569,137): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3570,57): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3570,88): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3571,36): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3571,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3571,99): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3571,138): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3572,36): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3574,117): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3575,95): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3575,122): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3575,147): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3575,185): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3576,100): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(3576,229): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3580,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3581,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3582,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3583,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3584,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3586,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3590,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3590,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3595,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3599,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3602,19): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(3604,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3607,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3612,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3613,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3616,47): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3617,64): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3623,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3623,63): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3624,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3629,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3629,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3629,47): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3633,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3635,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3636,16): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3636,33): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3642,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3643,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3644,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3645,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3649,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3650,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3651,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3652,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3653,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3658,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3659,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3660,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3661,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3662,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3664,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3667,37): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3670,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3670,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3675,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3679,43): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3682,19): run-time error CSS1039: Token not allowed after unary operator: '-text-lg'
(3684,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3687,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3692,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3693,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3696,52): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3702,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3702,63): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3703,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3708,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3708,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3713,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3715,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3722,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3724,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3728,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3732,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3735,35): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3736,54): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3739,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(3740,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(3742,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3743,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(3744,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3749,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3751,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3751,60): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3754,70): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3760,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3760,63): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow'
(3765,21): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3769,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3770,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3771,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(3776,50): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(3779,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3780,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3781,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3783,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3784,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3788,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3789,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3790,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(3794,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3796,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3801,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3804,36): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3804,51): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3811,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3812,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3812,32): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3813,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3815,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3819,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3823,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3833,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3835,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3836,21): run-time error CSS1039: Token not allowed after unary operator: '-leading-snug'
(3837,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3840,59): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3843,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(3844,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3845,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3846,17): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3848,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3852,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3853,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3861,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3862,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(3863,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3868,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3869,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3871,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3874,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(3877,38): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3881,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3885,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3886,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3894,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3897,28): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3898,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3899,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3899,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3900,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3913,31): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3917,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(3917,60): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3922,35): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(3922,58): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(3925,59): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3926,35): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3932,17): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3933,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(3934,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(3939,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3943,24): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(3952,29): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3960,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3961,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(3962,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(3968,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3974,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3975,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(3991,17): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(3991,35): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(3992,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-hero'
(3993,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3999,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(4005,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4006,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4012,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4013,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4018,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4020,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4025,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4027,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4028,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4030,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4032,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4037,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4038,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4050,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4055,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4056,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4057,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4058,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4058,32): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4059,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(4062,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4063,19): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4065,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4070,52): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4071,50): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(4072,49): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(4073,52): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(4076,42): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4077,40): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(4078,39): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(4079,42): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(4088,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4094,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4097,41): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4097,75): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4105,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4106,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(4114,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent'
(4118,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(4128,68): run-time error CSS1039: Token not allowed after unary operator: '-shadow-accent-hover'
(4145,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4213,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4214,8): run-time error CSS1035: Expected colon, found '{'
(4217,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4218,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4222,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4223,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4248,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4249,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4250,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4251,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(4281,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4282,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4287,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4288,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4294,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4295,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4295,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4297,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4298,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4303,47): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4308,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4309,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4309,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4310,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4312,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4314,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4315,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4317,45): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4325,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4326,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4327,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4328,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl'
(4339,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(4349,39): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(4349,80): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4350,43): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4350,66): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4362,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4369,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4370,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4371,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4372,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4373,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4375,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4376,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4377,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4378,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4383,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4384,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4389,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(4400,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4401,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4402,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4402,32): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4403,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4404,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(4405,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4409,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4410,8): run-time error CSS1035: Expected colon, found '{'
(4415,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4417,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4420,22): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4425,19): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4427,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4428,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4429,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(4430,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4431,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4433,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4434,31): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4435,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4439,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4440,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4444,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4445,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4450,33): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4456,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4465,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4470,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4476,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4484,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4485,19): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(4487,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4488,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(4489,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4490,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4494,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4494,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4498,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4499,30): run-time error CSS1039: Token not allowed after unary operator: '-color-accent-light'
(4502,41): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4514,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4515,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4516,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4532,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4535,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4537,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4541,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4548,29): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(4550,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(4557,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4558,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4559,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4563,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4564,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4567,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4568,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4571,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4572,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4573,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4576,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(4577,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4578,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4582,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4616,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4622,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4629,29): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4635,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4672,60): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4679,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4680,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4681,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4683,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4689,40): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(4689,68): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4689,83): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4690,41): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4690,62): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4694,82): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4697,37): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4697,68): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4700,40): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4701,42): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4701,57): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4713,76): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4716,45): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4717,27): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4720,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4720,65): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4721,38): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4729,42): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4729,72): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4730,84): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4730,105): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4740,39): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4740,60): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4743,36): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4744,39): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4744,60): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4745,62): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4748,58): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4750,34): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4754,24): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(4760,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4761,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4762,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4763,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4763,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4764,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4765,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(4767,89): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4768,46): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(4771,39): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4775,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4776,22): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4777,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4779,35): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4780,58): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4787,66): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4788,30): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4788,51): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4789,78): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4792,37): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(4794,83): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4797,71): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4804,56): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(4807,32): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(4807,47): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4810,38): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4811,61): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4813,33): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4814,50): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4823,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4828,40): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(4828,68): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4828,83): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(4829,40): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4831,33): run-time error CSS1039: Token not allowed after unary operator: '-text-base'
(4835,63): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4838,31): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(4838,56): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4842,50): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(4843,66): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4844,30): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4844,45): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(4854,33): run-time error CSS1039: Token not allowed after unary operator: '-text-3xl'
(4855,36): run-time error CSS1039: Token not allowed after unary operator: '-text-2xl'
(4860,74): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(4869,30): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4869,70): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4872,38): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4872,101): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4873,37): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4873,79): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4880,50): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4880,113): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4881,49): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4881,91): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4882,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4887,97): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4887,137): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4888,86): run-time error CSS1039: Token not allowed after unary operator: '-gradient-accent'
(4888,136): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4889,38): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4889,101): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4890,37): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4890,79): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4891,68): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4896,34): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4896,74): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4899,42): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4899,105): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4900,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4900,83): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4902,115): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4902,149): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4909,38): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4909,78): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4911,39): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4911,81): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4913,162): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4914,39): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4914,102): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4915,39): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4915,81): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4920,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(4921,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4924,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4924,68): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4931,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4936,21): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(4939,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4945,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(4946,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4957,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(4960,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(4962,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4966,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4969,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4973,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(4977,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(4979,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(4990,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light'
(4998,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5021,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5022,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5035,29): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5045,45): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5048,15): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5055,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5056,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5060,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5065,55): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5065,91): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5067,64): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5070,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5070,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5072,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5075,54): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5075,90): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5078,61): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5078,97): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5079,63): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5079,103): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5082,54): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5082,90): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5083,61): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5083,101): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5084,65): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5085,64): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5085,104): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5088,50): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5088,86): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5089,63): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5090,52): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5091,57): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5094,60): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5094,96): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5095,65): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5098,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5098,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5102,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5103,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5104,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5107,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5108,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5114,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5115,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5116,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5117,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(5120,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5121,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(5126,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5127,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5128,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5131,20): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5132,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5138,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5139,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5142,60): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5143,62): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5143,105): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5146,61): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(5150,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5151,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5157,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5158,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5161,62): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5162,66): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5166,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5167,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5171,45): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5172,44): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5172,84): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5178,62): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5178,102): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5182,20): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(5183,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5184,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5187,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5190,61): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(5193,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5194,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5196,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5199,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5203,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5204,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5205,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5208,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5213,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5214,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5218,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5219,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5220,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5222,63): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5222,91): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5223,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5223,97): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5225,60): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5228,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5229,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5233,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5236,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5237,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5238,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5241,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5242,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5244,76): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5246,57): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5250,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5251,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5252,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5255,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5256,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5257,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5260,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-alt'
(5261,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5263,62): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5266,58): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5269,51): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5269,87): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5272,57): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5275,63): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5276,52): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5276,88): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5277,59): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5277,94): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5296,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-spring'
(5296,64): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(5300,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5301,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5304,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-raised'
(5305,15): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(5331,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5348,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5367,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5368,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5370,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5373,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5392,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5414,15): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(5418,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5420,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5423,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5455,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5468,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5469,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5470,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(5489,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(5490,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5490,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5491,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5492,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5493,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5495,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5510,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(5510,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5512,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5517,17): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5519,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5523,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5524,23): run-time error CSS1039: Token not allowed after unary operator: '-leading-relaxed'
(5531,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5532,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5532,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5534,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5535,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5536,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5542,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5543,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5562,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5571,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5583,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-subtle'
(5587,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5595,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(5595,34): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5596,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5597,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5602,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(5602,34): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5604,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5605,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(5606,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5607,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5610,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5618,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5619,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5620,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5644,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(5650,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(5662,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5663,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5665,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5668,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5682,15): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(5684,46): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5686,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5688,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5691,51): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5691,86): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5729,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(5806,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5808,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(5813,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5832,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(5839,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5848,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5869,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(5898,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(5899,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary'
(5932,59): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5933,57): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-tertiary'
(5973,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-secondary'
(5974,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5975,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(5976,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(5977,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(5981,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(5985,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(5986,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6000,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6001,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6035,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6036,10): run-time error CSS1035: Expected colon, found '{'
(6046,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(6069,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6081,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(6082,21): run-time error CSS1039: Token not allowed after unary operator: '-text-sm'
(6089,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary'
(6098,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6109,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(6110,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(6114,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6119,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6137,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(6139,21): run-time error CSS1039: Token not allowed after unary operator: '-text-xs'
(6143,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(6174,1): run-time error CSS1019: Unexpected token, found '}'
(6217,14): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(6248,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(6261,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6309,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6310,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(6323,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6324,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(6335,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(6361,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(6383,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(6398,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6407,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(6411,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6422,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(6432,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(6433,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6434,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6436,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6451,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6452,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary'
(6456,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6464,24): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6465,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent'
(6489,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(6503,14): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(6576,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading'
(6627,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(6661,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg'
(6683,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6684,10): run-time error CSS1035: Expected colon, 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: 6px 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.hero-trust__item {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hero-trust__item i {
    font-size: 11px;
    opacity: 0.7;
}
.hero-trust__divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #CBD5E1;
}
[data-theme="dark"] .hero-trust__divider {
    background: #475569;
}

/* =============================================
   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: #3B82F6 transparent;
}

/* ---- Scrollbar (WebKit / Chromium) ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
@media (max-width: 768px) {
  html { scrollbar-width: auto; }
  ::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 12px;
    min-height: 50px;
  }
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3B82F6, #8B5CF6);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60A5FA, #A78BFA);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #2563EB, #7C3AED);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

::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;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo-img {
  width: 170px;
  height: auto;
  display: block;
}

/* Light/dark mode logo switching */
.site-logo-dark { display: none; }
[data-theme="dark"] .site-logo-light { display: none; }
[data-theme="dark"] .site-logo-dark { display: block; }

/* Responsive logo sizing */
@media (max-width: 768px) {
  .site-logo-img { width: 140px; }
}
@media (max-width: 480px) {
  .site-logo-img { width: 120px; }
}

/* ---- 14. MAIN NAVIGATION ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  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: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}

.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: linear-gradient(165deg, #F0F4FF 0%, #EEF0FB 30%, #F5F0FF 60%, #FFF5F9 100%);
  color: #475569;
  padding: var(--space-16) 0 0;
}

[data-theme="dark"] .site-footer {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(59,130,246,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139,92,246,.06) 0%, transparent 50%),
    linear-gradient(180deg, #0A1628 0%, #060D1A 100%);
  color: #94A3B8;
  border-top: 1px solid rgba(59,130,246,.1);
}

/* Light mode footer overrides */
[data-theme="light"] .footer-col-title { color: #334155; }
[data-theme="light"] .footer-links a { color: #475569; }
[data-theme="light"] .footer-links a:hover { color: #3B82F6; }
[data-theme="light"] .footer-social-link {
  border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); color: #64748B;
}
[data-theme="light"] .footer-newsletter-input {
  background: #fff; border-color: #e2e8f0; color: #0f172a;
}
[data-theme="light"] .footer-newsletter-input::placeholder { color: #94a3b8; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .footer-brand-desc { color: #64748B; }
[data-theme="light"] .footer-tagline { color: #0f172a; }
/* footer logo uses dark-mode image (dark footer bg) */
[data-theme="light"] .footer-grid { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .footer-newsletter-desc { color: #475569; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.1fr 1fr 1.5fr;
  gap: var(--space-8);
  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.08);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.footer-social-link:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.footer-social-link:nth-child(1):hover { background: #1DA1F2; }
.footer-social-link:nth-child(2):hover { background: #1877F2; }
.footer-social-link:nth-child(3):hover { background: #FF0000; }
.footer-social-link:nth-child(4):hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.footer-social-link:nth-child(5):hover { background: #0A66C2; }
.footer-social-link:nth-child(6):hover { background: #E60023; }

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: #94A3B8;
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col-title::before {
  content: '';
  width: 16px; height: 2px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  border-radius: 2px;
  flex-shrink: 0;
}

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

.footer-links li { margin-bottom: 2px; }

.footer-links a {
  font-size: var(--text-sm);
  color: #64748B;
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: 5px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.footer-links a::before {
  content: '';
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  transition: width 0.25s ease;
  position: absolute;
  bottom: 2px; left: 0;
}

.footer-links a:hover { color: #E2E8F0; }
.footer-links a:hover::before { width: 100%; }

.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;
  border-top: 1px solid rgba(255,255,255,0.06);
}

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

/* Footer accent + ambient glow */
.footer-accent { display: none; }
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
}
.site-footer::after {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(59,130,246,.06) 0%, transparent 70%);
  pointer-events: none;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: #E2E8F0;
  margin-top: var(--space-4);
}

/* (link + social hover styles moved to main footer section above) */

/* Footer language section */
.footer-lang-section {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-lang-switch {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #64748B;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.footer-lang-switch:hover {
  color: #CBD5E1;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}

/* ---- 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: 580px;
  display: flex;
  align-items: center;
  padding: 72px 0 80px;
  background: #FAFBFE;
  overflow: hidden;
}
[data-theme="dark"] .hero-section {
  background: var(--color-bg);
}

/* ---- Aurora ambient background ---- */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-aurora__beam {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  opacity: 0;
  animation: auroraFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.hero-aurora__beam--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
  top: -25%; right: -8%;
  animation: auroraFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards,
             auroraDrift1 18s cubic-bezier(0.77, 0, 0.175, 1) 1.4s infinite;
}
.hero-aurora__beam--2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  bottom: -18%; left: -8%;
  animation: auroraFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards,
             auroraDrift2 22s cubic-bezier(0.77, 0, 0.175, 1) 1.6s infinite;
}
.hero-aurora__beam--3 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
  top: 25%; left: 35%;
  animation: auroraFadeIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards,
             auroraDrift3 15s cubic-bezier(0.77, 0, 0.175, 1) 1.8s infinite;
}
[data-theme="dark"] .hero-aurora__beam--1 { background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); }
[data-theme="dark"] .hero-aurora__beam--2 { background: radial-gradient(circle, rgba(139, 92, 246, 0.10) 0%, transparent 70%); }
[data-theme="dark"] .hero-aurora__beam--3 { background: radial-gradient(circle, rgba(236, 72, 153, 0.06) 0%, transparent 70%); }

@keyframes auroraFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes auroraDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-30px, 25px) scale(1.05); }
  66%      { transform: translate(20px, -15px) scale(0.97); }
}
@keyframes auroraDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25px, -20px) scale(1.04); }
  66%      { transform: translate(-15px, 18px) scale(0.96); }
}
@keyframes auroraDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(15px, -20px) scale(1.08); }
}

/* ---- Floating glassmorphism shapes ---- */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-shape {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
  color: var(--color-text-muted);
  opacity: 0;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
[data-theme="dark"] .hero-shape {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(51, 65, 85, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

@keyframes shapeFadeIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Shape positions — distributed around edges, away from center content */
.hero-shape--1 {
  width: 52px; height: 52px; font-size: 18px;
  top: 4%; left: 6%;
  animation-delay: 0.6s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.6s forwards,
             shapeFloat1 8s cubic-bezier(0.77, 0, 0.175, 1) 1.6s infinite;
}
.hero-shape--2 {
  width: 44px; height: 44px; font-size: 15px;
  top: 30%; left: 3%;
  border-radius: 12px;
  animation-delay: 0.8s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.8s forwards,
             shapeFloat2 9s cubic-bezier(0.77, 0, 0.175, 1) 1.8s infinite;
}
.hero-shape--3 {
  width: 48px; height: 48px; font-size: 16px;
  top: 58%; left: 7%;
  animation-delay: 1s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 1s forwards,
             shapeFloat3 7.5s cubic-bezier(0.77, 0, 0.175, 1) 2s infinite;
}
.hero-shape--4 {
  width: 40px; height: 40px; font-size: 14px;
  bottom: 12%; left: 4%;
  border-radius: 50%;
  animation-delay: 1.1s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 1.1s forwards,
             shapeFloat1 10s cubic-bezier(0.77, 0, 0.175, 1) 2.1s infinite;
}
.hero-shape--5 {
  width: 50px; height: 50px; font-size: 17px;
  top: 3%; right: 7%;
  border-radius: 14px;
  animation-delay: 0.7s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.7s forwards,
             shapeFloat2 8.5s cubic-bezier(0.77, 0, 0.175, 1) 1.7s infinite;
}
.hero-shape--6 {
  width: 46px; height: 46px; font-size: 16px;
  top: 32%; right: 4%;
  animation-delay: 0.9s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.9s forwards,
             shapeFloat3 9.5s cubic-bezier(0.77, 0, 0.175, 1) 1.9s infinite;
}
.hero-shape--7 {
  width: 54px; height: 54px; font-size: 19px;
  top: 56%; right: 6%;
  border-radius: 50%;
  animation-delay: 1.05s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 1.05s forwards,
             shapeFloat1 7s cubic-bezier(0.77, 0, 0.175, 1) 2.05s infinite;
}
.hero-shape--8 {
  width: 42px; height: 42px; font-size: 15px;
  bottom: 10%; right: 5%;
  border-radius: 12px;
  animation-delay: 1.15s;
  animation: shapeFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) 1.15s forwards,
             shapeFloat2 8s cubic-bezier(0.77, 0, 0.175, 1) 2.15s infinite;
}

/* Each float is slightly different for organic feel */
@keyframes shapeFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-14px) rotate(3deg); }
  75%      { transform: translateY(8px) rotate(-2deg); }
}
@keyframes shapeFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(10px) rotate(-3deg); }
  70%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes shapeFloat3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(4deg); }
}

/* Gradient tints per icon shape */
.hero-shape--1 { color: #3B82F6; background: rgba(219, 234, 254, 0.55); border-color: rgba(147, 197, 253, 0.4); }
.hero-shape--2 { color: #10B981; background: rgba(209, 250, 229, 0.55); border-color: rgba(110, 231, 183, 0.4); }
.hero-shape--3 { color: #EF4444; background: rgba(254, 226, 226, 0.55); border-color: rgba(252, 165, 165, 0.4); }
.hero-shape--4 { color: #8B5CF6; background: rgba(237, 233, 254, 0.55); border-color: rgba(196, 181, 253, 0.4); }
.hero-shape--5 { color: #F59E0B; background: rgba(254, 243, 199, 0.55); border-color: rgba(253, 224, 71, 0.4); }
.hero-shape--6 { color: #06B6D4; background: rgba(207, 250, 254, 0.55); border-color: rgba(103, 232, 249, 0.4); }
.hero-shape--7 { color: #EC4899; background: rgba(252, 231, 243, 0.55); border-color: rgba(249, 168, 212, 0.4); }
.hero-shape--8 { color: #6366F1; background: rgba(224, 231, 255, 0.55); border-color: rgba(165, 180, 252, 0.4); }

[data-theme="dark"] .hero-shape--1 { color: #60A5FA; background: rgba(30, 58, 138, 0.25); border-color: rgba(59, 130, 246, 0.2); }
[data-theme="dark"] .hero-shape--2 { color: #34D399; background: rgba(6, 78, 59, 0.25);  border-color: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .hero-shape--3 { color: #F87171; background: rgba(127, 29, 29, 0.25); border-color: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .hero-shape--4 { color: #A78BFA; background: rgba(76, 29, 149, 0.25); border-color: rgba(139, 92, 246, 0.2); }
[data-theme="dark"] .hero-shape--5 { color: #FBBF24; background: rgba(120, 53, 15, 0.25); border-color: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .hero-shape--6 { color: #22D3EE; background: rgba(21, 94, 117, 0.25); border-color: rgba(6, 182, 212, 0.2); }
[data-theme="dark"] .hero-shape--7 { color: #F9A8D4; background: rgba(131, 24, 67, 0.25); border-color: rgba(236, 72, 153, 0.2); }
[data-theme="dark"] .hero-shape--8 { color: #818CF8; background: rgba(55, 48, 163, 0.25); border-color: rgba(99, 102, 241, 0.2); }

/* ---- Orbital rings ---- */
.hero-orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.06);
  opacity: 0;
  animation: orbitFadeIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.hero-orbit--1 {
  inset: 60px;
  border-color: rgba(59, 130, 246, 0.07);
  animation-delay: 0.8s;
  animation: orbitFadeIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.8s forwards,
             orbitSpin 60s linear 2.3s infinite;
}
.hero-orbit--2 {
  inset: 0;
  border-color: rgba(139, 92, 246, 0.05);
  animation-delay: 1s;
  animation: orbitFadeIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1s forwards,
             orbitSpin 80s linear 2.5s infinite reverse;
}
/* Small dot on each ring */
.hero-orbit--1::after,
.hero-orbit--2::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.hero-orbit--1::after {
  background: rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
.hero-orbit--2::after {
  background: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.25);
}
[data-theme="dark"] .hero-orbit--1 { border-color: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .hero-orbit--2 { border-color: rgba(139, 92, 246, 0.08); }

@keyframes orbitFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* Hide floating shapes on small screens — they crowd the content */
@media (max-width: 1024px) {
  .hero-shapes { display: none; }
  .hero-orbits { width: 600px; height: 600px; }
}
@media (max-width: 768px) {
  .hero-orbits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shape,
  .hero-orbit { animation: none !important; opacity: 0.6; }
  .hero-orbit--1::after,
  .hero-orbit--2::after { display: none; }
}

/* ---- Subtle grid overlay ---- */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.25;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, black 0%, transparent 100%);
  pointer-events: none;
}

/* ---- Stagger entrance animation ---- */
.hero-stagger {
  opacity: 0;
  transform: translateY(16px);
  animation: heroStaggerIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(var(--stagger, 0) * 80ms + 150ms);
}
@keyframes heroStaggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stagger {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

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

/* ---- Eyebrow badge ---- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.hero-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  animation: eyebrowPulse 2.5s ease infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 12px rgba(16, 185, 129, 0.3); }
}

/* ---- Title ---- */
.hero-title {
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}
.hero-title__accent {
  display: block;
  padding-bottom: 0.05em;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899, #8B5CF6, #3B82F6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}
[data-theme="dark"] .hero-title__accent {
  background: linear-gradient(90deg, #60A5FA, #A78BFA, #F9A8D4, #A78BFA, #60A5FA);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title__accent { animation: none; background-size: 100% 100%; }
}

/* ---- Subtitle ---- */
.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-subtitle__mobile-br { display: none; }
@media (max-width: 768px) {
  .hero-subtitle__mobile-br { display: block; }
}

/* ---- Word rotator ---- */
.hero-rotator-wrap {
  display: inline-block;
  position: relative;
}
#hero-rotator,
.hero-rotator {
  display: inline-block;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-rotator--out {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}
.hero-rotator--in {
  animation: rotatorIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes rotatorIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Search Bar — glassmorphism + glow border ---- */
.hero-search-wrap {
  position: relative;
  z-index: 10;
  max-width: 580px;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius-xl);
}
/* Rotating glow border */
.hero-search-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    #3B82F6 10%,
    #8B5CF6 20%,
    #EC4899 30%,
    transparent 40%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  animation: glowSpin 3s linear infinite;
  z-index: 0;
  filter: blur(4px);
}
.hero-search-wrap:hover::before {
  opacity: 0.45;
}
.hero-search-wrap:focus-within::before {
  opacity: 0.7;
}
/* Idle subtle shimmer — always visible but very faint */
.hero-search-wrap:not(:hover):not(:focus-within)::before {
  opacity: 0.15;
}
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glowSpin {
  to { --glow-angle: 360deg; }
}

.hero-search-input {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.05rem 1.25rem 1.05rem 3.25rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-xl);
  color: var(--color-text);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;
}
[data-theme="dark"] .hero-search-input {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(51, 65, 85, 0.6);
}

.hero-search-input:focus {
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.08),
              0 0 0 3px rgba(59, 130, 246, 0.06);
}

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

.hero-search-icon {
  position: absolute;
  z-index: 2;
  left: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 17px;
  pointer-events: none;
  transition: color 200ms ease;
}
.hero-search-input:focus ~ .hero-search-icon,
.hero-search-wrap:focus-within .hero-search-icon {
  color: var(--color-accent);
}

.hero-search-btn {
  position: absolute;
  z-index: 2;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-search-btn:hover {
  transform: translateY(-50%);
}
.hero-search-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* ---- Category Pills ---- */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  perspective: 800px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.9rem;
  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;
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              background 200ms cubic-bezier(0.23, 1, 0.32, 1),
              color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (hover: hover) and (pointer: fine) {
  .hero-pill:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  }
}
.hero-pill:active {
  transform: scale(0.97) !important;
}

/* ---- 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-5);
  padding: 4px;
}

.tool-card {
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  padding: var(--space-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  background: none;
}
/* Glow border — card-specific @property so it inherits to ::before */
@property --card-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}
.tool-card {
  animation: cardGlowAnim 3s linear infinite;
}
@keyframes cardGlowAnim {
  to { --card-glow-angle: 360deg; }
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(14px + 2px);
  background: conic-gradient(
    from var(--card-glow-angle),
    transparent 0%,
    #3B82F6 10%,
    #8B5CF6 20%,
    #EC4899 30%,
    transparent 40%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
  filter: blur(4px);
}
/* Opaque fill — sits on top of glow, behind content */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--color-surface);
  z-index: 0;
}
.tool-card > * {
  position: relative;
  z-index: 1;
}
.tool-card:hover::before {
  opacity: 0.7;
}
.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: transparent;
}

.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 #3b82f6;
    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-16) var(--container-padding) var(--space-8);
}

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

.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 — inline chips below description */
.tool-highlights-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
  justify-content: flex-end;
}

.tool-highlights-inline .tool-highlight-item {
  padding: 6px 14px 6px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  border-color: transparent;
  gap: 8px;
}

.tool-highlights-inline .tool-highlight-item:hover {
  background: rgba(59,130,246,0.06);
  border-color: transparent;
  transform: none;
}

.tool-highlights-inline .tool-highlight-icon {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.tool-highlights-inline .tool-highlight-title {
  font-size: 13px;
}


@media (max-width: 900px) {
  .tool-highlights-inline { gap: 6px; justify-content: flex-start; }
  .tool-highlights-inline .tool-highlight-title { font-size: 12px; }
}

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

.tool-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.tool-title-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  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.1);
}

.tool-title-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.tool-title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tool-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* 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 removed — tool name + star now in tool-title-row */

.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 — Card wrapper (matches About This Tool) */
.faq-card {
  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);
}

.faq-card.open { border-color: var(--color-accent); }

.faq-card-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;
}

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

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

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

.faq-card.open .faq-card-header { background: var(--color-bg-secondary); }
.faq-card.open .faq-card-toggle { transform: rotate(180deg); }

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

.faq-card.open .faq-card-body {
  max-height: 5000px;
  padding: 0 var(--space-6) var(--space-6);
}

/* FAQ items inside card — divider style, no individual borders */
.faq-item {
  border-bottom: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

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

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

.faq-question:hover { color: var(--color-accent); }
.faq-question:hover .faq-question-text { color: var(--color-accent); }

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

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

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

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

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

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

/* ---- 29b. TOOL PAGE — RELATED BLOG POSTS ---- */
.tool-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.tool-blog-card {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.tool-blog-card:hover {
  border-color: rgba(59,130,246,.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.tool-blog-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(139,92,246,.1), rgba(59,130,246,.1));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-accent); font-size: .85rem;
}
.tool-blog-info { min-width: 0; }
.tool-blog-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
  line-height: 1.35; margin-bottom: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tool-blog-card:hover .tool-blog-title { color: #3B82F6; }
.tool-blog-meta { font-size: var(--text-xs); color: var(--color-text-subtle); }

@media (max-width: 768px) {
  .tool-blog-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .tool-blog-card { padding: var(--space-3); }
  .tool-blog-icon { width: 36px; height: 36px; }
}

/* ---- 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-16) 0 var(--space-10);
  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); }

/* ---- BLOG FLOATING BUTTON (left edge) ---- */
.blog-fab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3B82F6, #7C3AED);
  color: #fff;
  font-family: var(--font-body);
  text-decoration: none;
  border-radius: 0 14px 14px 0;
  box-shadow: 4px 2px 20px rgba(59,130,246,.25);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: blogFabEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}
.blog-fab i {
  font-size: 0.9rem;
  line-height: 44px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blog-fab-glow {
  position: absolute;
  inset: -2px;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(135deg, #60A5FA, #A78BFA, #F472B6, #60A5FA);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s;
  animation: blogGlowRotate 3s linear infinite;
}
.blog-fab-label {
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

/* Hover: expand, glow, reveal label */
.blog-fab:hover {
  height: 72px;
  width: 48px;
  border-radius: 0 16px 16px 0;
  box-shadow: 6px 4px 28px rgba(124,58,237,.4), 0 0 0 3px rgba(139,92,246,.1);
  color: #fff;
  text-decoration: none;
  gap: 2px;
}
.blog-fab:hover i {
  transform: rotate(-12deg) scale(1.15);
}
.blog-fab:hover .blog-fab-glow {
  opacity: 1;
}
.blog-fab:hover .blog-fab-label {
  font-size: 0.65rem;
  opacity: 1;
  max-height: 24px;
  padding-bottom: 6px;
}

/* Subtle idle pulse */
.blog-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(59,130,246,.4);
  animation: blogFabPulse 3s ease-in-out infinite 3s;
}

@keyframes blogFabEntry {
  from { opacity: 0; left: -50px; }
  to   { opacity: 1; left: 0; }
}
@keyframes blogGlowRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes blogFabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
}

/* Dark mode */
[data-theme="dark"] .blog-fab {
  box-shadow: 4px 2px 20px rgba(59,130,246,.15);
}
[data-theme="dark"] .blog-fab:hover {
  box-shadow: 6px 4px 28px rgba(124,58,237,.3), 0 0 0 3px rgba(139,92,246,.08);
}

/* Hide on mobile & print */
@media (max-width: 767.98px) {
  .blog-fab { display: none !important; }
}
@media print {
  .blog-fab { display: none !important; }
}

/* ---- 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-dropdown-close {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 0;
  display: flex;
  justify-content: flex-end;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.search-dropdown-close i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 6px 6px 0 0;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 12px;
  transition: background 150ms ease, color 150ms ease;
}
.search-dropdown-close:hover i {
  background: var(--color-border);
  color: var(--color-text);
}

.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 */
/* ── Case Converter ── */

/* Mode buttons */
.cc-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-5);
}

.cc-mode-btn {
  padding: 0.4rem 0.85rem;
  font-size: 13px;
  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: rgba(59,130,246,0.06);
}

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

/* Title case style sub-buttons */
.cc-title-styles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  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 layout */
.cc-field { margin-bottom: var(--space-2); }

.cc-field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.cc-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.cc-field-label i {
  font-size: 12px;
  color: var(--color-accent);
}

.cc-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-subtle);
}

/* Textareas */
.cc-textarea {
  width: 100%;
  min-height: 180px;
  padding: 1rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  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: linear-gradient(135deg, rgba(59,130,246,0.03), rgba(139,92,246,0.03));
  border-style: dashed;
}

/* Toolbar */
.cc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-2);
}

.cc-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cc-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.cc-tool-btn i { font-size: 13px; }

.cc-clear-btn { color: var(--color-text-subtle); }
.cc-clear-btn:hover {
  color: var(--color-error);
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.15);
}

/* Dark mode */
[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: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(139,92,246,0.04));
  border-color: var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
  .cc-mode-btn { font-size: 11px; padding: 0.35rem 0.65rem; }
  .cc-tool-btn span { display: none; }
  .cc-tool-btn { padding: 8px 10px; }
  .cc-tool-btn i { font-size: 15px; }
  .cc-textarea { min-height: 150px; }
}

/* ---- 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 Mobile — Consistent Typography ── */

  /* Page wrap */
  .tool-page-wrap { padding: calc(var(--header-height) + 2px) var(--space-4) var(--space-6); }
  .tool-title-row { margin-bottom: var(--space-2); gap: var(--space-3); }
  .tool-title-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  .tool-title { font-size: 1.1rem; }
  .tool-title-text .fav-star-btn { width: 30px; height: 30px; font-size: 13px; }
  .tool-description { font-size: 0.75rem; line-height: 1.55; margin-bottom: var(--space-2); }
  .tool-highlight-item { padding: 5px 10px; font-size: 0.72rem; }
  .tool-highlight-icon { width: 20px; height: 20px; font-size: 10px; }
  .tool-highlights-wrap { gap: var(--space-2); margin-bottom: var(--space-3); }

  /* Tool interface card */
  .tool-interface-body { padding: var(--space-3); }
  .tool-interface-header { padding: var(--space-2) var(--space-3); }
  .tool-interface-title { font-size: 0.68rem; letter-spacing: 0.05em; }

  /* Badges — uniform small */
  .badge { font-size: 0.58rem; padding: 0.12em 0.45em; }
  .tool-card-badges .badge { font-size: 0.52rem; padding: 0.1em 0.35em; }

  /* ── Section Headings — consistent 0.95rem across all ── */
  .how-to-use-title,
  .about-tool-header h2,
  .faq-title,
  .related-tools-section h2,
  .tool-bottom-row h2 { font-size: 0.95rem !important; margin-bottom: var(--space-3); }

  /* How to Use steps */
  .how-to-use-section { margin-bottom: var(--space-4); }
  .steps-grid { gap: var(--space-2); }

  /* About & FAQ */
  .about-tool { margin-top: var(--space-4); margin-bottom: var(--space-4); }
  .faq-section { margin-bottom: var(--space-4); }
  .faq-question { font-size: 0.82rem; }

  /* Related blog posts */
  .tool-blog-title { font-size: 0.82rem; }
  .tool-blog-meta { font-size: 0.68rem; }

  /* Related tools carousel */
  .related-tools-section { padding: var(--space-5) 0; margin-top: var(--space-4); }
  .related-carousel .tool-card { min-width: 140px; max-width: 170px; padding: var(--space-3); gap: var(--space-2); text-align: center; }
  .related-carousel .tool-card-header { flex-direction: column; align-items: center; }
  .related-carousel .tool-card .badge { font-size: 0.48rem; padding: 0.08em 0.3em; }
  .related-carousel .tool-card-name { font-size: 0.72rem; }
  .related-carousel .tool-card-desc { display: none; }
  .related-carousel .tool-card-icon { width: 30px; height: 30px; font-size: 13px; }
  .related-carousel .tool-card-cta { justify-content: center; font-size: 0.62rem; }
  .carousel-nav-btn { width: 30px; height: 30px; font-size: 11px; }

  /* Popular tools + bottom row */
  .tool-bottom-row { margin-top: var(--space-5); gap: var(--space-4); }

  /* Footer — compact */
  .site-footer { padding-top: var(--space-6); }
  .footer-grid { padding-bottom: var(--space-5); gap: var(--space-4); }
  .footer-col-title { font-size: 0.6rem; margin-bottom: var(--space-3); }
  .footer-links a { font-size: 0.78rem; padding: 3px 0; }
  .footer-brand-desc { font-size: 0.78rem; }
  .footer-tagline { font-size: 0.85rem; margin-top: var(--space-3); }
  .footer-social-link { width: 32px; height: 32px; font-size: 12px; }
  .footer-bottom { padding: var(--space-3) 0; }

  /* Category page — compact hero card */
  .category-page-header {
    padding: calc(var(--header-height) + 8px) 0 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
  }
  .category-page-header .container-main > div:first-of-type {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3) !important;
    box-shadow: var(--shadow-sm);
  }
  .category-page-icon { width: 36px; height: 36px; font-size: 16px; border-radius: var(--radius-md) !important; }
  .category-page-header h1 { font-size: var(--text-base) !important; }
  .category-page-header [style*="color:var(--color-text-muted)"] {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--text-xs) !important; margin-top: 2px !important;
  }
  /* Filter bar compact */
  .category-filter-bar {
    margin-bottom: var(--space-3);
    margin-top: var(--space-2);
    gap: var(--space-2);
  }
  .filter-label { font-size: var(--text-xs); }
  .filter-btn { padding: 0.25rem 0.7rem; font-size: var(--text-xs); }

  /* Hide sidebar on mobile — categories accessible via menu */
  .category-content-grid > .sidebar-card,
  .category-content-grid aside { display: none; }

  /* Tool cards — 2 column compact grid */
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .tool-card { padding: var(--space-3); gap: var(--space-2); text-align: center; }
  .tool-card-header { flex-direction: column; align-items: center; gap: var(--space-2); }
  .tool-card-icon { width: 36px; height: 36px; font-size: 16px; }
  .tool-card-badges { justify-content: center; }
  .tool-card-name { font-size: var(--text-xs); text-align: center; }
  .tool-card-desc { display: none; }
  .tool-card-cta { justify-content: center; font-size: 0.68rem; padding-top: var(--space-1); }

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

  .hero-section { min-height: 420px; padding: 48px 0 48px; }
  .hero-grid-overlay { display: none; }

  .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 — compact padding */
  .about-tool-header { padding: var(--space-3); }
  .about-tool-section.open .about-tool-body { padding: var(--space-3); }
  .about-tool-body p, .about-tool-body li { font-size: 0.8rem; }
  .faq-question { padding: var(--space-3) 0; }
  .faq-item.open .faq-answer { padding: 0 0 var(--space-3); }
  .faq-answer p, .faq-answer li { font-size: 0.8rem; }

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

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

  /* Logo responsive sizing handled in logo section */

  /* Tool page tighter padding */
  .tool-page-wrap { padding: calc(var(--header-height) + 2px) var(--space-3) var(--space-5); }
  .tool-interface-body { padding: var(--space-2); }
  .tool-title-icon { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
  .tool-title { font-size: var(--text-base); }
  .tool-description { font-size: 0.72rem; }
  .related-carousel .tool-card { min-width: 160px; max-width: 180px; }
  .how-step { padding: 16px 12px; }
  .footer-col-title { font-size: 0.62rem; margin-bottom: 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-top: calc(var(--header-height) + 4px); padding-bottom: 0; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .tool-card { padding: var(--space-2) var(--space-3); }
  .tool-card-icon { width: 32px; height: 32px; font-size: 14px; }

  /* Grids */
  .categories-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .steps-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); }
}

/* ═══════════════════════════════════════════
   HOMEPAGE — NEW CONTENT SECTIONS
   ═══════════════════════════════════════════ */

/* ── Why EasifyMe Grid ── */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 28px 24px; transition: all 0.3s ease; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.why-card__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 18px; }
.why-card__title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.why-card__desc { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } }

/* ── Stats Bar ── */
.stats-bar { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-number { display: block; font-family: var(--font-heading); font-size: 40px; font-weight: 900; color: var(--color-accent); letter-spacing: -1px; line-height: 1.1; }
.stat-label { display: block; font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; font-weight: 500; }
.stat-divider { width: 1px; height: 48px; background: var(--color-border); flex-shrink: 0; }
@media (max-width: 640px) { .stats-bar { gap: 24px; } .stat-number { font-size: 32px; } .stat-divider { height: 36px; } }

/* ── How It Works ── */
.how-steps { display: flex; align-items: flex-start; justify-content: center; gap: 20px; }
.how-step { flex: 1; max-width: 280px; text-align: center; padding: 28px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; }
.how-step__number { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-accent); color: #fff; font-family: var(--font-heading); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.how-step__title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.how-step__desc { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }
.how-step__arrow { display: flex; align-items: center; color: var(--color-text-muted); font-size: 18px; padding-top: 50px; }
@media (max-width: 768px) { .how-steps { flex-direction: column; align-items: center; gap: 12px; } .how-step__arrow { display: none; } .how-step { max-width: 100%; padding: 20px 16px; } .how-step__number { width: 36px; height: 36px; font-size: 15px; margin-bottom: 10px; } .how-step__title { font-size: 15px; } .how-step__desc { font-size: 13px; } }

/* ── Use Cases Grid ── */
.usecases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.usecase-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 28px 24px; transition: all 0.3s ease; }
.usecase-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.usecase-card__emoji { font-size: 36px; margin-bottom: 14px; }
.usecase-card__title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.usecase-card__desc { font-family: var(--font-body); font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 14px; }
.usecase-card__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.usecase-card__tools a { display: inline-block; padding: 4px 12px; background: rgba(59,130,246,0.06); color: var(--color-accent); font-family: var(--font-body); font-size: 12px; font-weight: 600; border-radius: 999px; text-decoration: none; transition: background 0.2s; }
.usecase-card__tools a:hover { background: rgba(59,130,246,0.12); text-decoration: none; }
@media (max-width: 900px) { .usecases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .usecases-grid { grid-template-columns: 1fr; } }

/* ── Testimonials ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 28px 24px; }
.testimonial-stars { color: #F59E0B; font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-text { font-family: var(--font-body); font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; font-style: italic; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-heading); font-size: 16px; font-weight: 700; flex-shrink: 0; }
.testimonial-name { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--color-text); }
.testimonial-role { font-family: var(--font-body); font-size: 12px; color: var(--color-text-muted); }
@media (max-width: 768px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ── Homepage FAQ (details-based, scoped to avoid tool page conflicts) ── */
details.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
details.faq-item:hover {
  border-color: rgba(59,130,246,0.2);
  box-shadow: 0 2px 12px rgba(59,130,246,0.06);
}
details.faq-item[open] {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(59,130,246,0.1);
}
details.faq-item .faq-question {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color var(--transition-fast);
}
details.faq-item .faq-question::-webkit-details-marker { display: none; }
details.faq-item .faq-question::after {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
details.faq-item:hover .faq-question::after {
  background: rgba(59,130,246,0.08);
  color: var(--color-accent);
}
details.faq-item[open] .faq-question {
  color: var(--color-accent);
}
details.faq-item[open] .faq-question::after {
  content: '\2212';
  background: var(--color-accent);
  color: #fff;
}
details.faq-item .faq-answer {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
  max-height: none;
  overflow: visible;
  margin: 0 24px;
  padding: 0 0 20px;
}
details.faq-item .faq-answer::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--color-border-light);
  margin-bottom: 16px;
}
[data-theme="dark"] details.faq-item:hover {
  border-color: rgba(59,130,246,0.25);
  box-shadow: 0 2px 12px rgba(59,130,246,0.08);
}
[data-theme="dark"] details.faq-item[open] {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(59,130,246,0.12);
}

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

/* Smooth theme transition — only active during toggle, not on page load */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease,
              box-shadow 0.3s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* Logo punch animation during theme switch */
.theme-transitioning .site-logo-img {
  animation: logoPunch 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes logoPunch {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.15) rotate(-3deg); }
  60%  { transform: scale(0.95) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

[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 */
/* logo switching handled in site.css via .site-logo-light / .site-logo-dark */

/* 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 card */
[data-theme="dark"] .faq-card { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .faq-card-header:hover { background: var(--color-surface-alt); }
[data-theme="dark"] .faq-item { border-color: var(--color-border); }
[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 */
/* Scrollbar dark mode handled in site.css */

/* 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; }
/* hero aurora dark mode handled in site.css */

/* 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: rgba(245, 158, 11, 0.06);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-radius: 50%;
    color: #D97706;
    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 {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 18px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    object-fit: contain;
}

.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% + 10px);
    right: 0;
    width: 300px;
    max-height: 420px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.07),
        0 12px 40px -4px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    z-index: 9999;
    overflow: hidden;
    animation: lang-dropdown-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .lang-switch-dropdown {
    background: #1a2235;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 12px 40px -4px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}
.lang-switch-dropdown.show { display: block; }

/* Arrow pointer */
.lang-switch-dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 16px;
    width: 14px;
    height: 14px;
    background: #3B82F6;
    border: none;
    transform: rotate(45deg);
    z-index: 1;
}

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

/* ── Dropdown Header ── */
.lang-switch-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    border-bottom: none;
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    letter-spacing: 0.01em;
}
.lang-switch-dropdown-header .fa-globe {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
}

/* ── Scrollable List ── */
.lang-switch-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.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: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
}
.lang-switch-item:hover {
    background: rgba(59, 130, 246, 0.06);
    color: var(--color-text-primary);
    text-decoration: none;
    transform: translateX(2px);
}
[data-theme="dark"] .lang-switch-item:hover {
    background: rgba(59, 130, 246, 0.12);
}
.lang-switch-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08));
    color: var(--color-accent);
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .lang-switch-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.12));
    border-color: rgba(59, 130, 246, 0.3);
}
.lang-switch-item:not(.active) { border: 1px solid transparent; }
.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);
    background: rgba(59, 130, 246, 0.1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 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 {
        right: auto;
        width: calc(100vw - 32px);
        max-width: 360px;
        max-height: 60vh;
        /* JS sets 'left' to center on screen */
    }
    .lang-switch-dropdown.show {
        animation: lang-dropdown-in-mobile 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes lang-dropdown-in-mobile {
        from { opacity: 0; transform: translateY(-8px) scale(0.97); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .lang-switch-dropdown::before {
        display: none;
    }
    .lang-switch-item { padding: 13px 14px; }
}

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

/* ════════════════════════════════════════════════════════════════════════
   _easify-dropzone.css
   ------------------------------------------------------------------------
   Shared file-upload dropzone used by every image tool (resizer,
   compressor, converters). Originally extracted from image-resizer.css.

   Class prefix: .ezdz  (no tool-specific namespace)
   Markup is rendered by Views/Tools/Shared/_EasifyDropzone.cshtml

   Features:
     - Dashed indigo border
     - Ruler grid background + dual radial brand glows
     - Slow aurora light sweep across the surface (::before)
     - Floating gradient cloud icon (autonomous animation)
     - Hover lift + glow shadow
     - Drag-over: solid border, scale, outer glow ring, icon bounce
     - Optional eyebrow pill, format pills, green privacy hint
     - Drop-landing overlay (image preview + checkmark, JS injected)
     - Dark mode + mobile responsive
   ════════════════════════════════════════════════════════════════════════ */

.ezdz {
    position: relative;
    padding: 80px 40px 64px;
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    background:
        /* Subtle ruler grid pattern */
        linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px) 0 0 / 100% 40px,
        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px) 0 0 / 40px 100%,
        /* Soft brand glow */
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(59,130,246,0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139,92,246,0.05), transparent 70%),
        var(--color-surface);
    border: 2px dashed rgba(59,130,246,0.4);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 12px 32px -16px rgba(59,130,246,0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s,
                background 0.3s;
}

/* Aurora sweep — slow gradient light moving across the dropzone */
.ezdz::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(59,130,246,0.06) 35%,
        rgba(139,92,246,0.08) 50%,
        rgba(236,72,153,0.06) 65%,
        transparent 100%
    );
    pointer-events: none;
    animation: ezdz-aurora 6s ease-in-out infinite;
    z-index: 1;
}
@keyframes ezdz-aurora {
    0%, 100% { left: -60%; }
    50%      { left: 100%; }
}

.ezdz:hover {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.4);
    box-shadow:
        0 4px 8px rgba(15,23,42,0.05),
        0 24px 48px -16px rgba(59,130,246,0.3);
}
.ezdz.is-dragover {
    border-color: var(--color-accent);
    transform: scale(1.005);
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.15),
        0 24px 48px -12px rgba(59,130,246,0.4);
}

.ezdz__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Ensure content sits above the aurora sweep */
.ezdz__title,
.ezdz__sub,
.ezdz__formats,
.ezdz__hint,
.ezdz__error,
.ezdz__icon,
.ezdz__eyebrow {
    position: relative;
    z-index: 2;
}

/* ── Icon: gradient tile with cloud-arrow / layer-group ───────────── */
.ezdz__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow:
        0 12px 32px -8px rgba(99,102,241,0.5),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
    animation: ezdz-icon-float 3s ease-in-out infinite;
}
@keyframes ezdz-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.ezdz:hover .ezdz__icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 18px 40px -8px rgba(99,102,241,0.6),
        inset 0 1px 0 rgba(255,255,255,0.3);
    animation-play-state: paused;
}
.ezdz.is-dragover .ezdz__icon {
    animation: ezdz-icon-bounce 0.6s ease-in-out infinite;
}
@keyframes ezdz-icon-bounce {
    0%, 100% { transform: scale(1.15) translateY(0); }
    50%      { transform: scale(1.15) translateY(-4px); }
}

/* ── Landing preview overlay (shown briefly when image is dropped) ── */
.ezdz__landing {
    position: absolute;
    inset: 16px;
    z-index: 20;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.25),
        0 24px 60px -12px rgba(59,130,246,0.5);
    pointer-events: none;
}
.ezdz__landing.is-visible {
    opacity: 1;
    transform: scale(1);
}
.ezdz__landing img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: ezdz-landing-img 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ezdz-landing-img {
    0%   { transform: scale(0.6) translateY(-30px); opacity: 0; }
    60%  { transform: scale(1.05) translateY(0);    opacity: 1; }
    100% { transform: scale(1) translateY(0);       opacity: 1; }
}
/* Success checkmark badge that pops in */
.ezdz__landing-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 24px rgba(16,185,129,0.5);
    animation: ezdz-landing-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes ezdz-landing-check {
    0%   { transform: scale(0)   rotate(-90deg); opacity: 0; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

/* ── Eyebrow label (small uppercase pill above title) ──────────────── */
.ezdz__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Title with gradient accent ────────────────────────────────────── */
.ezdz__title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin-bottom: 8px;
}
.ezdz__accent {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ezdz__sub {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}
.ezdz__sub kbd {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 1px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--color-border);
}

/* ── Format badges row ─────────────────────────────────────────────── */
.ezdz__formats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 22px;
}
.ezdz__fmt {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s;
}
.ezdz:hover .ezdz__fmt {
    border-color: rgba(99,102,241,0.25);
}
.ezdz__fmt:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(59,130,246,0.05);
}

/* ── Privacy hint pill ─────────────────────────────────────────────── */
.ezdz__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    color: #059669;
    font-size: 11px;
    font-weight: 600;
}
.ezdz__hint i { font-size: 10px; }
[data-theme="dark"] .ezdz__hint {
    background: rgba(16,185,129,0.12);
    color: #34D399;
}

.ezdz__error {
    color: var(--color-error);
    font-size: 12px;
    font-weight: 600;
    margin-top: 14px;
    min-height: 18px;
}

/* ── Dark mode ─────────────────────────────────────────────────────── */
[data-theme="dark"] .ezdz {
    background:
        linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px) 0 0 / 100% 40px,
        linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px) 0 0 / 40px 100%,
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(59,130,246,0.10), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139,92,246,0.08), transparent 70%),
        var(--color-surface);
}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ezdz { padding: 56px 20px 40px; border-radius: 20px; }
    .ezdz__icon { width: 68px; height: 68px; font-size: 26px; border-radius: 20px; margin-bottom: 20px; }
    .ezdz__title { font-size: 20px; }
    .ezdz__sub { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════════
   tool-focus-mode.css
   ------------------------------------------------------------------------
   Shared "fullscreen tool editor" pattern. When a tool enters focus mode,
   the rest of the page (header, footer, breadcrumbs, FAQ, etc.) is hidden
   and the tool fills the viewport. An "Editor Header" bar at the top
   shows the tool name + filename + Exit button.

   Markup contract:
     - Each tool has a wrapper element with class .tool-shell
       (e.g. <div class="rsz-tool tool-shell" id="rsz-tool">)
     - JS adds class .ezfm-active to <html> + <body> when entering focus
     - JS physically moves the .tool-shell element to be a direct child
       of <body> so the sibling-hide selector works without breaking
       intermediate layout containers
     - The Exit Editing button uses class .ezfm-exit-btn
     - The Editor Header uses class .ezfm-header (rendered by
       Views/Tools/Shared/_EditorHeader.cshtml)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Editor Header bar (visible only while editing) ───────────────────── */
.ezfm-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
    border: 1px solid rgba(99,102,241,0.2);
    box-shadow: 0 4px 20px rgba(15,23,42,0.15);
    color: #fff;
    flex-wrap: wrap;
}
.tool-shell.has-workspace .ezfm-header { display: flex; }

.ezfm-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ezfm-header__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3B82F6, #6366F1, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(59,130,246,0.4);
}
.ezfm-header__text {
    min-width: 0;
    flex: 1;
}
.ezfm-header__title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.2;
}
.ezfm-header__sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.ezfm-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ezfm-header__privacy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    color: #34D399;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ezfm-header__privacy i { font-size: 10px; }

/* ── Exit Editing button ───────────────────────────────────────────── */
.ezfm-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.ezfm-exit-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.ezfm-exit-btn i { font-size: 13px; }

/* ── Focus mode (fullscreen) ───────────────────────────────────────── */
html.ezfm-active,
body.ezfm-active {
    overflow: hidden !important;
    height: 100vh !important;
}
/* Hide every direct body child except the tool shell, scripts/styles */
body.ezfm-active > *:not(.tool-shell):not(script):not(style):not(noscript) {
    display: none !important;
}
/* Hide the custom site scrollbar overlay when in focus mode */
body.ezfm-active .scroll-track,
body.ezfm-active .scroll-progress {
    display: none !important;
}
body.ezfm-active > .tool-shell {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg);
    padding: 24px 32px 110px;
    margin: 0;
    max-width: none;
    width: 100vw;
    height: 100vh;
    animation: ezfm-focus-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* Hide the tool's own scrollbar, keep scroll functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.ezfm-active > .tool-shell::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}
body.ezfm-active > .tool-shell::-webkit-scrollbar-thumb,
body.ezfm-active > .tool-shell::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}
@keyframes ezfm-focus-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
    body.ezfm-active > .tool-shell { padding: 16px 12px 100px; }
}

@media (max-width: 640px) {
    .ezfm-header {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 14px;
        margin-bottom: 12px;
    }
    .ezfm-header__icon { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
    .ezfm-header__title { font-size: 14px; }
    .ezfm-header__sub { font-size: 11px; max-width: 160px; }
    .ezfm-header__privacy span { display: none; }
    .ezfm-header__privacy { padding: 6px 8px; }
    .ezfm-exit-btn span { display: none; }
    .ezfm-exit-btn { padding: 9px 11px; }
}