* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: #f6f8fc;
    color: #1e293b;
    line-height: 1.6;
}

header {
    background: #ffffff;
    border-bottom: 1px solid #e5eaf3;
}

.navbar {
    max-width: 1150px;
    margin: auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo {
    color: #2563eb;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: #475569;
    text-decoration: none;
    font-weight: bold;
}

.nav-links a:hover {
    color: #2563eb;
}

.hero {
    text-align: center;
    padding: 85px 20px;
    background: linear-gradient(135deg, #eff6ff, #eef2ff);
}

.subtitle {
    color: #2563eb;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.hero h1 {
    color: #172554;
    font-size: clamp(32px, 5vw, 52px);
    margin-bottom: 20px;
}

.hero > p:not(.subtitle) {
    max-width: 650px;
    margin: 0 auto 30px;
    color: #64748b;
    font-size: 18px;
}

.start-button {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 13px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.start-button:hover {
    background: #1d4ed8;
}

.levels-section,
.exercises-section {
    max-width: 1150px;
    margin: auto;
    padding: 60px 20px;
}

.levels-section h2,
.exercises-section h2 {
    font-size: 30px;
    margin-bottom: 8px;
}

.section-description {
    color: #64748b;
    margin-bottom: 30px;
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.level-card {
    display: block;
    background: white;
    padding: 28px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    color: #1e293b;
    transition: transform 0.2s, box-shadow 0.2s;
}

.level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px #0f172a12;
}

.level-label {
    color: #2563eb;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}

.level-card h3 {
    font-size: 38px;
    margin: 12px 0;
}

.level-card p,
.exercises-section p {
    color: #64748b;
}

.exercises-section {
    padding-top: 20px;
}

footer {
    text-align: center;
    padding: 25px;
    background: white;
    border-top: 1px solid #e5eaf3;
    color: #64748b;
}

@media (max-width: 800px) {
    .levels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .navbar {
        flex-direction: column;
    }

    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .levels-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 60px 20px;
    }
}

/* Vocabulary section */
.vocabulary-section {
    max-width: 1150px;
    margin: auto;
    padding: 60px 20px;
}

.vocabulary-section h2 {
    font-size: 30px;
    margin-bottom: 10px;
}

.vocabulary-section > p {
    color: #64748b;
    margin-bottom: 30px;
}

.vocabulary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
    gap: 24px;
    justify-content: start;
}


.word-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 20px #0f172a0d;
}

.word-card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}



.word-content {
    padding: 20px;
}

.word-content h3 {
    font-size: 26px;
    color: #2563eb;
}

.word-content p {
    margin-top: 10px;
}

.word-arabic {
    direction: rtl;
    color: #475569;
}

.word-sentence {
    font-weight: bold;
}

.word-translation {
    direction: rtl;
    color: #64748b;
}

/* ============================= */
/* Vocabulary Categories Design */
/* ============================= */

.categories-section {
    max-width: 1150px;
    margin: 0 auto;
    padding: 60px 20px;
}

.categories-section h2 {
    font-size: 32px;
    color: #172554;
    margin-bottom: 10px;
}

.categories-section > p {
    color: #64748b;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Categories grid */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Category cards */

.category-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #ffffff;
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    color: #1e293b;
    transition: transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    border-color: #93c5fd;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12);
}

.category-card:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* Category icons */

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background: #eff6ff;
    border-radius: 16px;
    font-size: 32px;
    margin-bottom: 20px;
}

/* Category text */

.category-card h3 {
    font-size: 22px;
    font-weight: bold;
    color: #172554;
    margin-bottom: 10px;
}

.category-card p {
    font-size: 14px;
    color: #64748b;
}

/* Back button */

.back-button {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 25px;
}

.back-button:hover {
    background: #dbeafe;
}

/* Tablet */

@media (max-width: 900px) {
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 550px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .category-card {
        padding: 22px;
    }

    .categories-section {
        padding: 40px 20px;
    }

    .vocabulary-grid {
        grid-template-columns: 1fr;
    }
}

/* Category word counter */

.word-count {
    display: inline-block;
    margin-top: 18px;
    padding: 6px 12px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* Multi-page navigation */
.back-button {text-decoration:none;}
.category-card {text-decoration:none;}
.nav-links a[aria-current="page"] {color:#2563eb;}
.image-container {position:relative;}
.sound-button {position:absolute;left:12px;bottom:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);font-size:23px;cursor:pointer;z-index:2;box-shadow:0 2px 9px #0002;}
.sound-button:hover {background:#dbeafe;transform:scale(1.06);}
.sound-button:focus-visible {outline:3px solid #2563eb;outline-offset:2px;}
@media (max-width:550px) {.vocabulary-grid {grid-template-columns:1fr;}.word-card {max-width:420px;}}

/* EnglishGlow Home - Hero Background */
.hero {
    background-image: url("hero-bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Account navigation and forms — EnglishGlow */
.account-nav {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-nav .auth-link {text-decoration:none;font-weight:700;font-size:14px;padding:10px 16px;border:1px solid #bfdbfe;border-radius:10px;color:#2563eb;background:#eff6ff;white-space:nowrap}
.account-nav .auth-primary {background:#2563eb;color:#fff;border-color:#2563eb}
.account-nav .auth-link:hover {filter:brightness(.95)}
.account-nav button {font:inherit;cursor:pointer}
.account-email {font-size:13px;color:#475569;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-page {min-height:calc(100vh - 190px);display:flex;justify-content:center;align-items:center;padding:60px 20px;background:linear-gradient(140deg,#eff6ff,#f8faff)}
.auth-card {width:min(100%,440px);background:#fff;padding:36px;border-radius:22px;border:1px solid #dbeafe;box-shadow:0 16px 48px #17255412}
.auth-card h1 {font-size:30px;color:#172554;margin-bottom:8px}
.auth-card .auth-subtitle {color:#64748b;margin-bottom:26px}
.auth-form {display:grid;gap:16px}
.auth-field {display:grid;gap:6px}
.auth-field label {font-weight:700;font-size:14px;color:#172554}
.auth-field input {width:100%;padding:13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;min-width:0}
.auth-field input:focus {outline:3px solid #bfdbfe;border-color:#2563eb}
.auth-submit {background:#2563eb;color:white;border:0;border-radius:10px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer}
.auth-submit:disabled {opacity:.6;cursor:wait}
.auth-message {min-height:20px;font-size:14px;color:#475569;overflow-wrap:anywhere}
.auth-message.error {color:#b91c1c}
.auth-message.success {color:#047857}
.auth-switch {margin-top:20px;text-align:center;color:#64748b}
.auth-switch a {color:#2563eb;font-weight:700}
@media(max-width:800px){.navbar{flex-wrap:wrap}.nav-links{flex-wrap:wrap}.account-nav{margin-left:auto}}
@media(max-width:480px){.account-nav{margin:auto}.auth-card{padding:24px}}


/* EnglishGlow mobile navigation: appended to preserve existing styles */
.mobile-menu-toggle { display: none; }
@media (max-width: 800px) {
  .navbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; }
  .logo { margin-right: auto; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 25px; cursor: pointer; }
  .mobile-menu-toggle:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  .navbar .nav-links { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .navbar.menu-open .nav-links { display: flex; }
  .navbar .nav-links a { display: block; padding: 12px; border-bottom: 1px solid #e5eaf3; }
  .navbar .account-nav { display: none; order: 4; width: 100%; margin: 0; padding-top: 10px; justify-content: flex-start; }
  .navbar.menu-open .account-nav { display: flex; }
  .navbar .account-email { max-width: 100%; }
}


/* EnglishGlow B1 image test: five original JPGs only. A1 remains unchanged. */
.word-card img[src$="achieve.jpg"],
.word-card img[src$="adapt.jpg"],
.word-card img[src$="achievement.jpg"],
.word-card img[src$="adaptable.jpg"],
.word-card img[src$="adaptation.jpg"] {
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
}