@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body { font-family:'Inter',sans-serif; background:#f4f6f8; margin:0; }
.hero { height:50vh; background:url('assets/hero.jpg') center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:white; font-size:2.5rem; font-weight:600; text-shadow:1px 1px 6px rgba(0,0,0,0.4); }
.login-form { background:white; padding:32px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.15); margin-top:-50px; max-width:360px; width:90%; }
.login-form input { margin-bottom:16px; border-radius:8px; border:1px solid #ddd; padding:12px; width:100%; }
.login-form button { width:100%; padding:14px; font-size:18px; background:#2563eb; color:white; border:none; border-radius:8px; cursor:pointer; transition:0.3s; }
.login-form button:hover { background:#1e40af; }
.menu-grid { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:40px; }
.menu-btn { width:180px; height:180px; font-size:22px; border-radius:16px; display:flex; justify-content:center; align-items:center; color:white; font-weight:600; cursor:pointer; transition:0.3s; box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.menu-btn.vocab { background:#16a34a; }
.menu-btn.train { background:#2563eb; }
.menu-btn:hover { transform:translateY(-5px); box-shadow:0 12px 25px rgba(0,0,0,0.2); }
@media(max-width:500px){ .menu-grid { flex-direction:column; gap:20px; } }
.navbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:#222; color:#fff; }
.nav-center a, .nav-right a { margin-right:15px; color:#fff; text-decoration:none; }
.nav-right { display:flex; align-items:center; gap:12px; }
#languageSelect { padding:6px 8px; border-radius:4px; border:none; }