@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}@config{content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}"],}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background-color:#fafafa}.App{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 20px}.section{padding:80px 0}.section-title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:20px;color:#2c3e50}.section-subtitle{text-align:center;font-size:1.1rem;color:#7f8c8d;margin-bottom:60px;max-width:600px;margin-left:auto;margin-right:auto}.btn{display:inline-block;padding:12px 30px;border:none;border-radius:50px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#3498db,#2ecc71);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #3498db4d}.btn-outline{background:transparent;color:#3498db;border:2px solid #3498db}.btn-outline:hover{background:#3498db;color:#fff}@media (max-width: 768px){.section{padding:60px 0}.section-title{font-size:2rem}.container{padding:0 15px}}.screenshot-blocked{background-color:#000!important;color:#000!important}.screenshot-blocked *{background-color:#000!important;color:#000!important;text-shadow:none!important}.screenshot-blocked img{filter:brightness(0)!important}.screenshot-blocked canvas{filter:brightness(0)!important}.splash-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center;z-index:9999}.splash-logo{width:160px;height:160px;object-fit:contain}@media (min-width: 768px){.splash-logo{width:200px;height:200px}}.home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#f8f9fa;text-align:center}.header{position:fixed;top:0;left:0;right:0;height:70px;--header-height: 80px;background:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;transition:all .3s ease;padding:15px 0}.Loginbtn{background:linear-gradient(135deg,#3498db,#2ecc71);border:none;color:#fff;padding:8px 16px;border-radius:20px;font-weight:600;cursor:pointer;transition:background .3s ease}.header.scrolled{background:#fffffffa;box-shadow:0 2px 20px #0000001a;padding:10px 0}.header-content{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;color:#2c3e50}.logo img{height:50px;width:auto}.nav{display:flex;gap:30px}.nav a{text-decoration:none;color:#2c3e50;font-weight:500;transition:color .3s ease;position:relative}.nav a:hover{color:#3498db}.nav a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:linear-gradient(135deg,#3498db,#2ecc71);transition:width .3s ease}.nav a:hover:after{width:100%}.mobile-menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:5px}.mobile-menu-btn span{width:25px;height:3px;background:#2c3e50;transition:all .3s ease}@media (max-width: 768px){.nav{position:fixed;top:80px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:0 5px 20px #0000001a;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease}.nav.nav-open{transform:translateY(0);opacity:1;visibility:visible}.mobile-menu-btn{display:flex}.logo span{display:none}}.hero{padding:120px 0 80px;background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 50%,#a8edea 75%,#fed6e3);min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:5}.hero-text h1{font-size:2.5rem;font-weight:800;line-height:1.2;color:#2c3e50;margin-top:31px;margin-bottom:24px}.hero-text p{font-size:1.2rem;color:#7f8c8d;margin-bottom:40px;line-height:1.8}.hero-buttons{display:flex;gap:20px;flex-wrap:wrap}.hero-image-container{position:relative;display:flex;justify-content:center}.hero-image img{width:100%;max-width:500px;height:400px;border-radius:20px;box-shadow:0 20px 40px #0000001a}.floating-elements{position:absolute;inset:0;pointer-events:none}.floating-note{position:absolute;font-size:2.5rem;animation:enhancedFloat 3s ease-in-out infinite;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.note-1{top:20%;left:10%;animation-delay:0s;color:#ff6b6b}.note-2{top:60%;right:15%;animation-delay:1s;color:#4ecdc4}.note-3{bottom:20%;left:20%;animation-delay:2s;color:#45b7d1}.ribbon-left,.ribbon-center,.ribbon-right{position:absolute;top:10px;width:200px;height:60px;background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;box-shadow:0 4px 8px #dc35454d;z-index:10;overflow:hidden;margin-top:10px}.ribbon-left{left:0;transform-origin:top left;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}.ribbon-center{left:50%;transform:translate(-50%);transform-origin:top center;width:350px;padding:0 30px;border-radius:15px;font-size:.9rem;font-weight:700;letter-spacing:1px;white-space:nowrap}.ribbon-right{right:0;transform-origin:top right;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}.ribbon-left:before,.ribbon-center:before,.ribbon-right:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 75%,transparent 75%);background-size:20px 20px;animation:ribbon-shine 2s linear infinite}.ribbon-left span,.ribbon-center span .ribbon-right span{position:center;margin-top:15px;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.3)}.musical-background{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.animated-instrument{position:absolute;font-size:2.5rem;animation:instrumentFloat 4s ease-in-out infinite;opacity:.7}.piano{top:15%;left:5%;animation-delay:0s;animation-duration:3s}.guitar{top:25%;right:8%;animation-delay:.5s;animation-duration:3.5s}.violin{bottom:30%;left:8%;animation-delay:1s;animation-duration:4s}.trumpet{top:45%;left:3%;animation-delay:1.5s;animation-duration:3.2s}.drums{bottom:15%;right:5%;animation-delay:2s;animation-duration:3.8s}.microphone{top:60%;right:12%;animation-delay:2.5s;animation-duration:3.3s}.bouncing-notes{position:absolute;width:100%;height:100%}.bouncing-note{position:absolute;font-size:1.8rem;animation:bounce 2s ease-in-out infinite;color:#ff6b6b}.note-bounce-1{top:20%;left:15%;animation-delay:0s;color:#ff6b6b}.note-bounce-2{top:35%;left:25%;animation-delay:.3s;color:#4ecdc4}.note-bounce-3{top:50%;left:10%;animation-delay:.6s;color:#45b7d1}.note-bounce-4{top:25%;right:20%;animation-delay:.9s;color:#f9ca24}.note-bounce-5{top:40%;right:30%;animation-delay:1.2s;color:#6c5ce7}.note-bounce-6{bottom:25%;left:20%;animation-delay:1.5s;color:#fd79a8}.note-bounce-7{bottom:35%;right:25%;animation-delay:1.8s;color:#00b894}.note-bounce-8{bottom:45%;left:35%;animation-delay:2.1s;color:#e17055}.colorful-circles{position:absolute;width:100%;height:100%}.circle{position:absolute;border-radius:50%;animation:circleFloat 6s ease-in-out infinite;opacity:.3}.circle-1{width:60px;height:60px;background:linear-gradient(45deg,#ff9a9e,#fecfef);top:10%;left:70%;animation-delay:0s}.circle-2{width:40px;height:40px;background:linear-gradient(45deg,#a8edea,#fed6e3);top:70%;left:80%;animation-delay:1s}.circle-3{width:80px;height:80px;background:linear-gradient(45deg,#ffecd2,#fcb69f);bottom:20%;right:10%;animation-delay:2s}.circle-4{width:50px;height:50px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);top:30%;left:5%;animation-delay:3s}.circle-5{width:70px;height:70px;background:linear-gradient(45deg,#ffd3a5,#fd9853);bottom:40%;right:5%;animation-delay:4s}.music-waves{position:absolute;bottom:0;left:0;width:100%;height:100px}.wave{position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:waveMove 3s ease-in-out infinite}.wave-1{animation-delay:0s}.wave-2{animation-delay:1s}.wave-3{animation-delay:2s}@keyframes instrumentFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(5deg)}50%{transform:translateY(-10px) rotate(-3deg)}75%{transform:translateY(-20px) rotate(3deg)}}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-25px) scale(1.1)}}@keyframes circleFloat{0%,to{transform:translateY(0) translate(0)}33%{transform:translateY(-20px) translate(10px)}66%{transform:translateY(-10px) translate(-10px)}}@keyframes waveMove{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes enhancedFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(10deg)}}@keyframes ribbon-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (max-width: 768px){.hero{padding:100px 0 60px}.hero-content{grid-template-columns:1fr;gap:40px;text-align:center}.hero-text h1{margin-top:15%;font-size:2.5rem}.hero-text p{font-size:1.1rem}.hero-buttons{justify-content:center}.hero-image-container img{width:100%;height:100%}.ribbon-left,.ribbon-right{width:150px;height:50px;font-size:.8rem}.animated-instrument{font-size:2rem}.bouncing-note{font-size:1.5rem}.circle{transform:scale(.7)}.floating-note{font-size:2rem}.ribbon-center{display:none}}@media (max-width: 480px){.ribbon-left,.ribbon-right{width:160px;height:40px;font-size:.7rem}.animated-instrument{font-size:1.5rem}.bouncing-note{font-size:1.2rem}.circle{transform:scale(.5)}}.about{background:linear-gradient(135deg,#d0f0fd,#b3e5fc,#81d4fa,#4fc3f7,#29b6f6);position:relative;overflow:hidden;padding:80px 0}.about-content{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}.about-image{position:relative;z-index:6}.about-image img{width:80%;height:auto;margin-top:100px;border-radius:20px;box-shadow:0 20px 40px #00000026;transition:transform .3s ease}.about-image img:hover{transform:scale(1.05)}.about-text{position:relative;z-index:6}.about-text .section-title{text-align:center;margin-bottom:30px;font-size:2.5rem;font-weight:800;color:#2c3e50;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.about-intro{font-size:1.2rem;color:#34495e;margin-bottom:40px;line-height:1.8;background:#ffffffe6;padding:20px;border-radius:15px;box-shadow:0 8px 25px #0000001a;border-left:4px solid #ff6b6b}.about-details{margin-bottom:40px}.detail-item{display:flex;align-items:flex-start;gap:20px;margin-bottom:30px;background:#fffffff2;padding:20px;border-radius:15px;box-shadow:0 8px 25px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.detail-item:hover{transform:translateY(-5px);box-shadow:0 15px 35px #00000026}.detail-icon{font-size:2.5rem;flex-shrink:0;background:linear-gradient(135deg,#acd3fc,#bbc9e2);padding:15px;border-radius:10%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px #ff6b6b4d;animation:iconPulse 2s ease-in-out infinite}.detail-content h4{font-size:1.3rem;font-weight:600;color:#2c3e50;margin-bottom:8px}.detail-content p{color:#7f8c8d;line-height:1.6}.qualifications{background:#fffffff2;padding:30px;border-radius:20px;border-left:6px solid #4ecdc4;box-shadow:0 15px 35px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.qualifications h3{font-size:1.4rem;color:#2c3e50;margin-bottom:20px;font-weight:700}.qualifications ul{list-style:none}.qualifications li{color:#34495e;position:relative;padding:12px 0 12px 35px;font-weight:500;transition:color .3s ease}.qualifications li:hover{color:#2c3e50}.qualifications li:before{content:"✓";position:absolute;left:0;color:#2ecc71;font-weight:700;font-size:1.2rem;background:#2ecc711a;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center}.about-musical-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.about-note{position:absolute;font-size:2rem;opacity:.4;animation:aboutFloat 5s ease-in-out infinite}.about-note-1{top:15%;left:8%;color:#ff6b6b;animation-delay:0s}.about-note-2{top:25%;right:10%;color:#4ecdc4;animation-delay:1s}.about-note-3{bottom:35%;left:12%;color:#45b7d1;animation-delay:2s}.about-note-4{top:60%;right:15%;color:#f9ca24;animation-delay:3s}.about-note-5{bottom:20%;right:8%;color:#6c5ce7;animation-delay:4s}.about-note-6{top:40%;left:5%;color:#fd79a8;animation-delay:2.5s}.about-floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.about-circle{position:absolute;border-radius:50%;animation:aboutCircleFloat 8s ease-in-out infinite;opacity:.2}.about-circle-1{width:80px;height:80px;background:linear-gradient(45deg,#ff9a9e,#fecfef);top:20%;right:5%;animation-delay:0s}.about-circle-2{width:60px;height:60px;background:linear-gradient(45deg,#a8edea,#fed6e3);bottom:30%;left:3%;animation-delay:2s}.about-circle-3{width:100px;height:100px;background:linear-gradient(45deg,#ffecd2,#fcb69f);top:50%;right:3%;animation-delay:4s}.about-circle-4{width:70px;height:70px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);bottom:15%;left:8%;animation-delay:6s}@keyframes aboutFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(-10px) rotate(-3deg)}}@keyframes aboutCircleFloat{0%,to{transform:translateY(0) translate(0) scale(1)}25%{transform:translateY(-15px) translate(10px) scale(1.1)}50%{transform:translateY(-25px) translate(-5px) scale(.9)}75%{transform:translateY(-10px) translate(15px) scale(1.05)}}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (max-width: 768px){.about{padding:60px 0}.about-content{grid-template-columns:1fr;gap:40px}.about-image{display:flex;justify-content:center}.about-text .section-title{text-align:center;font-size:2rem}.detail-item{flex-direction:column;text-align:center;gap:15px}.about-intro{font-size:1.1rem;padding:15px}.detail-item{padding:15px}.qualifications{padding:20px}.about-note{font-size:1.5rem}.about-circle{transform:scale(.7)}}@media (max-width: 480px){.about-text .section-title{font-size:1.8rem}.about-intro{font-size:1rem}.detail-content h4{font-size:1.1rem}.qualifications h3,.about-note{font-size:1.2rem}.about-circle{transform:scale(.5)}}.our-outlook{padding:100px 0;position:relative;overflow:hidden}.our-outlook .section-title{justify-content:center;font-size:2.5rem;font-weight:800;color:#2c3e50;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.our-outlook .section-subtitle{text-align:center;font-size:1.3rem;color:#7f8c8d;margin-bottom:80px;max-width:800px;margin-left:auto;margin-right:auto;line-height:1.6}.philosophy-content{position:relative;z-index:2}.philosophy-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:60px;max-width:1200px;margin:0 auto}.pillar{text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:25px;padding:50px 30px;border:1px solid rgba(255,255,255,.2);box-shadow:0 15px 35px #0000001a;transition:all .3s ease;position:relative;overflow:hidden}.pillar:hover{transform:translateY(-10px);box-shadow:0 25px 50px #00000026}.pillar:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#fffc,#14dbffc9);border-radius:25px;z-index:-1}.pillar-icon{margin-bottom:30px;position:relative}.icon-circle{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;margin:0 auto;position:relative;transition:all .3s ease;animation:gentle-pulse 3s ease-in-out infinite}.explore-icon .icon-circle{background:linear-gradient(135deg,#2ecc71,#27ae60);border:4px solid #2ecc71;box-shadow:0 10px 30px #2ecc714d}.enrich-icon .icon-circle{background:linear-gradient(135deg,#3498db,#2980b9);border:4px solid #3498db;box-shadow:0 10px 30px #3498db4d}.excel-icon .icon-circle{background:linear-gradient(135deg,#e74c3c,#c0392b);border:4px solid #e74c3c;box-shadow:0 10px 30px #e74c3c4d}.pillar:hover .icon-circle{transform:scale(1.1) rotate(5deg)}.pillar-title{font-size:1.8rem;font-weight:700;color:#2c3e50;margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.1);letter-spacing:2px}.pillar-description{font-size:1.1rem;color:#5a6c7d;line-height:1.7;max-width:280px;margin:0 auto}.outlook-animations{position:absolute;inset:0;pointer-events:none;z-index:1}.floating-note{position:absolute;font-size:2rem;animation:float-around 6s ease-in-out infinite;opacity:.7}.outlook-note-1{top:15%;left:5%;color:#e74c3c;animation-delay:0s}.outlook-note-2{top:25%;right:8%;color:#3498db;animation-delay:1s}.outlook-note-3{bottom:30%;left:3%;color:#2ecc71;animation-delay:2s}.outlook-note-4{bottom:20%;right:5%;color:#f39c12;animation-delay:3s}.outlook-note-5{top:40%;left:2%;color:#9b59b6;animation-delay:4s}.outlook-note-6{top:60%;right:3%;color:#e67e22;animation-delay:5s}.colorful-circle{position:absolute;border-radius:50%;animation:float-scale 8s ease-in-out infinite;opacity:.3}.outlook-circle-1{width:80px;height:80px;top:10%;left:10%;background:linear-gradient(135deg,#ff9a9e,#fecfef);animation-delay:0s}.outlook-circle-2{width:60px;height:60px;top:70%;right:15%;background:linear-gradient(135deg,#a8edea,#fed6e3);animation-delay:2s}.outlook-circle-3{width:100px;height:100px;bottom:15%;left:8%;background:linear-gradient(135deg,#ffecd2,#fcb69f);animation-delay:4s}.outlook-circle-4{width:70px;height:70px;top:30%;right:20%;background:linear-gradient(135deg,#a8e6cf,#dcedc1);animation-delay:6s}@keyframes gentle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes float-around{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(5deg)}50%{transform:translateY(-10px) rotate(-3deg)}75%{transform:translateY(-20px) rotate(3deg)}}@keyframes float-scale{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.1)}}@media (max-width: 768px){.our-outlook{padding:80px 0}.our-outlook .section-title{font-size:2.5rem}.our-outlook .section-subtitle{font-size:1.1rem;margin-bottom:60px}.philosophy-pillars{grid-template-columns:1fr;gap:40px}.pillar{padding:40px 25px}.icon-circle{width:100px;height:100px;font-size:2.5rem}.pillar-title{font-size:1.5rem}.pillar-description{font-size:1rem}.floating-note{font-size:1.5rem}.colorful-circle{transform:scale(.7)}}@media (max-width: 480px){.pillar{padding:30px 20px}.icon-circle{width:80px;height:80px;font-size:2rem}.pillar-title{font-size:1.3rem}.pillar-description{font-size:.95rem}}.services-section{padding:80px 0;position:relative;overflow:hidden}.services-header{text-align:center;margin-bottom:60px}.services-header h2{font-size:2.5rem;font-weight:800;color:#2c3e50;margin-bottom:16px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.services-header h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);border-radius:2px}.services-header p{font-size:1.2rem;color:#34495e;max-width:600px;margin:0 auto;background:#ffffffe6;padding:20px;border-radius:15px;box-shadow:0 8px 25px #0000001a}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px;max-width:1200px;margin-left:auto;margin-right:auto}@media (max-width: 1024px){.services-grid{grid-template-columns:repeat(2,1fr);gap:25px}}@media (max-width: 768px){.services-grid{grid-template-columns:1fr;gap:30px}}.service-card{background:#fffffff2;padding:30px 25px;border-radius:20px;text-align:center;box-shadow:0 15px 35px #0000001a;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);position:relative;overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:space-between}.service-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px #00000026}.service-card.clickable{cursor:pointer}.service-card.clickable:hover{border-color:#4ecdc4;box-shadow:0 25px 50px #4ecdc433}.service-icon{margin-bottom:30px}.icon-wrapper{display:inline-block;font-size:4rem;background:linear-gradient(135deg,#e0e9f7,#0497c4);border-radius:10%;box-shadow:0 10px 30px #ff6b6b4d;animation:iconFloat 3s ease-in-out infinite}.service-card h3{font-size:1.5rem;font-weight:700;color:#2c3e50;margin-bottom:20px}.service-card p{font-size:1rem;color:#7f8c8d;line-height:1.6;margin-bottom:30px}.service-features{margin-bottom:30px}.feature{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0;color:#34495e;font-weight:500}.learn-more{background:linear-gradient(135deg,#469cd1,#0a458e);color:#fff;padding:12px 25px;border-radius:25px;font-weight:600;display:inline-block;transition:all .3s ease}.service-card.clickable:hover .learn-more{background:linear-gradient(135deg,#ff6b6b,#ee5a24);transform:scale(1.05)}.coming-soon{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff;padding:12px 25px;border-radius:25px;font-weight:600;display:inline-block;opacity:.7}.services-musical-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.services-note{position:absolute;font-size:2rem;opacity:.4;animation:servicesFloat 5s ease-in-out infinite}.services-note-1{top:15%;left:5%;color:#ff6b6b;animation-delay:0s}.services-note-2{top:25%;right:8%;color:#4ecdc4;animation-delay:1s}.services-note-3{bottom:35%;left:3%;color:#45b7d1;animation-delay:2s}.services-note-4{top:60%;right:5%;color:#f9ca24;animation-delay:3s}.services-note-5{bottom:20%;right:10%;color:#6c5ce7;animation-delay:4s}.services-note-6{top:40%;left:2%;color:#fd79a8;animation-delay:2.5s}.services-floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.services-circle{position:absolute;border-radius:50%;animation:servicesCircleFloat 8s ease-in-out infinite;opacity:.2}.services-circle-1{width:80px;height:80px;background:linear-gradient(45deg,#ff9a9e,#fecfef);top:20%;right:3%;animation-delay:0s}.services-circle-2{width:60px;height:60px;background:linear-gradient(45deg,#a8edea,#fed6e3);bottom:5%;left:2%;animation-delay:2s}.services-circle-3{width:100px;height:100px;background:linear-gradient(45deg,#ffecd2,#fcb69f);top:50%;right:2%;animation-delay:4s}.services-circle-4{width:70px;height:70px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);bottom:15%;left:5%;animation-delay:6s}.services-circle-5{width:70px;height:70px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);bottom:15%;right:5%;animation-delay:6s}.services-circle-6{width:80px;height:80px;background:linear-gradient(45deg,#ff9a9e,#fecfef);top:20%;left:3%;animation-delay:0s}.services-circle-7{width:100px;height:100px;background:linear-gradient(45deg,#ffecd2,#fcb69f);top:50%;left:2%;animation-delay:4s}.services-circle-8{width:70px;height:70px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);bottom:25%;right:5%;animation-delay:6s}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes servicesFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(-10px) rotate(-3deg)}}@keyframes servicesCircleFloat{0%,to{transform:translateY(0) translate(0) scale(1)}25%{transform:translateY(-15px) translate(10px) scale(1.1)}50%{transform:translateY(-25px) translate(-5px) scale(.9)}75%{transform:translateY(-10px) translate(15px) scale(1.05)}}@media (max-width: 768px){.services-section{padding:60px 0}.services-header h2{font-size:2rem}.services-header p{font-size:1rem;padding:15px}.service-card{padding:30px 20px}.icon-wrapper{font-size:3rem;padding:15px}.services-note{font-size:1.5rem}.services-circle{transform:scale(.7)}}@media (max-width: 480px){.services-header h2{font-size:1.8rem}.service-card{padding:25px 15px}.service-card h3{font-size:1.3rem}.services-note{font-size:1.2rem}.services-circle{transform:scale(.5)}}.experience{background:#fff}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:80px}.achievement-card{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#3498db,#2ecc71);border-radius:20px;color:#fff;transition:transform .3s ease}.achievement-card:hover{transform:translateY(-5px)}.achievement-number{font-size:3rem;font-weight:800;margin-bottom:10px}.achievement-label{font-size:1.1rem;font-weight:500;opacity:.9}.timeline h3{text-align:center;font-size:2rem;color:#2c3e50;margin-bottom:50px}.timeline-container{position:relative;max-width:800px;margin:0 auto}.timeline-container:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(135deg,#3498db,#2ecc71);transform:translate(-50%)}.timeline-item{display:flex;align-items:center;margin-bottom:40px;position:relative}.timeline-item:nth-child(odd){flex-direction:row}.timeline-item:nth-child(2n){flex-direction:row-reverse}.timeline-year{background:linear-gradient(135deg,#3498db,#2ecc71);color:#fff;padding:10px 20px;border-radius:25px;font-weight:700;font-size:1.1rem;min-width:80px;text-align:center;position:relative;z-index:2}.timeline-content{background:#f8f9fa;padding:25px 30px;border-radius:15px;margin:0 30px;flex:1;box-shadow:0 5px 15px #0000001a}.timeline-content h4{font-size:1.3rem;color:#2c3e50;margin-bottom:10px}.timeline-content p{color:#7f8c8d;line-height:1.6}@media (max-width: 768px){.achievements-grid{grid-template-columns:repeat(2,1fr);gap:20px}.achievement-card{padding:30px 15px}.achievement-number{font-size:2.5rem}.timeline-container:before{left:30px}.timeline-item{flex-direction:row!important;padding-left:60px}.timeline-year{position:absolute;left:0;min-width:60px;padding:8px 12px;font-size:.9rem}.timeline-content{margin:0}}.testimonials{background:#f8f9fa}.container1 p{font-size:24px}.container1 h2{font-size:36px;justify-content:center;margin-bottom:10px;color:#2c3e50}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.testimonial-card{background:#fff;padding:30px;border-radius:20px;box-shadow:0 10px 30px #0000001a;transition:all .3s ease;position:relative}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #00000026}.testimonial-content{margin-bottom:25px;position:relative}.quote-icon{font-size:4rem;color:#3498db;opacity:.3;position:absolute;top:-20px;left:-10px;font-family:serif}.testimonial-content p{font-size:.8rem;line-height:1.7;color:#2c3e50;font-style:italic;position:relative;z-index:1}.testimonial-author{display:flex;align-items:center;gap:15px}.testimonial-author img{width:60px;height:60px;border-radius:50%;object-fit:cover}.author-info h4{font-size:1.1rem;font-weight:600;color:#2c3e50;margin-bottom:5px}.author-info span{color:#7f8c8d;font-size:.9rem}@media (max-width: 768px){.testimonials-grid{grid-template-columns:1fr;gap:20px}.testimonial-card{padding:25px 20px}.testimonial-content p{font-size:1rem;font-weight:25}}.faq-section{padding:80px 0;background:linear-gradient(135deg,#f8f9fa,#e9ecef,#dee2e6);position:relative;overflow:hidden}.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:2}.faq-header{text-align:center;margin-bottom:60px}.faq-header h2{font-size:2.5rem;font-weight:800;color:#2c3e50;margin-bottom:16px;position:relative}.faq-header h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);border-radius:2px}.faq-header p{font-size:1.2rem;color:#7f8c8d;max-width:600px;margin:0 auto}.faq-container{max-width:800px;margin:0 auto}.faq-item{background:#fff;border-radius:12px;margin-bottom:20px;box-shadow:0 4px 6px #0000001a;overflow:hidden;transition:all .3s ease;border:2px solid transparent}.faq-item:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.faq-item.active{border-color:#4ecdc4;box-shadow:0 8px 25px #4ecdc433}.faq-question{padding:24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease;background:linear-gradient(135deg,#fff,#f8f9fa)}.faq-question:hover{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.faq-item.active .faq-question{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff}.faq-question h3{font-size:1.2rem;font-weight:600;margin:0;color:#2c3e50;transition:color .3s ease}.faq-item.active .faq-question h3{color:#fff}.faq-icon{margin-left:20px;flex-shrink:0}.icon{display:inline-block;font-size:1.2rem;transition:transform .3s ease;color:#4ecdc4}.faq-item.active .icon{color:#fff}.icon.rotate{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-item.active .faq-answer{max-height:300px}.faq-answer-content{padding:0 24px 24px;background:linear-gradient(135deg,#fff,#f8f9fa)}.faq-answer-content p{font-size:1rem;line-height:1.7;color:#555;margin:0;padding-top:16px;border-top:1px solid #e9ecef}.faq-footer{margin-top:60px;text-align:center}.faq-contact{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:40px;border-radius:20px;box-shadow:0 10px 30px #667eea4d}.faq-contact h3{font-size:1.8rem;font-weight:700;margin-bottom:16px}.faq-contact p{font-size:1.1rem;margin-bottom:24px;opacity:.9}.btn{display:inline-block;padding:12px 30px;border-radius:25px;text-decoration:none;font-weight:600;font-size:1rem;transition:all .3s ease;border:none;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;box-shadow:0 4px 15px #ff6b6b4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.faq-musical-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.faq-note{position:absolute;font-size:2rem;opacity:.3;animation:faqFloat 4s ease-in-out infinite}.faq-note-1{top:20%;left:10%;color:#ff6b6b;animation-delay:0s}.faq-note-2{top:60%;right:15%;color:#4ecdc4;animation-delay:1s}.faq-note-3{bottom:30%;left:15%;color:#45b7d1;animation-delay:2s}.faq-note-4{top:40%;right:10%;color:#f9ca24;animation-delay:3s}@keyframes faqFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(10deg)}}@media (max-width: 768px){.faq-section{padding:60px 0}.faq-header h2{font-size:2rem}.faq-header p{font-size:1rem}.faq-question{padding:20px}.faq-question h3{font-size:1.1rem}.faq-answer-content{padding:0 20px 20px}.faq-contact{padding:30px 20px}.faq-contact h3,.faq-note{font-size:1.5rem}}@media (max-width: 480px){.container{padding:0 15px}.faq-question{padding:16px;flex-direction:column;align-items:flex-start;gap:12px}.faq-icon{margin-left:0;align-self:flex-end}.faq-question h3{font-size:1rem}.faq-answer-content{padding:0 16px 16px}}.contact{background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 50%,#a8edea 75%,#fed6e3);padding:80px 0;position:relative;overflow:hidden}.section-title{text-align:center;font-size:2.5rem;font-weight:800;color:#2c3e50;margin-bottom:16px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);border-radius:2px}.section-subtitle{text-align:center;font-size:1.2rem;color:#34495e;margin-bottom:60px;max-width:600px;margin-left:auto;margin-right:auto;background:#ffffffe6;padding:20px;border-radius:15px;box-shadow:0 8px 25px #0000001a}.contact-content{max-width:800px;margin:0 auto}.contact-form{background:#fffffff2;padding:40px;border-radius:20px;box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.form-group{margin-bottom:25px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:1rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:15px;border:2px solid #e9ecef;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#ffffffe6;box-sizing:border-box}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#4ecdc4;box-shadow:0 0 0 3px #4ecdc41a;transform:translateY(-2px)}.form-group textarea{resize:vertical;height:60px;font-family:inherit}.btn{display:inline-block;padding:15px 40px;border-radius:25px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;border:none;cursor:pointer;width:100%;margin-top:20px}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;box-shadow:0 8px 25px #ff6b6b4d}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px #ff6b6b66}.form-result{margin-top:20px;padding:15px;border-radius:12px;text-align:center;font-weight:600;background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;box-shadow:0 8px 25px #2ecc714d}.contact-musical-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.contact-note{position:absolute;font-size:2rem;opacity:.4;animation:contactFloat 5s ease-in-out infinite}.contact-note-1{top:15%;left:5%;color:#ff6b6b;animation-delay:0s}.contact-note-2{top:25%;right:8%;color:#4ecdc4;animation-delay:1s}.contact-note-3{bottom:35%;left:3%;color:#45b7d1;animation-delay:2s}.contact-note-4{top:60%;right:5%;color:#f9ca24;animation-delay:3s}.contact-note-5{bottom:20%;right:10%;color:#6c5ce7;animation-delay:4s}.contact-note-6{top:40%;left:2%;color:#fd79a8;animation-delay:2.5s}.contact-floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.contact-circle{position:absolute;border-radius:50%;animation:contactCircleFloat 8s ease-in-out infinite;opacity:.2}.contact-circle-1{width:80px;height:80px;background:linear-gradient(45deg,#ff9a9e,#fecfef);top:20%;right:3%;animation-delay:0s}.contact-circle-2{width:60px;height:60px;background:linear-gradient(45deg,#a8edea,#fed6e3);bottom:30%;left:2%;animation-delay:2s}.contact-circle-3{width:100px;height:100px;background:linear-gradient(45deg,#ffecd2,#fcb69f);top:50%;right:2%;animation-delay:4s}.contact-circle-4{width:70px;height:70px;background:linear-gradient(45deg,#a8e6cf,#dcedc1);bottom:15%;left:5%;animation-delay:6s}.contact-circle-5{width:90px;height:90px;background:linear-gradient(45deg,#ffd3a5,#fd9853);top:10%;left:8%;animation-delay:1s}@keyframes contactFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(-10px) rotate(-3deg)}}@keyframes contactCircleFloat{0%,to{transform:translateY(0) translate(0) scale(1)}25%{transform:translateY(-15px) translate(10px) scale(1.1)}50%{transform:translateY(-25px) translate(-5px) scale(.9)}75%{transform:translateY(-10px) translate(15px) scale(1.05)}}@media (max-width: 768px){.contact{padding:60px 0}.section-title{font-size:2rem}.section-subtitle{font-size:1rem;padding:15px}.contact-form{padding:30px 20px}.form-row{grid-template-columns:1fr;gap:0}.contact-note{font-size:1.5rem}.contact-circle{transform:scale(.7)}}@media (max-width: 480px){.section-title{font-size:1.8rem}.contact-form{padding:20px 15px}.form-group input,.form-group select,.form-group textarea{padding:12px}.btn{padding:12px 30px;font-size:1rem}.contact-note{font-size:1.2rem}.contact-circle{transform:scale(.5)}}.footer{background:#2c3e50;color:#fff;padding:60px 0 20px;position:relative;bottom:0;width:100%}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}.footer-section h4{font-size:1.3rem;font-weight:600;margin-bottom:20px;color:#3498db}.footer-logo{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;margin-bottom:20px}.footer-logo img{height:40px;width:auto}.footer-section p{line-height:1.7;color:#bdc3c7;margin-bottom:25px}.footer-social{display:flex;gap:15px}.footer-social a{display:inline-block;font-size:1.3rem;justify-items:center;width:10%;padding:8px;border-radius:30%;color:#fff;background:#3498db1a;transition:all .3s ease;text-decoration:none}.footer-social a:hover{background:#3498db;transform:translateY(-3px)}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:12px}.footer-section ul li a{color:#bdc3c7;text-decoration:none;transition:color .3s ease}.footer-section ul li a:hover{color:#3498db}.footer-contact p{margin-bottom:12px;color:#bdc3c7}.footer-bottom{margin-top:40px}.footer-divider{height:1px;background:#bdc3c733;margin-bottom:30px}.footer-bottom-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.footer-bottom-content p{color:#bdc3c7;margin:0}.footer-links{display:flex;gap:30px}.footer-links a{color:#bdc3c7;text-decoration:none;font-size:.9rem;transition:color .3s ease}.footer-links a:hover{color:#3498db}@media (max-width: 768px){.footer-content{grid-template-columns:1fr;gap:30px;text-align:center}.footer-bottom-content{flex-direction:column;text-align:center}.footer-links,.footer-social{justify-content:center}}.piano-lessons-container{min-height:100vh;background:#fff;overflow-x:hidden;padding-top:80px}.animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.floating-note{position:absolute;font-size:2rem;color:#9333ea1a;animation:float 6s ease-in-out infinite}.note-1{top:10%;left:10%;animation-delay:0s}.note-2{top:20%;right:15%;animation-delay:1s}.note-3{top:60%;left:5%;animation-delay:2s}.note-4{top:70%;right:10%;animation-delay:3s}.note-5{top:40%;left:50%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.1}50%{transform:translateY(-20px) rotate(180deg);opacity:.3}}.hero-section{position:relative;background:linear-gradient(135deg,#fce7f3,#f3e8ff,#e0e7ff);padding:4rem 1rem;overflow:hidden;z-index:2}.hero-bg-elements{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.2}.bg-wave{position:absolute;border-radius:50px;animation:wave 8s ease-in-out infinite}.wave-1{top:5rem;left:2.5rem;width:8rem;height:2rem;background:linear-gradient(90deg,#f472b6,#a855f7);transform:rotate(-12deg);animation-delay:0s}.wave-2{top:8rem;right:5rem;width:6rem;height:1.5rem;background:linear-gradient(90deg,#60a5fa,#14b8a6);transform:rotate(12deg);animation-delay:2s}.wave-3{bottom:8rem;left:5rem;width:7rem;height:1.75rem;background:linear-gradient(90deg,#fb7185,#f472b6);transform:rotate(-6deg);animation-delay:4s}@keyframes wave{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}.hero-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;position:relative;z-index:10}@media (min-width: 1024px){.hero-content{grid-template-columns:1fr 1fr}}.hero-text{display:flex;flex-direction:column;gap:1.5rem}.hero-title{font-size:2.5rem;font-weight:700;color:#111827;line-height:1.2;margin:0}@media (min-width: 1024px){.hero-title{font-size:3rem}}.hero-subtitle{font-size:1.125rem;color:#374151;line-height:1.6;margin:0}.hero-actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}@media (min-width: 640px){.hero-actions{flex-direction:row;align-items:center}}.cta-button{background:#f97316;color:#fff;padding:.75rem 2rem;border-radius:50px;font-size:1.125rem;font-weight:600;border:none;cursor:pointer;box-shadow:0 10px 15px -3px #0000001a;transition:all .3s ease}.cta-button:hover{background:#ea580c;box-shadow:0 20px 25px -5px #0000001a;transform:translateY(-2px)}.price-info{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#4b5563}.current-price{font-weight:700;color:#111827}.original-price{text-decoration:line-through;color:#9ca3af}.hero-image{position:relative}.hero-img{width:100%;max-width:28rem;margin:0 auto;border-radius:1rem;box-shadow:0 25px 50px -12px #00000040;display:block}.about-section1{background:#eff6ff;padding:4rem 1rem}.about-content1{max-width:64rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1.5rem}.section-title{font-size:1.875rem;font-weight:700;color:#111827;margin:0}.about-text{color:#374151;line-height:1.6;font-size:1.125rem;margin:0}.about-text:last-of-type{font-size:1rem}.tab-buttons{display:flex;justify-content:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap}.tab-button{padding:.75rem 2.5rem;border-radius:50px;border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tab-button:nth-child(1){background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.tab-button:nth-child(1):hover{background:linear-gradient(135deg,#ff5252,#ff9ff3,#54a0ff);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #ff6b6b66}.tab-button:nth-child(1).active{background:linear-gradient(135deg,#ff3838,#ff6348,#ff9500);box-shadow:0 8px 30px #ff6b6b99;transform:translateY(-2px)}.tab-button:nth-child(2){background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.tab-button:nth-child(2):hover{background:linear-gradient(135deg,#4facfe,#00f2fe,#a8edea);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #667eea66}.tab-button:nth-child(2).active{background:linear-gradient(135deg,#36d1dc,#5b86e5,#36d1dc);box-shadow:0 8px 30px #667eea99;transform:translateY(-2px)}.tab-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.tab-button:hover:before{left:100%}.tab-button.active{animation:pulse 2s infinite}@media (max-width: 768px){.tab-buttons{flex-direction:column;align-items:center;gap:1rem}.tab-button{width:250px;max-width:100%}}.stats-section{padding:4rem 1rem;background:#fff}.stats-content{max-width:72rem;margin:0 auto}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:3rem}@media (min-width: 1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}.stat-item{text-align:center;display:flex;flex-direction:column;gap:.5rem}.stat-number{font-size:2.5rem;font-weight:700}.stat-number.purple{color:#7c3aed}.stat-number.blue{color:#2563eb}.stat-number.green{color:#059669}.stat-number.orange{color:#ea580c}.stat-label{font-size:.875rem;color:#4b5563}.stat-sublabel{font-size:.75rem;color:#6b7280}.features-section{padding:4rem 1rem;background:#f9fafb}.features-content{max-width:72rem;margin:0 auto}.features-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:3rem}@media (min-width: 768px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-card{background:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a;transition:box-shadow .3s ease;display:flex;flex-direction:column;gap:1rem}.feature-card:hover{box-shadow:0 10px 15px -3px #0000001a}.feature-header{display:flex;align-items:center;gap:.75rem}.feature-icon{font-size:2rem}.feature-title{font-weight:600;color:#111827;margin:0;font-size:1rem}.feature-description{color:#4b5563;font-size:.875rem;line-height:1.5;margin:0}.pricing-section{padding:4rem 1rem;background:linear-gradient(135deg,#f3e8ff,#fce7f3,#eff6ff)}.pricing-content{max-width:72rem;margin:0 auto}.pricing-header{text-align:center;margin-bottom:3rem}.pricing-subtitle{color:#4b5563;margin:1rem 0 0}.level-buttons{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.level-button{padding:.75rem 2rem;border-radius:50px;border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 2px rgba(0,0,0,.2)}.level-button:nth-child(1){background:linear-gradient(135deg,#56ab2f,#a8e6cf 90%,#dcedc8);color:#fff}.level-button:nth-child(1):hover{background:linear-gradient(135deg,#4caf50,#81c784,#c8e6c9);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #4caf5066}.level-button:nth-child(1).active{background:linear-gradient(135deg,#388e3c,#66bb6a,#a5d6a7);box-shadow:0 8px 30px #4caf5099;transform:translateY(-2px)}.level-button:nth-child(2){background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);color:#fff}.level-button:nth-child(2):hover{background:linear-gradient(135deg,#5e35b1,#7e57c2,#9575cd);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #673ab766}.level-button:nth-child(2).active{background:linear-gradient(135deg,#512da8,#673ab7,#8e24aa);box-shadow:0 8px 30px #673ab799;transform:translateY(-2px)}.level-button:nth-child(3){background:linear-gradient(135deg,#ff6b35,#f7931e,#ffcc02);color:#fff}.level-button:nth-child(3):hover{background:linear-gradient(135deg,#e65100,#ff9800,#ffb74d);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #ff980066}.level-button:nth-child(3).active{background:linear-gradient(135deg,#ef6c00,#ff6f00,#ff8f00);box-shadow:0 8px 30px #ff980099;transform:translateY(-2px)}.level-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.level-button:hover:before{left:100%}.level-button.active{animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.pricing-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem}@media (min-width: 768px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}.pricing-card{position:relative;background:#fff;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a;overflow:hidden;transition:all .3s ease}.pricing-card.popular{border:2px solid #7c3aed;box-shadow:0 20px 25px -5px #0000001a}.pricing-card:hover{box-shadow:0 20px 25px -5px #0000001a;transform:translateY(-2px)}.popular-badge{position:absolute;top:0;left:50%;background:#7c3aed;color:#fff;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.plan-header{text-align:center;padding:1.5rem 1.5rem 0;display:flex;flex-direction:column;gap:.5rem}.plan-type{display:flex;align-items:center;justify-content:center;gap:.5rem}.users-icon{font-size:1.25rem}.plan-name{font-weight:600;font-size:1.125rem;color:#111827}.plan-badge{background:#dcfce7;color:#166534;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;align-self:center}.plan-students{font-size:.875rem;color:#4b5563;margin:0}.plan-pricing{text-align:center;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}.price-display{display:flex;align-items:center;justify-content:center;gap:.5rem}.current-price{font-size:1.875rem;font-weight:700;color:#111827}.original-price{font-size:1.125rem;color:#6b7280;text-decoration:line-through}.discount-badge{background:#059669;color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:600;align-self:center}.plan-features{padding:0 1.5rem}.features-title{font-weight:600;color:#111827;margin:0 0 .75rem;font-size:.875rem}.features-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.feature-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem}.check-icon{color:#059669;font-weight:700;flex-shrink:0;margin-top:.125rem}.feature-text{color:#374151;line-height:1.4}.enroll-button{width:87%;padding:.75rem;margin:1rem 1.5rem 1.5rem;border-radius:50px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;background:#111827;color:#fff}.enroll-button.popular-button{background:#7c3aed}.enroll-button:hover{background:#374151;transform:translateY(-1px)}.enroll-button.popular-button:hover{background:#6d28d9}.pricing-info{text-align:center;font-size:.875rem;color:#4b5563;line-height:1.5}.pricing-info p{margin:.5rem 0}.contact-number{color:#2563eb;font-weight:600}.teachers-section{padding:4rem 1rem;background:#fff}.teachers-content{max-width:64rem;margin:0 auto}.teacher-card{background:#fff;padding:2rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;gap:2rem;align-items:center;margin-top:3rem}@media (max-width: 768px){.enroll-button{width:93%}}@media (min-width: 768px){.teacher-card{flex-direction:row;text-align:left}}.teacher-image{flex-shrink:0}.teacher-img{width:8rem;height:8rem;border-radius:50%;object-fit:cover;box-shadow:0 10px 15px -3px #0000001a}.teacher-info{text-align:center}@media (min-width: 768px){.teacher-info{text-align:left}}.teacher-description{color:#374151;line-height:1.6;margin:0}.reviews-section{padding:4rem 1rem;background:linear-gradient(90deg,#eff6ff,#f3e8ff)}.reviews-content{max-width:72rem;margin:0 auto}.reviews-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:3rem}@media (min-width: 768px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}.review-card{background:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a;transition:box-shadow .3s ease;display:flex;flex-direction:column;gap:1rem}.review-card:hover{box-shadow:0 10px 15px -3px #0000001a}.review-header{display:flex;align-items:center;gap:.75rem}.reviewer-avatar{width:3rem;height:3rem;border-radius:50%;object-fit:cover}.reviewer-info{display:flex;flex-direction:column;gap:.25rem}.reviewer-name{font-weight:600;color:#111827;margin:0;font-size:.875rem}.reviewer-location{font-size:.75rem;color:#4b5563;display:flex;align-items:center;gap:.25rem;margin:0}.location-icon{font-size:.75rem}.review-stars{display:flex;gap:.25rem}.star{font-size:1rem}.review-text{color:#374151;font-size:.875rem;line-height:1.5;margin:0}.read-more-btn{background:none;border:none;color:#2563eb;font-size:.875rem;cursor:pointer;padding:0;text-align:left;text-decoration:underline}.read-more-btn:hover{color:#1d4ed8}@media (max-width: 768px){.hero-title{font-size:2rem}.section-title{font-size:1.5rem}.stats-grid{grid-template-columns:1fr 1fr}.features-grid,.pricing-grid{grid-template-columns:1fr}.level-buttons{flex-direction:column;align-items:center}.level-button{width:200px}}@media (max-width: 480px){.hero-section,.about-section,.stats-section,.features-section,.pricing-section,.teachers-section,.reviews-section{padding:2rem 1rem}.hero-title{font-size:1.75rem}.cta-button{width:100%;text-align:center}.hero-actions{width:100%}.price-info{justify-content:center}}.recorded-classes-page{position:relative;overflow:hidden}.recorded-hero{padding:120px 0 80px;position:relative}.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:5}.recorded-hero-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.recorded-hero-text h1{font-size:2.8rem;font-weight:800;line-height:1.2;color:#2c3e50;margin-bottom:24px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.recorded-hero-text p{font-size:1.2rem;color:#34495e;margin-bottom:40px;line-height:1.8;background:#ffffffe6;padding:20px;border-radius:15px;box-shadow:0 8px 25px #0000001a}.recorded-features{display:flex;flex-direction:column;gap:15px}.feature-item{display:flex;align-items:center;gap:15px;background:#ffffffe6;padding:15px 20px;border-radius:12px;box-shadow:0 4px 15px #0000001a;font-weight:600;color:#2c3e50}.feature-icon{font-size:1.5rem}.recorded-hero-image{display:flex;justify-content:center}.recorded-image-container img{width:100%;max-width:400px;height:auto;border-radius:20px;box-shadow:0 20px 40px #00000026}.course-modules{padding:80px 0;position:relative}.section-title{text-align:center;font-size:2.5rem;font-weight:800;color:#2c3e50;margin-bottom:60px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px;margin-top:40px}.module-card{background:#fffffff2;border-radius:20px;overflow:hidden;box-shadow:0 15px 35px #0000001a;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}.module-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px #00000026}.module-card.featured{border:3px solid #4ecdc4;transform:scale(1.05)}.popular-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:8px 20px;border-radius:20px;font-size:.9rem;font-weight:600;z-index:10}.module-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center;position:relative}.module-card:nth-child(1) .module-header{background:linear-gradient(135deg,#a8e6cf,#88d8a3)}.module-card:nth-child(3) .module-header{background:linear-gradient(135deg,#ffd89b,#19547b)}.module-icon{font-size:3rem;margin-bottom:15px}.module-header h3{font-size:1.8rem;font-weight:700;margin:0 0 10px}.level-badge{background:#fff3;padding:5px 15px;border-radius:15px;font-size:.9rem;display:inline-block}.module-content{padding:30px}.price-section{text-align:center;margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px}.price{font-size:2.2rem;font-weight:800;color:#2c3e50;margin-bottom:10px}.price span{font-size:1rem;color:#7f8c8d}.duration,.access{color:#34495e;font-weight:600;margin:5px 0}.curriculum{margin-bottom:25px}.curriculum h4{color:#2c3e50;font-size:1.2rem;margin-bottom:15px;font-weight:700}.curriculum ul{list-style:none;padding:0}.curriculum li{padding:6px 0;color:#34495e;font-weight:500}.bonus-content{margin-bottom:30px;background:#4ecdc41a;padding:20px;border-radius:12px;border-left:4px solid #4ecdc4}.bonus-content h4{color:#2c3e50;font-size:1.1rem;margin-bottom:10px;font-weight:700}.bonus-content p{color:#7f8c8d;line-height:1.6;margin:0}.btn{display:block;width:100%;padding:15px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.btn-beginner{background:linear-gradient(135deg,#a8e6cf,#88d8a3);color:#fff;box-shadow:0 8px 25px #a8e6cf4d}.btn-intermediate{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 8px 25px #667eea4d}.btn-advanced{background:linear-gradient(135deg,#ffd89b,#19547b);color:#fff;box-shadow:0 8px 25px #ffd89b4d}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px #0003}.recorded-musical-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.recorded-note{position:absolute;font-size:2rem;opacity:.4;animation:recordedFloat 5s ease-in-out infinite}.recorded-note-1{top:15%;left:5%;color:#667eea;animation-delay:0s}.recorded-note-2{top:60%;right:8%;color:#4ecdc4;animation-delay:1s}.recorded-note-3{bottom:30%;left:3%;color:#ff6b6b;animation-delay:2s}.recorded-note-4{top:40%;right:5%;color:#f9ca24;animation-delay:3s}@keyframes recordedFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(5deg)}66%{transform:translateY(-10px) rotate(-3deg)}}@media (max-width: 768px){.recorded-hero{padding:100px 0 60px}.recorded-hero-content{grid-template-columns:1fr;gap:40px;text-align:center}.recorded-hero-text h1{font-size:2.2rem}.modules-grid{grid-template-columns:1fr;gap:30px}.module-card.featured{transform:none}.recorded-note{font-size:1.5rem}}@media (max-width: 480px){.recorded-hero-text h1,.section-title{font-size:2rem}.module-content{padding:20px}.price{font-size:2rem}}.registration-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.registration-modal{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 25px 50px #0003;border:1px solid rgba(255,255,255,.3)}.registration-bg-elements{position:absolute;inset:0;pointer-events:none;z-index:1}.floating-note{position:absolute;font-size:1.5rem;opacity:.6;animation:float 4s ease-in-out infinite}.note-1{top:10%;left:5%;animation-delay:0s;color:#ff6b6b}.note-2{top:20%;right:8%;animation-delay:1s;color:#4ecdc4}.note-3{bottom:30%;left:3%;animation-delay:2s;color:#45b7d1}.note-4{bottom:15%;right:5%;animation-delay:3s;color:#96ceb4}.floating-circle{position:absolute;border-radius:50%;opacity:.3;animation:float 6s ease-in-out infinite}.circle-1{width:60px;height:60px;background:linear-gradient(135deg,#667eea,#764ba2);top:15%;right:15%;animation-delay:1s}.circle-2{width:40px;height:40px;background:linear-gradient(135deg,#f093fb,#f5576c);bottom:25%;left:10%;animation-delay:2s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}.registration-header{background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 50%,#a8edea 75%,#fed6e3);padding:20px 30px;border-radius:20px 20px 0 0;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.trust-badge{text-align:center;color:#fff}.trust-badge h3{margin:0;font-size:1.1rem;font-weight:500}.trust-number{font-size:1.8rem;font-weight:700;margin:5px 0;text-shadow:0 2px 4px rgba(0,0,0,.2)}.trust-badge p{margin:0;font-size:.9rem;opacity:.9}.close-btn{background:#fff3;border:none;color:#fff;font-size:1.5rem;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.progress-steps{display:flex;justify-content:center;padding:30px 20px;background:#ffffff80;position:relative;z-index:2}.step{display:flex;flex-direction:column;align-items:center;margin:0 15px;opacity:.5;transition:all .3s ease}.step.active{opacity:1}.step-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;margin-bottom:8px;box-shadow:0 4px 15px #667eea4d}.step.active .step-icon{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 15px #ff6b6b66;transform:scale(1.1)}.step span{font-size:.9rem;font-weight:600;color:#666}.step.active span{color:#333}.registration-content{padding:40px 30px;position:relative;z-index:2}.step-content{text-align:center;max-width:600px;margin:0 auto}.step-content h2{font-size:2rem;font-weight:700;color:#333;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.step-subtitle{font-size:1.1rem;color:#666;margin-bottom:30px;display:flex;align-items:center;justify-content:center;gap:10px}.music-icon{font-size:1.3rem}.registration-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.option-card{background:#fffc;border:2px solid transparent;border-radius:15px;padding:30px 20px;cursor:pointer;transition:all .3s ease;text-align:center}.option-card:hover{border-color:#667eea;transform:translateY(-5px);box-shadow:0 10px 25px #667eea33}.option-icon{font-size:3rem;margin-bottom:15px}.option-card h3{font-size:1.3rem;font-weight:600;color:#333;margin-bottom:10px}.option-card p{color:#666;font-size:.9rem}.input-group{margin-bottom:20px;text-align:left}.input-group.full-width{grid-column:1 / -1}.input-group label{display:block;font-weight:600;color:#333;margin-bottom:8px;font-size:.95rem}.input-group input,.input-group select,.input-group textarea{width:100%;padding:12px 15px;border:2px solid #e1e8ed;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#ffffffe6}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;transform:translateY(-2px)}.phone-input{display:flex;gap:10px}.country-code{flex:0 0 120px}.verification-code{display:flex;justify-content:center;gap:10px;margin:30px 0}.otp-input{width:50px!important;height:50px;text-align:center;font-size:1.5rem;font-weight:600;border:2px solid #e1e8ed!important;border-radius:10px;transition:all .3s ease}.otp-input:focus{border-color:#667eea!important;box-shadow:0 0 0 3px #667eea33;transform:scale(1.05)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}.scheduling-section{text-align:left;margin:30px 0}.scheduling-section h3{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:15px}.date-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;justify-items:center;margin-bottom:30px}.date-cards::-webkit-scrollbar{height:6px}.date-cards::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.date-card{background:#fffc;border:2px solid #e1e8ed;border-radius:15px;padding:20px 15px;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px;width:100%}.date-card:hover{border-color:#667eea;transform:translateY(-3px)}.date-card.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.day-name{font-size:.9rem;font-weight:500;margin-bottom:5px}.day-number{font-size:1.8rem;font-weight:700;margin-bottom:5px}.month-name{font-size:.8rem;opacity:.8}.time-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:30px}.time-slot{background:#fffc;border:2px solid #e1e8ed;border-radius:10px;padding:12px 15px;cursor:pointer;transition:all .3s ease;font-size:.9rem;font-weight:500}.time-slot:hover{border-color:#667eea;transform:translateY(-2px)}.time-slot.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.location-card{background:#fffc;border:2px solid #e1e8ed;border-radius:15px;padding:20px;display:flex;align-items:center;gap:15px}.location-icon{font-size:2rem;color:#667eea}.location-details h4{font-size:1.1rem;font-weight:600;color:#333;margin-bottom:5px}.location-details p{color:#666;font-size:.9rem;line-height:1.4}.review-sections{text-align:left;margin:30px 0}.review-section{background:#fffc;border:2px solid #e1e8ed;border-radius:15px;padding:20px;margin-bottom:20px}.review-section h3{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #e1e8ed}.review-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}.review-item:last-child{border-bottom:none}.review-item .label{font-weight:600;color:#666;flex:0 0 150px}.review-item .value{color:#333;text-align:right}.button-group{display:flex;gap:15px;justify-content:center;margin-top:30px}.primary-btn,.secondary-btn{padding:12px 30px;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;min-width:120px}.primary-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea4d}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.primary-btn:disabled{opacity:.6;cursor:not-allowed}.secondary-btn{background:#fffc;color:#667eea;border:2px solid #667eea}.secondary-btn:hover{background:#667eea;color:#fff;transform:translateY(-2px)}.submit-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 15px #ff6b6b4d}.submit-btn:hover{box-shadow:0 6px 20px #ff6b6b66}.link-btn{background:none;border:none;color:#667eea;text-decoration:underline;cursor:pointer;font-size:.9rem}.alternative-option{margin-top:20px;color:#666}.alternative-option p{margin-bottom:5px}.registration-footer{background:#ffffff80;padding:20px 30px;border-radius:0 0 20px 20px;text-align:center;position:relative;z-index:2}.registration-footer p{margin:0;font-size:.85rem;color:#666}.age-select{width:100%;padding:12px 15px;border:2px solid #e1e8ed;border-radius:10px;font-size:1rem;background:#ffffffe6;cursor:pointer;transition:all .3s ease}.age-select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.age-select option{padding:8px;background:#fff;color:#333}@media (max-width: 768px){.registration-modal{width:95%;max-height:95vh}.registration-header{padding:15px 20px}.trust-number{font-size:1.5rem}.progress-steps{padding:20px 10px}.step{margin:0 8px}.step-icon{width:40px;height:40px;font-size:1rem}.step span{font-size:.8rem}.registration-content{padding:30px 20px}.step-content h2{font-size:1.6rem}.registration-options,.form-grid{grid-template-columns:1fr}.date-cards{flex-direction:column;align-items:center}.time-slots{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.button-group{flex-direction:column}.primary-btn,.secondary-btn{width:100%}.review-item{flex-direction:column;align-items:flex-start;gap:5px}.review-item .value{text-align:left}}@media (max-width: 480px){.verification-code{gap:5px}.otp-input{width:40px!important;height:40px;font-size:1.2rem}.location-card{flex-direction:column;text-align:center}}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;padding-top:70px}.login-container{min-height:calc(100vh - var(--header-height));background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 75%,#a8e6cf);display:flex;align-items:center;justify-content:center;padding:20px;margin-top:var(--header-height)}.login-card{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:40px;width:100%;max-width:440px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2)}.login-header{text-align:center;margin-bottom:32px}.login-title{font-size:28px;font-weight:700;color:#2d3748;margin-bottom:8px}.login-subtitle{font-size:16px;color:#718096;font-weight:400}.user-type-selector{display:flex;background:#f7fafc;border-radius:12px;padding:4px;margin-bottom:32px;gap:4px}.user-type-btn{flex:1;padding:12px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;background:transparent;color:#718096}.user-type-btn.active{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;box-shadow:0 2px 8px #ff9a9e4d}.user-type-btn:hover:not(.active){background:#edf2f7;color:#4a5568}.login-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:600;color:#4a5568}.form-input{padding:16px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;transition:all .2s ease;background:#fff}.form-input:focus{outline:none;border-color:#ff9a9e;box-shadow:0 0 0 3px #ff9a9e1a}.form-input.error{border-color:#e53e3e}.form-input::placeholder{color:#a0aec0}.error-message{font-size:12px;color:#e53e3e;font-weight:500}.login-btn{padding:16px;background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:8px}.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #ff9a9e4d}.login-btn:active{transform:translateY(0)}.login-footer{margin-top:32px;text-align:center}.forgot-password{color:#ff9a9e;text-decoration:none;font-size:14px;font-weight:500;display:inline-block;margin-bottom:16px}.forgot-password:hover{text-decoration:underline}.signup-link{font-size:14px;color:#718096}.signup-link a{color:#ff9a9e;text-decoration:none;font-weight:600}.signup-link a:hover{text-decoration:underline}@media (max-width: 768px){.login-container{padding:16px}.login-card{padding:32px 24px;border-radius:20px}.login-title{font-size:24px}.login-subtitle{font-size:14px}.user-type-btn{padding:10px 12px;font-size:13px}.form-input{padding:14px;font-size:16px}.login-btn{padding:14px}}@media (max-width: 480px){.login-card{padding:24px 20px}.login-title{font-size:22px}.form-input,.login-btn{padding:12px}}.user-type-btn:focus,.form-input:focus,.login-btn:focus,.forgot-password:focus,.signup-link a:focus{outline:2px solid #ff9a9e;outline-offset:2px}.form-input.error{animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.verify-btn{margin-top:8px;padding:8px 16px;background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.verify-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff9a9e4d}.verify-btn-verified{background:linear-gradient(135deg,#32cd32,#228b22);color:#fff;cursor:default;box-shadow:none;pointer-events:none}.otp-modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.otp-content{background:#fff;border-radius:16px;padding:32px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 40px #0003;animation:modalSlideIn .3s ease-out}.otp-content h2{font-size:24px;font-weight:700;color:#2d3748;margin-bottom:16px}.otp-content p{font-size:16px;color:#718096;margin-bottom:24px;line-height:1.6}.otp-inputs{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.otp-digit-input{width:50px;height:50px;border:2px solid #e2e8f0;border-radius:12px;font-size:24px;text-align:center;transition:all .2s ease;background:#fff}.otp-digit-input:focus{outline:none;border-color:#ff9a9e;box-shadow:0 0 0 3px #ff9a9e1a}.otp-buttons{display:flex;gap:12px;justify-content:center}.cancel-btn{padding:12px 24px;background:#e2e8f0;color:#4a5568;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#cbd5e0}.verify-otp-btn{padding:12px 24px;background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.verify-otp-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ff9a9e4d}.verify-otp-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 480px){.otp-content{padding:24px;margin:16px}.otp-content h2{font-size:20px}.otp-content p{font-size:14px}.otp-inputs{gap:8px}.otp-digit-input{width:40px;height:40px;font-size:20px}.otp-buttons{flex-direction:column}.cancel-btn,.verify-otp-btn{width:100%}}.start-class-btn,.view-btn{background:linear-gradient(135deg,#a29bfe,#6c5ce7);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #6c5ce74d}.view-more{text-align:center;margin-top:24px}body{font-family:Poppins,sans-serif;margin:0;background:#fdfdfd;color:#333}.profile-info{display:flex;gap:20px;align-items:center;background:linear-gradient(135deg,#ff9a9e,#fad0c4);padding:25px;border-radius:20px;color:#333;box-shadow:0 8px 20px #ff9a9e4d;text-align:center;margin-bottom:25px}.avatar-image{width:400px;height:310px;border-radius:10%;object-fit:cover;border:6px solid #fff;box-shadow:0 6px 18px #ff9a9e80}.profile-details{flex:1}.profile-name{font-size:2rem;font-weight:800;margin:0 0 15px;color:#222}.profile-contact{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.contact-item{background:#fff;padding:8px 12px;border-radius:10px;box-shadow:0 4px 12px #0000000d;font-size:.95rem;font-weight:600;color:#444}.contact-label{font-size:1rem;margin-right:13px;font-weight:bolder;color:#666;display:block}.contact-value{font-size:1rem;color:#ff6b81;font-weight:bolder}.profile-stats{display:flex;flex-direction:column;gap:12px}.stat-item{background:#fff;padding:10px 15px;border-radius:12px;box-shadow:0 4px 12px #0000000d;font-size:1rem;font-weight:600;color:#444}.stat-label{font-size:2rem;font-weight:bolder;color:#666}.stat-value{font-size:1.2rem;font-weight:bolder;color:#ff6b81}.stat-change{color:#2ed573;font-size:.95rem;margin-left:5px}.rating-container{display:flex;align-items:center;gap:8px;justify-content:center}.star{font-size:1.3rem;color:gold}.rating-text{font-size:.9rem;color:#555}.profile-sections{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap}.section-card{background:linear-gradient(135deg,#a1c4fd,#c2e9fb);border-radius:20px;padding:20px;box-shadow:0 8px 18px #a1c4fd66;transition:transform .3s ease;margin-bottom:25px;flex:1;min-width:300px}.section-card:hover{transform:scale(1.02)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:2px dashed rgba(255,255,255,.6);padding-bottom:10px}.section-header h3{font-size:1.4rem;font-weight:700;color:#333}.section-icon{background:#ff6b81;color:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 10px #ff6b8180}.section-icon:hover{background:#ff4757;transform:translateY(-2px)}.edit-button{background:#1e90ff;color:#fff;border:none;border-radius:8px;padding:8px 14px;margin-top:20px;font-size:.9rem;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #1e90ff80;transition:all .3s ease}.edit-button:hover{background:#1c86ee;transform:translateY(-2px)}.upload-button{padding:10px 18px;background:#ff6b81;color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 15px #ff6b8166}.upload-button:hover{background:#ff4757;transform:translateY(-2px)}.videos-grid,.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;margin-top:15px}.video-item,.photo-item{display:block;background:#fff;border-radius:12px;padding:8px;text-align:center;box-shadow:0 4px 12px #0000000d;text-decoration:none;color:#333;transition:all .3s ease}.photo-item:hover{background:#f0f0f0;transform:translateY(-2px)}.subjects-list{display:flex;flex-wrap:wrap;gap:10px}.subject-tag{background:#ff9a9e;color:#fff;padding:6px 14px;border-radius:18px;font-size:.9rem;font-weight:700;box-shadow:0 3px 10px #ff9a9e66}.message-content{background:#fffffff2;border-radius:20px;padding:0;box-shadow:0 15px 35px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);height:calc(100vh - 200px);overflow:hidden}.contacts-header{padding:15px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom:2px solid rgba(0,0,0,.1)}.contacts-header h3{margin:0;font-size:1.1rem;font-weight:600}.contact-time{font-size:.8rem;opacity:.7;flex-shrink:0;margin-left:10px}.chat-contact-name{font-size:1.3rem;font-weight:700}.chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.message{display:flex;margin-bottom:15px}.message-content{max-width:100%;padding:12px 18px;border-radius:20px;box-shadow:0 4px 15px #0000001a;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.message.own .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:5px}.message.other .message-content{background:#ffffffe6;color:#333;border-bottom-left-radius:5px}.message-text{font-size:1rem;line-height:1.4;margin-bottom:5px}.message-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px}.message-time{font-size:11px;color:#fffc;text-align:right}.message.other .message-time{color:#00000080}@media (max-width: 768px){.message-container{padding:10px}.message-content{height:calc(100vh - 150px)}.contacts-panel{width:300px}.message-header h1{font-size:2rem}}.typing-indicator{padding:12px 16px!important;background:#e8e8e8!important;border-radius:18px 18px 18px 4px!important;display:inline-block}.typing-dots{display:flex;align-items:center;gap:4px}.typing-dots span{width:8px;height:8px;background:#999;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out}.tick.sending{font-size:10px;opacity:.6}.chat-contact-status{font-size:12px;color:#ffffffe6;font-weight:500}.unread-count{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:12px;min-width:20px;text-align:center}.total-unread-count{background:#fff3;padding:4px 10px;border-radius:12px;font-size:12px;margin-top:5px}.broken-file-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 30px;background:#0000000d;border-radius:10px;border:2px dashed #ccc;min-width:150px}.broken-file-placeholder .broken-icon{font-size:32px;opacity:.5;margin-bottom:8px}.broken-file-placeholder .broken-text{font-size:12px;color:#999;text-align:center}.class-report-filters{display:flex;flex-direction:row;gap:15px;margin-bottom:20px;align-items:flex-end;flex-wrap:wrap}.date-filter{display:flex;gap:15px;align-items:flex-end}.date-from,.date-to{display:grid;flex-direction:row;gap:10px;align-items:center;flex:0 1 auto;min-width:200px}.date-from label,.date-to label{font-size:12px;font-weight:600;color:#333;margin-bottom:2px}.student-filter{max-width:300px}.date-input,.filter-select{padding:10px 15px;border:2px solid #e0e0e0;border-radius:20px;background:#fff;font-size:14px;min-width:200px}.class-actions{flex-shrink:0}.class-status-detail{font-weight:600;color:#e67e22;margin-top:6px}.class-reason{font-size:.95rem;color:#555;margin-top:4px}@media (max-width: 480px){.class-report-container{padding:10px}.content-header3{margin:-20px -10px 20px;padding:12px 16px}.content-header3 h1{font-size:16px}.class-report-filters{gap:10px}.date-from,.date-to{min-width:unset}.date-input,.filter-select{padding:8px 12px;font-size:13px;min-width:100%}.date-from label,.date-to label{font-size:11px}.student-filter{max-width:100%}.class-tabs{gap:5px;margin-bottom:20px}.tab-btn,.total-classes{padding:8px 15px;font-size:12px}.total-classes .count{padding:3px 8px;font-size:11px}.classes-content{gap:15px}.class-item{padding:15px;gap:15px}.class-image{height:100px}.class-date{font-size:14px;margin-bottom:8px}.class-badges{gap:8px;margin-bottom:8px}.badge{padding:4px 10px;font-size:11px}.class-curriculum,.class-instructor{font-size:13px;margin-bottom:4px}.action-btn{padding:8px 16px;font-size:12px}.view-more-section{flex-direction:column;gap:15px}.view-more-btn{padding:10px 25px;font-size:13px}}.assessment-form-container:after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" font-size="20" fill="rgba(255,255,255,0.1)">♪</text></svg>') repeat;background-size:50px 50px;animation:floatNote 4s ease-in-out infinite;pointer-events:none}.chip.as-scheduled,.chip.as\\ scheduled{background:#22c55e!important;color:#fff!important}.chip.after-scheduled{background:#facc15!important;color:#000!important}.chip.behind-schedule{background:#ef4444!important;color:#fff!important}.leave-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.leave-modal{background:#fff;padding:20px;border-radius:8px;width:90%;max-width:500px;box-shadow:0 4px 6px #0000001a}.leave-modal h2{margin-bottom:20px;color:#333}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;color:#555}.form-group textarea,.form-group input[type=text]{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-group textarea{min-height:80px;resize:vertical}.checkbox-group{display:flex;align-items:center;gap:10px;justify-content:flex-start}.checkbox-group input[type=checkbox]{width:auto;margin:0}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.modal-buttons button{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500}.modal-buttons button[type=button]{background:#f5f5f5;color:#333}.modal-buttons button[type=submit]{background:#007bff;color:#fff}.modal-buttons button:disabled{opacity:.6;cursor:not-allowed}.terms-modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1001}.terms-modal-content{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 4px 12px #00000026;position:relative}.close-terms-btn{position:absolute;top:10px;right:10px;background:red;border:none;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:600;transition:background .2s ease}.close-terms-btn:hover{background:#c00}.leave-container{display:flex;justify-content:center;align-items:center;height:100vh;background:#f5f7fa}.leave-box{background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000026;width:400px;padding:25px 30px;font-family:Segoe UI,sans-serif}.leave-box h2{text-align:center;margin-bottom:15px}textarea{width:100%;height:80px;margin-top:8px;border-radius:8px;border:1px solid #ccc;padding:8px;resize:none;outline:none}textarea:focus{border-color:#007bff;box-shadow:0 0 3px #007bff66}.terms-section{display:flex;align-items:center;gap:10px;margin-top:15px}.terms-box{background:#f9fafc;border:1px solid #dce3eb;border-radius:8px;padding:10px 15px;margin-top:10px;font-size:14px;line-height:1.4}.terms-box h4{margin-bottom:8px;color:#444}.terms-box ul{padding-left:18px;margin:0}.terms-box li{margin-bottom:5px}.buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.cancel-btn,.submit-btn,.accept-btn{border:none;padding:8px 18px;border-radius:6px;font-weight:600;cursor:pointer}.cancel-btn{background:#e9ecef;color:#333}.submit-btn,.accept-btn{background:#28a745;color:#fff}.submit-btn:hover,.accept-btn:hover{background:#218838}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 50%,#a8edea 75%,#fed6e3);min-height:100vh}.nav-item .dropdown-arrow{margin-left:auto}.dropdown-arrow{font-size:12px;transition:transform .2s ease}.dropdown-arrow.open{transform:rotate(180deg)}.sub-menu{background:#f8f9fa;border-left:2px solid #e0e0e0;margin-left:20px}.sub-item{padding:12px 20px 12px 40px;border:none;background:none;cursor:pointer;transition:all .2s ease;text-align:left;width:100%;color:#666;font-size:13px;font-weight:400}.sub-item:hover{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#667eea}.sub-item.active{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#667eea;border-left:4px solid #ff6b6b}.main-content{flex:1;margin-left:280px;padding:24px 24px 100px;max-width:calc(100vw - 280px);background:linear-gradient(135deg,#ffecd2,#fcb69f)}.welcome-section{margin-bottom:32px}.welcome-title{font-size:32px;font-weight:700;color:#2d3748;margin-bottom:8px}.welcome-subtitle{font-size:18px;color:#718096}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;border:none;transition:transform .2s ease;box-shadow:0 8px 25px #667eea26}.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 35px #667eea40}.stat-card:nth-child(1) .stat-icon{background:linear-gradient(135deg,#ff9a9e,#fecfef)}.stat-card:nth-child(2) .stat-icon{background:linear-gradient(135deg,#a8edea,#fed6e3)}.stat-card:nth-child(3) .stat-icon{background:linear-gradient(135deg,#ffecd2,#fcb69f)}.stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-icon{font-size:32px;width:60px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center}.stat-info h3{font-size:24px;font-weight:700;color:#2d3748;margin-bottom:4px}.stat-info p{font-size:14px;color:#718096}.announcement{background:#fff;border-radius:16px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:flex-start;gap:12px;border:none;border-left:4px solid #ff6b6b;box-shadow:0 6px 20px #ff6b6b26}.announcement-icon{font-size:20px;margin-top:2px}.announcement-content{flex:1}.announcement-content p{font-size:14px;color:#555;line-height:1.5}.announcement-close{background:none;border:none;font-size:18px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.classes-section,.class-details-section{margin-bottom:32px}.class-details-card{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:16px;border:none;box-shadow:0 6px 20px #667eea1a;transition:all .2s ease}.class-details-card .class-image{width:120px;height:80px;border-radius:6px;overflow:hidden;flex-shrink:0}.class-details-card .class-image img{width:100%;height:100%;object-fit:cover}.class-details-card .class-info{flex:1}.class-details-card .class-info h3{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}.class-details-card .class-info p{font-size:14px;color:#666;margin:4px 0}.class-details-card .class-actions{flex-shrink:0;display:flex;gap:12px;align-items:center}.class-details-card .class-actions button{padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #6c5ce74d;min-width:100px;border:none;color:#fff}.class-details-card .class-actions .start-class-btn{background:linear-gradient(135deg,#a29bfe,#6c5ce7)}.class-details-card .class-actions .start-class-btn:hover{background:linear-gradient(135deg,#6c5ce7,#5f3dc4);transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce766}.class-details-card .class-actions .close-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53)}.class-details-card .class-actions .close-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.rejoin-btn{background:linear-gradient(135deg,#a29bfe,#6c5ce7);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #6c5ce74d;min-width:100px}.rejoin-btn:hover{background:linear-gradient(135deg,#6c5ce7,#5f3dc4);transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce766}@media (max-width: 768px){.class-details-card{flex-direction:column;align-items:flex-start;gap:12px}.class-details-card .class-actions{width:100%;justify-content:center;gap:8px}.class-details-card .class-actions button{flex:1;min-width:120px;padding:12px 16px;font-size:14px}}@media (max-width: 480px){.class-details-card .class-actions{flex-direction:column;gap:8px;align-items:stretch}.class-details-card .class-actions button{width:100%;min-width:unset;padding:12px 20px;font-size:14px}.class-details-card .class-image{width:100%;height:120px}}.close-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #ff6b6b4d}.close-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h2{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:12px 20px;border-radius:25px;font-size:14px;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 15px #ff6b6b4d}.classes-list{display:flex;flex-direction:column;gap:16px}.class-card-horizontal{background:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:16px;border:none;box-shadow:0 6px 20px #667eea1a;transition:all .2s ease}.class-card-horizontal:hover{box-shadow:0 10px 30px #667eea33;transform:translateY(-2px)}.rescheduled-card{background-color:#87ceeb}.class-card-horizontal .class-image{width:120px;height:80px;border-radius:6px;overflow:hidden;flex-shrink:0}.class-card-horizontal .class-image img{width:100%;height:100%;object-fit:cover}.class-info{flex:1}.class-time{font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.class-badges{display:flex;gap:8px;margin-bottom:8px}.badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500}.badge.individual{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);color:#2d3436}.badge.keyboard{background:linear-gradient(135deg,#55efc4,#00b894);color:#fff}.badge.not-started{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff}.badge.completed-badge{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff}.badge.rescheduled{background-color:#87ceeb;color:#000;padding:.2em .5em;border-radius:.3em;font-weight:700}.badge.group{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff}.class-details{font-size:12px;color:#666}.class-details p{margin:2px 0}.class-title{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}.class-subject{font-size:12px;color:#666}.class-actions{flex-shrink:0;display:flex;flex-direction:column;gap:8px;align-items:center}.start-class-btn,.view-btn{background:linear-gradient(135deg,#a29bfe,#6c5ce7);color:#fff;border:none;padding:12px 24px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #6c5ce74d;min-width:120px}.start-class-btn:hover,.view-btn:hover{background:linear-gradient(135deg,#6c5ce7,#5f3dc4);transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce766}.view-btn{background:linear-gradient(135deg,#00cec9,#00b894)}.view-btn:hover{background:linear-gradient(135deg,#00b894,#00a085)}.leave-class-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #ff6b6b4d}.leave-class-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.last-minute-cancel-btn{background:linear-gradient(135deg,#00cec9,#00b894);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #00cec94d;width:100%;text-align:center}.last-minute-cancel-btn:hover{background:linear-gradient(135deg,#00b894,#00a085);transform:translateY(-2px);box-shadow:0 6px 20px #00cec966}.reload-section{display:flex;justify-content:center;align-items:center;margin:20px 0;padding:10px}.view-more{text-align:center;margin:40px 0;padding:20px 0}.view-more-btn{background:none;border:2px solid #ff6b6b;color:#ff6b6b;padding:10px 30px;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.view-more-btn:hover{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b4d}.dashboard-container>footer{margin-left:280px;width:calc(100% - 280px);background:#2c3e50;border-top:1px solid #e0e0e0;z-index:10}@media (max-width: 1024px){.main-content{margin-left:0;max-width:100vw;padding:24px 24px 100px}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block}.menu-toggle{display:flex}.header-center{display:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.dashboard-container>footer{margin-left:0;width:100%}}@media (max-width: 768px){.dashboard-header{padding:12px 16px}.header-right{gap:12px}.user-name{display:none}.help-btn{padding:6px 12px;font-size:12px}.main-content{padding:20px 16px}.class-card-horizontal{flex-direction:column;align-items:flex-start}.class-card-horizontal .class-image{width:100%;height:120px}.class-actions,.start-class-btn,.view-btn{width:100%}}@media (max-width: 480px){.sidebar{width:100%}.announcement{flex-direction:column;align-items:flex-start}}.nav-item:focus,.join-class-btn:focus,.review-btn:focus,.help-btn:focus,.view-all-btn:focus{outline:2px solid #ff9a9e;outline-offset:2px}.sidebar.open{animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.class-card.loading{opacity:.7;pointer-events:none}.class-card.loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.start-class-btn:hover:not(:disabled){background-color:#45a049}.start-class-btn:disabled{background-color:#ccc;color:#666;cursor:not-allowed;opacity:.7}.leave-class-btn:disabled{background:linear-gradient(135deg,#ffb3b3,#ffc9b3);cursor:not-allowed;opacity:.6;box-shadow:none;transform:none}.last-minute-cancel-btn:disabled{background:linear-gradient(135deg,#a3e3e0,#8fd9c8);cursor:not-allowed;opacity:.6;box-shadow:none;transform:none}.leave-class-btn:disabled:hover,.last-minute-cancel-btn:disabled:hover{transform:none;box-shadow:none}body{font-family:Poppins,sans-serif;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#333;overflow-x:hidden}.music-notes-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.music-note{position:absolute;font-size:2rem;color:#fff9;animation:fall linear infinite;text-shadow:0 0 10px rgba(255,255,255,.8)}.music-note:nth-child(1){left:10%;animation-duration:8s;animation-delay:0s}.music-note:nth-child(2){left:25%;animation-duration:10s;animation-delay:2s}.music-note:nth-child(3){left:40%;animation-duration:7s;animation-delay:4s}.music-note:nth-child(4){left:55%;animation-duration:9s;animation-delay:1s}.music-note:nth-child(5){left:70%;animation-duration:11s;animation-delay:3s}.music-note:nth-child(6){left:85%;animation-duration:8s;animation-delay:5s}.music-note:nth-child(7){left:15%;animation-duration:10s;animation-delay:6s}.music-note:nth-child(8){left:60%;animation-duration:9s;animation-delay:7s}@keyframes fall{0%{top:-10%;transform:translate(0) rotate(0);opacity:1}50%{transform:translate(20px) rotate(180deg)}to{top:110%;transform:translate(-20px) rotate(360deg);opacity:.3}}.profile-container{position:relative;z-index:2;padding:20px;max-width:1400px;margin:0 auto}.content-header{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:20px 24px;margin:-20px -20px 30px;text-align:center;border-radius:0 0 30px 30px;box-shadow:0 10px 30px #f5576c66;animation:headerPulse 2s ease-in-out infinite}@keyframes headerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.content-header h1{font-size:24px;font-weight:800;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.2);margin:0}.profile-info-centered{display:flex;flex-direction:column;align-items:center;margin-bottom:40px;animation:fadeInDown 1s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.profile-avatar-center{position:relative;margin-bottom:20px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.avatar-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.6),transparent);animation:pulse 2s ease-in-out infinite;z-index:-1}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.3}}.avatar-image-center{width:180px;height:180px;border-radius:50%;object-fit:cover;border:8px solid #fff;box-shadow:0 10px 40px #0000004d;transition:transform .3s ease}.avatar-image-center:hover{transform:scale(1.1) rotate(5deg)}.edit-button-floating{position:absolute;bottom:10px;right:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:3px solid white;border-radius:50%;width:50px;height:50px;font-size:1.5rem;cursor:pointer;box-shadow:0 6px 20px #667eea99;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.edit-button-floating:hover{transform:rotate(15deg) scale(1.1);box-shadow:0 8px 25px #667eeacc}.profile-name-center{font-size:2.5rem;font-weight:900;text-shadow:3px 3px 6px rgba(0,0,0,.3);margin:0;animation:colorChange 3s ease-in-out infinite}@keyframes colorChange{0%,to{color:#fff}50%{color:gold}}.info-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px;animation:fadeInUp 1s ease-out;max-width:900px;margin-left:auto;margin-right:auto;padding:0 10px;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.info-card{display:flex;align-items:center;gap:15px;padding:20px;border-radius:20px;box-shadow:0 8px 25px #0003;transition:all .3s ease;animation:cardFloat 3s ease-in-out infinite}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.info-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 12px 35px #0000004d}.info-card-purple{background:linear-gradient(135deg,#a18cd1,#fbc2eb);animation-delay:0s}.info-card-blue{background:linear-gradient(135deg,#4facfe,#00f2fe);animation-delay:.2s}.info-card-green{background:linear-gradient(135deg,#43e97b,#38f9d7);animation-delay:.4s}.info-card-orange{background:linear-gradient(135deg,#fa709a,#fee140);animation-delay:.6s}.info-card-pink{background:linear-gradient(135deg,#ff9a9e,#fecfef);animation-delay:.8s}.info-card-yellow{background:linear-gradient(135deg,#ffecd2,#fcb69f);animation-delay:1s}.info-icon{font-size:3rem;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.2));animation:iconSpin 4s linear infinite}@keyframes iconSpin{0%,90%,to{transform:rotate(0)}95%{transform:rotate(360deg)}}.info-content{display:flex;flex-direction:column;flex:1}.info-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.info-value{font-size:1rem;font-weight:800;text-shadow:1px 1px 3px rgba(0,0,0,.2);word-break:break-word}.story-characters-section{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:30px;padding:30px;margin-bottom:40px;box-shadow:0 15px 40px #0000004d;animation:fadeInUp 1.2s ease-out}.characters-header{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:30px;text-align:center}.characters-title{font-size:2rem;font-weight:900;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.3);margin:0;animation:titleBounce 2s ease-in-out infinite}@keyframes titleBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.characters-progress{display:flex;align-items:center;gap:10px;background:#fff3;padding:10px 20px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.progress-badge{background:linear-gradient(135deg,gold,#ffed4e);color:#333;font-size:1.5rem;font-weight:900;padding:8px 16px;border-radius:15px;box-shadow:0 4px 15px #ffd70080;animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.progress-text{color:#fff;font-size:1.1rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.3)}.characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px}.character-card{background:#fff;border-radius:20px;padding:15px;text-align:center;border:4px solid;box-shadow:0 8px 20px #0003;transition:all .3s ease;animation:cardPop .5s ease-out;position:relative;overflow:hidden}@keyframes cardPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.character-card.unlocked{cursor:pointer}.character-card.unlocked:hover{transform:translateY(-10px) rotate(5deg) scale(1.05);box-shadow:0 15px 35px #0000004d}.character-card.unlocked:before{content:"✨";position:absolute;top:5px;right:5px;font-size:1.2rem;animation:sparkle 1.5s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.character-card.locked{background:linear-gradient(135deg,#e0e0e0,#bdbdbd);opacity:.6;filter:grayscale(100%)}.character-emoji{font-size:3.5rem;margin-bottom:10px;animation:emojiFloat 3s ease-in-out infinite}@keyframes emojiFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.character-card.locked .character-emoji{animation:none}.character-name{font-size:.9rem;font-weight:700;color:#333;margin-bottom:8px;min-height:36px;display:flex;align-items:center;justify-content:center}.character-tier{display:inline-block;padding:4px 12px;border-radius:10px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;box-shadow:0 2px 8px #0003}.tier-bronze{background:linear-gradient(135deg,#cd7f32,#e6a85c);color:#fff}.tier-silver{background:linear-gradient(135deg,silver,#e8e8e8);color:#333}.tier-gold{background:linear-gradient(135deg,gold,#ffed4e);color:#333}.tier-platinum{background:linear-gradient(135deg,#e5e4e2,#fff);color:#333}.tier-diamond{background:linear-gradient(135deg,#b9f2ff,#00d4ff);color:#333}.character-requirement{font-size:.75rem;color:#666;font-weight:600;min-height:32px;display:flex;align-items:center;justify-content:center}.character-card.unlocked .character-requirement{color:#4caf50;font-weight:800}.profile-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px}.section-card{border-radius:25px;padding:25px;box-shadow:0 10px 30px #0003;transition:all .3s ease;animation:slideIn 1s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.section-card:hover{transform:translateY(-10px) rotate(2deg);box-shadow:0 15px 40px #0000004d}.section-card-media,.section-card-videos{background:linear-gradient(135deg,#f093fb,#f5576c)}.section-card-photos{background:linear-gradient(135deg,#4facfe,#00f2fe)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:3px dashed rgba(255,255,255,.5);padding-bottom:15px}.section-header h3{font-size:1.6rem;font-weight:800;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2);margin:0}.section-icon{background:#fff;color:#f5576c;border:none;border-radius:50%;width:50px;height:50px;font-size:1.5rem;cursor:pointer;box-shadow:0 6px 15px #0003;transition:all .3s ease;animation:iconBounce 2s ease-in-out infinite}@keyframes iconBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.section-icon:hover{transform:scale(1.2) rotate(15deg)}.upload-button{padding:12px 24px;background:#fff;color:#f5576c;border:none;border-radius:15px;font-size:1rem;font-weight:800;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #0003;text-transform:uppercase;letter-spacing:1px}.upload-button:hover{background:gold;color:#f5576c;transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #0000004d}.no-content{color:#fff;font-size:1.2rem;font-weight:600;text-align:center;margin-top:20px;text-shadow:1px 1px 3px rgba(0,0,0,.2)}.videos-grid,.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;margin-top:20px}.video-item,.photo-item{display:block;background:#fff;border-radius:15px;padding:10px;text-align:center;box-shadow:0 6px 15px #00000026;text-decoration:none;color:#333;transition:all .3s ease;font-weight:600}.video-item:hover,.photo-item:hover{background:gold;transform:translateY(-5px) rotate(3deg);box-shadow:0 10px 25px #00000040}@media (max-width: 1024px){.characters-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px}.character-emoji{font-size:3rem}}@media (max-width: 768px){.profile-container{padding:15px}.content-header{margin:-15px -15px 25px;padding:15px 20px}.content-header h1{font-size:18px}.avatar-image-center{width:140px;height:140px}.avatar-glow{width:180px;height:180px}.profile-name-center{font-size:2rem}.info-cards-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.characters-title{font-size:1.5rem}.characters-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.character-card{padding:12px}.character-emoji{font-size:2.5rem}.character-name{font-size:.8rem;min-height:32px}.profile-sections{grid-template-columns:1fr}.music-note{font-size:1.5rem}}@media (max-width: 480px){.profile-container{padding:10px}.content-header{margin:-10px -10px 20px}.avatar-image-center{width:120px;height:120px}.avatar-glow{width:160px;height:160px}.profile-name-center{font-size:1.5rem}.info-cards-grid{grid-template-columns:1fr;gap:12px}.info-icon{font-size:2rem}.info-value{font-size:1.1rem}.story-characters-section{padding:20px 15px}.characters-title{font-size:1.2rem}.progress-badge{font-size:1.2rem;padding:6px 12px}.progress-text{font-size:.9rem}.characters-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}.character-card{padding:10px;border-width:3px}.character-emoji{font-size:2rem;margin-bottom:6px}.character-name{font-size:.7rem;min-height:28px}.character-tier{font-size:.6rem;padding:3px 8px}.character-requirement{font-size:.65rem;min-height:28px}}.message-container{padding:20px;min-height:100vh;font-family:Arial,sans-serif}.content-header2{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:16px 24px;margin:-44px -43px 43px;text-align:center;border-radius:0 0 20px 20px}.content-header2 h1{font-size:18px;font-weight:600;letter-spacing:1px}.user-info{margin-top:10px;font-size:14px;opacity:.9}.user-info span{background:#fff3;padding:5px 12px;border-radius:15px;font-weight:500}.message-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:15px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a;text-align:center}.message-header h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.message-content{background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:20px;padding:0;box-shadow:0 15px 35px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky}.message-layout{display:flex;height:100%}.contacts-panel{width:350px;border-right:2px solid rgba(0,0,0,.1);display:flex;flex-direction:column;background:linear-gradient(135deg,#ffecd2,#fcb69f)}.search-container{padding:20px;border-bottom:2px solid rgba(0,0,0,.1)}.search-input{width:100%;padding:12px 16px;border:none;border-radius:25px;font-size:1rem;background:#ffffffe6;box-shadow:0 4px 15px #0000001a;transition:all .3s ease}.search-input:focus{outline:none;box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.contacts-panel{position:fixed}.contacts-list{flex:1;overflow-y:auto;padding:10px 0}.contact-item{display:flex;align-items:center;padding:15px 20px;cursor:pointer;transition:all .3s ease;border-bottom:1px solid rgba(0,0,0,.05)}.contact-item:hover{background:#ffffff4d;transform:translate(5px)}.contact-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #0003}.contact-avatar{position:relative;margin-right:15px;flex-shrink:0}.contact-avatar img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.5)}.online-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:#4caf50;border-radius:50%;border:2px solid white;box-shadow:0 2px 8px #0003}.contact-info{flex:1;min-width:0}.contact-name{font-weight:700;font-size:1.1rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-last-message{font-size:.9rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-time-container{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;margin-left:10px}.contact-time{font-size:.8rem;opacity:.7;margin-bottom:2px}.unread-count{background:#f44;color:#fff;font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;box-shadow:0 2px 4px #0003}.chat-panel{flex:1;display:flex;flex-direction:column;background:linear-gradient(135deg,#a8edea,#fed6e3)}.chat-placeholder{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;margin:20px;box-shadow:0 15px 35px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.placeholder-content{text-align:center;color:#fff;max-width:400px;padding:40px}.placeholder-content h3{font-size:2.2rem;font-weight:700;margin-bottom:20px;background:linear-gradient(135deg,#ffecd2,#fcb69f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:1px}.placeholder-content p{font-size:1.1rem;opacity:.9;line-height:1.6;background:linear-gradient(135deg,#a8edea,#fed6e3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:500}.chat-header{padding:20px;border-bottom:2px solid rgba(0,0,0,.1);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.chat-contact-info{display:flex;align-items:center;gap:15px}.chat-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.3)}.chat-contact-name{font-size:1.3rem;font-weight:700;color:#fff}.chat-contact-status{font-size:.85rem;color:#ffffffe6;margin-top:2px;font-weight:500}.chat-contact-status.online{color:#a5f3a5}.chat-contact-status.typing{color:#a5f3a5;font-style:italic}.chat-messages{min-height:0;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.message{display:flex;margin-bottom:10px}.message.own{justify-content:flex-end}.message.other{justify-content:flex-start}.message-content{max-width:100%;height:auto;padding:6px 10px;border-radius:20px;box-shadow:0 4px 15px #0000001a;position:relative}.message.own .message-content{background:linear-gradient(135deg,#615eff,#058d95 80%);color:#fff;height:auto;border-bottom-right-radius:2px}.message.other .message-content{background:linear-gradient(135deg,#054d8d,#0bb3bc 80%);color:#fff;height:auto;border-bottom-left-radius:2px}.message-text{font-size:.9rem;line-height:1.3;margin-bottom:3px}.file-message{display:flex;flex-direction:column;gap:8px}.uploaded-image{max-width:200px;max-height:200px;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #0000001a}.uploaded-video{max-width:200px;max-height:200px;border-radius:10px;box-shadow:0 2px 8px #0000001a}.video-thumbnail-container{position:relative;display:inline-block}.video-thumbnail{max-width:200px;max-height:200px;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #0000001a}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.7);pointer-events:none}.document-preview{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border-radius:8px;border:2px solid #007bff;max-width:300px;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .3s ease}.document-preview:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.document-icon{font-size:32px;flex-shrink:0}.document-info{flex:1;min-width:0}.document-name{font-weight:500;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}.document-size{font-size:12px;color:#666}.document-download-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;width:32px;height:32px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .3s ease;flex-shrink:0}.document-download-btn:hover{transform:scale(1.1);box-shadow:0 4px 15px #0003}.message-meta{display:flex;justify-content:flex-end;align-items:center;margin-top:5px;gap:4px}.message-time{font-size:11px;color:#fffc}.message.other .message-time{color:#ffffffb3}.message-status{display:flex;align-items:center;margin-left:4px}.tick{font-size:12px;margin-left:2px}.tick.clock{font-size:10px;opacity:.6}.tick.failed{font-size:12px;color:#f44}.tick.single,.tick.double{color:#ffffffb3;font-size:12px}.tick.double.blue{color:#53bdeb;font-weight:700}.chat-input-container{padding:20px;border-top:2px solid rgba(0,0,0,.1);background:#ffffff80}.chat-input-wrapper{display:flex;gap:10px;align-items:center}.chat-input{flex:1;padding:12px 18px;border:none;border-radius:25px;font-size:1rem;background:#ffffffe6;box-shadow:0 4px 15px #0000001a;transition:all .3s ease}.chat-input:focus{outline:none;box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.send-button{width:50px;height:50px;border:none;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center}.send-button:hover:not(:disabled){transform:scale(1.1);box-shadow:0 6px 20px #0000004d}.send-button:disabled{opacity:.5;cursor:not-allowed}.send-icon{font-size:1.2rem;transform:rotate(0)}.pin-button{width:50px;height:50px;border:none;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.pin-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #0000004d}.upload-options{position:absolute;bottom:60px;right:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;padding:10px;box-shadow:0 4px 15px #0003;display:flex;flex-direction:column;gap:5px;z-index:1000}.upload-option{background:#ffffff1a;border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.upload-option:hover{background:#fff3;transform:translateY(-2px)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000}.warning-modal-content{background:linear-gradient(135deg,#ffecd2,#fcb69f);border-radius:15px;padding:30px;box-shadow:0 10px 30px #0000004d;max-width:400px;width:90%;text-align:center;position:relative}.warning-content h3{color:#d32f2f;font-size:1.5rem;margin-bottom:15px;font-weight:700}.warning-content p{color:#333;font-size:1rem;line-height:1.5;margin-bottom:20px}.warning-ok-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s ease;box-shadow:0 4px 15px #0003}.warning-ok-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.modal-content{position:relative;max-width:90vw;max-height:90vh;background:#fff;border-radius:10px;padding:20px;box-shadow:0 10px 30px #0000004d}.modal-close{position:absolute;top:10px;right:10px;background:#00000080;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:10001}.modal-close:hover{background:#000000b3}.modal-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:5px}.modal-video{max-width:100%;max-height:80vh;border-radius:5px}.modal-document{text-align:center;padding:20px;background:#fff;border-radius:10px;max-width:400px;margin:0 auto}.document-view-header h3{color:#333;margin-bottom:10px;font-size:18px}.document-view-header p{color:#666;margin-bottom:20px;font-size:14px}.document-actions{display:flex;justify-content:center}.download-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .3s ease;box-shadow:0 4px 15px #0003}.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.screenshot-blocked{width:200px;height:200px;background:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.blocked-content{color:#fff;font-size:24px;font-weight:700;text-align:center}.clickable{cursor:pointer;transition:transform .2s ease}.clickable:hover{transform:scale(1.02)}.mobile-hidden{display:none!important}.back-button{background:#fff3;border:none;color:#fff;padding:8px 12px;border-radius:20px;cursor:pointer;font-size:14px;margin-right:15px;transition:all .3s ease}.back-button:hover{background:#ffffff4d;transform:translateY(-2px)}@media (max-width: 768px){.message-container{padding:10px}.message-content{height:calc(100vh - 150px)}.contacts-panel{width:300px}.message-header h1{font-size:2rem}.modal-content{max-width:95vw;max-height:95vh;padding:10px}.modal-image,.modal-video{max-height:70vh}}@media (max-width: 640px){.message-layout{flex-direction:column}.contacts-panel{width:100%;height:200px}.contacts-list{display:flex;overflow-x:auto;overflow-y:hidden;padding:10px}.contact-item{flex-shrink:0;width:200px;margin-right:10px}.chat-panel{height:calc(100vh - 350px)}}@media (min-width: 769px){.contacts-panel{position:fixed;top:0;left:0;height:100vh;width:350px;overflow-y:auto;background:linear-gradient(135deg,#ffecd2,#fcb69f);border-right:2px solid rgba(0,0,0,.1);z-index:10}.message-layout{margin-left:350px;height:100vh}}.typing-indicator{padding:12px 16px!important;min-width:60px}.typing-dots{display:flex;gap:4px;align-items:center}.typing-dots span{width:8px;height:8px;background-color:#ffffffb3;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out both}.typing-dots span:nth-child(1){animation-delay:0s}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}}@media (max-width: 460px){.main_container{padding-right:100px}.chat-placeholder{display:none}.contact-item{width:auto;height:auto;padding:25px 23px 23px 15px}.contact-avatar img{width:40px;height:40px}.contrat-list{padding:5px 0}.contact-name{font-size:1rem}.contact-last-message{font-size:.8rem}}.class-report-container{padding:20px;background:linear-gradient(135deg,#ff9a9e,#fecfef 50% 100%);min-height:100vh;font-family:Arial,sans-serif}.content-header3{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:16px 24px;margin:-44px -43px 24px;text-align:center;border-radius:0 0 20px 20px}.content-header3 h1{font-size:18px;font-weight:600;letter-spacing:1px}.class-report-filters{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.date-filter{display:flex;gap:10px;flex-wrap:wrap}.date-from,.date-to{display:flex;flex-direction:column;gap:6px}.date-from label,.date-to label{font-size:12px;color:#4a5568}.date-input,.filter-select{padding:10px 15px;border:2px solid #e0e0e0;border-radius:20px;background:#fff;font-size:14px;min-width:200px;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist}.date-input:focus,.filter-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 10px #667eea4d}.class-tabs{display:flex;gap:10px;margin-bottom:30px;align-items:center;flex-wrap:wrap}.tab-btn{padding:12px 25px;border:none;border-radius:20px;background:#fff;color:#666;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0000001a}.tab-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.tab-btn.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.total-classes{margin-left:auto;background:#fff;padding:10px 20px;border-radius:20px;font-weight:700;box-shadow:0 2px 10px #0000001a}.total-classes .count{background:linear-gradient(45deg,#ff6b6b,#feca57);color:#fff;padding:5px 12px;border-radius:15px;margin-left:10px}.classes-content{display:flex;flex-direction:column;gap:20px}.class-item{display:flex;background:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 20px #0000001a;transition:all .3s ease;align-items:center;gap:20px}.class-item:hover{transform:translateY(-5px);box-shadow:0 8px 30px #00000026}.class-image{flex-shrink:0;width:120px;height:80px;border-radius:15px;overflow:hidden}.class-image img{width:100%;height:100%;object-fit:cover}.class-details{flex:1}.class-date{font-size:16px;font-weight:700;color:#333;margin-bottom:10px}.class-badges{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.badge{padding:5px 12px;border-radius:15px;font-size:12px;font-weight:700;color:#fff}.type-badge{background:linear-gradient(45deg,#74b9ff,#0984e3)}.type-badge.group-badge{background:linear-gradient(45deg,#a29bfe,#6c5ce7)}.class-id{font-size:12px;color:#888;margin-bottom:5px;font-family:monospace}.subject-keyboard{background:linear-gradient(45deg,#fd79a8,#e84393)}.subject-piano{background:linear-gradient(45deg,#fdcb6e,#e17055)}.subject-guitar{background:linear-gradient(45deg,#55a3ff,#3742fa)}.subject-violin{background:linear-gradient(45deg,#26de81,#20bf6b)}.subject-drums{background:linear-gradient(45deg,#ff7675,#d63031)}.status-not-started{background:linear-gradient(45deg,#ffeaa7,#fdcb6e);color:#2d3436}.status-completed{background:linear-gradient(45deg,#55efc4,#00b894)}.status-cancelled{background:linear-gradient(45deg,#ff7675,#d63031)}.status-missed{background:linear-gradient(45deg,#fd79a8,#e84393)}.class-curriculum,.class-instructor{font-size:14px;color:#666;margin-bottom:5px}.class-actions{flex-shrink:0;display:flex;gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.start-btn{background:linear-gradient(45deg,#00b894,#55efc4);color:#fff}.view-btn{background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff}.reschedule-btn{background:linear-gradient(45deg,#fdcb6e,#e17055);color:#fff}.not-shown-btn{background:linear-gradient(45deg,#a4b0be,#57606f);color:#fff}.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.view-more-section{display:flex;justify-content:center;gap:20px;margin-top:30px}.view-more-btn{padding:12px 30px;border:none;border-radius:25px;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}.view-more-btn.secondary{background:linear-gradient(45deg,#ffeaa7,#fdcb6e);color:#2d3436}.view-more-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}@media (max-width: 768px){.class-item{flex-direction:column;text-align:center}.class-image{width:100%;height:120px}.class-tabs{justify-content:center}.total-classes{margin-left:0;margin-top:10px}.class-report-filters{flex-direction:row}.date-input,.filter-select{min-width:140px}.class-actions{display:flex;flex-direction:row;gap:10px;justify-content:center}}.my-assignments-container{padding:20px;background:linear-gradient(135deg,#a8edea,#fed6e3);min-height:100vh;font-family:Arial,sans-serif}.assignments-nav{display:flex;gap:10px;margin-bottom:30px;justify-content:center;flex-wrap:wrap}.nav-btn{padding:12px 25px;border:none;border-radius:25px;background:#fff;color:#666;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0000001a}.nav-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.nav-btn.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.assignments-header,.uploads-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.assignments-header h2,.uploads-header h2,.assessments-header h2{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:15px 30px;border-radius:25px;font-size:20px;margin:0;box-shadow:0 4px 15px #0003}.upload-btn{background:linear-gradient(45deg,#00b894,#55efc4);color:#fff;border:none;padding:12px 25px;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s ease}.upload-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.content-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.content-tab{padding:10px 20px;border:none;border-radius:20px;background:#fff;color:#666;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0000001a}.content-tab:hover{transform:translateY(-2px)}.content-tab.active{background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff}.assignment-card{display:flex;background:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 20px #0000001a;margin-bottom:20px;align-items:center;gap:20px;transition:all .3s ease}.assignment-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px #00000026}.assignment-thumbnail{width:120px;height:80px;border-radius:15px;overflow:hidden;flex-shrink:0}.assignment-thumbnail img{width:100%;height:100%;object-fit:cover}.assignment-info{flex:1}.shared-by{font-size:14px;color:#666;margin-bottom:10px}.shared-badge{background:linear-gradient(45deg,#fd79a8,#e84393);color:#fff;padding:3px 8px;border-radius:10px;font-size:12px;font-weight:700}.assignment-info h3{margin:0 0 10px;color:#333;font-size:18px}.assignment-info p{margin:0;color:#666;font-size:14px}.view-btn,.action-view-btn{background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s ease}.view-btn:hover,.action-view-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.action-view-btn.completed{background:linear-gradient(45deg,#00b894,#55efc4);color:#fff}.search-section{margin-bottom:20px}.search-inputs{display:flex;gap:15px;flex-wrap:wrap}.search-input,.date-input{padding:10px 15px;border:2px solid #e0e0e0;border-radius:20px;background:#fff;font-size:14px;flex:1;min-width:200px}.search-input:focus,.date-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 10px #667eea4d}.search-btn{background:linear-gradient(45deg,#26de81,#20bf6b);color:#fff;border:none;padding:10px 20px;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s ease}.search-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.empty-state{text-align:center;padding:60px 20px;background:#fff;border-radius:20px;box-shadow:0 4px 20px #0000001a}.empty-state p{font-size:18px;color:#666;margin:0}.assessments-section{background:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 20px #0000001a}.filter-section{margin-bottom:20px}.filter-row{display:flex;gap:15px;align-items:center;margin-bottom:15px;flex-wrap:wrap}.subject-select,.stage-select,.student-input,.entries-select{padding:8px 12px;border:2px solid #e0e0e0;border-radius:15px;background:#fff;font-size:14px}.refresh-btn{background:linear-gradient(45deg,#fdcb6e,#e17055);color:#fff;border:none;padding:8px 12px;border-radius:15px;cursor:pointer;font-size:16px}.status-filters{display:flex;gap:20px;flex-wrap:wrap}.status-filters label{display:flex;align-items:center;gap:5px;font-size:14px;cursor:pointer}.table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.export-buttons{display:flex;gap:10px}.export-btn{background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:16px}.assessments-table{overflow-x:auto;margin-bottom:20px}.assessments-table table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 4px 20px #0000001a}.assessments-table th{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:15px 10px;text-align:left;font-weight:700;font-size:14px}.assessments-table td{padding:15px 10px;border-bottom:1px solid #f0f0f0;font-size:14px}.assessments-table tr:hover{background:#f8f9ff}.student-info strong{color:#333}.student-info small{color:#666}.status-badge{padding:5px 12px;border-radius:15px;font-size:12px;font-weight:700;color:#fff}.status-badge.pending,.status-badge.incomplete{background:linear-gradient(45deg,#fdcb6e,#e17055)}.status-badge.submitted,.status-badge.completed{background:linear-gradient(45deg,#00b894,#55efc4)}.pagination{display:flex;justify-content:space-between;align-items:center}.pagination-controls{display:flex;gap:10px}.pagination-controls button{padding:8px 15px;border:2px solid #e0e0e0;border-radius:10px;background:#fff;cursor:pointer;transition:all .3s ease}.pagination-controls button.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-color:transparent}.pagination-controls button:hover{border-color:#667eea}.assessment-form-overlay{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.assessment-form-container{background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 50%,#a8edea 75%,#fed6e3);border-radius:20px;padding:30px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideIn .3s ease-out;position:relative}.assessment-form-container::-webkit-scrollbar{display:none}.assessment-form-container{-ms-overflow-style:none;scrollbar-width:none}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.form-header h2{margin:0;color:#333;font-size:24px;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666;padding:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.close-btn:hover{background:#f5f5f5;color:#333}.assessment-form{display:flex;flex-direction:column;gap:25px}.question-item{padding:25px;background:linear-gradient(135deg,#fff,#f0f8ff,#fff5f5);border-radius:20px;border-left:6px solid #667eea;transition:all .4s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a}.question-item:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s ease}.question-item:hover:before{transform:translate(100%)}.question-item:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 10px 30px #00000026;border-left-color:#ff6b6b}.question-text{margin:0 0 15px;font-size:16px;font-weight:600;color:#333;line-height:1.4;display:flex;align-items:center;gap:10px}.question-icon{font-size:20px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}.answer-options{display:flex;gap:30px;flex-wrap:wrap}.option-label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 18px;border-radius:15px;transition:all .3s ease;background:#fff;border:2px solid #e0e0e0;box-shadow:0 2px 8px #0000001a;position:relative;overflow:hidden}.option-label:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}.option-label:hover:before{left:100%}.option-label:hover{border-color:#667eea;transform:translateY(-2px) scale(1.05);box-shadow:0 4px 15px #00000026}.option-label input[type=radio]{margin:0;width:20px;height:20px;accent-color:#667eea;cursor:pointer}.option-text{font-weight:600;color:#333;font-size:15px}.option-label.yes-option:has(input:checked){background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff;border-color:#4ecdc4;animation:bounceIn .4s ease}.option-label.no-option:has(input:checked){background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff;border-color:#ff6b6b;animation:bounceIn .4s ease}.option-label:has(input:checked) .option-text{color:#fff}@keyframes bounceIn{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.form-actions{display:flex;justify-content:center;margin-top:20px;padding-top:20px;border-top:2px solid #f0f0f0}.submit-btn{background:linear-gradient(45deg,#00b894,#55efc4);color:#fff;border:none;padding:15px 40px;border-radius:25px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #00b8944d}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00b89466}@keyframes floatNote{0%{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-20px) rotate(180deg);opacity:1}to{transform:translateY(0) rotate(360deg);opacity:.7}}.assessment-form-container:after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" font-size="20" fill="rgba(255,255,255,0.1)">♪</text></svg>') repeat;background-size:50px 50px;animation:floatNote 4s ease-in-out infinite;pointer-events:none}.report-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;background:#fff;border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:0 6px 18px #667eea26}.filters-left{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;color:#4a5568}.field input[type=date],.field input[type=text],.field select{height:36px;min-width:160px;padding:6px 10px;border:1px solid #e2e8f0;border-radius:8px;outline:none;background:#fff}.field.grow{flex:1 1 220px;min-width:220px}.search-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;height:36px;padding:0 14px;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #4facfe59}.controls-right{display:flex;gap:12px;align-items:center;margin-left:auto}.total-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#2d3748;font-size:12px;box-shadow:0 4px 12px #fcb69f59}.download-btn{background:linear-gradient(135deg,#34d399,#10b981);color:#fff;border:none;height:36px;padding:0 16px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #10b98159}.download-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.table-card{background:#fff;border-radius:16px;box-shadow:0 12px 24px #0000000f;overflow:hidden}.table-scroll{width:100%;overflow:auto}.report-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:#2d3748}.report-table thead th{position:sticky;top:0;z-index:1;background:linear-gradient(135deg,#a8edea,#fed6e3);color:#2d3748;text-align:left;padding:12px 14px;font-weight:700;border-bottom:1px solid #e2e8f0;white-space:nowrap}.report-table tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.report-table tbody tr:nth-child(2n) td{background:#fffdfc}.students{display:flex;flex-wrap:wrap;gap:6px}.student-pill{padding:4px 8px;background:#eef2ff;color:#4f46e5;border-radius:999px;font-size:12px;font-weight:600}.badge,.chip,.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.badge.on-time{background:#dcfce7;color:#166534}.badge.early-out{background:#ffedd5;color:#9a3412}.badge.late-in{background:#fee2e2;color:#991b1b}.badge.late-out{background:#fecaca;color:#7f1d1d}.badge.early-in{background:#e0f2fe;color:#075985}.chip.on-time{background:#e0fce7;color:#137a3a}.chip.late-in{background:#ffe4e6;color:#b91c1c}.chip.early-in{background:#dbeafe;color:#1d4ed8}.chip.early-out{background:#ffedd5;color:#9a3412}.chip.late-out{background:#fecaca;color:#7f1d1d}.pill.regular{background:#e9d5ff;color:#6b21a8}.pill.special{background:#fde68a;color:#92400e}.pill.demo{background:#bae6fd;color:#075985}.class-type-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.class-type-badge.normal{background:linear-gradient(45deg,#74b9ff,#0984e3);color:#fff}.class-type-badge.group{background:linear-gradient(45deg,#a29bfe,#6c5ce7);color:#fff}.group-name-badge{display:inline-block;margin-top:4px;padding:2px 8px;background:#e9d5ff;color:#6b21a8;border-radius:8px;font-size:11px;font-weight:500}@media (max-width: 1024px){.report-table{font-size:13px}.field input[type=date],.field input[type=text],.field select{min-width:140px}}@media (max-width: 768px){.report-controls{align-items:stretch}.filters-left{width:100%}.controls-right{width:100%;justify-content:space-between}.table-scroll{overflow-x:auto}}.admin-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 75%,#a8e6cf)}.admin-login-card{width:100%;max-width:460px;background:#fffffff2;border:1px solid rgba(255,255,255,.35);border-radius:22px;padding:36px;box-shadow:0 20px 36px #0000001f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-login-header{text-align:center;margin-bottom:28px}.admin-login-title{font-size:26px;font-weight:800;color:#2d3748;margin:0 0 6px}.admin-login-subtitle{font-size:15px;color:#718096}.admin-login-form{display:flex;flex-direction:column;gap:22px}.admin-form-group{display:flex;flex-direction:column;gap:8px}.admin-form-label{font-size:14px;font-weight:600;color:#4a5568}.admin-form-input{width:100%;padding:14px 16px;font-size:16px;color:#1a202c;background:#fff;border:2px solid #e2e8f0;border-radius:12px;transition:all .2s ease}.admin-form-input:focus{outline:none;border-color:#ff9a9e;box-shadow:0 0 0 3px #ff9a9e26}.admin-form-input::placeholder{color:#a0aec0}.admin-error{border-color:#e53e3e}.admin-error-message{color:#e53e3e;font-size:12px;font-weight:500}.admin-password-wrapper{position:relative;display:flex;align-items:center}.admin-toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:#718096;font-weight:600;font-size:13px;cursor:pointer;padding:6px 8px;border-radius:8px}.admin-toggle-password:hover{background:#edf2f7;color:#4a5568}.admin-login-btn{width:100%;padding:14px 16px;border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease;background:linear-gradient(135deg,#ff9a9e,#fecfef);box-shadow:0 10px 22px #ff9a9e59}.admin-login-btn:hover{transform:translateY(-1px)}.admin-login-btn:active{transform:translateY(0)}.admin-login-btn:disabled{opacity:.7;cursor:not-allowed}.admin-login-footer{text-align:center;margin-top:22px}.admin-forgot-password{color:#ff9a9e;text-decoration:none;font-size:14px;font-weight:600}.admin-forgot-password:hover{text-decoration:underline}.admin-toggle-password:focus,.admin-form-input:focus,.admin-login-btn:focus,.admin-forgot-password:focus{outline:2px solid #ff9a9e;outline-offset:2px}.admin-loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ff9a9e,#fecfef 25% 75%,#a8e6cf);display:flex;align-items:center;justify-content:center;z-index:1000}.admin-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffffff2;border-radius:22px;padding:40px;box-shadow:0 20px 36px #0000001f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-loading-spinner{width:50px;height:50px;border:5px solid #e2e8f0;border-top:5px solid #ff9a9e;border-radius:50%;animation:admin-spin 1s linear infinite;margin-bottom:20px}@keyframes admin-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.admin-loading-container p{font-size:18px;color:#2d3748;margin:0;font-weight:600}@media (max-width: 768px){.admin-login-card{padding:28px 22px;border-radius:20px}.admin-login-title{font-size:24px}.admin-login-subtitle{font-size:14px}.admin-login-btn{padding:13px}}.admin-btn-spinner{display:inline-block;width:16px;height:16px;margin-right:8px;border:2.5px solid rgba(255,154,158,.7);border-top-color:#ff9a9e;border-radius:50%;animation:admin-btn-spin 1s linear infinite;vertical-align:middle}@keyframes admin-btn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){.admin-login-card{padding:22px 18px}.admin-login-title{font-size:22px}.admin-form-input{padding:12px 14px}}:root{--primary: #1570ef;--primary-600: #175cd3;--primary-50: #eff4ff;--bg: #f7f8fa;--card: #ffffff;--border: #e5e7eb;--text: #0f172a;--muted: #6b7280;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--radius: 10px}*{box-sizing:border-box}.admin-shell{display:grid;grid-template-columns:260px 1fr;gap:16px;background:var(--bg);min-height:100dvh}.sidebar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;position:sticky;top:16px;height:fit-content}.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.sidebar-title{margin:0;font-size:16px;color:var(--text)}.sidebar-close{display:none;background:transparent;border:1px solid transparent;font-size:20px;line-height:1;padding:4px 8px;border-radius:6px;cursor:pointer}.sidebar-nav{display:grid;gap:6px}.nav-item{text-align:left;padding:10px 12px;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600}.nav-item:hover{background:var(--primary-50)}.nav-item--active{border-color:var(--primary-600);color:var(--primary-600);background:var(--primary-50)}.nav-dot{width:8px;height:8px;border-radius:999px;background:var(--primary);opacity:.7}.admin-main{min-width:0}.admin-wrap{padding:24px;margin:0 auto;max-width:1200px}.admin-header{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}.title{margin:0;color:var(--text)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;align-items:center;justify-items:center}.stat-num{font-weight:700;color:var(--primary);font-size:18px}.stat-label{font-size:12px;color:var(--muted)}.tabs{display:flex;gap:8px;background:var(--primary-50);padding:8px;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:16px}.tab-btn{appearance:none;background:transparent;border:1px solid transparent;padding:10px 14px;border-radius:8px;color:var(--text);cursor:pointer;font-weight:600}.tab-btn:hover{background:#fffa}.tab-btn--active{background:var(--card);border-color:var(--border);color:var(--primary-600)}.sections{display:grid;gap:16px}.dashboard-container{min-height:100vh;display:flex;flex-direction:column}.dashboard-header{background:linear-gradient(135deg,#3a3a7b,#302799);color:#fff;padding:10px 30px;width:100%;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;z-index:100;box-shadow:0 4px 12px #667eea4d}.header-left{display:flex;align-items:center;gap:16px}.back-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #ff6b6b4d;display:flex;align-items:center;gap:6px}.back-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.forward-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #ff6b6b4d;display:flex;align-items:center;gap:6px}.forward-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.btn-text{display:inline}.arrow{font-weight:700;font-size:16px}.menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:4px;gap:3px}.menu-toggle span{width:20px;height:2px;background:#fff;border-radius:1px;transition:all .3s ease}.logo{display:flex;align-items:center;gap:8px}.logo-image{width:32px;height:32px;border-radius:50%}.logo-text{font-size:24px;font-weight:700;color:#fff}.header-center{display:flex;align-items:center}.header-nav{display:flex;gap:24px}.nav-link{color:#fffc;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:4px;transition:all .2s ease}.nav-link:hover,.nav-link.active{color:#fff;background:#ffffff1a}.header-right{display:flex;align-items:center;gap:16px}.user-info{display:flex;align-items:center;gap:8px}.user-avatar{width:32px;height:32px;border-radius:50%;background:#42a5f5;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff}.user-name{font-weight:500;color:#fff;font-size:14px}.help-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #ff6b6b4d}.help-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.dashboard-layout{display:flex;flex:1;position:relative;min-height:calc(100vh - 73px)}.sidebar{width:280px;background:#fff;border-right:1px solid #e0e0e0;padding:0;position:fixed;left:0;top:73px;height:calc(100vh - 73px);overflow-y:auto;z-index:90;transition:transform .3s ease}.sidebar-nav{display:flex;flex-direction:column;height:100%;padding:0}.nav-item-container{border-bottom:1px solid #e0e0e0}.nav-item{display:flex;align-items:center;gap:12px;padding:16px 20px;border:none;background:none;cursor:pointer;transition:all .2s ease;text-align:left;width:100%;color:#333;font-size:14px;justify-content:flex-start}.nav-item:hover{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#667eea}.nav-item.active{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#667eea;border-left:4px solid #ff6b6b}.nav-label{font-size:14px;font-weight:400}.nav-icon{font-size:16px;min-width:20px}.menu-separator{height:1px;background:#e0e0e0;margin:8px 0}.logout-section{margin-top:auto;padding-top:20px}.logout-item{color:#ff6b6b!important;font-weight:500}.logout-item:hover{background:linear-gradient(135deg,#ff6b6b,#ff8e53)!important;color:#fff!important}.main-content{flex:1;margin-left:280px;padding:24px;max-width:calc(100vw - 280px);background:#f7f8fa}.content-header1{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:16px 24px;margin:-24px -24px 24px;text-align:center;border-radius:0 0 20px 20px}.content-header1 h1{font-size:18px;font-weight:600;letter-spacing:1px}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}.stats-overview .stat{background:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;border:none;transition:transform .2s ease;box-shadow:0 8px 25px #667eea26}.stats-overview .stat:hover{transform:translateY(-4px);box-shadow:0 12px 35px #667eea40}.stats-overview .stat-num{font-size:24px;font-weight:700;color:#2d3748}.stats-overview .stat-label{font-size:14px;color:#718096}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:80}.logout-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.logout-modal{background:#fff;border-radius:16px;padding:24px;max-width:400px;width:90%;box-shadow:0 10px 30px #0000004d;text-align:center}.logout-modal h3{margin:0 0 12px;color:#333;font-size:20px;font-weight:600}.logout-modal p{margin:0 0 24px;color:#666;font-size:14px}.modal-buttons{display:flex;gap:12px;justify-content:center}.btn-cancel,.btn-confirm{padding:10px 24px;border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;min-width:100px}.btn-cancel{background:#f1f1f1;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#e0e0e0;transform:translateY(-1px)}.btn-confirm{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;box-shadow:0 4px 15px #ff6b6b4d}.btn-confirm:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#f7f8fa}.loading-spinner{width:50px;height:50px;border:5px solid #e0e0e0;border-top:5px solid #1570ef;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container p{font-size:18px;color:#6b7280;margin:0}@media (max-width: 1024px){.main-content{margin-left:0;max-width:100vw}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block}.menu-toggle{display:flex}.header-center{display:none}.stats-overview{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}}@media (max-width: 768px){.dashboard-header{padding:12px 16px}.header-right{gap:12px}.user-name{display:none}.help-btn{padding:6px 12px;font-size:12px}.main-content{padding:20px 16px}.table th:nth-child(4),.table td:nth-child(4),.table th:nth-child(5),.table td:nth-child(5),.table th:nth-child(6),.table td:nth-child(6){display:none}}@media (max-width: 540px){.tabs{flex-wrap:wrap}.tab-btn{flex:1 1 auto}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:100%;font-size:12px;border-collapse:separate;border-spacing:0}.table th,.table td{padding:6px 8px;white-space:nowrap}.table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.table th:nth-child(4),.table td:nth-child(4),.table th:nth-child(5),.table td:nth-child(5),.table th:nth-child(6),.table td:nth-child(6){display:none}.col-actions{min-width:80px}.col-actions button{padding:4px 6px;font-size:11px;margin:1px 0;width:100%;min-height:28px}.avatar-sm{width:24px;height:24px}.table tbody tr{min-height:40px}.table tbody td{vertical-align:middle}.back-button,.back-btn,.forward-btn{display:none}}:root{--nc-accent: #667eea;--nc-accent-2: #5f3dc4;--nc-bg: #ffffff;--nc-muted: #6b7280;--nc-border: #e5e7eb}.nc{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 140px);min-height:520px}.nc-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:12px 16px;border-radius:16px;box-shadow:0 8px 24px #00f2fe2e}.nc-title{font-size:18px;font-weight:800}.nc-subtitle{font-size:12px;opacity:.9}.nc-tools{display:flex;align-items:center;gap:8px}.filter-buttons{display:flex;gap:4px}.filter-btn{background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.7);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.filter-btn:hover{background:#ffffff40}.filter-btn.active{background:#ffffffe6;color:var(--nc-accent);border-color:#ffffffe6}.nc-search{width:220px;max-width:45vw;border:1px solid rgba(255,255,255,.7);background:#ffffff26;color:#fff;padding:8px 10px;border-radius:999px;outline:none}.nc-search::placeholder{color:#ffffffd9}.nc-list{list-style:none;padding:0;margin:0;background:var(--nc-bg);border-radius:16px;box-shadow:0 10px 30px #667eea26;overflow:hidden;display:block}.nc-empty{padding:18px;text-align:center;color:var(--nc-muted)}.nc-item+.nc-item .nc-card{border-top:1px solid var(--nc-border)}.nc-card{width:100%;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:#fff;padding:12px 16px;cursor:pointer;border:none;text-align:left}.nc-card:hover{background:#fafafa}.nc-avatar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 6px 16px #00000014;background:linear-gradient(135deg,var(--nc-accent),var(--nc-accent-2))}.nc-avatar.teacher{background:linear-gradient(135deg,#74b9ff,#0984e3)}.nc-avatar.student{background:linear-gradient(135deg,#55efc4,#00b894)}.nc-main{display:grid;gap:6px}.nc-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.nc-heading{display:flex;align-items:center;gap:8px;min-width:0}.nc-kind{font-weight:800;color:#111827}.nc-pill{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#fff}.pill-teacher{background:linear-gradient(135deg,#74b9ff,#0984e3)}.pill-student{background:linear-gradient(135deg,#55efc4,#00b894)}.nc-time{color:var(--nc-muted);font-size:12px;white-space:nowrap}.nc-meta{color:var(--nc-muted);font-size:12px}.nc-from strong{color:#374151}.nc-preview{color:#333;font-size:14px;line-height:1.5}.nc-detail{margin-top:8px;padding-top:8px;border-top:1px dashed var(--nc-border);display:grid;gap:6px}.nc-detail-line{display:flex;align-items:center;gap:8px;color:#4b5563;font-size:12px}.nc-detail-line .label{min-width:90px;color:#6b7280}.mark-read-btn{background:linear-gradient(135deg,var(--nc-accent),var(--nc-accent-2));color:#fff;border:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea33}.mark-read-btn:hover{background:linear-gradient(135deg,var(--nc-accent-2),var(--nc-accent));transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.mark-read-btn:active{transform:translateY(0);box-shadow:0 2px 8px #667eea33}@media (max-width: 768px){.nc-header{gap:8px;align-items:start;flex-direction:column}.nc-tools{width:100%}.nc-search{width:100%;max-width:none;border-color:#ffffffbf}}.group-arrangement-container{width:100%;padding:0}.group-arrangement-container .content-header{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:16px 24px;margin:-24px -24px 24px;text-align:center;border-radius:0 0 20px 20px}.group-arrangement-container .content-header h1{font-size:18px;font-weight:600;letter-spacing:1px}.add-new-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;padding:12px 24px;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;transition:all .2s ease;box-shadow:0 4px 15px #ff6b6b4d}.add-new-btn:hover{background:linear-gradient(135deg,#ff5252,#ff7043);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.form-section{margin-bottom:32px}.form-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 6px 20px #667eea1a}.form-card h2{font-size:18px;font-weight:600;color:#333;margin-bottom:20px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.form-group input,.form-group select{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;transition:all .2s ease;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.student-input-group{display:flex;gap:8px}.student-input-group select{flex:1}.add-student-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.add-student-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f);transform:translateY(-2px)}.selected-students{margin-top:16px;padding:12px;background:#f8f9fa;border-radius:8px}.students-label{font-size:12px;font-weight:600;color:#666;margin-bottom:8px}.student-tags{display:flex;flex-wrap:wrap;gap:8px}.student-tag{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#333;padding:6px 12px;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:6px}.remove-tag{background:none;border:none;color:#ff6b6b;font-size:18px;cursor:pointer;padding:0;line-height:1}.remove-tag:hover{color:#ff5252}.form-actions{display:flex;gap:12px;margin-top:24px}.submit-btn,.cancel-btn{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.submit-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea4d}.submit-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f);transform:translateY(-2px)}.cancel-btn{background:#f0f0f0;color:#333}.cancel-btn:hover{background:#e0e0e0}.arrangements-list{margin-top:32px}.empty-state{background:#fff;border-radius:16px;padding:40px 24px;text-align:center;color:#999;box-shadow:0 4px 12px #0000000d}.arrangements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.arrangement-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 6px 20px #667eea1a;transition:all .2s ease;display:flex;flex-direction:column}.arrangement-card:hover{box-shadow:0 10px 30px #667eea33;transform:translateY(-4px)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}.card-header h3{font-size:16px;font-weight:600;color:#333;margin:0}.class-type-badge{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#333;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}.card-content{flex:1;margin-bottom:16px}.info-item{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;font-size:13px}.info-item .label{font-weight:600;color:#666}.info-item .value{color:#333;text-align:right}.class-link{color:#667eea;text-decoration:none;font-weight:600;transition:all .2s ease}.class-link:hover{color:#764ba2;text-decoration:underline}.students-list{background:#f8f9fa;border-radius:8px;padding:12px;margin:12px 0;max-height:120px;overflow-y:auto}.student-item{font-size:12px;color:#555;padding:4px 0;line-height:1.4}.card-actions{display:flex;gap:8px}.edit-btn,.delete-btn{flex:1;padding:10px 12px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.edit-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.edit-btn:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f);transform:translateY(-2px)}.delete-btn{background:#ffe0e0;color:#ff6b6b}.delete-btn:hover{background:#ffc9c9;transform:translateY(-2px)}.schedule-section{background:linear-gradient(135deg,#f5f7ff,#f0f4ff);border-radius:12px;padding:16px;margin:20px 0;border-left:4px solid #667eea}.schedule-section h3{font-size:14px;font-weight:600;color:#333;margin:0 0 16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-row:last-child{margin-bottom:0}.schedule-info{background:linear-gradient(135deg,#f5f7ff,#f0f4ff);border-radius:8px;padding:12px;margin:12px 0;border-left:3px solid #667eea}.schedule-info h4{font-size:12px;font-weight:600;color:#667eea;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.sessions-timeline{background:linear-gradient(135deg,#fff5f7,#ffe8ed);border-radius:8px;padding:12px;margin:12px 0;border-left:3px solid #ff6b6b}.sessions-timeline h4{font-size:12px;font-weight:600;color:#ff6b6b;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.sessions-list{display:flex;flex-direction:column;gap:6px}.session-item{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:8px 10px;border-radius:6px;font-size:12px;border:1px solid #ffe0e0}.session-item.more{justify-content:center;color:#999;font-style:italic}.session-date{font-weight:600;color:#333}.session-time{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}@media (max-width: 768px){.form-card{padding:16px}.student-input-group{flex-direction:column}.add-student-btn{width:100%}.form-actions{flex-direction:column}.submit-btn,.cancel-btn{width:100%}.arrangements-grid{grid-template-columns:1fr}.card-header,.card-actions{flex-direction:column}.edit-btn,.delete-btn{width:100%}.form-row{grid-template-columns:1fr}}@media (max-width: 480px){.group-arrangement-container .content-header{margin:-20px -16px 20px;padding:12px 16px}.add-new-btn{width:100%;margin-bottom:16px}.form-card{padding:12px}.form-group{margin-bottom:16px}.info-item{flex-direction:column;gap:4px}.students-list{max-height:100px}.schedule-section{padding:12px;margin:16px 0}.session-item{flex-direction:column;gap:4px;align-items:flex-start}}.popup-notification{position:fixed;bottom:20px;right:20px;z-index:9999;min-width:300px;max-width:400px;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}.popup-notification.show{opacity:1;transform:translateY(0)}.popup-content{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-left:4px solid;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.popup-notification.success .popup-content{border-left-color:#28a745;background:linear-gradient(135deg,#d4edda,#c3e6cb)}.popup-notification.error .popup-content{border-left-color:#dc3545;background:linear-gradient(135deg,#f8d7da,#f5c6cb)}.popup-message{flex:1;font-size:14px;font-weight:500;color:#333;margin-right:12px}.popup-close{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.popup-close:hover{background-color:#0000001a;color:#333}@media (max-width: 480px){.popup-notification{left:20px;right:20px;min-width:auto}}.role-switch{display:flex;gap:8px}.switch{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}.switch input{display:none}.switch--active{background:var(--primary-50);color:var(--primary-600);border-color:var(--primary-600)}.image-picker{display:flex;align-items:center;gap:12px}.avatar-preview{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}.avatar-placeholder,.avatar-sm.avatar-sm--placeholder{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px dashed var(--border);display:grid;place-items:center;color:var(--muted);font-size:11px}.avatar-sm{width:36px;height:36px;border-radius:50%;object-fit:cover}.id-tools{display:flex;gap:8px}.id-tools .btn-secondary{padding:4px 6px;border-radius:6px;background-color:#007bff;color:#fff;border:none;font-size:.75rem;height:28px;width:60px;align-self:center}.input{padding:24px 16px;font-size:.75rem}.id-tools .btn-secondary:hover{background-color:#0056b3}.input{padding:20px 16px;font-size:.875rem}.btn-secondary{background:#fff}.table-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.input--search{max-width:420px}.count{color:var(--muted)}.badge{background:var(--primary-50);color:var(--primary-600);padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}.textarea{resize:vertical}.form-actions{display:flex;align-items:center;gap:10px}.btn-smaller{padding:4px 8px;font-size:12px;border-radius:4px}.annc{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:#fff;display:flex;flex-direction:column;gap:8px}.annc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.annc-title{margin:0;color:var(--text);font-size:1.2rem;font-weight:600}.annc-msg{color:var(--text);margin:8px 0 10px;font-size:1rem;line-height:1.4}.annc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.meta{color:var(--muted);font-size:12px;white-space:nowrap}.list{display:grid;gap:10px}.annc{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fff}.annc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.annc-title{margin:0;color:var(--text)}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border)}.pill--blue{background:#e0ecff;color:#1d4ed8;border-color:#bfdbfe}.pill--green{background:#dcfce7;color:#065f46;border-color:#bbf7d0}.pill--gray{background:#f3f4f6;color:#374151;border-color:#e5e7eb}.annc-msg{color:var(--text);margin:8px 0 10px}.annc-foot{display:flex;align-items:center;justify-content:space-between}.meta{color:var(--muted);font-size:12px}.time-input-group{display:flex;align-items:center;gap:8px}.time-select{width:60px}.time-separator{font-weight:600;color:var(--text)}@media (max-width: 768px){.card--pad{padding:12px}.section-header{flex-direction:column;align-items:flex-start;gap:8px}.form-grid{grid-template-columns:1fr;gap:8px}.field{grid-column:span 1}.time-input-group{flex-wrap:wrap;gap:4px}.time-select{width:50px}.form-actions{flex-direction:column;align-items:stretch}.btn{width:100%}.annc-head,.annc-foot{flex-direction:column;align-items:flex-start;gap:8px}.meta{white-space:normal}}@media (max-width: 480px){.card--pad,.annc{padding:8px}.section-title{flex-direction:column;align-items:flex-start}.badge{align-self:flex-start}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.card--pad{padding:16px}.section-title h3{color:#000}.section-header{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}.section-title{display:flex;align-items:center;gap:8px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:10px}.field{grid-column:span 6;display:flex;flex-direction:column;gap:6px}.field--full{grid-column:1 / -1}.label{font-weight:600;color:var(--text)}.input{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);outline:none}.input:focus{border-color:var(--primary-600);box-shadow:0 0 0 3px #175cd314}.btn{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);cursor:pointer}.btn:hover{background:var(--primary-50)}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.95)}.btn-sm{padding:6px 10px;border-radius:6px}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}.table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}.table thead th{position:sticky;top:0;background:var(--primary-50);color:var(--text);text-align:left;padding:10px;border-bottom:1px solid var(--border);font-weight:700}.table tbody td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}.col-actions{width:1%;white-space:nowrap}.truncate{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link{color:var(--primary-600);text-decoration:underline}.empty-state{display:grid;place-items:center;padding:20px;color:var(--muted)}.empty-title{margin:0;color:var(--text)}.empty-subtitle{margin:4px 0 0}.error{color:var(--danger);font-size:14px}.hint{color:var(--muted);font-size:12px}