@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--color-purple:146 83 255;--color-blue:51 171 249;--color-green:66 214 164;--color-yellow:255 198 51;--color-orange:255 132 0;--color-red:255 89 94;--color-pink:255 111 215;--color-teal:0 194 203;--color-lime:183 237 31;--color-light-blue:151 236 255;--color-success:66 214 164;--color-warning:255 198 51;--color-error:255 89 94;--color-surface:255 255 255;--color-background:248 252 255;--color-gray-50:248 249 250;--color-gray-100:241 243 244;--color-gray-200:232 234 237;--color-gray-300:218 220 224;--color-gray-400:189 193 198;--color-gray-500:154 160 166;--color-gray-600:128 134 139;--color-gray-700:95 99 104;--color-gray-800:60 64 67;--color-gray-900:32 33 36}*{transition:all .2s ease}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;@apply text-base}body{@apply bg-indigo-50 text-indigo-900 font-sans;font-family:Comic Sans MS,Comic Neue,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;line-height:1.5;font-size:16px;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E")}h1,h2,h3,h4,h5,h6{@apply font-bold tracking-normal;font-family:Comic Sans MS,Comic Neue,Nunito,Roboto,sans-serif;line-height:1.25;filter:drop-shadow(0 2px 2px rgba(0,0,0,.1))}h1{@apply text-3xl mb-4 text-purple-600 relative;text-shadow:2px 2px 0 theme("colors.purple.200");animation:glow 2s infinite alternate}@keyframes glow{0%{text-shadow:2px 2px 0 theme("colors.purple.200")}to{text-shadow:2px 2px 10px theme("colors.purple.400")}}h2{@apply text-2xl mb-4 text-blue-500;text-shadow:1px 1px 0 theme("colors.blue.200")}h3{@apply text-xl mb-3 text-teal-500}h4{@apply text-lg mb-3 text-orange-500}h5{@apply text-base mb-2 text-pink-500}h6{@apply text-base mb-2 text-indigo-500}p{@apply mb-4 text-base text-indigo-900}img,svg{@apply max-w-full h-auto object-contain;max-height:100px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.1))}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background-color:#DBEAFE;border-radius:9999px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#60A5FA,#2563EB);border-radius:9999px;border:2px solid #dbeafe}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3B82F6,#1D4ED8)}.chat-scroll{scrollbar-width:thin;scrollbar-color:#60A5FA #DBEAFE}.chat-scroll::-webkit-scrollbar{width:8px;height:8px}.chat-scroll::-webkit-scrollbar-track{background:#DBEAFE;border-radius:9999px}.chat-scroll::-webkit-scrollbar-thumb{background:#60A5FA;border-radius:9999px;border:2px solid #dbeafe}.chat-scroll::-webkit-scrollbar-thumb:hover{background:#3B82F6}.btn,button{filter:drop-shadow(0 3px 5px rgba(0,0,0,.15))!important}.bg-\[\#f6f7f8\]{@apply bg-indigo-50;background-image:linear-gradient(135deg,#f0f4ff,#e6f7ff)}.text-gray-600,.text-gray-700,.text-gray-800,.text-gray-900{@apply text-indigo-900 !important}header .text-gray-600{@apply text-white !important}.\!bg-\[\#1865f2\],.bg-\[\#1865f2\]{@apply bg-purple-500 !important}.text-\[\#1865f2\]{@apply text-purple-500 !important}}@layer components{.btn-primary{@apply bg-purple-600 hover:bg-purple-700 text-white font-semibold px-6 py-3 text-base rounded-lg shadow focus:outline-none focus:ring-2 focus:ring-purple-500 transition}.btn-secondary{@apply bg-teal-500 hover:bg-teal-600 text-white font-semibold px-6 py-3 text-base rounded-lg shadow focus:outline-none focus:ring-2 focus:ring-teal-400 transition}.btn-orange{@apply bg-orange-400 hover:bg-orange-500 text-white font-bold py-2 px-4 text-base rounded-full shadow-md border-b-4 border-orange-600 transition duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 transform}.btn-yellow{@apply bg-yellow-400 hover:bg-yellow-500 text-yellow-800 font-bold py-2 px-4 text-base rounded-full shadow-md border-b-4 border-yellow-500 transition duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 transform}.btn-pink{@apply bg-pink-400 hover:bg-pink-500 text-white font-bold py-2 px-4 text-base rounded-full shadow-md border-b-4 border-pink-600 transition duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 transform}.btn-sm{@apply py-1.5 px-3 text-sm border-b-2}.btn-lg{@apply py-3 px-6 text-lg}.card{@apply bg-white rounded-lg border border-gray-200 overflow-hidden shadow-subtle}.card-header{@apply px-4 py-3 border-b border-gray-200 bg-gray-50}.card-body{@apply p-4}.card-footer{@apply px-4 py-3 border-t border-gray-200 bg-gray-50}.input{@apply ml-8 w-full border-2 border-purple-200 rounded-xl px-4 py-3 bg-white text-base focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 placeholder:text-purple-300 shadow-inner}.input-sm{@apply ml-8 py-2 px-3 text-sm}.input-lg{@apply ml-8 py-4 px-5 text-lg}.nav-container{@apply bg-gradient-to-r from-purple-500 to-blue-500 text-white border-b-4 border-indigo-600 px-5 flex items-center h-16 z-10 shadow-lg}.nav-brand{@apply font-bold text-xl text-white flex items-center;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.nav-link{@apply text-white hover:text-yellow-200 py-2 px-4 text-base font-bold transition-colors rounded-full hover:bg-purple-600;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.nav-link-active{@apply text-yellow-200 bg-purple-600 font-bold}.sidebar{@apply bg-gradient-to-b from-indigo-500 to-purple-500 border-r-4 border-indigo-600 w-64 fixed h-full left-0 top-16 p-4 text-white;box-shadow:4px 0 10px rgba(0,0,0,.1)}.sidebar-section{@apply mb-5}.sidebar-section-title{@apply text-sm font-bold text-yellow-200 px-3 mb-2;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.sidebar-link{@apply flex items-center text-white hover:text-yellow-200 hover:bg-purple-600 px-3 py-2 rounded-full text-base mb-1 transition-all;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.sidebar-link-active{@apply bg-purple-600 text-yellow-200 font-bold}.app-container{@apply w-full mx-auto px-5 py-5}.content-container{@apply w-full pt-16 p-6 bg-indigo-50}.bounce-in{animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{opacity:0;transform:translateY(20px)}70%{transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.float{animation:float 3s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.wiggle:hover{animation:wiggle .3s ease-in-out}.delay-200{animation-delay:.2s}@keyframes wiggle{0%{transform:rotate(0deg)}25%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}to{transform:rotate(0deg)}}.flex-center{@apply flex items-center justify-center}.flex-between{@apply flex items-center justify-between}.absolute-center{@apply max-w-7xl mx-auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.section-container{@apply w-full px-4}.section-spacing{@apply py-6}.content-spacing{@apply mb-5}.icon{@apply flex-shrink-0}.icon-xs{@apply h-4 w-4}.icon-sm{@apply h-5 w-5}.icon-md{@apply h-6 w-6}.icon-lg{@apply h-7 w-7}.bg-purple{background-color:rgb(var(--color-purple));color:white}.bg-blue{background-color:rgb(var(--color-blue));color:white}.bg-green{background-color:rgb(var(--color-green));color:white}.bg-yellow{background-color:rgb(var(--color-yellow));color:black}.bg-orange{background-color:rgb(var(--color-orange));color:white}.bg-red{background-color:rgb(var(--color-red));color:white}.bg-pink{background-color:rgb(var(--color-pink));color:white}.bg-teal{background-color:rgb(var(--color-teal));color:white}.badge{@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-bold shadow-sm;border:2px solid white}.badge-purple{@apply bg-purple-500 text-white}.badge-blue{@apply bg-blue-400 text-white}.badge-green{@apply bg-green-400 text-white}.badge-yellow{@apply bg-yellow-400 text-yellow-800}.badge-orange{@apply bg-orange-400 text-white}.badge-red{@apply bg-red-400 text-white}.badge-pink{@apply bg-pink-400 text-white}.lesson-card{@apply bg-white rounded-3xl border-4 border-blue-300 p-5 mb-5 shadow-lg transform transition-all duration-200 hover:-translate-y-1 hover:shadow-xl;background-image:linear-gradient(135deg,#ffffff,#f0f7ff)}.lesson-card:before{content:"✏️";position:absolute;top:-5px;left:-5px;height:30px;width:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid theme("colors.blue.300");font-size:15px}.quiz-card{@apply bg-white rounded-3xl border-4 border-purple-300 p-5 mb-5 shadow-lg transform transition-all duration-200 hover:-translate-y-1 hover:shadow-xl;background-image:linear-gradient(135deg,#ffffff,#f6f0ff)}.quiz-card:before{content:"🤔";position:absolute;top:-5px;left:-5px;height:30px;width:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid theme("colors.purple.300");font-size:15px}.exercise-card{@apply bg-white rounded-3xl border-4 border-green-300 p-5 mb-5 shadow-lg transform transition-all duration-200 hover:-translate-y-1 hover:shadow-xl;background-image:linear-gradient(135deg,#ffffff,#f0fff4)}.exercise-card:before{content:"🏆";position:absolute;top:-5px;left:-5px;height:30px;width:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid theme("colors.green.300");font-size:15px}.progress-bar{@apply w-full h-4 bg-purple-100 rounded-full overflow-hidden border-2 border-purple-200}.progress-fill{@apply h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full transition-all duration-500}.divider{@apply relative h-4 my-8 overflow-hidden}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:4px;background:linear-gradient(90deg,theme("colors.purple.300"),theme("colors.blue.300"),theme("colors.teal.300"),theme("colors.green.300"),theme("colors.yellow.300"),theme("colors.orange.300"),theme("colors.red.300"),theme("colors.pink.300"),theme("colors.purple.300"));transform:translateY(-50%);border-radius:9999px}.tab-container{@apply flex space-x-2 mb-6 overflow-x-auto pb-1 px-1}.tab{@apply py-2 px-4 bg-white text-purple-600 font-bold text-base border-2 border-purple-200 rounded-full cursor-pointer transition-all transform hover:scale-105 hover:shadow-md}.tab-active{@apply bg-purple-500 text-white border-0 shadow-md}.alert{@apply p-4 rounded-xl mb-4 shadow-md border-l-8}.alert-success{@apply bg-green-100 border-green-500 text-green-800}.alert-warning{@apply bg-yellow-100 border-yellow-500 text-yellow-800}.alert-error{@apply bg-red-100 border-red-500 text-red-800}.alert-info{@apply bg-blue-100 border-blue-500 text-blue-800}button.classroom-button{@apply bg-transparent border-none shadow-none text-gray-800 hover:bg-gray-100;background-image:none!important;padding:.5rem .75rem;width:100%;text-align:left}}.btn-primary,.btn-secondary,button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#3EB2FD;background-image:linear-gradient(1deg,#4F58FD,#149BF3 99%);background-size:calc(100% + 20px) calc(100% + 20px);border-radius:100px;border:none;box-sizing:border-box;color:#FFFFFF;cursor:pointer;display:inline-flex;font-family:Nunito,sans-serif;font-size:1rem;height:auto;justify-content:center;line-height:1.5;padding:6px 20px;position:relative;text-align:center;text-decoration:none;transition:background-color .2s,background-position .2s;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;vertical-align:top;white-space:nowrap}.btn-primary:active,.btn-primary:focus,.btn-secondary:active,.btn-secondary:focus,button:active,button:focus{outline:none}.btn-primary:hover,.btn-secondary:hover,button:hover{background-position:-20px -20px}.btn-primary:focus:not(:active),.btn-secondary:focus:not(:active),button:focus:not(:active){box-shadow:0 0 0 .125em rgba(40,170,255,.25)}.btn-primary,.btn-secondary{@apply none}.chat-scroll{scrollbar-width:thin;scrollbar-color:#60A5FA #DBEAFE}.chat-scroll::-webkit-scrollbar{width:8px;height:8px}.chat-scroll::-webkit-scrollbar-track{background-color:#DBEAFE;border-radius:9999px}.chat-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#60A5FA,#2563EB);border-radius:9999px;border:2px solid #dbeafe}.chat-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3B82F6,#1D4ED8)}.speech-bubble-user{position:relative;border-radius:22px 22px 4px 22px!important;box-shadow:0 1px 2px rgba(0,0,0,.2);transform-origin:bottom right;animation:pop-in .3s ease-out forwards}.speech-bubble-user:after{content:"";position:absolute;bottom:0;right:-10px;width:20px;height:20px;background-color:#2563EB;border-bottom-right-radius:20px;-webkit-clip-path:polygon(0 0,100% 0,0 100%);clip-path:polygon(0 0,100% 0,0 100%)}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3}