*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background:linear-gradient(135deg,#f0f8ff,#e0f7fa);color:#2f3640;padding:20px}.app-container{max-width:1100px;margin:0 auto}h1{font-size:2rem;color:#6a1b9a;text-align:center;margin-bottom:10px}p{text-align:center;margin-bottom:25px}.main-layout{display:flex;gap:25px;flex-wrap:wrap}.sidebar{flex:1;min-width:280px;background:#fffc;padding:25px 20px;border-radius:15px;box-shadow:0 8px 20px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar h3{text-align:center;margin-bottom:20px;color:#6a1b9a}.sidebar ul{list-style:none}.sidebar button{display:block;width:100%;padding:12px 18px;margin-bottom:12px;border:none;border-radius:12px;background:linear-gradient(90deg,#ff6f61,#ffb347);color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6f614d}.sidebar button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6f6180}.sidebar button.active{background:linear-gradient(90deg,#6a1b9a,#ab47bc);box-shadow:0 6px 20px #6a1b9a66}.lesson-content{flex:2;background:#fff;padding:30px 25px;border-radius:20px;box-shadow:0 10px 30px #00000014}.lesson-content h2{margin-bottom:15px;color:#6a1b9a;font-size:1.8rem}.lesson-content p{margin-bottom:15px;color:#333;font-size:1rem}.transcript-box{width:100%;min-height:80px;padding:12px 15px;border:2px dashed #6a1b9a;border-radius:12px;margin-bottom:15px;font-style:italic;background:#f3e5f5;transition:all .3s ease}.transcript-box:focus{border-color:#ab47bc;box-shadow:0 0 10px #ab47bc66;outline:none}button{padding:10px 20px;margin-top:10px;border:none;border-radius:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.audio-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#00c6ff,#0072ff);color:#fff;box-shadow:0 6px 15px #00c6ff4d}.audio-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00c6ff80}.lesson-content button:not(.audio-btn){background:linear-gradient(90deg,#ff512f,#dd2476);color:#fff;margin-right:10px}.lesson-content button:not(.audio-btn):hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff512f80}.score{margin-top:15px;font-weight:700;color:#ff3d00;font-size:1.3rem;animation:popScore .7s ease-out}@keyframes popScore{0%{transform:scale(0);opacity:0}50%{transform:scale(1.4);opacity:1}to{transform:scale(1)}}@media (max-width: 900px){.main-layout{flex-direction:column}.sidebar,.lesson-content{width:100%}.sidebar button{text-align:center}}.transcript-word{transition:background .3s,color .3s;padding:2px 4px;border-radius:4px}.transcript-word.active{background:#6a1b9a;color:#fff}.completed-badge{display:inline-block;margin-left:8px;padding:2px 6px;font-size:.8rem;background:linear-gradient(90deg,#00b09b,#96c93d);color:#fff;border-radius:12px;font-weight:600}.lesson-content{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar button{transition:transform .2s ease,box-shadow .3s ease}.sidebar button:hover{transform:translateY(-2px) scale(1.03)}