/* ============================================================
   Global Ventures Academy — edu.css
   Dark Green Luxury theme (matches main site)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

:root {
  --bg:           #06100a;
  --surface:      #0b1c10;
  --surface-2:    #112216;
  --surface-3:    #162c1c;
  --border:       #1e3424;
  --border-light: #264a2e;
  --gold:         #c9a84c;
  --gold-light:   #e0c068;
  --gold-dim:     rgba(201,168,76,.13);
  --text:         #e8f0ea;
  --text-muted:   #7a9880;
  --text-dim:     #4a6652;
  --white:        #ffffff;
  --header-h:     64px;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 4px 24px rgba(0,0,0,.5);
  --ease:         .2s ease;
}

body { font-family: 'Inter','Segoe UI',Arial,sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Header ────────────────────────────────────────────── */
.edu-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(6,16,10,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.edu-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.edu-logo { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.edu-logo span { color: var(--gold); }
.edu-logo a { display: flex; align-items: center; gap: 10px; }
.edu-logo img { height: 36px; width: auto; object-fit: contain; }
.edu-nav { display: flex; align-items: center; gap: 6px; }
.edu-nav a { font-size: .83rem; font-weight: 500; color: var(--text-muted); padding: 6px 13px; border-radius: var(--radius-sm); transition: color var(--ease), background var(--ease); }
.edu-nav a:hover, .edu-nav a.active { color: var(--text); background: var(--surface-2); }
.edu-nav a.active { color: var(--gold); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 700; cursor: pointer; transition: background var(--ease), transform var(--ease); border: none; font-family: inherit; letter-spacing: .2px; }
.btn-gold { background: var(--gold); color: #0a1a0a; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1.5px solid var(--border-light); color: var(--text); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-light); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-lg { padding: 13px 28px; font-size: .95rem; }
.btn-full { width: 100%; justify-content: center; }

/* Tags & labels */
.tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .7rem; font-weight: 700; }
.badge-gold { background: var(--gold-dim); border: 1px solid rgba(201,168,76,.3); color: var(--gold); }
.badge-muted { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }

/* Section headers */
.sec-tag { display: block; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.sec-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; color: var(--text); letter-spacing: -.3px; line-height: 1.2; margin-bottom: 10px; }
.sec-sub { font-size: .9rem; color: var(--text-muted); line-height: 1.7; max-width: 520px; }

/* ── Hero ──────────────────────────────────────────────── */
.edu-hero { position: relative; padding: 80px 0 72px; overflow: hidden; }
.edu-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(26,92,42,.45) 0%, transparent 70%); pointer-events:none; }
.edu-hero::after { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(30,52,36,.3) 1px,transparent 1px), linear-gradient(90deg,rgba(30,52,36,.3) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 0%, transparent 70%); mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 0%, transparent 70%); pointer-events:none; }
.edu-hero .container { position:relative; z-index:1; }
.hero-inner { display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:center; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; background:var(--gold-dim); border:1px solid rgba(201,168,76,.3); color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:5px 13px; border-radius:20px; margin-bottom:20px; }
.edu-hero h1 { font-size: clamp(2rem,4vw,3rem); font-weight:800; line-height:1.12; color:var(--text); letter-spacing:-.5px; margin-bottom:18px; }
.edu-hero h1 em { font-style:normal; color:var(--gold); }
.hero-desc { font-size:.95rem; color:var(--text-muted); margin-bottom:30px; line-height:1.75; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hstat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; text-align:center; transition:border-color var(--ease); }
.hstat:hover { border-color:var(--border-light); }
.hstat-num { font-size:1.9rem; font-weight:800; color:var(--gold); line-height:1; }
.hstat-lbl { font-size:.75rem; color:var(--text-muted); margin-top:3px; }

/* ── Course Cards ──────────────────────────────────────── */
.courses-section { padding: 72px 0; }
.courses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.course-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease); display:flex; flex-direction:column; }
.course-card:hover { transform:translateY(-4px); border-color:var(--border-light); box-shadow:var(--shadow); }

.course-thumb { aspect-ratio:16/9; background:var(--surface-2); position:relative; overflow:hidden; }
.course-thumb img { width:100%; height:100%; object-fit:cover; }
.course-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
.course-price-badge { position:absolute; top:10px; right:10px; background:var(--gold); color:#0a1a0a; font-size:.8rem; font-weight:800; padding:4px 10px; border-radius:var(--radius-sm); }

.course-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.course-meta { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.course-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.3; }
.course-sub { font-size:.8rem; color:var(--text-muted); line-height:1.6; flex:1; }
.course-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:14px; border-top:1px solid var(--border); }
.course-lessons { font-size:.75rem; color:var(--text-dim); }
.course-price { font-size:1.2rem; font-weight:800; color:var(--gold); }

/* ── Page Hero (inner pages) ───────────────────────────── */
.page-hero { position:relative; padding:60px 0 52px; text-align:center; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(26,92,42,.4) 0%, transparent 70%); pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }

/* ── Course Detail Page ────────────────────────────────── */
.course-detail { padding: 64px 0; }
.course-detail-grid { display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
.course-desc h2 { font-size:1rem; font-weight:700; color:var(--text); margin:20px 0 8px; }
.course-desc p, .course-desc li { font-size:.88rem; color:var(--text-muted); line-height:1.7; }
.course-desc ul { padding-left:16px; }
.course-desc ul li { position:relative; padding-left:4px; margin-bottom:4px; }
.course-desc ul li::before { content:'→'; position:absolute; left:-14px; color:var(--gold); }

.lessons-list { margin-top:24px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.lessons-list-header { background:var(--surface-2); padding:12px 18px; font-size:.8rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; border-bottom:1px solid var(--border); }
.lesson-row { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); transition:background var(--ease); }
.lesson-row:last-child { border-bottom:none; }
.lesson-row:hover { background:var(--surface-2); }
.lesson-num { font-size:.72rem; color:var(--text-dim); font-weight:600; min-width:22px; }
.lesson-title-text { flex:1; font-size:.88rem; color:var(--text); }
.lesson-dur { font-size:.72rem; color:var(--text-dim); }
.lesson-free-badge { font-size:.65rem; font-weight:700; color:var(--gold); background:var(--gold-dim); border:1px solid rgba(201,168,76,.25); padding:2px 7px; border-radius:10px; }
.lesson-lock { color:var(--text-dim); font-size:.85rem; }

/* Buy card sidebar */
.buy-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; position:sticky; top:calc(var(--header-h) + 16px); }
.buy-price { font-size:2.2rem; font-weight:800; color:var(--gold); margin-bottom:16px; }
.buy-features { margin-bottom:20px; }
.buy-features li { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--text-muted); padding:6px 0; border-bottom:1px solid var(--border); }
.buy-features li:last-child { border-bottom:none; }
.buy-note { font-size:.72rem; color:var(--text-dim); text-align:center; margin-top:12px; line-height:1.7; }

/* ── Dashboard ─────────────────────────────────────────── */
.dashboard { padding: 48px 0 72px; }
.dash-grid { display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }

.dash-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:sticky; top:calc(var(--header-h)+16px); }
.dash-avatar { width:60px; height:60px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border-light); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:12px; }
.dash-name { font-weight:700; color:var(--text); font-size:.95rem; }
.dash-email { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.dash-nav { margin-top:20px; display:flex; flex-direction:column; gap:2px; }
.dash-nav a { font-size:.84rem; color:var(--text-muted); padding:8px 12px; border-radius:var(--radius-sm); transition:color var(--ease), background var(--ease); }
.dash-nav a:hover, .dash-nav a.active { color:var(--text); background:var(--surface-2); }
.dash-nav a.active { color:var(--gold); }

.dash-main {}
.dash-section-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:16px; }

.enrolled-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.enrolled-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; transition:border-color var(--ease); }
.enrolled-card:hover { border-color:var(--border-light); }
.enrolled-title { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.progress-bar-wrap { background:var(--surface-2); border-radius:20px; height:5px; margin-bottom:6px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--gold); border-radius:20px; transition:width .4s ease; }
.progress-label { font-size:.72rem; color:var(--text-muted); }
.enrolled-card .btn { margin-top:12px; font-size:.78rem; padding:7px 14px; }

/* ── Lesson Player ─────────────────────────────────────── */
.lesson-page { padding: 0 0 64px; }
.lesson-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; }
.lesson-main {}
.video-wrap { background:#000; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border); }
.video-wrap iframe { width:100%; height:100%; border:none; display:block; }
.lesson-info { padding:20px 0; }
.lesson-info h1 { font-size:1.2rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.lesson-info p { font-size:.86rem; color:var(--text-muted); line-height:1.7; }
.lesson-actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

.lesson-sidebar {}
.lesson-list-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.lesson-list-sidebar .lsh { background:var(--surface-2); padding:12px 16px; font-size:.75rem; font-weight:700; color:var(--text-muted); letter-spacing:.8px; text-transform:uppercase; border-bottom:1px solid var(--border); }
.lesson-sidebar-item { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border); font-size:.82rem; color:var(--text-muted); transition:background var(--ease); cursor:pointer; }
.lesson-sidebar-item:last-child { border-bottom:none; }
.lesson-sidebar-item:hover { background:var(--surface-2); }
.lesson-sidebar-item.active { color:var(--gold); background:rgba(201,168,76,.06); }
.lesson-sidebar-item.completed { color:var(--text); }
.ls-check { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.65rem; }
.ls-check.done { background:var(--gold); border-color:var(--gold); color:#0a1a0a; }
.ls-num { font-size:.68rem; color:var(--text-dim); min-width:16px; }
.ls-title { flex:1; line-height:1.3; }

/* ── Auth forms ─────────────────────────────────────────── */
.auth-page { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; }
.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 36px; width:100%; max-width:420px; }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo .edu-logo { justify-content:center; }
.auth-card h1 { font-size:1.4rem; font-weight:800; color:var(--text); margin-bottom:4px; }
.auth-card p.auth-sub { font-size:.84rem; color:var(--text-muted); margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.form-group input { width:100%; padding:10px 13px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.9rem; color:var(--text); font-family:inherit; outline:none; transition:border-color var(--ease), box-shadow var(--ease); }
.form-group input::placeholder { color:var(--text-dim); }
.form-group input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.1); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-error { background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.3); color:#f87171; border-radius:var(--radius-sm); padding:10px 14px; font-size:.82rem; margin-bottom:14px; }
.form-success { background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.3); color:#4ade80; border-radius:var(--radius-sm); padding:10px 14px; font-size:.82rem; margin-bottom:14px; }
.auth-link { font-size:.82rem; color:var(--text-muted); text-align:center; margin-top:16px; }
.auth-link a { color:var(--gold); }
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-dim); font-size:.75rem; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Admin ──────────────────────────────────────────────── */
.admin-header { background:var(--surface); border-bottom:1px solid var(--border); height:60px; display:flex; align-items:center; }
.admin-header .container { display:flex; align-items:center; justify-content:space-between; }
.admin-header h1 { font-size:1rem; font-weight:700; color:var(--text); }
.admin-body { padding:36px 0 72px; }
.admin-grid { display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:start; }
.admin-sidebar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; position:sticky; top:16px; }
.admin-nav a { display:block; font-size:.84rem; color:var(--text-muted); padding:8px 12px; border-radius:var(--radius-sm); transition:color var(--ease), background var(--ease); margin-bottom:2px; }
.admin-nav a:hover, .admin-nav a.active { color:var(--text); background:var(--surface-2); }
.admin-nav a.active { color:var(--gold); }
.admin-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.admin-card h2 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:16px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
thead th { background:var(--surface-2); color:var(--text-muted); padding:10px 14px; text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid var(--border); }
tbody tr { border-bottom:1px solid var(--border); transition:background var(--ease); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
tbody td { padding:11px 14px; color:var(--text-muted); vertical-align:middle; }
tbody td a { color:var(--gold); }
.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px; text-align:center; }
.stat-card .n { font-size:1.8rem; font-weight:800; color:var(--gold); }
.stat-card .l { font-size:.72rem; color:var(--text-muted); margin-top:2px; }

/* ── Footer ─────────────────────────────────────────────── */
.edu-footer { background:var(--surface); border-top:1px solid var(--border); padding:32px 0; margin-top:auto; }
.edu-footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.edu-footer p { font-size:.78rem; color:var(--text-dim); }
.edu-footer a { color:var(--gold); font-size:.78rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-stats { display:none; }
  .courses-grid { grid-template-columns:1fr 1fr; }
  .course-detail-grid { grid-template-columns:1fr; }
  .buy-card { position:static; }
  .lesson-layout { grid-template-columns:1fr; }
  .dash-grid { grid-template-columns:1fr; }
  .dash-sidebar { position:static; }
  .enrolled-grid { grid-template-columns:1fr; }
  .admin-grid { grid-template-columns:1fr; }
  .stat-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .courses-grid { grid-template-columns:1fr; }
  .auth-card { padding:28px 20px; }
  .stat-cards { grid-template-columns:1fr 1fr; }
  .form-row-2 { grid-template-columns:1fr; }
}
