*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background-color:#08141d;font-family:Arial,sans-serif}.sidebar{background-color:#0d1b24;border-right:1px solid #1f3442;width:250px;min-height:100vh;padding:30px 20px}.logo{color:#58cc02;margin-bottom:50px;font-size:36px;text-decoration:none}.menu{flex-direction:column;gap:30px;display:flex}.menu-link,.logo{color:inherit;text-decoration:none}.menu-link{cursor:pointer;color:#c3d4e7;font-size:22px;transition:color .25s,transform .25s}.menu-link:hover,.menu-link.active{color:#58cc02;transform:translate(5px)}.app-layout{background-color:#08141d;min-height:100vh;display:flex}.app-layout.fullscreen{flex-direction:column}.app-panel{flex-direction:column;flex:1;min-height:100vh;display:flex}.main-content{flex:1;min-height:100%;padding:40px;overflow:auto}.main-content h1{font-size:40px}.lesson-path{flex-direction:column;align-items:center;gap:40px;margin-top:50px;display:flex}.lesson-node{text-align:center}.circle{cursor:pointer;background-color:#58cc02;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;font-size:40px;transition:all .3s;display:flex;box-shadow:0 5px 15px #0000004d}.circle:hover{transform:scale(1.1)}.lesson-node p{margin-top:10px;font-size:18px}.left{margin-right:200px}.right{margin-left:200px}.lesson-node{text-align:center;position:relative}.line{display:none}.circle{animation:2s ease-in-out infinite float}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.lesson-popup{text-align:center;background-color:#1bd18b;border-radius:25px;width:350px;padding:30px;animation:.3s popup;position:relative}.lesson-popup button{cursor:pointer;color:#1bd18b;background-color:#fff;border:none;border-radius:15px;padding:12px 25px;font-size:18px;font-weight:700}.overlay{z-index:999;background-color:#0009;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:fixed;top:0;left:0}@keyframes popup{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.close-btn{cursor:pointer;color:#fff;font-size:18px;position:absolute;top:15px;right:20px}.lesson-text{color:#fff;margin:20px 0;font-size:18px}.start-btn{cursor:pointer;color:#1bd18b;background-color:#fff;border:none;border-radius:18px;padding:14px 30px;font-size:18px;font-weight:700;transition:all .3s}.start-btn:hover{transform:scale(1.05)}.lesson-screen{z-index:2000;background-color:#08141d;flex-direction:column;align-items:center;width:100%;height:100vh;padding-top:60px;padding-bottom:60px;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.auth-page{background:radial-gradient(circle at 0 0,#58cc022e,#0000 25%),radial-gradient(circle at 100% 100%,#1bd18b29,#0000 20%),#08141d;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:40px 20px;display:flex}.auth-card{background-color:#0d1b24eb;border:1px solid #58cc0226;border-radius:28px;width:100%;max-width:440px;margin:0 auto;overflow:hidden;box-shadow:0 24px 80px #00000059}.auth-panel h1,.auth-panel p{text-align:center}.auth-card{background-color:#0d1b24eb;border:1px solid #58cc0226;border-radius:28px;width:100%;max-width:460px;overflow:hidden;box-shadow:0 24px 80px #00000059}.auth-panel{padding:40px 34px}.auth-panel h1{color:#f5f9ff;margin-bottom:12px;font-size:34px}.auth-panel p{color:#a8c7d9;margin-bottom:30px;line-height:1.7}.auth-form label{color:#d7e9ff;margin-bottom:18px;font-size:14px;display:block}.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password]{color:#f4f9ff;background-color:#0d1b24;border:1px solid #ffffff1f;border-radius:16px;outline:none;width:100%;margin-top:10px;padding:14px 16px;font-size:15px;transition:border-color .2s,box-shadow .2s}.auth-form input:focus{border-color:#58cc0299;box-shadow:0 0 0 4px #58cc021f}.auth-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.checkbox-label{color:#c3d4e7;cursor:pointer;align-items:center;gap:10px;font-size:14px;display:inline-flex}.checkbox-label input{accent-color:#58cc02;width:16px;height:16px}.auth-link{color:#58cc02;cursor:pointer;font-size:14px;transition:color .2s,transform .2s}.auth-link:hover{color:#7de86d;transform:translate(2px)}.form-error{color:#ff6b6b;margin-bottom:18px;font-size:14px}.primary-button{color:#08141d;cursor:pointer;background:linear-gradient(135deg,#58cc02 0%,#2dd274 100%);border:none;border-radius:16px;width:100%;padding:16px 0;font-size:16px;font-weight:700;transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-1px);box-shadow:0 18px 30px #58cc0238}.auth-footer{text-align:center;margin-top:28px}.auth-footer p{color:#b7d2e6;font-size:14px}.auth-footer a{color:#58cc02;font-weight:600;text-decoration:none}.auth-footer a:hover{color:#7de86d}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}.navbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#08141df2;border-bottom:1px solid #58cc021f;justify-content:space-between;align-items:center;padding:18px 32px;display:flex;position:sticky;top:0}.navbar-left{min-width:120px}.nav-logo-btn{color:#58cc02;cursor:pointer;background:0 0;border:none;padding:0;font-size:28px;font-weight:900;transition:color .2s,transform .2s}.nav-logo-btn:hover{color:#7de86d;transform:scale(1.05)}.navbar-right{align-items:center;gap:18px;display:flex}.nav-user{color:#eff8ff;font-size:15px;font-weight:700}.nav-button{color:#58cc02;cursor:pointer;background:#58cc021f;border:none;border-radius:999px;padding:10px 18px;font-weight:700;transition:transform .2s,background-color .2s}.nav-button:hover{background:#58cc0233;transform:translateY(-1px)}.nav-logout{color:#ff9a9a;background:#ff6b6b29}.home-page{flex-direction:column;gap:36px;padding-bottom:40px;display:flex}.hero-section{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:flex-start;gap:30px;padding:28px 0;display:flex}.hero-section>div{max-width:64%}.hero-section h1{color:#f4f9ff;margin:12px 0 20px;font-size:46px;line-height:1.05}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:#58cc02;font-size:13px;font-weight:700}.hero-copy{color:#b7cbdc;max-width:720px;font-size:18px;line-height:1.8}.secondary-button{color:#58cc02;cursor:pointer;background:#58cc0214;border:1px solid #58cc0240;border-radius:18px;padding:14px 28px;font-weight:700;transition:all .2s}.secondary-button:hover{background:#58cc0229}.lesson-path{flex-direction:column;gap:22px;padding-top:18px;display:flex}.lesson-popup,.comingsoon-popup,.languages-popup,.complete-popup{text-align:center;background-color:#071a2b;border:1px solid #58cc022e;border-radius:28px;width:min(520px,100% - 48px);padding:32px;position:relative}.lesson-popup h2,.language-title,.comingsoon-popup h2{color:#f4f9ff;margin-bottom:18px;font-size:30px}.lesson-text,.comingsoon-text,.language-description{color:#c7d7e8;font-size:16px;line-height:1.8}.lesson-screen{z-index:2000;background-color:#08141d;flex-direction:column;align-items:center;width:100%;height:100vh;padding:90px 40px 40px;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.lesson-screen h1{color:#f4f9ff;margin-top:22px;font-size:38px}.gesture-box{background-color:#10232e;border-radius:30px;justify-content:center;align-items:center;width:240px;height:240px;margin-top:40px;animation:2s ease-in-out infinite float;display:flex}.gesture-text{color:#d7e9ff;text-align:center;max-width:640px;margin-top:30px;font-size:20px}.next-btn,.back-btn,.roadmap-btn{cursor:pointer;border:none;border-radius:20px;padding:15px 42px;font-size:18px;font-weight:700;transition:transform .2s,background-color .2s}.next-btn,.back-btn{color:#fff;background-color:#58cc02}.next-btn:hover,.back-btn:hover,.roadmap-btn:hover{transform:translateY(-1px)}.profile-page{justify-content:center;width:100%;padding:20px 0 40px;display:flex}.profile-card{background:linear-gradient(#08141df5,#0d1b24f2);border:1px solid #58cc022e;border-radius:28px;width:100%;max-width:860px;padding:32px;box-shadow:0 26px 80px #00000059}.profile-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px;margin-bottom:34px;display:flex}.profile-header h1{color:#f4f9ff;margin:12px 0 4px;font-size:38px}.profile-header .eyebrow{margin-bottom:8px}.profile-subtitle{color:#a0b9ce;font-size:16px}.profile-avatar{color:#08141d;background:linear-gradient(135deg,#58cc02 0%,#2dd274 100%);border-radius:24px;justify-content:center;align-items:center;width:96px;height:96px;font-size:36px;font-weight:900;display:flex}.profile-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:28px;display:grid}.profile-details div{background:#ffffff08;border:1px solid #ffffff0f;border-radius:18px;padding:22px}.detail-label{color:#7fd96f;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-size:12px}.profile-details p:last-child{color:#d7e9ff;font-size:16px;line-height:1.75}.profile-page .primary-button{max-width:240px;margin-top:8px}@media (width<=980px){.hero-section{flex-direction:column;max-width:100%}.hero-section>div{max-width:100%}.profile-details{grid-template-columns:1fr}}@media (width<=700px){.navbar{padding:16px 20px}.navbar-right{justify-content:flex-end}}.progress-bar{background-color:#1f3442;border-radius:20px;width:70%;height:15px;overflow:hidden}.progress-fill{background-color:#58cc02;width:30%;height:100%}.gesture-box{background-color:#10232e;border-radius:30px;justify-content:center;align-items:center;width:220px;height:220px;margin-top:80px;font-size:100px;animation:2s ease-in-out infinite float;display:flex}.gesture-text{text-align:center;width:60%;margin-top:30px;font-size:22px}.next-btn{color:#fff;cursor:pointer;background-color:#58cc02;border:none;border-radius:20px;margin-top:50px;padding:15px 40px;font-size:20px}.complete-popup{text-align:center;background-color:#1bd18b;border-radius:30px;width:400px;padding:40px;animation:.3s popup}.complete-popup h1{margin-bottom:20px}.complete-popup p{margin-bottom:30px;font-size:22px}.login-screen{background-color:#08141d;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.login-box{text-align:center;background-color:#10232e;border-radius:30px;flex-direction:column;gap:20px;width:400px;padding:40px;display:flex}.login-box h1{color:#58cc02;margin-bottom:20px}.login-box input{border:none;border-radius:15px;padding:15px;font-size:16px}.login-btn{color:#fff;cursor:pointer;background-color:#58cc02;border:none;border-radius:15px;padding:15px;font-size:18px}.lesson-close{cursor:pointer;color:#fff;font-size:28px;transition:all .3s;position:absolute;top:30px;right:40px}.lesson-close:hover{color:#58cc02;transform:scale(1.2)}.lesson-buttons{gap:20px;margin-top:40px;display:flex}.back-btn{color:#fff;cursor:pointer;background-color:#58cc02;border:none;border-radius:20px;margin-top:50px;padding:15px 40px;font-size:20px}.gesture-image{object-fit:contain;width:180px;height:180px}.languages-popup{text-align:center;background:#071a2b;border-radius:25px;width:650px;padding:35px;position:relative}.language-title{color:#fff;margin-bottom:30px;font-size:32px}.language-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.language-box{color:#000;cursor:pointer;background:#7cfc00;border-radius:20px;padding:45px 20px;font-size:24px;font-weight:700;transition:all .3s}.language-box:hover{transform:scale(1.05)}.comingsoon-popup{text-align:center;background:#071a2b;border-radius:25px;width:650px;padding:40px;position:relative}.comingsoon-popup h2{color:#fff;margin-bottom:20px;font-size:30px}.comingsoon-text{color:#d6d6d6;margin-top:15px;font-size:18px;line-height:1.8}.comingsoon-title{color:#7cfc00;margin-top:30px;font-size:28px}.languages-page{flex-direction:column;width:100%;display:flex}.languages-page h1{color:#58cc02;margin-bottom:10px;font-size:48px}.languages-subtitle{color:#a0a0a0;margin-bottom:40px;font-size:18px}.languages-container{flex:1;grid-template-columns:repeat(2,1fr);gap:30px;display:grid}.language-card{background:linear-gradient(135deg,#10232e 0%,#0d1b24 100%);border:2px solid #1f3442;border-radius:20px;flex-direction:column;padding:30px;transition:all .3s;display:flex}.language-card:hover{border-color:#58cc02;transform:translateY(-5px);box-shadow:0 0 20px #58cc0233}.language-card.coming{opacity:.8}.language-header{align-items:center;gap:15px;margin-bottom:20px;display:flex;position:relative}.language-flag{font-size:48px}.language-name{color:#fff;flex:1;font-size:24px}.language-badge{color:#000;text-transform:uppercase;background-color:#58cc02;border-radius:15px;padding:6px 12px;font-size:12px;font-weight:700}.language-badge.coming{background-color:#ff9500}.language-description{color:#d0d0d0;flex:1;margin-bottom:20px;font-size:16px;line-height:1.6}.language-select-btn{cursor:pointer;color:#fff;background-color:#58cc02;border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:700;transition:all .3s}.language-select-btn:hover{background-color:#70e71c;transform:scale(1.05)}.language-select-btn.coming{background-color:#ff9500}.language-select-btn.coming:hover{background-color:#ffb347}@media (width<=1200px){.languages-container{grid-template-columns:1fr}}.quiz-coming-soon,.profile-coming-soon{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:500px;animation:.5s ease-in fadeIn;display:flex}.quiz-coming-soon h2,.profile-coming-soon h2{color:#58cc02;margin-bottom:20px;font-size:42px}.quiz-coming-soon p,.profile-coming-soon p{color:#a0a0a0;max-width:600px;font-size:18px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fullscreen-page{background-color:#08141d;width:100%;min-height:100vh;padding:100px 40px 40px;position:relative}.logo{color:#58cc02;letter-spacing:-.5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0d1b24eb;border:1px solid #58cc022e;border-radius:18px;align-items:center;margin-bottom:50px;padding:12px 22px;font-size:24px;font-weight:800;text-decoration:none;transition:all .25s;display:inline-flex;box-shadow:0 10px 30px #00000047}.logo:hover{color:#7de86d;border-color:#58cc0266;transform:translateY(-2px);box-shadow:0 14px 40px #58cc0226}