@tailwind base;@tailwind components;@tailwind utilities;@layer base{*{box-sizing:border-box}html{font-family:Cairo,system-ui,-apple-system,sans-serif;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{background-color:#f8fafc;color:#0f172a}[lang=ar],.arabic-text{font-family:Cairo,Amiri,sans-serif;direction:rtl;line-height:2}h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em}}@layer components{.btn-primary{@apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 text-white font-semibold text-sm hover:bg-brand-700 active:scale-95 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-brand;}.btn-accent{@apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-accent-500 text-white font-semibold text-sm hover:bg-accent-600 active:scale-95 focus:outline-none focus:ring-2 focus:ring-accent-400/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-accent;}.btn-secondary{@apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-white text-gray-700 font-semibold text-sm border border-gray-200 hover:border-brand-400 hover:text-brand-700 hover:bg-brand-50 active:scale-95 focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200;}.btn-ghost{@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-gray-600 font-medium text-sm hover:bg-gray-100 hover:text-gray-900 active:scale-95 transition-all duration-150;}.btn-danger{@apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-red-600 text-white font-semibold text-sm hover:bg-red-700 active:scale-95 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200;}.form-input{@apply block w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-gray-900 text-sm placeholder-gray-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 disabled:bg-gray-50 disabled:text-gray-400 transition-all duration-150;}.form-label{@apply block text-sm font-semibold text-gray-700 mb-1.5;}.form-error{@apply mt-1 text-xs text-red-600 flex items-center gap-1;}.card{@apply bg-white rounded-2xl border border-gray-100 shadow-card;}.card-hover{@apply card hover:shadow-card-hover hover:-translate-y-0.5 transition-all duration-200;}.card-header{@apply px-6 py-4 border-b border-gray-100;}.card-body{@apply px-6 py-5;}.card-accent{@apply card relative overflow-hidden;}.card-accent:before{content:"";@apply absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-400 to-brand-600 rounded-t-2xl;}.progress-bar{@apply h-2.5 w-full overflow-hidden rounded-full bg-gray-100;}.progress-fill{@apply h-full rounded-full bg-gradient-to-r from-brand-400 to-brand-600 transition-all duration-700;}.progress-fill-animated{@apply h-full rounded-full transition-all duration-700;background:repeating-linear-gradient(-45deg,theme("colors.brand.500") 0px,theme("colors.brand.500") 8px,theme("colors.brand.400") 8px,theme("colors.brand.400") 16px);background-size:24px 100%;animation:stripe-move .6s linear infinite}.badge{@apply inline-flex items-center gap-1.5 rounded-full px-3 py-0.5 text-xs font-semibold;}.badge-green{@apply badge bg-emerald-100 text-emerald-800;}.badge-teal{@apply badge bg-brand-100 text-brand-800;}.badge-gold{@apply badge bg-accent-100 text-accent-800;}.badge-blue{@apply badge bg-sky-100 text-sky-800;}.badge-yellow{@apply badge bg-yellow-100 text-yellow-800;}.badge-red{@apply badge bg-red-100 text-red-800;}.badge-gray{@apply badge bg-gray-100 text-gray-700;}.badge-purple{@apply badge bg-purple-100 text-purple-800;}.badge-dot{@apply w-1.5 h-1.5 rounded-full bg-current opacity-70;}.exercise-option{@apply flex items-center gap-3 w-full rounded-xl border-2 border-gray-100 bg-white px-4 py-3.5 text-left cursor-pointer hover:border-brand-400 hover:bg-brand-50 hover:shadow-sm active:scale-[.99] transition-all duration-150;}.exercise-option.selected{@apply border-brand-500 bg-brand-50 shadow-brand/20 shadow-md;}.exercise-option.correct{@apply border-emerald-500 bg-emerald-50 text-emerald-900 animate-bounce-in;}.exercise-option.incorrect{@apply border-red-400 bg-red-50 text-red-900 animate-shake;}.stat-card{@apply card-accent px-6 py-5 flex flex-col gap-1;}.stat-number{@apply text-3xl font-bold text-gray-900 tabular-nums;}.stat-label{@apply text-sm text-gray-500 font-medium;}.stat-delta-up{@apply text-xs font-semibold text-emerald-600;}.stat-delta-down{@apply text-xs font-semibold text-red-600;}.streak-badge{@apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gradient-to-r from-accent-400 to-accent-600 text-white text-xs font-bold shadow-accent;}.nav-link{@apply flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-gray-600 hover:bg-brand-50 hover:text-brand-700 transition-all duration-150;}.nav-link.active{@apply bg-brand-50 text-brand-700 font-semibold;}.lesson-tab{@apply px-4 py-2.5 text-sm font-semibold rounded-lg transition-all duration-150 text-gray-500 hover:text-gray-800 hover:bg-gray-100 border-b-2 border-transparent;}.lesson-tab.active{@apply text-brand-700 border-brand-500 bg-brand-50;}.feedback-correct{@apply rounded-2xl bg-emerald-50 border-2 border-emerald-400 px-5 py-4 flex items-center gap-3 animate-bounce-in;}.feedback-incorrect{@apply rounded-2xl bg-red-50 border-2 border-red-300 px-5 py-4 flex items-center gap-3 animate-shake;}.vocab-card{@apply card-hover px-6 py-8 text-center cursor-pointer select-none;}.vocab-arabic{@apply text-arabic-xl font-arabic font-bold text-brand-700;}.vocab-english{@apply text-sm text-gray-500 mt-2;}.bubble-right{@apply ml-auto max-w-xs rounded-2xl rounded-tr-sm bg-brand-600 text-white px-4 py-2.5 text-sm font-arabic shadow-sm;}.bubble-left{@apply mr-auto max-w-xs rounded-2xl rounded-tl-sm bg-white border border-gray-200 px-4 py-2.5 text-sm font-arabic text-gray-900 shadow-sm;}.empty-state{@apply flex flex-col items-center justify-center py-16 px-4 text-center;}.empty-icon{@apply w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center mb-4 text-3xl;}.section-heading{@apply text-lg font-bold text-gray-900 tracking-tight;}.section-sub{@apply text-sm text-gray-500 mt-0.5;}.skeleton{@apply rounded-xl bg-gray-200 animate-pulse;}}@layer utilities{.text-arabic{font-family:Cairo,Amiri,sans-serif}.rtl{direction:rtl}.ltr{direction:ltr}.scroll-smooth{scroll-behavior:smooth}.audio-container{min-height:48px}.text-gradient-brand{@apply bg-gradient-to-r from-brand-500 to-brand-700 bg-clip-text text-transparent;}.text-gradient-gold{@apply bg-gradient-to-r from-accent-400 to-accent-600 bg-clip-text text-transparent;}.glass{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffbf;border:1px solid rgba(255,255,255,.5)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}