/* ===========================================================
   ENGLISH JUMPSTART V2
   GLOBAL STYLE
=========================================================== */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --bg:#ffffff;

    --card:#ffffff;

    --text:#111827;

    --text-light:#6b7280;

    --border:#e5e7eb;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

    --max-width:1350px;

}

/* ================= DARK ================= */

html[data-theme="dark"]{

    --bg:#0f172a;

    --card:#1e293b;

    --text:#f8fafc;

    --text-light:#cbd5e1;

    --border:#334155;

    --shadow:0 12px 35px rgba(0,0,0,.45);

}

/* ================= RESET ================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        Arial,
        sans-serif;

    line-height:1.7;

    transition:.25s;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

.container{

    width:min(95%,var(--max-width));

    margin:auto;

}

/* ================= HEADER ================= */

.header{

    position:sticky;

    top:0;

    z-index:999;

    background:var(--bg);

    border-bottom:1px solid var(--border);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:75px;

}

.logo img{

    height:46px;

}

nav{

    display:flex;

    gap:24px;

}

nav a{

    font-weight:600;

    transition:.25s;

}

nav a:hover{

    color:var(--primary);

}

.header-right{

    display:flex;

    gap:12px;

    align-items:center;

}

.header-right input{

    width:240px;

    padding:11px 15px;

    border-radius:50px;

    border:1px solid var(--border);

    background:var(--card);

    color:var(--text);

}

.theme-btn{

    width:44px;

    height:44px;

    border:none;

    cursor:pointer;

    border-radius:50%;

    background:var(--card);

    box-shadow:var(--shadow);

    font-size:18px;

}

/* ================= BUTTON ================= */

.btn-primary{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

    transition:.25s;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-outline{

    display:inline-block;

    border:2px solid var(--primary);

    color:var(--primary);

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

}

/* ================= CARD ================= */

.category-card,

.lesson-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}