/* =============================================
   Majour Academy — Forest & Wheat Design System
   Forest Light #428177 | Forest Medium #054239 | Forest Dark #002623
   Wheat Light #edebe0  | Wheat Medium #b9a779  | Wheat Dark  #988561
   ============================================= */

:root {
    --forest-light:    #428177;
    --forest-medium:   #054239;
    --forest-dark:     #002623;
    --wheat-light:     #edebe0;
    --wheat-medium:    #b9a779;
    --wheat-dark:      #988561;

    --primary:         #428177;
    --primary-dark:    #054239;
    --primary-deeper:  #002623;
    --primary-light:   #5fa898;
    --primary-glow:    rgba(66,129,119,0.28);

    --secondary:       #988561;
    --secondary-light: #b9a779;
    --accent:          #b9a779;
    --accent-dark:     #988561;

    --danger:  #c0392b;
    --warning: #d4a017;
    --success: #2e7d53;
    --info:    #2980b9;

    --bg:        #edebe0;
    --bg-2:      #e3e0d4;
    --surface:   #f5f3eb;
    --surface-2: #ede9dc;

    --dark:   #002623;
    --dark-2: #011e1b;
    --dark-3: #032e2a;
    --dark-4: #053c37;

    --text:       #002623;
    --text-2:     #1a3330;
    --text-muted: #6a7e7b;

    --border:      rgba(66,129,119,0.22);
    --border-dark: rgba(255,255,255,0.08);

    --shadow-sm:   0 2px 8px rgba(5,66,57,0.10);
    --shadow:      0 8px 32px rgba(5,66,57,0.13);
    --shadow-lg:   0 20px 60px rgba(0,38,35,0.16);
    --shadow-xl:   0 32px 80px rgba(0,38,35,0.22);
    --shadow-glow: 0 0 40px rgba(66,129,119,0.30);

    --radius:    16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --btn-radius: 50px;

    --font-heading: 'Cairo','Playfair Display',serif;
    --font-body:    'Tajawal','IBM Plex Sans Arabic',sans-serif;

    --transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    --spring:     all 0.5s cubic-bezier(0.34,1.56,0.64,1);

    --vh: 1vh;
}

/* ===== RESET & BASE ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
    direction:rtl;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.25; color:var(--text) }
a { text-decoration:none; color:inherit; transition:var(--transition) }
img { max-width:100%; height:auto; display:block }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:var(--font-body) }
input, textarea, select { font-family:var(--font-body) }
.container { max-width:1280px; margin:0 auto; padding:0 2rem }

/* ===== NAVBAR ===== */
.navbar {
    position:fixed; top:0; right:0; left:0; z-index:1000;
    background:rgba(237,235,224,0.90);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    transition:var(--transition);
}
.navbar.scrolled { background:rgba(237,235,224,0.97); box-shadow:var(--shadow-sm) }
.navbar-inner { display:flex; align-items:center; gap:2rem; height:76px }
.navbar-logo { flex-shrink:0 }
.navbar-logo img { height:44px; max-width:160px; width:auto; object-fit:contain; display:block }
.logo-text {
    display:flex; align-items:center; gap:0.75rem;
    font-family:var(--font-heading); font-size:1.45rem; font-weight:800;
    color:var(--forest-medium); letter-spacing:-0.02em;
}
.logo-icon {
    width:42px; height:42px;
    background:linear-gradient(135deg,var(--forest-light),var(--forest-medium));
    color:var(--wheat-light); border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; box-shadow:0 4px 16px var(--primary-glow);
    flex-shrink:0;
}
.nav-links { display:flex; align-items:center; gap:0.25rem; flex:1 }
.nav-links a { padding:0.5rem 1.1rem; border-radius:50px; font-weight:500; color:var(--text-2); font-size:0.95rem }
.nav-links a:hover { color:var(--forest-light); background:rgba(66,129,119,0.10) }
.nav-links a.active { color:var(--forest-medium); background:rgba(66,129,119,0.15); font-weight:600 }
.nav-auth { display:flex; align-items:center; gap:0.75rem; margin-right:auto; margin-left:0 }

/* User Menu */
.user-menu { position:relative }
.user-menu-btn {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.45rem 1.1rem 0.45rem 0.5rem;
    border-radius:50px; border:1.5px solid var(--border);
    background:var(--surface); font-size:0.9rem; font-weight:600;
    color:var(--text); transition:var(--transition);
}
.user-menu-btn:hover { border-color:var(--forest-light); box-shadow:var(--shadow-sm) }
.user-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover }
/* ── Image & Media Utilities ──────────────────────────────────────── */
/* Avatar sizes */
.avatar-sm  { width:34px;  height:34px;  border-radius:50%; object-fit:cover; flex-shrink:0 }
.avatar-md  { width:80px;  height:80px;  border-radius:50%; object-fit:cover; flex-shrink:0 }
.avatar-lg  { width:100px; height:100px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--border) }
/* Avatar placeholder (initials) */
.avatar-placeholder { border-radius:50%; background:linear-gradient(135deg,var(--forest-light),var(--forest-medium)); color:var(--wheat-light); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0 }
.avatar-placeholder.avatar-md { font-size:1.8rem }
.avatar-placeholder.avatar-lg { font-size:2.5rem }
/* Thumbnail card in dashboard enrolled list */
.enroll-thumb { flex-shrink:0; width:96px; height:68px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); text-decoration:none }
.enroll-thumb img { width:100%; height:100%; object-fit:cover; display:block }
/* Lesson thumbnail in admin */
.lesson-thumb-preview { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-sm); display:block }
/* Responsive video wrapper (16:9) */
.video-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:var(--radius) }
.video-wrap iframe, .video-wrap video { position:absolute; inset:0; width:100%; height:100%; border:none }
.user-avatar-placeholder {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--forest-light),var(--forest-medium));
    color:var(--wheat-light); display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.9rem;
}
.dropdown-menu {
    position:absolute; top:calc(100% + 10px); left:0; right:auto;
    min-width:210px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); padding:0.5rem;
    display:none; z-index:200; animation:dropIn 0.2s ease;
}
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.dropdown-menu.open { display:block }
.dropdown-menu a {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.65rem 0.85rem; border-radius:var(--radius-sm);
    font-size:0.9rem; color:var(--text); font-weight:500;
}
.dropdown-menu a:hover { background:rgba(66,129,119,0.08); color:var(--forest-medium) }
.dropdown-menu hr { border:none; border-top:1px solid var(--border); margin:0.4rem 0 }

/* Mobile Menu Button */
.mobile-menu-btn { display:none; flex-direction:column; gap:5px; padding:0.5rem; margin-right:auto }
.mobile-menu-btn span {
    display:block; width:22px; height:2px;
    background:var(--forest-medium); border-radius:2px; transition:var(--transition);
}
.mobile-menu-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.mobile-menu-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.mobile-menu-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.7rem 1.6rem; border-radius:var(--btn-radius);
    font-family:var(--font-body); font-size:0.95rem; font-weight:600;
    transition:var(--transition); cursor:pointer;
    border:2px solid transparent; white-space:nowrap; letter-spacing:-0.01em;
}
.btn-primary {
    background:linear-gradient(135deg,var(--forest-light),var(--forest-medium));
    color:var(--wheat-light); box-shadow:0 4px 20px var(--primary-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--primary-glow); filter:brightness(1.06) }
.btn-primary:active { transform:translateY(0) }
.btn-secondary { background:linear-gradient(135deg,var(--wheat-dark),var(--wheat-medium)); color:white }
.btn-secondary:hover { filter:brightness(1.08); transform:translateY(-1px) }
.btn-accent { background:linear-gradient(135deg,var(--wheat-medium),var(--wheat-dark)); color:white }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border) }
.btn-ghost:hover { background:var(--surface-2); border-color:var(--text-muted) }
.btn-danger { background:var(--danger); color:white }
.btn-danger:hover { background:#a93226; transform:translateY(-1px) }
.btn-success { background:var(--success); color:white }
.btn-success:hover { filter:brightness(1.08); transform:translateY(-1px) }
.btn-warning { background:var(--warning); color:white }
.btn-info { background:var(--info); color:white }
.btn-outline-primary { background:transparent; color:var(--forest-light); border-color:var(--forest-light) }
.btn-outline-primary:hover { background:var(--forest-light); color:white }
.btn-lg { padding:0.9rem 2.2rem; font-size:1rem }
.btn-sm { padding:0.45rem 1.1rem; font-size:0.85rem; border-radius:var(--btn-radius) }
.btn-xs { padding:0.3rem 0.75rem; font-size:0.78rem; border-radius:var(--btn-radius) }
.btn-full { width:100%; border-radius:var(--radius-sm) }
.btn-icon { width:40px; height:40px; padding:0; border-radius:50% }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none!important; box-shadow:none!important }

/* ===== HERO ===== */
.hero {
    padding:calc(76px + 6rem) 0 6rem;
    background:var(--forest-dark);
    position:relative; overflow:hidden;
    min-height:95vh; display:flex; align-items:center;
}
.hero::before {
    content:''; position:absolute; inset:0;
    background-image:
        radial-gradient(1px 1px at 15% 20%,rgba(185,167,121,0.7) 0%,transparent 100%),
        radial-gradient(1px 1px at 35% 60%,rgba(237,235,224,0.4) 0%,transparent 100%),
        radial-gradient(1px 1px at 55% 15%,rgba(185,167,121,0.5) 0%,transparent 100%),
        radial-gradient(1px 1px at 75% 45%,rgba(237,235,224,0.3) 0%,transparent 100%),
        radial-gradient(2px 2px at 25% 80%,rgba(66,129,119,0.9) 0%,transparent 100%),
        radial-gradient(2px 2px at 65% 35%,rgba(95,168,152,0.6) 0%,transparent 100%),
        radial-gradient(2px 2px at 85% 15%,rgba(185,167,121,0.7) 0%,transparent 100%);
    pointer-events:none;
}
.hero::after {
    content:''; position:absolute; top:-20%; right:-10%;
    width:700px; height:700px;
    background:radial-gradient(circle at center,rgba(66,129,119,0.35) 0%,rgba(5,66,57,0.18) 40%,transparent 70%);
    pointer-events:none; animation:orbFloat 8s ease-in-out infinite;
}
@keyframes orbFloat {
    0%,100% { transform:translate(0,0) scale(1) }
    33%      { transform:translate(-30px,20px) scale(1.05) }
    66%      { transform:translate(20px,-15px) scale(0.97) }
}
.hero-secondary-orb {
    position:absolute; bottom:-15%; left:5%;
    width:500px; height:500px;
    background:radial-gradient(circle at center,rgba(185,167,121,0.15) 0%,rgba(152,133,97,0.08) 40%,transparent 70%);
    pointer-events:none; animation:orbFloat 12s ease-in-out infinite reverse;
}
.hero-content { position:relative; z-index:1; max-width:680px }
.hero-badge {
    display:inline-flex; align-items:center; gap:0.6rem;
    background:rgba(66,129,119,0.18); border:1px solid rgba(95,168,152,0.40);
    color:#7ec4b8; padding:0.45rem 1.1rem; border-radius:50px;
    font-size:0.85rem; font-weight:600; margin-bottom:2rem;
    backdrop-filter:blur(8px); animation:fadeUp 0.6s ease both;
}
.hero-badge i { color:var(--wheat-medium) }
.hero h1 {
    font-size:clamp(2.8rem,5.5vw,4.5rem);
    color:var(--wheat-light); margin-bottom:1.75rem;
    line-height:1.15; letter-spacing:-0.03em;
    animation:fadeUp 0.7s 0.1s ease both;
}
.hero h1 span {
    background:linear-gradient(120deg,var(--wheat-light) 0%,var(--wheat-medium) 50%,#c8b88a 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero p { font-size:1.15rem; color:#7a9490; max-width:540px; margin-bottom:2.75rem; line-height:1.8; animation:fadeUp 0.7s 0.2s ease both }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp 0.7s 0.3s ease both }
.hero-stats { display:flex; gap:2.5rem; margin-top:4rem; padding-top:3rem; border-top:1px solid rgba(66,129,119,0.25); animation:fadeUp 0.7s 0.4s ease both }
.hero-stat strong { display:block; font-size:2.2rem; font-weight:800; color:var(--wheat-light); font-family:var(--font-heading); letter-spacing:-0.04em; line-height:1; margin-bottom:0.3rem }
.hero-stat span { font-size:0.88rem; color:#527068 }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ===== SECTIONS ===== */
.section { padding:6rem 0 }
.section-dark { background:var(--forest-dark); color:var(--wheat-light) }
.section-alt { background:var(--bg-2) }
.section-header { text-align:center; margin-bottom:3.5rem }
.section-header h2 { font-size:clamp(1.9rem,3.5vw,2.6rem); margin-bottom:0.85rem; letter-spacing:-0.03em }
.section-header p { font-size:1.05rem; color:var(--text-muted); max-width:500px; margin:0 auto; line-height:1.8 }
.section-dark .section-header h2 { color:var(--wheat-light) }
.section-dark .section-header p { color:#527068 }
.section-tag {
    display:inline-flex; align-items:center; gap:0.4rem;
    background:rgba(66,129,119,0.12); color:var(--forest-light);
    padding:0.3rem 0.9rem; border-radius:50px;
    font-size:0.78rem; font-weight:700; margin-bottom:1rem;
    letter-spacing:0.06em; text-transform:uppercase;
}

/* ===== CATEGORIES ===== */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1.25rem }
.category-card {
    background:var(--surface); border-radius:var(--radius);
    padding:1.75rem 1.25rem; text-align:center;
    border:1.5px solid var(--border); cursor:pointer;
    transition:var(--spring); position:relative; overflow:hidden;
}
.category-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,transparent 0%,rgba(66,129,119,0.05) 100%);
    opacity:0; transition:var(--transition);
}
.category-card:hover { border-color:rgba(66,129,119,0.45); transform:translateY(-5px); box-shadow:var(--shadow) }
.category-card:hover::before { opacity:1 }
.category-icon { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 1rem; transition:var(--spring) }
.category-card:hover .category-icon { transform:scale(1.1) rotate(-5deg) }
.category-card h3,.category-name { font-weight:700; font-size:0.9rem; font-family:var(--font-heading); color:var(--text) }
.category-card p,.category-count { font-size:0.78rem; color:var(--text-muted); margin-top:0.3rem }

/* ===== COURSE CARDS ===== */
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.75rem }
.course-card {
    background:var(--surface); border-radius:var(--radius-lg);
    overflow:hidden; border:1.5px solid var(--border);
    transition:var(--transition); display:flex; flex-direction:column;
}
.course-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(66,129,119,0.30) }
.course-thumbnail { position:relative; aspect-ratio:16/9; overflow:hidden }
.course-thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease }
.course-card:hover .course-thumbnail img { transform:scale(1.07) }
.course-thumbnail-placeholder {
    width:100%; height:100%;
    background:linear-gradient(135deg,var(--forest-dark),var(--forest-medium));
    display:flex; align-items:center; justify-content:center;
    font-size:3.5rem; color:rgba(66,129,119,0.45);
}
.course-badge {
    position:absolute; top:0.85rem; right:0.85rem;
    background:linear-gradient(135deg,var(--wheat-dark),var(--wheat-medium));
    color:white; padding:0.25rem 0.75rem; border-radius:50px;
    font-size:0.78rem; font-weight:700;
}
.course-badge.free { background:linear-gradient(135deg,var(--forest-light),var(--forest-medium)) }
.course-body { padding:1.5rem; flex:1 }
.course-category { font-size:0.75rem; color:var(--forest-light); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.6rem }
.course-title {
    font-size:1.05rem; font-weight:700; margin-bottom:0.85rem;
    color:var(--text); font-family:var(--font-heading);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.4; letter-spacing:-0.02em;
}
.course-title a:hover { color:var(--forest-light) }
.course-meta { display:flex; align-items:center; gap:0.6rem; font-size:0.8rem; color:var(--text-muted); margin-bottom:0.85rem; flex-wrap:wrap }
.course-meta span { display:flex; align-items:center; gap:0.3rem }
.course-meta i { color:var(--forest-light); font-size:0.75rem }
.course-rating { display:flex; align-items:center; gap:0.35rem; font-size:0.85rem }
.course-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.course-price { font-family:var(--font-heading); font-size:1.25rem; font-weight:800; color:var(--forest-medium); letter-spacing:-0.03em }
.course-price .original-price { font-size:0.85rem; color:var(--text-muted); text-decoration:line-through; font-weight:400; margin-right:0.4rem }
.course-price .free-label { color:var(--forest-light) }

/* ===== STAR RATINGS ===== */
.stars { display:inline-flex; gap:2px; color:var(--wheat-medium); font-size:0.85rem }
.stars .star-empty { color:#d4cdb8 }
.star-rating-input { display:inline-flex; gap:4px; cursor:pointer; direction:ltr }
.star-rating-input .star { font-size:1.5rem; color:#d4cdb8; transition:color 0.15s ease, transform 0.15s ease; cursor:pointer }
.star-rating-input .star.hovered,
.star-rating-input .star.selected { color:var(--wheat-medium) }
.star-rating-input .star:hover { transform:scale(1.2) }

/* ===== PROGRESS BAR ===== */
.progress-bar { height:8px; background:var(--bg-2); border-radius:99px; overflow:hidden; width:100%; flex-shrink:0 }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--forest-light),var(--forest-medium)); border-radius:99px; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); min-width:0 }
.progress-bar.sm { height:5px }
.progress-bar.lg { height:12px }
.progress-label { display:flex; align-items:center; justify-content:space-between; font-size:0.82rem; color:var(--text-muted); margin-bottom:0.4rem }

/* ===== PAGE HEADER ===== */
.page-header {
    background:linear-gradient(160deg,var(--forest-dark) 0%,var(--forest-medium) 100%);
    padding:calc(76px + 3.5rem) 0 3.5rem;
    color:var(--wheat-light); position:relative; overflow:hidden;
}
.page-header::before {
    content:''; position:absolute; top:0; right:0; width:50%; height:100%;
    background:radial-gradient(ellipse at top right,rgba(66,129,119,0.30),transparent 70%);
    pointer-events:none;
}
.page-header h1 { font-size:2.2rem; margin-bottom:0.6rem; color:var(--wheat-light); letter-spacing:-0.03em }
.page-header p { color:#527068 }
.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:#527068; margin-bottom:1rem; flex-wrap:wrap }
.breadcrumb a { color:#527068 }
.breadcrumb a:hover { color:var(--wheat-medium) }
.breadcrumb .separator { opacity:0.4 }
.breadcrumb .current { color:var(--wheat-medium) }

/* ===== FORMS ===== */
.form-group { margin-bottom:1.4rem }
.form-label { display:block; font-size:0.88rem; font-weight:600; color:var(--text); margin-bottom:0.5rem; letter-spacing:-0.01em }
.form-control {
    width:100%; padding:0.8rem 1.1rem;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-family:var(--font-body); font-size:0.95rem;
    color:var(--text); background:var(--surface);
    transition:var(--transition); direction:rtl;
}
.form-control:focus { outline:none; border-color:var(--forest-light); box-shadow:0 0 0 4px rgba(66,129,119,0.12) }
.form-control::placeholder { color:var(--text-muted) }
.form-control.is-invalid { border-color:var(--danger) }
.form-control.is-invalid:focus { box-shadow:0 0 0 4px rgba(192,57,43,0.12) }
.form-control.is-valid { border-color:var(--success) }
textarea.form-control { min-height:110px; resize:vertical }
select.form-control {
    cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7e7b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:left 12px center;
    padding-left:2.5rem;
}
.input-group { position:relative }
.input-group .form-control { padding-right:2.8rem }
.input-group .input-icon { position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:0.9rem; pointer-events:none }
.toggle-password { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--text-muted); cursor:pointer; padding:0.25rem; font-size:0.95rem; transition:color 0.2s; z-index:1 }
.toggle-password:hover { color:var(--forest-light) }
.form-hint { font-size:0.8rem; color:var(--text-muted); margin-top:0.35rem }
.form-error { font-size:0.8rem; color:var(--danger); margin-top:0.35rem; display:flex; align-items:center; gap:0.35rem }
.form-row { display:flex; gap:1rem }
.form-row .form-group { flex:1 }

/* ===== AUTH ===== */
.auth-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:2rem; background:var(--bg-2); position:relative;
}
.auth-page::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 50%,rgba(66,129,119,0.10),transparent 50%),
               radial-gradient(ellipse at 80% 20%,rgba(185,167,121,0.08),transparent 50%);
}
.auth-card {
    background:var(--surface); border-radius:var(--radius-xl);
    padding:3rem; width:100%; max-width:460px;
    box-shadow:var(--shadow-xl); border:1px solid var(--border);
    position:relative; z-index:1;
}
.auth-header { text-align:center; margin-bottom:2.25rem }
.auth-logo {
    width:68px; height:68px;
    background:linear-gradient(135deg,var(--forest-light),var(--forest-medium));
    border-radius:20px; display:flex; align-items:center; justify-content:center;
    color:var(--wheat-light); font-size:1.75rem; margin:0 auto 1.25rem;
    box-shadow:0 8px 24px var(--primary-glow);
}
.auth-header h1 { font-size:1.65rem; color:var(--text); margin-bottom:0.4rem; letter-spacing:-0.03em }
.auth-header p { color:var(--text-muted); font-size:0.95rem }
.auth-footer { text-align:center; margin-top:1.75rem; color:var(--text-muted); font-size:0.9rem }
.auth-footer a { color:var(--forest-light); font-weight:600 }
.auth-divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:0.85rem }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border) }

/* ===== FLASH MESSAGES ===== */
.flash-message {
    position:fixed; top:96px; left:50%; transform:translateX(-50%);
    z-index:9999; padding:0.9rem 1.5rem; border-radius:50px;
    display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; font-weight:600;
    min-width:280px; justify-content:center; box-shadow:var(--shadow-lg);
    backdrop-filter:blur(16px); animation:toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes toastIn {
    from { opacity:0; transform:translateX(-50%) translateY(-20px) scale(0.9) }
    to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1) }
}
.flash-success { background:rgba(5,66,57,0.93); color:var(--wheat-light) }
.flash-error   { background:rgba(192,57,43,0.93); color:white }
.flash-info    { background:rgba(41,128,185,0.93); color:white }
.flash-warning { background:rgba(212,160,23,0.93); color:white }
.flash-message button { margin-right:auto; color:rgba(255,255,255,0.7); font-size:1rem; padding:0.1rem 0.3rem; border-radius:4px; transition:var(--transition) }
.flash-message button:hover { color:white; background:rgba(255,255,255,0.2) }

/* ===== ALERTS ===== */
.alert { padding:1rem 1.25rem; border-radius:var(--radius-sm); display:flex; align-items:flex-start; gap:0.75rem; font-size:0.9rem; border:1px solid transparent; margin-bottom:1rem }
.alert i { margin-top:2px; flex-shrink:0 }
.alert-success { background:rgba(46,125,83,0.10); border-color:rgba(46,125,83,0.25); color:#1a5c38 }
.alert-danger  { background:rgba(192,57,43,0.10);  border-color:rgba(192,57,43,0.25);  color:#8c1a10 }
.alert-warning { background:rgba(212,160,23,0.10); border-color:rgba(212,160,23,0.25); color:#7a5500 }
.alert-info    { background:rgba(41,128,185,0.10);  border-color:rgba(41,128,185,0.25);  color:#1a5276 }

/* ===== DASHBOARD ===== */
.dashboard-layout { display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 76px); margin-top:76px }
.sidebar {
    background:var(--surface); border-left:1.5px solid var(--border);
    padding:1.75rem 0; position:sticky; top:76px;
    height:calc(100vh - 76px); overflow-y:auto;
}
.sidebar-section-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); padding:1.25rem 1.5rem 0.5rem }
.sidebar-nav a {
    display:flex; align-items:center; gap:0.8rem;
    padding:0.7rem 1.5rem; font-size:0.92rem; font-weight:500;
    color:var(--text-2); border-left:3px solid transparent; transition:var(--transition);
}
.sidebar-nav a:hover { color:var(--forest-light); background:rgba(66,129,119,0.07) }
.sidebar-nav a.active { color:var(--forest-medium); background:rgba(66,129,119,0.10); border-left-color:var(--forest-light); font-weight:600 }
.sidebar-nav a i { width:18px; text-align:center; font-size:0.9rem }
.main-content { padding:2.5rem; background:var(--bg) }
.dashboard-content { padding:2.5rem }

/* Sidebar mobile helpers */
.sidebar-mobile-header { display:none; align-items:center; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid var(--border) }
.sidebar-mobile-toggle { display:none; align-items:center; gap:0.75rem; padding:1rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem; background:var(--surface); border-radius:var(--radius); cursor:pointer; font-weight:600; font-size:0.9rem }
.sidebar-mobile-toggle i { color:var(--primary) }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1999; backdrop-filter:blur(3px) }
.sidebar-overlay.active { display:block }
.sidebar-close-btn { display:none; align-items:center; justify-content:center; position:absolute; top:1rem; left:1rem; width:32px; height:32px; background:rgba(0,0,0,0.08); border-radius:50%; cursor:pointer; font-size:1rem; color:var(--text); z-index:10; border:none; transition:var(--transition) }
.sidebar-close-btn:hover { background:rgba(0,0,0,0.15) }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.25rem; margin-bottom:2rem }
.stat-card {
    background:var(--surface); border-radius:var(--radius);
    padding:1.5rem; border:1.5px solid var(--border);
    transition:var(--transition); position:relative; overflow:hidden;
}
.stat-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--forest-light),var(--wheat-medium));
    transform:scaleX(0); transform-origin:right; transition:var(--transition);
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(66,129,119,0.25) }
.stat-card:hover::after { transform:scaleX(1) }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem }
.stat-value { font-family:var(--font-heading); font-size:1.9rem; font-weight:800; color:var(--text); letter-spacing:-0.04em; line-height:1; margin-bottom:0.4rem }
.stat-label { font-size:0.82rem; color:var(--text-muted); font-weight:500 }
.stat-change { font-size:0.78rem; margin-top:0.35rem; display:flex; align-items:center; gap:0.3rem }
.stat-change.up   { color:var(--success) }
.stat-change.down { color:var(--danger) }

/* ===== CARDS ===== */
.card { background:var(--surface); border-radius:var(--radius); border:1.5px solid var(--border); overflow:hidden }
.card-header { padding:1.25rem 1.5rem; font-weight:700; font-family:var(--font-heading); border-bottom:1px solid var(--border); font-size:1rem; color:var(--text); letter-spacing:-0.02em; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.card-body { padding:1.5rem }
.card-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--bg-2) }

/* ===== TABLES ===== */
.table-wrapper { background:var(--surface); border-radius:var(--radius); border:1.5px solid var(--border); overflow:hidden }
.table-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); gap:1rem; flex-wrap:wrap }
.table-header h3 { font-size:1rem; font-weight:700; font-family:var(--font-heading); letter-spacing:-0.02em }
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch }
table { width:100%; border-collapse:collapse }
th { background:var(--bg-2); padding:0.85rem 1.25rem; text-align:right; font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); white-space:nowrap }
td { padding:1rem 1.25rem; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--text); vertical-align:middle }
tr:last-child td { border-bottom:none }
tbody tr:hover { background:rgba(66,129,119,0.04) }
.table-actions { display:flex; align-items:center; gap:0.5rem }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.75rem; border-radius:50px; font-size:0.75rem; font-weight:700; letter-spacing:0.02em }
.badge-success   { background:rgba(5,66,57,0.10);    color:var(--forest-medium) }
.badge-warning   { background:rgba(212,160,23,0.12); color:#8a6000 }
.badge-danger    { background:rgba(192,57,43,0.12);  color:#8c1a10 }
.badge-info      { background:rgba(41,128,185,0.12); color:#1a5276 }
.badge-primary   { background:rgba(66,129,119,0.12); color:var(--forest-medium) }
.badge-wheat     { background:rgba(185,167,121,0.18);color:var(--wheat-dark) }
.badge-secondary { background:var(--bg-2); color:var(--text-muted) }

/* ===== TABS ===== */
.tabs { display:flex; gap:0.25rem; border-bottom:2px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.tabs::-webkit-scrollbar { display:none }
.tab,.tab-btn {
    padding:0.65rem 1.25rem; font-size:0.9rem; font-weight:600;
    color:var(--text-muted); border-bottom:2px solid transparent;
    margin-bottom:-2px; cursor:pointer; white-space:nowrap;
    transition:var(--transition); border-radius:var(--radius-sm) var(--radius-sm) 0 0;
    background:none; border-top:none; border-right:none; border-left:none;
}
.tab:hover,.tab-btn:hover { color:var(--forest-light); background:rgba(66,129,119,0.06) }
.tab.active,.tab-btn.active { color:var(--forest-medium); border-bottom-color:var(--forest-light); background:transparent }
.tab-content { display:none }
.tab-content.active { display:block; animation:fadeIn 0.3s ease both }

/* ===== MODAL ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    backdrop-filter:blur(6px); z-index:5000;
    display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all }
.modal-box {
    background:var(--surface); border-radius:var(--radius-lg);
    padding:2rem; width:100%; max-width:520px;
    max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow-xl); border:1px solid var(--border);
    transform:translateY(24px) scale(0.97);
    transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    opacity:0;
}
.modal-overlay.open .modal-box { transform:translateY(0) scale(1); opacity:1 }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem }
.modal-header h3 { font-size:1.15rem; font-weight:700; font-family:var(--font-heading); letter-spacing:-0.02em }
.modal-close { width:32px; height:32px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); transition:var(--transition); flex-shrink:0 }
.modal-close:hover { background:rgba(192,57,43,0.12); color:var(--danger) }
.modal-footer { display:flex; gap:0.75rem; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border) }
.modal-lg .modal-box { max-width:720px }
.modal-sm .modal-box { max-width:380px }

/* ===== TOOLTIP ===== */
[data-tooltip] { position:relative }
[data-tooltip]::after {
    content:attr(data-tooltip);
    position:absolute; bottom:calc(100% + 8px); right:50%; transform:translateX(50%);
    background:var(--forest-dark); color:var(--wheat-light);
    font-size:0.78rem; padding:0.4rem 0.75rem; border-radius:8px;
    white-space:nowrap; pointer-events:none; opacity:0;
    transition:opacity 0.2s; z-index:200; font-family:var(--font-body); font-weight:500;
}
[data-tooltip]:hover::after { opacity:1 }

/* ===== SKELETON LOADING ===== */
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton {
    background:linear-gradient(90deg,var(--bg-2) 25%,var(--surface-2) 50%,var(--bg-2) 75%);
    background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-sm);
}
.skeleton-text   { height:14px; border-radius:4px; margin-bottom:0.5rem }
.skeleton-title  { height:20px; width:60%; border-radius:4px }
.skeleton-card   { height:200px; border-radius:var(--radius) }
.skeleton-avatar { width:48px; height:48px; border-radius:50% }

/* ===== LESSON PLAYER ===== */
.lesson-layout { display:grid; grid-template-columns:1fr 360px; height:calc(100vh - 76px); margin-top:76px }
.lesson-player { background:#000; display:flex; flex-direction:column; overflow:hidden }
.video-container { aspect-ratio:16/9; background:#050e0d; position:relative; flex-shrink:0 }
.video-container iframe,.video-container video { width:100%; height:100%; border:none; position:absolute; inset:0 }
.lesson-info { padding:1.75rem; background:var(--surface); border-top:1px solid var(--border); flex:1; overflow-y:auto }
.lesson-info h2 { font-size:1.15rem; margin-bottom:0.75rem; letter-spacing:-0.02em }
.lesson-sidebar { background:var(--surface); border-right:1.5px solid var(--border); overflow-y:auto; display:flex; flex-direction:column }
.curriculum-section { border-bottom:1px solid var(--border) }
.curriculum-section-header {
    padding:1rem 1.25rem; font-weight:700; font-size:0.88rem;
    background:var(--bg-2); display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; font-family:var(--font-heading); letter-spacing:-0.01em; user-select:none;
}
.curriculum-section-header:hover { background:var(--bg) }
.curriculum-section-lessons { display:block }
.curriculum-lesson {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.8rem 1.25rem; font-size:0.85rem;
    border-bottom:1px solid var(--border); cursor:pointer;
    transition:var(--transition); color:var(--text-2);
}
.curriculum-lesson:hover { background:rgba(66,129,119,0.06); color:var(--forest-light) }
.curriculum-lesson.active { background:rgba(66,129,119,0.12); color:var(--forest-medium); font-weight:600 }
.curriculum-lesson.completed { color:var(--forest-light) }
.curriculum-lesson .lesson-duration { margin-right:auto; font-size:0.75rem; color:var(--text-muted) }
.toggle-icon { transition:transform 0.3s ease; display:inline-block; color:var(--text-muted) }
.curriculum-section.collapsed .curriculum-section-lessons { display:none }
.curriculum-section.collapsed .toggle-icon { transform:rotate(-90deg) }

/* Learn page mobile toggle */
.learn-sidebar-toggle {
    position:fixed; bottom:1.5rem; left:1.5rem; z-index:200;
    width:50px; height:50px; border-radius:50%;
    background:var(--forest-medium); color:var(--wheat-light);
    display:none; align-items:center; justify-content:center;
    box-shadow:var(--shadow-lg); cursor:pointer; font-size:1.1rem; border:none;
}
.learn-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:99; backdrop-filter:blur(3px) }
.learn-sidebar-overlay.active { display:block }

/* ===== PAYMENT METHOD ===== */
.payment-method-option {
    display:flex; align-items:center; gap:1rem;
    padding:1.1rem 1.25rem; border:2px solid var(--border);
    border-radius:var(--radius); cursor:pointer; transition:var(--transition);
    background:var(--surface); margin-bottom:0.75rem; width:100%; text-align:right;
}
.payment-method-option:hover { border-color:rgba(66,129,119,0.40); background:rgba(66,129,119,0.04) }
.payment-method-option.selected { border-color:var(--forest-light); background:rgba(66,129,119,0.06) }
.radio-dot {
    width:20px; height:20px; border-radius:50%;
    border:2px solid var(--border); flex-shrink:0;
    transition:var(--transition); position:relative;
}
.radio-dot::after { content:''; position:absolute; inset:4px; border-radius:50%; background:white; opacity:0; transition:opacity 0.2s }
.payment-method-option.selected .radio-dot { background:var(--primary); border-color:var(--primary) }
.payment-method-option.selected .radio-dot::after { opacity:1 }

/* ===== CHECKOUT ===== */
.checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:3rem; align-items:start }
.checkout-summary { background:var(--surface); border-radius:var(--radius-lg); border:1.5px solid var(--border); overflow:hidden; position:sticky; top:100px }

/* ===== COURSE PAGE ===== */
.course-hero-grid { display:grid; grid-template-columns:1fr 380px; gap:3rem; align-items:start }
.course-main-grid { display:grid; grid-template-columns:1fr 360px; gap:2.5rem; align-items:start; padding:3rem 0 }
.course-sidebar-sticky { position:sticky; top:100px }
.course-purchase-card { background:var(--surface); border-radius:var(--radius-lg); border:1.5px solid var(--border); overflow:hidden; box-shadow:var(--shadow) }

/* ===== FEATURES SECTION ===== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2rem }
.feature-card { background:rgba(255,255,255,0.04); border-radius:var(--radius); padding:2rem; border:1px solid rgba(255,255,255,0.07); transition:var(--transition) }
.feature-card:hover { background:rgba(66,129,119,0.12); transform:translateY(-4px) }
.feature-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem }
.feature-card h3 { color:white; margin-bottom:0.5rem; font-size:1.05rem }
.feature-card p { color:#7a9490; font-size:0.9rem; line-height:1.7 }

/* ===== REVIEWS ===== */
.review-card { background:var(--surface); border-radius:var(--radius); padding:1.5rem; border:1.5px solid var(--border); margin-bottom:1rem }
.review-header { display:flex; align-items:center; gap:0.85rem; margin-bottom:0.85rem }
.review-avatar {
    width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
    background:linear-gradient(135deg,var(--forest-light),var(--forest-medium));
    display:flex; align-items:center; justify-content:center; color:white; font-weight:700;
}
.review-meta h4 { font-size:0.92rem; font-weight:700; margin-bottom:0.2rem }
.review-meta span { font-size:0.78rem; color:var(--text-muted) }
.review-body { font-size:0.9rem; line-height:1.7; color:var(--text-2) }
.rating-bar { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; font-size:0.82rem; color:var(--text-muted) }
.rating-bar .progress-bar { flex:1 }
.rating-bar span:first-child { min-width:14px; text-align:center }
.rating-bar span:last-child { min-width:32px }

/* ===== PROFILE ===== */
.profile-grid { display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start }
.profile-avatar-section { background:var(--surface); border-radius:var(--radius-lg); border:1.5px solid var(--border); padding:2rem; text-align:center; position:sticky; top:100px }
.profile-avatar-large { width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; border:4px solid var(--border) }
.profile-avatar-placeholder { width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,var(--forest-light),var(--forest-medium)); color:white; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; margin:0 auto 1rem }
.profile-form-section { background:var(--surface); border-radius:var(--radius-lg); border:1.5px solid var(--border); padding:2rem }

/* ===== CERTIFICATE ===== */
.cert-container { display:flex; justify-content:center; padding:2rem 0 }
.certificate { width:900px; max-width:100%; background:white; border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-xl) }
.print-btn { position:fixed; bottom:2rem; left:2rem; z-index:50 }

/* ===== ACCORDION ===== */
.accordion-item { border-bottom:1px solid var(--border) }
.accordion-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; cursor:pointer; font-weight:600; font-size:0.95rem; user-select:none; transition:color 0.2s }
.accordion-header:hover { color:var(--forest-light) }
.accordion-body { font-size:0.9rem; color:var(--text-2); line-height:1.7; padding-bottom:1rem; display:none }
.accordion-body.open { display:block; animation:fadeIn 0.25s ease }
.accordion-icon { transition:transform 0.3s ease; color:var(--text-muted); flex-shrink:0 }
.accordion-item.open .accordion-icon { transform:rotate(180deg) }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text-muted) }
.empty-state-icon { font-size:3.5rem; margin-bottom:1rem; opacity:0.35; display:block }
.empty-state h3 { font-size:1.15rem; margin-bottom:0.5rem; color:var(--text) }
.empty-state p { font-size:0.9rem; max-width:340px; margin:0 auto 1.5rem; line-height:1.7 }

/* ===== SEARCH BAR ===== */
.search-bar { display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--btn-radius); overflow:hidden; transition:var(--transition) }
.search-bar:focus-within { border-color:var(--forest-light); box-shadow:0 0 0 4px rgba(66,129,119,0.12) }
.search-bar input { flex:1; padding:0.75rem 1.25rem; border:none; background:transparent; font-family:var(--font-body); font-size:0.95rem; color:var(--text); direction:rtl }
.search-bar input:focus { outline:none }
.search-bar button { padding:0.65rem 1.25rem; background:var(--forest-light); color:white; border:none; cursor:pointer; transition:var(--transition); font-size:0.9rem; flex-shrink:0 }
.search-bar button:hover { background:var(--forest-medium) }

/* ===== FILTER CHIPS ===== */
.filter-bar { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.75rem }
.filter-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 1rem; border:1.5px solid var(--border); border-radius:50px; font-size:0.83rem; font-weight:600; color:var(--text-2); background:var(--surface); cursor:pointer; transition:var(--transition) }
.filter-chip:hover,.filter-chip.active { border-color:var(--forest-light); color:var(--forest-medium); background:rgba(66,129,119,0.09) }

/* ===== FOOTER ===== */
.footer { background:var(--forest-dark); color:#4a7068 }
.footer-top { padding:5rem 0 }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3.5rem }
.footer-logo { display:flex; align-items:center; gap:0.65rem; font-size:1.35rem; font-weight:800; color:var(--wheat-light); font-family:var(--font-heading); margin-bottom:1.1rem; letter-spacing:-0.03em }
.footer-logo i { color:var(--wheat-medium); font-size:1.5rem }
.footer-brand p { font-size:0.9rem; line-height:1.8; margin-bottom:1.75rem; color:#4a7068 }
.social-links { display:flex; gap:0.65rem; flex-wrap:wrap }
.social-links a { width:40px; height:40px; background:rgba(255,255,255,0.05); border:1px solid rgba(66,129,119,0.25); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#527068; font-size:0.9rem; transition:var(--transition) }
.social-links a:hover { background:var(--forest-light); border-color:var(--forest-light); color:var(--wheat-light); transform:translateY(-2px) }
.footer-links h4 { color:var(--wheat-medium); font-size:0.9rem; font-weight:700; margin-bottom:1.25rem; letter-spacing:-0.01em }
.footer-links ul li { margin-bottom:0.6rem }
.footer-links ul li a { font-size:0.88rem; color:#4a7068; transition:var(--transition) }
.footer-links ul li a:hover { color:var(--wheat-light) }
.footer-contact h4 { color:var(--wheat-medium); margin-bottom:1.25rem; font-size:0.9rem; font-weight:700 }
.footer-contact p { display:flex; align-items:center; gap:0.65rem; font-size:0.88rem; margin-bottom:0.75rem; color:#4a7068 }
.footer-contact i { color:var(--wheat-medium); width:16px; flex-shrink:0 }
.footer-bottom { border-top:1px solid rgba(66,129,119,0.15); padding:1.4rem 0; text-align:center; font-size:0.83rem; color:#2e4e49 }

/* ===== PAGINATION ===== */
.pagination { display:flex; justify-content:center; gap:0.4rem; margin-top:2.5rem; flex-wrap:wrap }
.pagination a,.pagination span { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; font-size:0.9rem; font-weight:600; border:1.5px solid var(--border); color:var(--text-2); background:var(--surface); transition:var(--transition) }
.pagination a:hover { border-color:var(--forest-light); color:var(--forest-light) }
.pagination .active { background:var(--forest-light); border-color:var(--forest-light); color:white }
.pagination .disabled { opacity:0.4; pointer-events:none }

/* ===== ADMIN PANEL ===== */
.admin-sidebar {
    background:var(--forest-dark); width:264px; min-height:100vh;
    position:fixed; top:0; right:0; overflow-y:auto; z-index:100;
    transition:transform 0.3s ease; border-left:1px solid rgba(66,129,119,0.20);
}
.admin-sidebar-logo { padding:1.75rem 1.5rem; border-bottom:1px solid rgba(66,129,119,0.15); display:flex; align-items:center; gap:0.8rem; font-size:1.1rem; font-weight:800; color:var(--wheat-light); font-family:var(--font-heading); letter-spacing:-0.02em }
.admin-sidebar-logo .logo-icon { background:linear-gradient(135deg,var(--forest-light),var(--forest-medium)); border-radius:10px; width:38px; height:38px; font-size:1rem; box-shadow:0 4px 12px var(--primary-glow); display:flex; align-items:center; justify-content:center; color:var(--wheat-light); flex-shrink:0 }
.admin-sidebar-logo-img { height:38px; max-width:120px; width:auto; object-fit:contain; flex-shrink:0; filter:brightness(0) invert(1) }
.admin-nav-section { padding:1.25rem 1.5rem 0.4rem; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:#2e4e49 }
.admin-nav a { display:flex; align-items:center; gap:0.8rem; padding:0.72rem 1.25rem; color:#4a7068; font-size:0.88rem; font-weight:500; transition:var(--transition); margin:0.1rem 0.75rem; border-radius:10px }
.admin-nav a:hover { background:rgba(66,129,119,0.12); color:#7ec4b8 }
.admin-nav a.active { background:rgba(66,129,119,0.22); color:var(--wheat-medium); font-weight:600 }
.admin-nav a i { width:18px; text-align:center; font-size:0.88rem }
.admin-main { margin-right:264px; min-height:100vh; display:flex; flex-direction:column; background:var(--bg) }
.admin-topbar { background:var(--surface); border-bottom:1.5px solid var(--border); padding:0 2rem; height:68px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50 }
.admin-content { padding:2rem; flex:1 }
.page-title { font-size:1.55rem; font-weight:800; margin-bottom:0.25rem; font-family:var(--font-heading); letter-spacing:-0.03em; color:var(--forest-medium) }
.page-subtitle { color:var(--text-muted); font-size:0.88rem }

/* ===== DIVIDER ===== */
.divider { height:1px; background:var(--border); margin:1.5rem 0 }
.divider-text { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:0.85rem }
.divider-text::before,.divider-text::after { content:''; flex:1; height:1px; background:var(--border) }

/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin   { to{transform:rotate(360deg)} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.fade-in { animation:fadeIn 0.6s ease both }
.fade-in:nth-child(2) { animation-delay:0.1s }
.fade-in:nth-child(3) { animation-delay:0.2s }
.fade-in:nth-child(4) { animation-delay:0.3s }
.fade-in:nth-child(5) { animation-delay:0.4s }

.spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--forest-light); border-radius:50%; animation:spin 0.75s linear infinite }
.spinner-sm { width:20px; height:20px; border-width:2px }
.spinner-xs { width:14px; height:14px; border-width:2px }
.loading-overlay { position:fixed; inset:0; background:rgba(237,235,224,0.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:9999 }

/* ===== UTILITIES ===== */
.text-center  { text-align:center }
.text-right   { text-align:right }
.text-left    { text-align:left }
.text-primary { color:var(--forest-light) }
.text-success { color:var(--success) }
.text-danger  { color:var(--danger) }
.text-warning { color:var(--warning) }
.text-muted   { color:var(--text-muted) }
.text-wheat   { color:var(--wheat-medium) }
.text-white   { color:white }
.text-dark    { color:var(--dark) }
.text-sm      { font-size:0.875rem }
.text-xs      { font-size:0.78rem }
.text-lg      { font-size:1.125rem }
.font-bold    { font-weight:700 }
.font-semibold{ font-weight:600 }
.font-heading { font-family:var(--font-heading) }
.mb-0  { margin-bottom:0 }
.mb-1  { margin-bottom:0.5rem }
.mb-2  { margin-bottom:1rem }
.mb-3  { margin-bottom:1.5rem }
.mb-4  { margin-bottom:2rem }
.mt-0  { margin-top:0 }
.mt-1  { margin-top:0.5rem }
.mt-2  { margin-top:1rem }
.mt-3  { margin-top:1.5rem }
.mt-4  { margin-top:2rem }
.me-1  { margin-left:0.5rem }
.me-2  { margin-left:1rem }
.ms-1  { margin-right:0.5rem }
.ms-2  { margin-right:1rem }
.p-0   { padding:0 }
.p-1   { padding:0.5rem }
.p-2   { padding:1rem }
.p-3   { padding:1.5rem }
.gap-1 { gap:0.5rem }
.gap-2 { gap:1rem }
.gap-3 { gap:1.5rem }
.flex         { display:flex }
.flex-col     { flex-direction:column }
.flex-wrap    { flex-wrap:wrap }
.flex-1       { flex:1 }
.items-center { align-items:center }
.items-start  { align-items:flex-start }
.items-end    { align-items:flex-end }
.justify-between { justify-content:space-between }
.justify-center  { justify-content:center }
.justify-end     { justify-content:flex-end }
.w-full    { width:100% }
.h-full    { height:100% }
.relative  { position:relative }
.absolute  { position:absolute }
.overflow-hidden { overflow:hidden }
.overflow-auto   { overflow:auto }
.d-none    { display:none!important }
.d-flex    { display:flex!important }
.d-block   { display:block!important }
.d-grid    { display:grid!important }
.text-gray { color:var(--text-muted) }
.rounded   { border-radius:var(--radius) }
.rounded-full { border-radius:50px }
.truncate  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.cursor-pointer { cursor:pointer }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
    .footer-grid         { grid-template-columns:1fr 1fr; gap:2.5rem }
    .dashboard-layout    { grid-template-columns:240px 1fr }
    .profile-grid        { grid-template-columns:240px 1fr }
    .lesson-layout       { grid-template-columns:1fr }
    .lesson-sidebar      { height:50vh }
    .admin-sidebar       { width:240px }
    .admin-main          { margin-right:240px }
    .course-hero-grid    { grid-template-columns:1fr 340px }
    .course-main-grid    { grid-template-columns:1fr 320px }
    .checkout-layout     { grid-template-columns:1fr 340px }
}
@media(max-width:768px) {
    .container           { padding:0 1rem }

    /* Navbar */
    .navbar-inner        { height:64px; gap:0.75rem }
    .logo-text           { font-size:1.15rem }
    .logo-icon           { width:36px; height:36px; font-size:0.95rem }
    .navbar-logo img     { height:36px; max-width:130px }
    .nav-links           { display:none }
    .nav-links.open {
        display:flex; flex-direction:column;
        position:fixed; top:64px; right:0; left:0;
        background:rgba(237,235,224,0.97); backdrop-filter:blur(24px);
        padding:1.25rem; border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-lg); z-index:999;
    }
    .nav-links.open li   { width:100% }
    .nav-links.open a    { border-radius:var(--radius-sm); padding:0.75rem 1rem; display:block }
    .mobile-menu-btn     { display:flex }
    .nav-auth .btn       { padding:0.45rem 0.9rem; font-size:0.85rem }

    /* Hero */
    .hero                { min-height:auto; padding:calc(64px + 3rem) 0 3rem }
    .hero-content        { max-width:100% }
    .hero h1             { font-size:1.9rem; margin-bottom:1.25rem }
    .hero p              { font-size:1rem; margin-bottom:2rem }
    .hero-actions        { flex-direction:column; gap:0.75rem }
    .hero-actions .btn   { width:100%; justify-content:center }
    .hero-stats          { flex-direction:row; flex-wrap:wrap; gap:1.25rem; margin-top:2.5rem; padding-top:2rem; justify-content:center }
    .hero-stat           { text-align:center; min-width:calc(50% - 0.75rem) }
    .hero-stat strong    { font-size:1.6rem }

    /* Sections */
    .section             { padding:3rem 0 }
    .section-header      { margin-bottom:2.25rem }
    .section-header h2   { font-size:1.65rem }
    .section-header p    { font-size:0.95rem }

    /* Categories */
    .categories-grid     { grid-template-columns:repeat(2,1fr); gap:0.875rem }
    .category-card       { padding:1.25rem 0.875rem }
    .category-icon       { width:52px; height:52px; font-size:1.4rem }

    /* Courses */
    .courses-grid        { grid-template-columns:1fr; gap:1.25rem }
    .course-footer       { padding:0.875rem 1.25rem }

    /* Stats */
    .stats-grid          { grid-template-columns:repeat(2,1fr); gap:1rem }
    .stat-card           { padding:1.25rem }
    .stat-value          { font-size:1.6rem }

    /* Auth */
    .auth-card           { padding:1.75rem 1.25rem; border-radius:var(--radius-lg); max-width:100%; margin:0 1rem }

    /* Dashboard */
    .dashboard-layout    { grid-template-columns:1fr }
    .sidebar {
        display:none; position:fixed; top:0; right:0;
        width:280px; height:100vh; z-index:2000;
        overflow-y:auto; padding-top:64px;
        box-shadow:var(--shadow-xl); transition:transform 0.3s ease;
    }
    .sidebar.open        { display:block; transform:translateX(0) }
    .sidebar-mobile-header { display:flex }
    .sidebar-mobile-toggle { display:flex }
    .sidebar-close-btn   { display:flex }
    .main-content        { padding:1.5rem 1rem }
    .dashboard-content   { padding:1.25rem }

    /* Profile */
    .profile-grid        { grid-template-columns:1fr }
    .profile-avatar-section { position:static; padding:2rem 1.25rem; text-align:center }
    .profile-form-section   { padding:1.5rem 1.25rem }

    /* Course page */
    .course-hero-grid    { grid-template-columns:1fr }
    .course-main-grid    { grid-template-columns:1fr; padding:2rem 0 }
    .course-sidebar-sticky { position:static; margin-bottom:1.5rem; order:-1 }
    .course-purchase-card  { border-radius:var(--radius-lg) }

    /* Learn */
    .lesson-layout       { grid-template-columns:1fr; height:auto; margin-top:64px }
    .lesson-sidebar      { display:none; height:auto }
    .lesson-sidebar.open { display:flex; height:65vh }
    .learn-sidebar-toggle{ display:flex }
    .video-container     { border-radius:0 }

    /* Checkout */
    .checkout-layout     { grid-template-columns:1fr }
    .checkout-summary    { order:-1 }

    /* Footer */
    .footer-top          { padding:3rem 0 2rem }
    .footer-grid         { grid-template-columns:1fr; gap:1.75rem }
    .footer-brand p      { font-size:0.88rem }
    .footer-bottom       { padding:1.25rem 0 }

    /* Forms */
    .form-row            { flex-direction:column; gap:0 }
    .form-group label    { font-size:0.88rem }
    .form-control        { font-size:0.95rem; padding:0.7rem 1rem }

    /* Tables */
    .table-responsive    { overflow-x:auto; -webkit-overflow-scrolling:touch }
    table                { min-width:600px }

    /* Modals */
    .modal-box           { margin:1rem; border-radius:var(--radius-lg); max-height:90vh }

    /* Features */
    .features-grid       { grid-template-columns:1fr }

    /* Tabs */
    .tabs                { gap:0.25rem; padding-bottom:0.25rem }
    .tab,.tab-btn        { font-size:0.85rem; padding:0.5rem 0.9rem }

    /* Cards */
    .card-body           { padding:1.1rem }
    .card-header         { padding:1rem 1.1rem; font-size:0.95rem }

    /* Admin */
    .admin-sidebar       { transform:translateX(100%) }
    .admin-sidebar.open  { transform:translateX(0) }
    .admin-main          { margin-right:0 }
    .admin-content       { padding:1.25rem }
}
@media(max-width:480px) {
    .hero                { padding:calc(64px + 3.5rem) 0 3.5rem }
    .hero h1             { font-size:1.65rem; line-height:1.2 }
    .hero-stat strong    { font-size:1.4rem }
    .categories-grid     { gap:0.6rem }
    .category-card       { padding:1rem 0.65rem }
    .category-icon       { width:44px; height:44px; font-size:1.2rem }
    .category-card h3,.category-name { font-size:0.82rem }
    .stat-card           { padding:1rem }
    .stat-value          { font-size:1.5rem }
    .auth-card           { margin:0 0.75rem; padding:1.5rem 1rem }
    .section             { padding:2.5rem 0 }
    .section-header h2   { font-size:1.45rem }
    .certificate         { transform:scale(0.5); transform-origin:top center; margin-bottom:-16rem }
    .features-grid       { gap:1.25rem }
    .feature-card        { padding:1.5rem 1.25rem }
    .checkout-layout,.course-hero-grid { gap:1.5rem }
    .modal-box           { padding:1.5rem }
    .flash-message       { min-width:auto; width:calc(100% - 2rem); border-radius:var(--radius-sm); font-size:0.88rem }
}
@media(max-width:360px) {
    .logo-text span:not(.logo-icon) { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .nav-auth .btn-ghost { display:none }
    .stats-grid          { grid-template-columns:1fr 1fr }
}
@media print {
    .navbar,.footer,.btn,.flash-message,.print-btn { display:none!important }
    body { background:white }
    .certificate { box-shadow:none; width:100% }
}