.subject-selector-container{background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.subject-selector-content{text-align:center;width:100%;max-width:1000px;position:relative}.back-button-home{cursor:pointer;color:#11998e;background:#fff;border:none;border-radius:10px;padding:12px 25px;font-size:1rem;font-weight:700;transition:all .3s;position:absolute;top:-60px;left:0;box-shadow:0 4px 10px #0003}.back-button-home:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0000004d}.app-title{color:#fff;text-shadow:2px 2px 8px #0000004d;margin-bottom:10px;font-size:3.5rem;animation:.6s slideDown}.app-subtitle{color:#fffffff2;text-shadow:1px 1px 4px #0003;margin-bottom:50px;font-size:1.3rem;animation:.8s slideDown}.subject-cards{perspective:1000px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;display:grid}.subject-card{cursor:pointer;background:#fff;border-radius:20px;padding:40px 30px;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);animation:.8s fadeInUp;position:relative;overflow:hidden;box-shadow:0 10px 30px #0003}.subject-card:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.subject-card:hover:before{left:100%}.subject-card:hover{transform:translateY(-15px)scale(1.05);box-shadow:0 20px 50px #0000004d}.subject-card.hovered{transform:translateY(-15px)scale(1.05)}.subject-card.english-subject{border-top:5px solid #4ecdc4}.subject-card.english-subject:hover{color:#fff;background:linear-gradient(135deg,#4ecdc4 0%,#44a08d 100%)}.subject-card.maths-subject{border-top:5px solid #4ecdc4}.subject-card.maths-subject:hover{color:#fff;background:linear-gradient(135deg,#4ecdc4 0%,#44a08d 100%)}.subject-card.knowledge-subject{border-top:5px solid #764ba2}.subject-card.knowledge-subject:hover{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.subject-icon{margin-bottom:20px;font-size:4rem;animation:2s ease-in-out infinite bounce;display:block}.subject-card.hovered .subject-icon{animation:.6s ease-in-out spin}.subject-card h2{margin-bottom:10px;font-size:2rem;font-weight:700}.subject-card p{opacity:.8;margin-bottom:25px;font-size:1.1rem;line-height:1.6}.subject-features{text-align:left;margin:0 0 25px;padding:0;list-style:none}.subject-features li{opacity:.85;justify-content:center;align-items:center;padding:8px 0;font-size:1rem;display:flex}.subject-features li:before{content:"";margin-right:10px;display:inline-block}.subject-arrow{opacity:.3;font-size:2rem;transition:all .3s;position:absolute;bottom:20px;right:20px}.subject-card:hover .subject-arrow{opacity:1;transform:translate(10px)}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin{0%{transform:rotate(0)scale(1)}to{transform:rotate(360deg)scale(1.1)}}@media (max-width:768px){.app-title{font-size:2.5rem}.app-subtitle{margin-bottom:30px;font-size:1.1rem}.subject-cards{grid-template-columns:1fr;gap:20px}.subject-card{padding:30px 20px}.subject-icon{font-size:3rem}.subject-card h2{font-size:1.5rem}}
