:root {--primary-color: #FF6B6B;--secondary-color: #4ECDC4;--accent-color: #45B7D1;--warning-color: #FFA726;--success-color: #66BB6A;--danger-color: #EF5350;--rainbow-red: #FF6B6B;--rainbow-orange: #FFA726;--rainbow-yellow: #FFEB3B;--rainbow-green: #66BB6A;--rainbow-blue: #42A5F5;--rainbow-purple: #9725ac;--rainbow-pink: #EC407A;--glass-bg: rgba(255, 255, 255, 0.1);--glass-border: rgba(255, 255, 255, 0.25);--glass-shadow: rgba(0, 0, 0, 0.15);--bg-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--bg-gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--bg-gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--bg-gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--font-playful: 'Nunito', 'Tajawal', sans-serif;--font-size-xl: 3.5rem;--font-size-lg: 2.5rem;--font-size-md: 1.5rem;--font-size-sm: 1rem;--spacing-xs: 0.5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 3rem;--spacing-xl: 4rem;--border-radius-sm: 20px;--border-radius-md: 30px;--border-radius-lg: 40px;--border-radius-xl: 50px;--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);--shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.15);--shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.2);--animation-fast: 0.3s;--animation-medium: 0.5s;--animation-slow: 0.8s;--theme-color: #8761df;}* {box-sizing: border-box;}body {font-family: var(--font-playful);background: var(--bg-gradient-1);background-attachment: fixed;overflow-x: hidden;color: #333;line-height: 1.6;position: relative;}body::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at 20% 50%, rgba(255, 107, 107, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(66, 165, 245, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(102, 187, 106, 0.3) 0%, transparent 50%), radial-gradient(circle at 60% 30%, rgba(255, 167, 38, 0.3) 0%, transparent 50%), radial-gradient(circle at 90% 70%, rgba(171, 71, 188, 0.3) 0%, transparent 50%);animation: colorShift 10s ease-in-out infinite;z-index: -2;}@keyframes colorShift {0%, 100% {filter: hue-rotate(0deg) brightness(1);}25% {filter: hue-rotate(90deg) brightness(1.2);}50% {filter: hue-rotate(180deg) brightness(0.8);}75% {filter: hue-rotate(270deg) brightness(1.1);}}.bg-decoration {position: fixed;pointer-events: none;z-index: -1;}.bg-decoration::before {content: '';position: absolute;width: 200px;height: 200px;border-radius: 50%;backdrop-filter: blur(10px);animation: float 6s ease-in-out infinite;}.bg-decoration:nth-child(1) {top: 10%;left: 10%;animation-delay: 0s;}.bg-decoration:nth-child(1)::before {background: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-orange));opacity: 0.3;}.bg-decoration:nth-child(2) {top: 60%;right: 10%;animation-delay: 2s;}.bg-decoration:nth-child(2)::before {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));opacity: 0.3;}.bg-decoration:nth-child(3) {bottom: 20%;left: 20%;animation-delay: 4s;}.bg-decoration:nth-child(3)::before {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-yellow));opacity: 0.3;}@keyframes float {0%, 100% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(-20px) rotate(180deg);}}.navbar-playful {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);box-shadow: var(--shadow-soft);border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);padding: var(--spacing-sm) 0;position: sticky;top: 0;z-index: 1000;min-height: 80px;}main {position: relative;}.navbar-brand-playful {font-size: var(--font-size-md);font-weight: 800;color: white !important;text-decoration: none;display: flex;align-items: center;gap: var(--spacing-xs);transition: all var(--animation-fast) ease;}.navbar-brand-playful:hover {transform: scale(1.05);color: var(--warning-color) !important;}.navbar-brand-logo {width: 50px;height: 50px;border-radius: 50%;box-shadow: var(--shadow-soft);transition: all var(--animation-fast) ease;}.navbar-brand-playful:hover .navbar-brand-logo {transform: rotate(360deg);box-shadow: var(--shadow-medium);}.nav-link-playful {color: white !important;font-weight: 600;padding: 20px 32px !important;border-radius: var(--border-radius-sm);transition: all var(--animation-fast) ease;position: relative;overflow: hidden;text-decoration: none !important;display: block;margin: 1px;z-index: 10;font-size: 1.2rem;white-space: nowrap;}@media (min-width: 992px) {.navbar-nav {flex-wrap: nowrap;gap: 0.25rem;}.nav-link-playful {flex-shrink: 0;}.navbar-collapse {justify-content: space-between;}}.nav-link-playful::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left var(--animation-medium) ease;z-index: -1;pointer-events: none;}.nav-link-playful:hover::before {left: 100%;}.nav-link-playful:hover {background: var(--glass-bg);transform: translateY(-2px) scale(1.05);box-shadow: var(--shadow-soft);text-decoration: none !important;}.dropdown-menu-playful {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);box-shadow: var(--shadow-lg);animation: fadeInUp 0.3s ease-out;min-width: 240px;z-index: 1050 !important;}.dropdown-item-playful {color: rgba(255, 255, 255, 0.9);transition: all 0.3s ease;border-radius: var(--border-radius-sm);margin: 2px 8px;padding: 12px 20px;display: flex;align-items: center;position: relative;overflow: hidden;font-size: 1.05rem;}.dropdown-item-playful::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left 0.5s ease;}.dropdown-item-playful:hover::before {left: 100%;}.dropdown-item-playful:hover, .dropdown-item-playful:focus {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));color: white;transform: translateX(5px) scale(1.02);box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);text-decoration: none;}.premium-badge {background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-orange));padding: 4px 12px;font-size: 0.875rem;font-weight: 600;color: white;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);animation: premiumPulse 2s ease-in-out infinite;position: relative;overflow: hidden;}.premium-badge::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);animation: premiumShine 3s ease-in-out infinite;}@keyframes premiumPulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.05);}}@keyframes premiumShine {0% {transform: rotate(0deg) translate(-50%, -50%);}100% {transform: rotate(360deg) translate(-50%, -50%);}}.hero-playful {min-height: 100vh;display: flex;align-items: center;position: relative;overflow: hidden;}.hero-content {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-xl);box-shadow: var(--shadow-medium);animation: slideInLeft 1s ease-out;}.hero-title {font-size: var(--font-size-xl);font-weight: 800;color: white;margin-bottom: var(--spacing-md);text-shadow: none;animation: bounceIn 1s ease-out;}.hero-subtitle {font-size: var(--font-size-md);color: rgba(255, 255, 255, 0.9);margin-bottom: var(--spacing-lg);line-height: 1.8;animation: fadeInUp 1s ease-out 0.5s both;}.hero-image {animation: slideInRight 1s ease-out;}.hero-image i {text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}@media (max-width: 768px) {.hero-image {margin-bottom: 3rem;padding-bottom: 1rem;}.hero-image i[style*="8rem"] {font-size: 6rem !important;}}@media (max-width: 576px) {.hero-image {margin-bottom: 2.5rem;padding-bottom: 1.5rem;}.hero-image i[style*="8rem"] {font-size: 4rem !important;}}.hero-image img {max-width: 100%;height: auto;filter: drop-shadow(var(--shadow-strong));animation: bounce 2s ease-in-out infinite;}.btn-playful {background: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-orange));border: none;border-radius: var(--border-radius-xl);padding: var(--spacing-sm) var(--spacing-lg);font-weight: 700;font-size: var(--font-size-sm);color: white;text-decoration: none !important;display: inline-flex;align-items: center;justify-content: center;gap: var(--spacing-xs);transition: all var(--animation-fast) ease;position: relative;overflow: hidden;box-shadow: var(--shadow-soft);animation: buttonPulse 2s ease-in-out infinite;text-align: center;}.btn-playful::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left var(--animation-medium) ease;}.btn-playful:hover::before {left: 100%;}.btn-playful:hover {transform: translateY(-3px) scale(1.1);box-shadow: var(--shadow-strong);color: white !important;text-decoration: none !important;animation: buttonBounce 0.6s ease-in-out;}.btn-playful:active {transform: translateY(-1px) scale(1.02);}@keyframes buttonPulse {0%, 100% {box-shadow: var(--shadow-soft);}50% {box-shadow: var(--shadow-medium);}}@keyframes buttonBounce {0%, 100% {transform: translateY(-3px) scale(1.1);}25% {transform: translateY(-5px) scale(1.15) rotate(2deg);}50% {transform: translateY(-4px) scale(1.12) rotate(-1deg);}75% {transform: translateY(-3px) scale(1.1) rotate(1deg);}}.btn-rocket {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));}.btn-rocket:hover .rocket-icon {animation: rocketLaunch 0.8s ease-out;}@keyframes rocketLaunch {0% {transform: translateY(0) rotate(0deg);}50% {transform: translateY(-20px) rotate(-15deg);}100% {transform: translateY(-40px) rotate(-30deg);opacity: 0;}}.btn-book {animation: bookWiggle 2s ease-in-out infinite;}.btn-book:hover i {animation: bookFlip 0.6s ease-in-out;}@keyframes bookWiggle {0%, 100% {transform: rotate(0deg);}25% {transform: rotate(1deg);}75% {transform: rotate(-1deg);}}@keyframes bookFlip {0% {transform: rotateY(0deg);}50% {transform: rotateY(180deg);}100% {transform: rotateY(360deg);}}.btn-story {animation: starTwinkle 1.8s ease-in-out infinite;}.btn-story:hover i {animation: starSpin 0.8s ease-in-out;}@keyframes starTwinkle {0%, 100% {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));filter: brightness(1);}50% {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-green));filter: brightness(1.2);}}@keyframes starSpin {0% {transform: rotate(0deg) scale(1);}50% {transform: rotate(180deg) scale(1.2);}100% {transform: rotate(360deg) scale(1);}}.btn-fun {animation: heartBeat 2.5s ease-in-out infinite;}.btn-fun:hover i {animation: heartPump 0.6s ease-in-out;}@keyframes heartBeat {0%, 100% {transform: scale(1);}14% {transform: scale(1.1);}28% {transform: scale(1);}42% {transform: scale(1.1);}70% {transform: scale(1);}}@keyframes heartPump {0%, 100% {transform: scale(1);color: currentColor;}50% {transform: scale(1.3);color: #ff4757;}}.stats-section {padding: var(--spacing-xl) 0;position: relative;}.stat-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-lg);text-align: center;box-shadow: var(--shadow-medium);transition: all var(--animation-fast) ease;height: 100%;position: relative;overflow: hidden;}.stat-card::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: conic-gradient(from 0deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-purple), var(--rainbow-pink), var(--rainbow-red));animation: rotate 4s linear infinite;z-index: -1;opacity: 0;transition: opacity var(--animation-fast) ease;}.stat-icon {font-size: 3rem;margin-bottom: var(--spacing-sm);color: var(--warning-color);animation: iconBounce 2s ease-in-out infinite;text-shadow: none;}@keyframes iconBounce {0%, 100% {transform: scale(1) rotate(0deg);filter: hue-rotate(0deg);}25% {transform: scale(1.1) rotate(5deg);filter: hue-rotate(90deg);}50% {transform: scale(1.2) rotate(0deg);filter: hue-rotate(180deg);}75% {transform: scale(1.1) rotate(-5deg);filter: hue-rotate(270deg);}}.stat-number {font-size: var(--font-size-lg);font-weight: 800;color: white;margin-bottom: var(--spacing-xs);text-shadow: none;}.stat-label {font-size: var(--font-size-sm);color: rgba(255, 255, 255, 0.9);font-weight: 600;}.content-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);overflow: hidden;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);height: 100%;min-height: 400px;position: relative;display: flex;flex-direction: column;}@keyframes cardFloat {0%, 100% {transform: translateY(0px) rotate(0deg);}33% {transform: translateY(-3px) rotate(0.5deg);}66% {transform: translateY(3px) rotate(-0.5deg);}}@keyframes cardWiggle {0%, 100% {transform: translateY(-15px) scale(1.05) rotate(1deg);}25% {transform: translateY(-18px) scale(1.08) rotate(-1deg);}50% {transform: translateY(-20px) scale(1.1) rotate(2deg);}75% {transform: translateY(-17px) scale(1.07) rotate(-0.5deg);}}.content-card img {width: 100%;height: 200px;object-fit: cover;transition: transform var(--animation-fast) ease;}.content-card:hover img {transform: scale(1.1);}.content-card-body {padding: var(--spacing-md);background: rgba(255, 255, 255, 0.95);position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;justify-content: space-between;}.content-card-title {font-size: var(--font-size-md);font-weight: 700;margin-bottom: var(--spacing-sm);background: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-purple), var(--rainbow-pink) );background-size: 400% 400%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;animation: textRainbow 3s ease-in-out infinite;}.content-card-text {color: #666;margin-bottom: var(--spacing-md);line-height: 1.6;}.badge-playful {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));color: white;padding: var(--spacing-xs) var(--spacing-sm);border-radius: var(--border-radius-xl);font-weight: 600;font-size: 0.8rem;box-shadow: var(--shadow-soft);}.badge-premium {background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-orange));animation: none !important;}.badge-difficulty-beginner {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));}.badge-difficulty-intermediate {background: linear-gradient(135deg, var(--rainbow-orange), var(--rainbow-red));}.badge-difficulty-advanced {background: linear-gradient(135deg, var(--rainbow-purple), var(--rainbow-pink));}@keyframes slideInLeft {from {opacity: 0;transform: translateX(-100px);}to {opacity: 1;transform: translateX(0);}}@keyframes slideInRight {from {opacity: 0;transform: translateX(100px);}to {opacity: 1;transform: translateX(0);}}@keyframes fadeInUp {from {opacity: 0;transform: translateY(50px);}to {opacity: 1;transform: translateY(0);}}@keyframes bounceIn {0% {opacity: 0;transform: scale(0.3);}50% {opacity: 1;transform: scale(1.05);}70% {transform: scale(0.9);}100% {opacity: 1;transform: scale(1);}}@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-20px);}60% {transform: translateY(-10px);}}@keyframes pulse {0% {transform: scale(1);}50% {transform: scale(1.1);}100% {transform: scale(1);}}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.section-playful {padding: var(--spacing-md) 0;position: relative;}.section-playful:first-child {padding-top: var(--spacing-lg);}.section-playful:last-child {padding-bottom: var(--spacing-lg);}@media (max-width: 768px) {.section-playful:first-child {padding-top: calc(var(--spacing-lg) + 20px);}}@media (max-width: 576px) {.section-playful:first-child {padding-top: calc(var(--spacing-lg) + 25px);}}.section-title {font-size: var(--font-size-lg);font-weight: 800;text-align: center;margin-bottom: var(--spacing-lg);color: white;text-shadow: none;}.section-subtitle {text-align: center;color: rgba(255, 255, 255, 0.9);font-size: var(--font-size-md);margin-bottom: var(--spacing-lg);max-width: 600px;margin-left: auto;margin-right: auto;}@media (max-width: 768px) {:root {--font-size-xl: 2.5rem;--font-size-lg: 2rem;--font-size-md: 1.25rem;--spacing-xl: 2rem;--spacing-lg: 1.5rem;}main {padding-top: 20px;}.hero-playful {min-height: calc(100vh - 80px);padding-top: 20px;}.hero-content {padding: var(--spacing-md);text-align: center;}.hero-content .d-flex {justify-content: center;}.hero-content .d-flex.gap-2 {justify-content: flex-start;}.navbar-playful {padding: var(--spacing-xs) 0;min-height: 70px;}.nav-link-playful {padding: 16px 24px !important;font-size: 1.1rem;margin: 1px;}.dropdown-item-playful {padding: 10px 18px;font-size: 1rem;}.stat-card {margin-bottom: var(--spacing-md);}.content-card {margin-bottom: var(--spacing-md);min-height: 350px;}}@media (max-width: 576px) {:root {--font-size-xl: 2rem;--font-size-lg: 1.5rem;--font-size-md: 1rem;}main {padding-top: 25px;}.hero-playful {min-height: calc(100vh - 90px);padding-top: 25px;}.navbar-playful {min-height: 75px;}.nav-link-playful {padding: 14px 20px !important;font-size: 1rem;margin: 1px;}.dropdown-item-playful {padding: 10px 16px;font-size: 0.95rem;}.btn-playful {padding: var(--spacing-xs) var(--spacing-md);font-size: 0.9rem;}.hero-title {text-align: center;}.hero-subtitle {text-align: center;font-size: 1rem;}.hero-content .d-flex {justify-content: center;flex-direction: column;align-items: center;}.hero-content .d-flex.gap-2 {justify-content: flex-start;flex-direction: row;align-items: flex-start;}.hero-content .btn-playful {width: 100%;max-width: 280px;margin-bottom: 10px;}.content-card {min-height: 300px;}.content-card-title {font-size: 1.1rem;}}.loading-spinner {display: inline-block;width: 40px;height: 40px;border: 4px solid var(--glass-border);border-radius: 50%;border-top-color: var(--rainbow-blue);animation: spin 1s ease-in-out infinite;}@keyframes spin {to {transform: rotate(360deg);}}.interactive-element {cursor: pointer;transition: all var(--animation-fast) ease;}.interactive-element:hover {transform: scale(1.02);}.btn-playful:focus, .nav-link-playful:focus {outline: 3px solid var(--warning-color);outline-offset: 2px;}a, a:hover, a:focus, a:active {text-decoration: none !important;}.emoji-wiggle {display: inline-block;animation: emojiWiggle 2s ease-in-out infinite;}@keyframes emojiWiggle {0%, 100% {transform: rotate(0deg) scale(1);}25% {transform: rotate(10deg) scale(1.1);}50% {transform: rotate(0deg) scale(1.2);}75% {transform: rotate(-10deg) scale(1.1);}}.badge-playful {animation: badgeShine 2s ease-in-out infinite;}@keyframes badgeShine {0%, 100% {filter: brightness(1);}50% {filter: brightness(1.3);}}.section-title {position: relative;overflow: hidden;font-size: var(--font-size-lg);font-weight: 800;text-align: center;margin-bottom: var(--spacing-lg);background: linear-gradient(45deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue) );background-size: 400% 400%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;animation: spectrumCycle 8s ease-in-out infinite;}@keyframes spectrumCycle {0% {background-position: 0% 50%;filter: brightness(1);}25% {background-position: 100% 50%;filter: brightness(1.2);}50% {background-position: 100% 100%;filter: brightness(0.9);}75% {background-position: 0% 100%;filter: brightness(1.1);}100% {background-position: 0% 50%;filter: brightness(1);}}@keyframes textRainbow {0% {background-position: 0% 50%;filter: hue-rotate(0deg) brightness(1);}25% {background-position: 100% 50%;filter: hue-rotate(90deg) brightness(1.2);}50% {background-position: 100% 100%;filter: hue-rotate(180deg) brightness(0.9);}75% {background-position: 0% 100%;filter: hue-rotate(270deg) brightness(1.1);}100% {background-position: 0% 50%;filter: hue-rotate(360deg) brightness(1);}}.navbar-brand-playful .brand-text {text-shadow: none;}@media (max-width: 768px) {.emoji-wiggle {font-size: 1.2em;}.section-title {font-size: 2rem;margin-bottom: 2rem;}.section-subtitle {font-size: 1.5rem;margin-bottom: 2rem;}}.form-control {background: var(--glass-bg);border: 1px solid var(--glass-border);border-radius: var(--border-radius-sm);color: white;backdrop-filter: blur(10px);padding: 0.75rem 1rem;transition: all var(--animation-fast) ease;}.form-control:focus {background: rgba(255, 255, 255, 0.15);border-color: var(--primary-color);box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);color: white;}.form-control::placeholder {color: rgba(255, 255, 255, 0.6);}.form-select {background: var(--glass-bg);border: 1px solid var(--glass-border);border-radius: var(--border-radius-sm);color: white;backdrop-filter: blur(10px);padding: 0.75rem 1rem;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;}.form-select:focus {background: rgba(255, 255, 255, 0.15);border-color: var(--primary-color);box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);color: white;}.form-select option {background: #2c3e50;color: white;padding: 0.5rem;}.form-select option:hover {background: var(--primary-color);}.form-select option:checked {background: var(--primary-color);}.input-group .form-control {border-right: none;}.input-group .btn {border-left: none;border-color: var(--glass-border);}.pagination {--bs-pagination-bg: var(--glass-bg);--bs-pagination-border-color: var(--glass-border);--bs-pagination-color: white;--bs-pagination-hover-bg: rgba(255, 255, 255, 0.15);--bs-pagination-hover-border-color: var(--primary-color);--bs-pagination-hover-color: white;--bs-pagination-active-bg: var(--primary-color);--bs-pagination-active-border-color: var(--primary-color);--bs-pagination-active-color: white;}.page-link {backdrop-filter: blur(10px);border-radius: var(--border-radius-sm) !important;margin: 0 0.25rem;transition: all var(--animation-fast) ease;}.page-link:hover {transform: translateY(-2px);}.progress {background: rgba(255, 255, 255, 0.2);border-radius: var(--border-radius-sm);overflow: hidden;}.progress-bar {background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));transition: width var(--animation-medium) ease;}.module-toggle {background: transparent !important;border: none !important;color: white !important;transition: all var(--animation-fast) ease;}.module-toggle:hover {background: rgba(255, 255, 255, 0.05) !important;}.module-toggle:focus {box-shadow: none !important;outline: none !important;}.breadcrumb-nav {margin-bottom: 2rem;}.breadcrumb-nav {text-align: left;display: flex;justify-content: flex-start;}.breadcrumb {background: var(--glass-bg);backdrop-filter: blur(10px);border-radius: var(--border-radius-md);padding: 1rem 1.5rem;border: 1px solid var(--glass-border);box-shadow: var(--shadow-soft);}.breadcrumb-item {display: flex;align-items: center;}.breadcrumb-item a {color: rgba(255, 255, 255, 0.8);text-decoration: none;transition: all var(--animation-fast) ease;display: flex;align-items: center;padding: 0.25rem 0.5rem;border-radius: var(--border-radius-sm);}.breadcrumb-item a:hover {color: white;background: rgba(255, 255, 255, 0.1);transform: translateY(-1px);}.breadcrumb-item a i {font-size: 0.9rem;opacity: 0.8;}.breadcrumb-item.active {color: var(--rainbow-yellow);font-weight: 600;display: flex;align-items: center;}.breadcrumb-item.active i {color: var(--rainbow-yellow);opacity: 1;}.breadcrumb-item + .breadcrumb-item::before {content: "›";color: rgba(255, 255, 255, 0.5);margin: 0 0.5rem;font-weight: 600;}.content-card {position: relative !important;}.info-item {display: flex;align-items: center;padding: var(--spacing-md);margin-bottom: var(--spacing-md);background: var(--glass-bg);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--border-radius);transition: all 0.3s ease;gap: var(--spacing-md);}.info-item:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);border-color: var(--rainbow-yellow);}.info-item i {font-size: 20px;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.1);border-radius: 50%;flex-shrink: 0;}.info-content {flex: 1;display: flex;flex-direction: column;gap: 2px;}.info-label {color: var(--rainbow-yellow);font-size: 0.85rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;line-height: 1.2;}.info-value {color: white;font-size: 1rem;font-weight: 500;line-height: 1.4;}.related-games {padding: var(--spacing-xl) 0;}.related-games h3 {color: white;font-weight: 700;margin-bottom: var(--spacing-xl);}.related-games .game-card {background: var(--glass-bg);backdrop-filter: blur(10px);border: 1px solid var(--glass-border);border-radius: var(--border-radius);transition: all 0.3s ease;}.related-games .game-card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}.related-games .card-body {background: transparent;color: white;}.related-games .card-title {color: white;font-weight: 600;}.related-games .card-text {color: rgba(255, 255, 255, 0.8);}.ratio {border-radius: var(--border-radius-md);overflow: hidden;box-shadow: var(--shadow-medium);}.info-card-playful, .game-info-card, .story-info-section, .course-info-section {border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);padding: var(--spacing-lg);margin-bottom: var(--spacing-md);box-shadow: var(--shadow-soft);transition: all var(--animation-fast) ease;}.info-card-playful:hover, .game-info-card:hover, .story-info-section:hover, .course-info-section:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.info-item {display: flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-md);margin-bottom: var(--spacing-sm);background: rgba(255, 255, 255, 0.05);border-radius: var(--border-radius-sm);border-left: 4px solid transparent;transition: all var(--animation-fast) ease;min-height: 60px;}.info-item:hover {background: rgba(255, 255, 255, 0.1);border-left-color: var(--rainbow-blue);transform: translateX(5px);}.info-item i {font-size: 1.4rem;color: var(--rainbow-blue);width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;text-align: center;transition: all var(--animation-fast) ease;line-height: 1;flex-shrink: 0;background: rgba(255, 255, 255, 0.1);border-radius: 50%;}.info-item:hover i {color: var(--rainbow-yellow);transform: scale(1.1) rotate(5deg);background: rgba(255, 255, 255, 0.15);}.info-item div {color: rgba(255, 255, 255, 0.9);line-height: 1.4;flex: 1;display: flex;flex-direction: column;gap: 2px;}.info-item strong {color: var(--rainbow-yellow);font-weight: 700;display: block;margin-bottom: 2px;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 0.5px;}.info-item div span {color: white;font-weight: 600;font-size: 1rem;display: block;margin-top: 2px;}.feature-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-md);margin-top: var(--spacing-md);}.feature-item {background: var(--glass-bg);backdrop-filter: blur(15px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-sm);padding: var(--spacing-md);text-align: center;transition: all var(--animation-fast) ease;position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 180px;}.feature-item::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition: left var(--animation-medium) ease;}.feature-item:hover::before {left: 100%;}.feature-item:hover {transform: translateY(-10px) scale(1.02);box-shadow: var(--shadow-medium);border-color: var(--rainbow-blue);}.feature-item i {font-size: 2.5rem;color: var(--rainbow-blue);margin-bottom: var(--spacing-sm);transition: all var(--animation-fast) ease;}.feature-item:hover i {color: var(--rainbow-yellow);transform: scale(1.2) rotate(360deg);}.feature-item h6 {color: white;font-weight: 700;margin-bottom: var(--spacing-xs);font-size: 1.1rem;line-height: 1.3;}.feature-item p {color: rgba(255, 255, 255, 0.8);font-size: 0.9rem;margin: 0;line-height: 1.4;text-align: center;}.stats-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);padding: var(--spacing-lg);box-shadow: var(--shadow-soft);position: sticky;top: 100px;}.stats-card h5 {color: white;font-weight: 700;margin-bottom: var(--spacing-md);text-align: center;}.stat-item {display: flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-sm);margin-bottom: var(--spacing-sm);background: rgba(255, 255, 255, 0.05);border-radius: var(--border-radius-sm);transition: all var(--animation-fast) ease;border-left: 3px solid transparent;}.stat-item:hover {background: rgba(255, 255, 255, 0.1);transform: translateX(5px);border-left-color: var(--rainbow-green);}.stat-icon {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));color: white;font-size: 1.1rem;transition: all var(--animation-fast) ease;}.stat-item:hover .stat-icon {transform: scale(1.1) rotate(10deg);background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-orange));}.stat-content {flex: 1;}.stat-label {font-size: 0.85rem;color: rgba(255, 255, 255, 0.7);margin-bottom: 2px;}.stat-value {font-size: 1.1rem;font-weight: 700;color: white;}.story-meta-info {display: flex;gap: var(--spacing-lg);margin: var(--spacing-md) 0;flex-wrap: wrap;}.meta-stat {text-align: center;padding: var(--spacing-sm);background: var(--glass-bg);border-radius: var(--border-radius-sm);border: 1px solid var(--glass-border);backdrop-filter: blur(10px);transition: all var(--animation-fast) ease;}.meta-stat:hover {transform: translateY(-3px);box-shadow: var(--shadow-soft);}.meta-stat-number {display: block;font-size: 1.5rem;font-weight: 800;color: var(--rainbow-yellow);line-height: 1;}.meta-stat-label {font-size: 0.8rem;color: rgba(255, 255, 255, 0.8);text-transform: uppercase;letter-spacing: 0.5px;}.story-features {margin-top: var(--spacing-xl);padding: var(--spacing-lg);background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);box-shadow: var(--shadow-soft);}.story-features h4 {color: white;font-weight: 700;margin-bottom: var(--spacing-lg);}.premium-notice {background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-orange));color: #333;padding: var(--spacing-lg);border-radius: var(--border-radius-md);margin-bottom: var(--spacing-md);text-align: center;box-shadow: var(--shadow-medium);}.premium-notice h4 {color: #333;font-weight: 800;}.start-reading-btn, .continue-reading-btn {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));color: white;border: none;padding: 1rem 2rem;border-radius: var(--border-radius-sm);font-weight: 700;font-size: 1.1rem;text-decoration: none;display: inline-flex;align-items: center;gap: var(--spacing-xs);transition: all var(--animation-fast) ease;position: relative;overflow: hidden;}.start-reading-btn::before, .continue-reading-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left var(--animation-medium) ease;}.start-reading-btn:hover::before, .continue-reading-btn:hover::before {left: 100%;}.start-reading-btn:hover, .continue-reading-btn:hover {transform: translateY(-3px) scale(1.05);box-shadow: var(--shadow-medium);color: white;}.btn-play {background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-orange));color: white;border: none;padding: 1rem 2rem;border-radius: var(--border-radius-sm);font-weight: 700;text-decoration: none;display: inline-flex;align-items: center;gap: var(--spacing-xs);transition: all var(--animation-fast) ease;}.btn-play:hover {transform: translateY(-3px) scale(1.05);box-shadow: var(--shadow-medium);color: white;}.category-link {color: var(--rainbow-yellow);text-decoration: none;font-weight: 600;transition: all var(--animation-fast) ease;}.category-link:hover {color: var(--rainbow-orange);text-decoration: underline;}.course-content-section {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);padding: var(--spacing-lg);margin-bottom: var(--spacing-md);box-shadow: var(--shadow-soft);}.course-content-section h3 {color: white;font-weight: 700;margin-bottom: var(--spacing-md);}.module-toggle {background: var(--glass-bg);backdrop-filter: blur(15px);border: 1px solid var(--glass-border);color: white;transition: all var(--animation-fast) ease;}.module-toggle:hover {background: rgba(255, 255, 255, 0.15);color: white;}.module-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);color: white;}.section-header-playful {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);padding: var(--spacing-md);margin-bottom: var(--spacing-md);box-shadow: var(--shadow-soft);}.section-content-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);box-shadow: var(--shadow-soft);overflow: hidden;}.section-content-card .card-body {padding: var(--spacing-lg);}.section-content {color: rgba(255, 255, 255, 0.9);line-height: 1.8;}.section-content h1, .section-content h2, .section-content h3, .section-content h4, .section-content h5, .section-content h6 {color: white;font-weight: 700;margin-top: var(--spacing-md);margin-bottom: var(--spacing-sm);}.section-content p {margin-bottom: var(--spacing-sm);}.section-content ul, .section-content ol {padding-left: var(--spacing-md);margin-bottom: var(--spacing-sm);}.section-content li {margin-bottom: var(--spacing-xs);}.icon-playful {transition: all var(--animation-fast) ease;display: inline-flex;align-items: center;justify-content: center;width: 1em;height: 1em;line-height: 1;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.icon-playful:hover {transform: scale(1.2) rotate(10deg);}.icon-bounce {animation: iconBounce 2s ease-in-out infinite;display: inline-flex;align-items: center;justify-content: center;line-height: 1;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.icon-wiggle {animation: emojiWiggle 2s ease-in-out infinite;display: inline-flex;align-items: center;justify-content: center;line-height: 1;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.icon-pulse {animation: pulse 2s ease-in-out infinite;display: inline-flex;align-items: center;justify-content: center;line-height: 1;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.icon-rotate {animation: rotate 3s linear infinite;display: inline-flex;align-items: center;justify-content: center;line-height: 1;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.hero-playful .icon-bounce, .hero-playful .icon-wiggle, .hero-playful .icon-pulse, .hero-playful .icon-rotate, .hero-playful .icon-playful {font-size: inherit;line-height: 1;vertical-align: middle;border-radius: 50% !important;border: none !important;box-shadow: none !important;}.section-title .icon-bounce, .section-title .icon-wiggle, .section-title .icon-pulse, .section-title .icon-rotate, .section-title .icon-playful {font-size: 0.9em;vertical-align: middle;}.info-item i, .feature-item i, .stat-icon i {line-height: 1;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;border: none !important;box-shadow: none !important;border-radius: 0 !important;}.fas, .far, .fab, .fal, .fad, i[class*="fa-"] {border: none !important;box-shadow: none !important;border-radius: 0 !important;}.icon-playful .fas, .icon-playful .far, .icon-playful .fab, .icon-bounce .fas, .icon-bounce .far, .icon-bounce .fab, .icon-wiggle .fas, .icon-wiggle .far, .icon-wiggle .fab, .icon-pulse .fas, .icon-pulse .far, .icon-pulse .fab, .icon-rotate .fas, .icon-rotate .far, .icon-rotate .fab {border: none !important;box-shadow: none !important;border-radius: 0 !important;}.text-rainbow-red {color: var(--rainbow-red) !important;}.text-rainbow-orange {color: var(--rainbow-orange) !important;}.text-rainbow-yellow {color: var(--rainbow-yellow) !important;}.text-rainbow-green {color: var(--rainbow-green) !important;}.text-rainbow-blue {color: var(--rainbow-blue) !important;}.text-rainbow-purple {color: var(--rainbow-purple) !important;}.text-rainbow-pink {color: var(--rainbow-pink) !important;}.content-card i, .glass-card i, .stat-card i, .info-item i, .feature-item i, .section-icon i, .nav-link-playful i, .btn-playful i, .badge-playful i, .meta-stat i {text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));}.interactive-course-header {background: linear-gradient(135deg, var(--rainbow-purple), var(--rainbow-pink));color: white;padding: var(--spacing-xl);border-radius: var(--border-radius-md);margin-bottom: var(--spacing-md);}.interactive-feature-card {background: var(--glass-bg);backdrop-filter: blur(15px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-sm);transition: all var(--animation-fast) ease;}.interactive-feature-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.related-games, .related-stories, .related-courses {padding: var(--spacing-xl) 0;background: rgba(0, 0, 0, 0.1);margin-top: var(--spacing-xl);}.related-games h3, .related-stories h3, .related-courses h3 {color: white;font-weight: 700;text-align: center;margin-bottom: var(--spacing-lg);}.game-card {background: var(--glass-bg);backdrop-filter: blur(15px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-sm);transition: all var(--animation-fast) ease;overflow: hidden;}.game-card:hover {transform: translateY(-10px);box-shadow: var(--shadow-medium);}.game-card-img {height: 200px;object-fit: cover;transition: all var(--animation-fast) ease;}.game-card:hover .game-card-img {transform: scale(1.1);}.game-card .card-body {padding: var(--spacing-md);}.game-card .card-title {color: white;font-weight: 700;font-size: 1.1rem;margin-bottom: var(--spacing-xs);}.game-card .card-text {color: rgba(255, 255, 255, 0.8);font-size: 0.9rem;}.fullscreen-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.95);z-index: 9999;display: none;flex-direction: column;}.fullscreen-container.active {display: flex;}.fullscreen-controls {position: absolute;top: 20px;right: 20px;z-index: 10000;}.btn-exit-fullscreen {background: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-pink));color: white;border: none;padding: 0.75rem 1rem;border-radius: var(--border-radius-md);font-weight: 600;cursor: pointer;transition: all 0.3s ease;}.btn-exit-fullscreen:hover {transform: scale(1.05);box-shadow: 0 5px 15px rgba(0,0,0,0.3);}.fullscreen-iframe {width: 100%;height: 100%;border: none;flex: 1;}.course-section-item {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: var(--border-radius-sm);margin-bottom: var(--spacing-xs);padding: var(--spacing-sm);transition: all var(--animation-fast) ease;display: flex;align-items: center;justify-content: space-between;}.course-section-item:hover {background: rgba(255, 255, 255, 0.1);border-color: var(--rainbow-blue);transform: translateX(5px);}.course-section-item .section-info {display: flex;align-items: center;gap: var(--spacing-sm);flex: 1;}.course-section-item .section-icon {width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 0.9rem;flex-shrink: 0;}.course-section-item .section-content h6 {color: white;font-weight: 600;margin-bottom: 2px;font-size: 1rem;line-height: 1.3;}.course-section-item .section-badges {display: flex;gap: 4px;flex-wrap: wrap;margin-top: 4px;}.course-section-item .section-action {flex-shrink: 0;}.game-info-card .info-item {align-items: center;}.game-info-card .info-item div {min-width: 0;word-wrap: break-word;}.glass-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);overflow: hidden;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);height: 100%;position: relative;display: flex;flex-direction: column;}.glass-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.glass-card-body {padding: var(--spacing-md);background: transparent;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;justify-content: space-between;}.glass-card-title {font-size: var(--font-size-md);font-weight: 700;margin-bottom: var(--spacing-sm);color: white;}.glass-card-text {color: rgba(255, 255, 255, 0.9);margin-bottom: var(--spacing-md);line-height: 1.6;}.gradient-glass-card {backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);overflow: hidden;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);height: 100%;position: relative;display: flex;flex-direction: column;}.gradient-glass-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.gradient-glass-card-body {padding: var(--spacing-md);background: transparent;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;justify-content: space-between;}.gradient-glass-card-title {font-size: var(--font-size-md);font-weight: 700;margin-bottom: var(--spacing-sm);color: white;}.gradient-glass-card-text {color: rgba(255, 255, 255, 0.9);margin-bottom: var(--spacing-md);line-height: 1.6;}.nested-glass-card {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--border-radius-md);padding: var(--spacing-md);transition: all var(--animation-fast) ease;}.nested-glass-card:hover {background: rgba(255, 255, 255, 0.15);transform: translateY(-2px);}.nested-glass-card h5, .nested-glass-card h6 {color: white;margin-bottom: var(--spacing-sm);}.nested-glass-card p, .nested-glass-card li {color: rgba(255, 255, 255, 0.9);}.nested-glass-card ul {color: rgba(255, 255, 255, 0.9);margin-bottom: 0;}.contact-info-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-md);text-align: center;height: 100%;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);}.contact-info-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.contact-info-card .stat-icon {width: 80px;height: 80px;margin: 0 auto var(--spacing-sm);background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 2rem;color: white;animation: iconBounce 2s ease-in-out infinite;}.contact-info-card h5 {color: white;font-weight: 700;margin-bottom: var(--spacing-xs);}.contact-info-card p {color: rgba(255, 255, 255, 0.9);margin: 0;}.glass-form-container {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-soft);}.glass-form-container h3 {color: white;text-align: center;margin-bottom: var(--spacing-md);}.glass-form-container .form-label {color: white;font-weight: 600;}.faq-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-md);height: 100%;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);}.faq-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-medium);}.faq-card h5 {color: white;font-weight: 700;margin-bottom: var(--spacing-sm);}.faq-card p {color: rgba(255, 255, 255, 0.9);margin: 0;line-height: 1.6;}.social-section-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-lg);text-align: center;box-shadow: var(--shadow-soft);}.social-section-card h3 {color: white;margin-bottom: var(--spacing-sm);}.social-section-card p {color: rgba(255, 255, 255, 0.9);margin-bottom: var(--spacing-md);}.liquid-glass-page .content-card {background: var(--glass-bg);backdrop-filter: blur(20px);}.liquid-glass-page .content-card-body {background: transparent;}.liquid-glass-page .content-card-title {color: white;background: none;-webkit-text-fill-color: white;}.liquid-glass-page .content-card-text {color: rgba(255, 255, 255, 0.9);}.content-card-compact {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);overflow: hidden;transition: all var(--animation-fast) ease;box-shadow: var(--shadow-soft);min-height: auto;height: auto;position: relative;display: flex;flex-direction: column;}.content-card-compact:hover {transform: translateY(-3px);box-shadow: var(--shadow-medium);}.glass-card-body-compact {padding: 1.5rem 2rem 1rem 2rem;background: transparent;position: relative;z-index: 2;flex: 1;display: flex;flex-direction: column;justify-content: flex-start;}.story-reader-container {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);overflow: hidden;box-shadow: var(--shadow-soft);transition: all var(--animation-fast) ease;}.story-reader-header {background: transparent;padding: var(--spacing-lg);border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.story-info-bar {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: var(--border-radius-md);padding: var(--spacing-md);margin: var(--spacing-md) 0;border: 1px solid rgba(255, 255, 255, 0.15);}.story-info-bar small {color: rgba(255, 255, 255, 0.7);}.story-info-bar strong {color: white;font-weight: 600;}.time-tracker {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 20px;padding: 8px 16px;display: inline-flex;align-items: center;color: white;font-size: 0.9rem;border: 1px solid rgba(255, 255, 255, 0.15);}.story-progress {margin-top: var(--spacing-md);}.reading-progress {background: rgba(255, 255, 255, 0.2);height: 8px;border-radius: 4px;overflow: hidden;}.reading-progress-bar {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));height: 100%;border-radius: 4px;transition: width 0.3s ease;}.chapter-content {padding: var(--spacing-lg);background: transparent;}.chapter-image {width: 100%;max-height: 300px;object-fit: cover;border-radius: var(--border-radius-md);margin-bottom: var(--spacing-md);}.chapter-text {color: rgba(255, 255, 255, 0.95);line-height: 1.8;font-size: 1.1rem;}.chapter-text h1, .chapter-text h2, .chapter-text h3, .chapter-text h4, .chapter-text h5, .chapter-text h6 {color: white;margin-top: var(--spacing-md);margin-bottom: var(--spacing-sm);}.chapter-text p {margin-bottom: var(--spacing-md);}.choices-section {padding: var(--spacing-lg);background: rgba(255, 255, 255, 0.05);border-top: 1px solid rgba(255, 255, 255, 0.1);}.choices-container {display: flex;flex-direction: column;gap: var(--spacing-sm);}.choice-card {background: var(--glass-bg);backdrop-filter: blur(15px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-md);padding: var(--spacing-md);text-decoration: none;color: white;transition: all var(--animation-fast) ease;display: block;}.choice-card:hover {background: rgba(255, 255, 255, 0.15);transform: translateY(-2px);box-shadow: var(--shadow-medium);color: white;text-decoration: none;}.choice-number {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;margin-right: var(--spacing-sm);flex-shrink: 0;}.choice-text {flex: 1;}.navigation-section {padding: var(--spacing-lg);background: rgba(255, 255, 255, 0.05);border-top: 1px solid rgba(255, 255, 255, 0.1);}.nav-btn {border-radius: var(--border-radius-md);padding: 12px 20px;font-weight: 600;transition: all var(--animation-fast) ease;}.course-modules-container {background: transparent;}.module-card {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);margin-bottom: var(--spacing-md);overflow: hidden;box-shadow: var(--shadow-soft);transition: all var(--animation-fast) ease;}.module-card:hover {transform: translateY(-3px);box-shadow: var(--shadow-medium);}.module-header {background: transparent;border: none;width: 100%;text-align: left;padding: var(--spacing-lg);color: white;transition: all var(--animation-fast) ease;border-radius: 0;}.module-header:hover {background: rgba(255, 255, 255, 0.05);}.module-header:focus {box-shadow: none;background: rgba(255, 255, 255, 0.1);}.module-header.collapsed::after {transform: rotate(0deg);}.module-header:not(.collapsed)::after {transform: rotate(180deg);}.module-header::after {content: '▼';float: right;transition: transform 0.3s ease;color: rgba(255, 255, 255, 0.7);}.module-content {background: rgba(255, 255, 255, 0.05);border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 0;}.section-item {background: transparent;border: none;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: var(--spacing-md) var(--spacing-lg);transition: all var(--animation-fast) ease;}.section-item:hover {background: rgba(255, 255, 255, 0.1);}.section-item:last-child {border-bottom: none;}.section-icon {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.1rem;margin-right: var(--spacing-md);flex-shrink: 0;}.section-info {flex: 1;}.section-item .section-title {color: white;font-weight: 600;margin-bottom: 4px;font-size: 1rem;}.section-badges {display: flex;gap: 8px;flex-wrap: wrap;margin-top: 8px;}.section-badge {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));color: white;padding: 2px 8px;border-radius: 12px;font-size: 0.75rem;font-weight: 500;}.section-badge.video {background: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-orange));}.section-badge.game {background: linear-gradient(135deg, var(--rainbow-yellow), var(--rainbow-green));}.section-badge.premium {background: linear-gradient(135deg, var(--rainbow-purple), var(--rainbow-pink));}.section-action {margin-left: var(--spacing-sm);}.section-start-btn {background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));color: white;border: none;padding: 8px 16px;border-radius: var(--border-radius-md);font-size: 0.9rem;font-weight: 600;transition: all var(--animation-fast) ease;text-decoration: none;display: inline-flex;align-items: center;gap: 8px;}.section-start-btn:hover {background: linear-gradient(135deg, var(--rainbow-purple), var(--rainbow-blue));transform: translateY(-2px);color: white;text-decoration: none;}.section-locked {opacity: 0.6;cursor: not-allowed;}.section-completed .section-icon {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-yellow));}.section-completed .section-item .section-title {opacity: 0.8;}.course-info-sidebar {background: var(--glass-bg);backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: var(--border-radius-lg);padding: var(--spacing-lg);box-shadow: var(--shadow-soft);position: sticky;top: 100px;}.course-info-sidebar h5 {color: white;margin-bottom: var(--spacing-md);font-weight: 700;}.course-info-item {display: flex;align-items: center;margin-bottom: var(--spacing-md);padding-bottom: var(--spacing-sm);border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.course-info-item:last-child {border-bottom: none;margin-bottom: 0;}.course-info-icon {width: 40px;height: 40px;background: linear-gradient(135deg, var(--rainbow-blue), var(--rainbow-purple));border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: var(--spacing-sm);color: white;font-size: 1rem;}.course-info-content {flex: 1;}.course-info-label {color: rgba(255, 255, 255, 0.7);font-size: 0.85rem;margin-bottom: 2px;}.course-info-value {color: white;font-weight: 600;}.course-progress-card {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: var(--border-radius-md);padding: var(--spacing-md);margin-top: var(--spacing-md);border: 1px solid rgba(255, 255, 255, 0.15);}.course-progress-bar {background: rgba(255, 255, 255, 0.2);height: 8px;border-radius: 4px;overflow: hidden;margin: var(--spacing-sm) 0;}.course-progress-fill {background: linear-gradient(135deg, var(--rainbow-green), var(--rainbow-blue));height: 100%;border-radius: 4px;transition: width 0.3s ease;}@media (max-width: 768px) {.story-reader-header, .chapter-content, .choices-section, .navigation-section {padding: var(--spacing-md);}.course-info-sidebar {position: static;margin-top: var(--spacing-lg);}.section-item {padding: var(--spacing-sm) var(--spacing-md);}.module-header {padding: var(--spacing-md);}footer .container {padding: 0 15px;}footer h6 {font-size: 1rem;margin-bottom: 0.75rem;}footer ul li {margin-bottom: 0.5rem;}footer ul li a {font-size: 0.9rem;}footer .badge-playful {font-size: 0.8rem;padding: 6px 10px;}footer .col-6 {padding-left: 8px;padding-right: 8px;}}.section-title .emoji-wiggle {-webkit-text-fill-color: initial;background-clip: initial;background: initial;color: inherit;}.content-card-title, .glass-card-title, .game-card .card-title, .related-games .card-title {line-height: 1.5;padding-bottom: 0.25rem;min-height: 1.5em;overflow: visible;}body[lang="ar"], .rtl-body {font-family: 'Tajawal', 'Amiri', 'Noto Sans Arabic', 'Cairo', 'Nunito', sans-serif;}.btn-playful {justify-content: center;text-align: center;}.btn-playful[style*="linear-gradient"], .btn-rocket[style*="linear-gradient"], .btn-book[style*="linear-gradient"], .btn-story[style*="linear-gradient"], .btn-fun[style*="linear-gradient"] {text-align: center !important;justify-content: center !important;}body[lang="ar"] .btn-playful, .rtl-body .btn-playful {text-align: center;justify-content: center;}body[lang="ar"] .btn-playful i, .rtl-body .btn-playful i {margin-left: 0.5rem;margin-right: 0;}.nav-btn, .choice-card, .filter-btn {text-align: center !important;justify-content: center !important;}.page-link.btn-playful {text-align: center !important;justify-content: center !important;}.alert {border: none;border-radius: var(--border-radius-md);padding: var(--spacing-md) var(--spacing-lg);margin-bottom: var(--spacing-md);font-weight: 600;font-size: 1rem;line-height: 1.5;backdrop-filter: blur(20px);box-shadow: var(--shadow-soft);position: relative;overflow: hidden;transition: all var(--animation-fast) ease;animation: alertSlideIn var(--animation-medium) ease;}.alert::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left var(--animation-medium) ease;}.course-modules-container .section-title, .module-content .section-title, .section-item .section-title {color: white !important;background: none !important;background-image: none !important;background-clip: unset !important;-webkit-background-clip: unset !important;-webkit-text-fill-color: white !important;}.mb-6 {margin-bottom: 4rem !important;}.col-lg-8 {margin-bottom: 2rem !important;}.mb-4 {margin-bottom: 4rem !important;}.activity-log-table {color: white;margin-bottom: 0;border-collapse: separate;border-spacing: 0;table-layout: auto;width: 100%;background: var(--glass-bg);backdrop-filter: blur(10px);border-radius: var(--border-radius-md);overflow: hidden;}.activity-log-table th, .activity-log-table td {background: transparent;color: white;border: none;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding: 0.75rem 0.5rem;font-weight: 500;vertical-align: middle;transition: all 0.3s ease;position: relative;}.activity-log-table thead th {background: transparent;color: white;font-weight: 700;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 0.5px;border-bottom: 2px solid var(--glass-border);padding: 1rem 0.5rem;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);background: rgba(0, 0, 0, 0.2);}.activity-log-table .d-flex .icon-playful {margin-right: 0.75rem;margin-left: 0;order: 1;}@media (max-width: 768px) {.activity-log-table {display: block;overflow-x: auto;white-space: nowrap;}}.activity-log-table tbody tr {transition: all var(--animation-fast) ease;}.activity-log-table tbody tr:hover {background: rgba(255, 255, 255, 0.1);}.activity-log-table tbody tr td div {font-size: 0.9rem;}.activity-log-table .text-center {text-align: center !important;}.activity-log-table .text-start {text-align: left !important;}.activity-log-table .text-end {text-align: right !important;}