/* =========================================
   LearnHub — Main CSS
   Font: Plus Jakarta Sans + Fraunces
   Theme: Deep Navy + Electric Blue + Warm White
   ========================================= */

:root {
  --primary:     #2563eb;
  --primary-dark:#1d4ed8;
  --primary-light:#dbeafe;
  --accent:      #f59e0b;
  --success:     #10b981;
  --danger:      #ef4444;
  --warning:     #f59e0b;
  --info:        #3b82f6;
  --dark:        #0f172a;
  --dark-2:      #1e293b;
  --gray-1:      #334155;
  --gray-2:      #64748b;
  --gray-3:      #94a3b8;
  --gray-4:      #cbd5e1;
  --gray-5:      #e2e8f0;
  --gray-6:      #f1f5f9;
  --white:       #ffffff;
  --font-body:   'Plus Jakarta Sans', sans-serif;
  --font-display:'Fraunces', serif;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 48px rgba(0,0,0,.12);
  --transition:  all .2s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  font-size: 15px;
}
a { color: var(--primary); text-decoration:none; }
a:hover { color: var(--primary-dark); }
img { max-width:100%; display:block; }

/* ── Utilities ─────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.text-center { text-align:center; }
.text-muted { color: var(--gray-2); font-size:.875rem; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-primary { color: var(--primary); }
.mt-4 { margin-top:2rem; }
.ml-2 { margin-left:.5rem; }
.font-mono { font-family:monospace; }

/* ── Buttons ────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.2rem; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  cursor:pointer; border:2px solid transparent;
  transition:var(--transition); white-space:nowrap;
}
.btn-primary { background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:var(--white); }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:var(--white); }
.btn-success { background:var(--success); color:var(--white); border-color:var(--success); }
.btn-success:hover { background:#059669; color:var(--white); }
.btn-danger  { background:var(--danger);  color:var(--white); border-color:var(--danger); }
.btn-white   { background:var(--white);   color:var(--primary); }
.btn-white:hover { background:var(--gray-6); }
.btn-lg { padding:.75rem 1.75rem; font-size:1rem; border-radius:var(--radius); }
.btn-sm { padding:.35rem .85rem; font-size:.8rem; }
.btn-xs { padding:.2rem .5rem; font-size:.75rem; border-radius:6px; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* ── Navbar ─────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--gray-5);
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:1.5rem;
}
.nav-brand {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--dark);
}
.nav-brand:hover { color: var(--primary); }
.brand-icon {
  width:36px; height:36px; background:var(--primary);
  border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-size:.95rem;
}
.nav-links { display:flex; list-style:none; gap:1.5rem; }
.nav-links a { font-weight:500; color:var(--gray-1); transition:var(--transition); }
.nav-links a:hover, .nav-links a.active { color:var(--primary); }
.nav-auth { display:flex; align-items:center; gap:.75rem; }
.nav-toggle { display:none; background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--dark); }

/* Dropdown */
.user-dropdown { position:relative; }
.btn-avatar {
  display:flex; align-items:center; gap:.5rem;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; color:var(--dark);
  font-size:.9rem; padding:.4rem .75rem; border-radius:var(--radius-sm);
}
.btn-avatar:hover { background:var(--gray-6); }
.dropdown-menu {
  display:none; position:absolute; top:calc(100%+8px); right:0;
  background:var(--white); border:1px solid var(--gray-5);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:200px; z-index:200;
  padding:.5rem;
}
.user-dropdown:hover .dropdown-menu,
.user-dropdown:focus-within .dropdown-menu { display:block; }
.dropdown-menu a {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .75rem; border-radius:var(--radius-sm);
  color:var(--gray-1); font-size:.875rem; font-weight:500;
  transition:var(--transition);
}
.dropdown-menu a:hover { background:var(--gray-6); color:var(--primary); }
.dropdown-menu a.text-danger:hover { color:var(--danger); }
.dropdown-divider { height:1px; background:var(--gray-5); margin:.35rem 0; }

/* ── Alerts ─────────────────────────────── */
.alert-container { position:fixed; top:76px; right:24px; z-index:300; max-width:400px; }
.alert {
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500; margin-bottom:.5rem;
  box-shadow:var(--shadow); animation: slideIn .3s ease;
}
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.alert-danger  { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-warning { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.alert-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ── Forms ──────────────────────────────── */
.form-control {
  width:100%; padding:.6rem .85rem; border:2px solid var(--gray-4);
  border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.875rem;
  transition:var(--transition); background:var(--white); color:var(--dark);
}
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-weight:600; font-size:.875rem; margin-bottom:.4rem; color:var(--dark); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-actions { display:flex; gap:.75rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--gray-5); }

/* Toggle */
.toggle-group { display:flex; align-items:center; gap:.5rem; }
.toggle-group input[type="checkbox"] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.toggle-label { font-weight:500; cursor:pointer; }

/* Password input */
.input-password { position:relative; }
.input-password .form-control { padding-right:2.5rem; }
.toggle-password {
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--gray-2);
}

/* ── Hero ───────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e293b 100%);
  padding:5rem 0 4rem; overflow:hidden; position:relative;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 50%, rgba(37,99,235,.2) 0%, transparent 60%);
}
.hero-content { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(37,99,235,.2); color:#93c5fd; border:1px solid rgba(37,99,235,.3);
  padding:.35rem .85rem; border-radius:100px; font-size:.8rem; font-weight:600; margin-bottom:1.25rem;
}
.hero h1 {
  font-family:var(--font-display); font-size:3rem; font-weight:900; line-height:1.15;
  color:var(--white); margin-bottom:1rem;
}
.hero h1 .highlight { color:#60a5fa; }
.hero p { color:#94a3b8; font-size:1.05rem; line-height:1.7; margin-bottom:1.75rem; max-width:480px; }
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-stats { display:flex; gap:2.5rem; }
.hero-stats div { text-align:center; }
.hero-stats strong { display:block; font-size:1.5rem; font-family:var(--font-display); color:var(--white); }
.hero-stats span { font-size:.8rem; color:#94a3b8; }

/* Hero Visual */
.hero-visual { position:relative; height:360px; }
.hero-bg-shape {
  position:absolute; width:340px; height:340px; background:rgba(37,99,235,.15);
  border-radius:50%; top:10px; left:50%; transform:translateX(-50%);
  border:1px solid rgba(37,99,235,.2);
}
.hero-card {
  position:absolute; background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:1rem 1.25rem;
  display:flex; align-items:center; gap:.75rem; color:white;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.hero-card-main { top:50px; left:0; right:0; margin:auto; max-width:280px; }
.hero-card-main .card-icon { width:44px; height:44px; background:var(--primary); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.hero-card-main strong { display:block; font-weight:700; }
.hero-card-main small { color:#94a3b8; font-size:.8rem; }
.hero-card-2 { bottom:90px; left:20px; font-size:.875rem; font-weight:600; gap:.4rem; padding:.6rem 1rem; }
.hero-card-3 { bottom:90px; right:20px; font-size:.875rem; font-weight:600; gap:.4rem; padding:.6rem 1rem; }

/* ── Sections ───────────────────────────── */
.section { padding:4.5rem 0; }
.section-alt { background:var(--gray-6); }
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-header h2 { font-family:var(--font-display); font-size:2.2rem; font-weight:800; margin-bottom:.5rem; }
.section-header p { color:var(--gray-2); font-size:1.05rem; }

/* ── Categories ─────────────────────────── */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.category-card {
  background:var(--white); border:2px solid var(--gray-5); border-radius:var(--radius);
  padding:1.5rem 1rem; text-align:center; transition:var(--transition); color:var(--dark);
}
.category-card:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow); color:var(--primary); }
.cat-icon { width:48px; height:48px; background:var(--primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; color:var(--primary); font-size:1.25rem; }
.cat-name { font-weight:700; font-size:.9rem; margin-bottom:.25rem; }
.cat-count { font-size:.8rem; color:var(--gray-2); }

/* ── Course Cards ───────────────────────── */
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.course-card {
  background:var(--white); border:1px solid var(--gray-5); border-radius:var(--radius);
  overflow:hidden; transition:var(--transition); box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.course-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--gray-4); }
.course-thumbnail { position:relative; aspect-ratio:16/9; overflow:hidden; }
.course-thumbnail img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.course-card:hover .course-thumbnail img { transform:scale(1.04); }
.course-thumb-placeholder {
  width:100%; height:100%; background:linear-gradient(135deg,#e0e7ff,#dbeafe);
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--primary);
}
.course-thumb-placeholder.large { height:220px; }
.course-level {
  position:absolute; top:.75rem; left:.75rem;
  padding:.25rem .65rem; border-radius:100px; font-size:.75rem; font-weight:700;
}
.level-pemula   { background:#dcfce7; color:#166534; }
.level-menengah { background:#fef9c3; color:#854d0e; }
.level-mahir    { background:#fee2e2; color:#991b1b; }
.course-body { padding:1.25rem; }
.course-category { font-size:.75rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.05em; }
.course-title { font-weight:700; font-size:1rem; margin:.3rem 0 .35rem; line-height:1.4; }
.course-instructor { font-size:.8rem; color:var(--gray-2); margin-bottom:.5rem; }
.course-desc { font-size:.825rem; color:var(--gray-2); margin-bottom:.75rem; line-height:1.5; }
.course-meta { display:flex; gap:.75rem; font-size:.8rem; color:var(--gray-2); margin-bottom:.75rem; }
.course-footer { display:flex; justify-content:space-between; align-items:center; padding-top:.75rem; border-top:1px solid var(--gray-5); }
.course-price strong { font-size:1.1rem; color:var(--dark); }

/* ── Page Header ────────────────────────── */
.page-header { background:linear-gradient(135deg,#0f172a,#1e3a5f); padding:3rem 0; color:white; }
.page-header h1 { font-family:var(--font-display); font-size:2.5rem; margin-bottom:.5rem; }
.page-header p { color:#94a3b8; }

/* ── Filter Bar ─────────────────────────── */
.filter-bar { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem; background:var(--white); padding:1rem; border-radius:var(--radius); border:1px solid var(--gray-5); box-shadow:var(--shadow); }
.filter-search { display:flex; align-items:center; gap:.5rem; background:var(--gray-6); border-radius:var(--radius-sm); padding:.5rem .85rem; flex:1; min-width:200px; }
.filter-search i { color:var(--gray-3); }
.filter-search input { border:none; background:none; font-family:var(--font-body); font-size:.875rem; width:100%; }
.filter-search input:focus { outline:none; }

/* ── Course Detail ──────────────────────── */
.course-detail-header { background:linear-gradient(135deg,#0f172a,#1e3a5f); padding:3rem 0; color:white; }
.course-detail-layout { display:grid; grid-template-columns:1fr 380px; gap:2.5rem; }
.course-detail-info .breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.825rem; color:#94a3b8; margin-bottom:1.25rem; }
.course-detail-info .breadcrumb a { color:#93c5fd; }
.course-detail-info h1 { font-family:var(--font-display); font-size:2.2rem; color:white; margin:.5rem 0 1rem; line-height:1.3; }
.course-detail-desc { color:#cbd5e1; line-height:1.7; margin-bottom:1.25rem; }
.course-detail-meta { display:flex; flex-wrap:wrap; gap:1rem; }
.course-detail-meta span { display:flex; align-items:center; gap:.35rem; font-size:.875rem; color:#94a3b8; }

/* Course Detail Card */
.course-detail-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); align-self:start; position:sticky; top:84px; }
.course-card-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.course-card-body { padding:1.5rem; }
.course-price-big { font-size:2rem; font-weight:800; margin-bottom:1rem; color:var(--dark); }
.course-price-big strong { font-family:var(--font-display); }
.course-includes { list-style:none; margin-top:1.25rem; border-top:1px solid var(--gray-5); padding-top:1rem; }
.course-includes li { display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:var(--gray-1); padding:.35rem 0; }
.course-includes i { color:var(--primary); width:16px; }

/* Curriculum */
.curriculum-layout { max-width:800px; }
.curriculum h2 { font-family:var(--font-display); font-size:1.75rem; margin-bottom:1.25rem; }
.curriculum-list { border:1px solid var(--gray-5); border-radius:var(--radius); overflow:hidden; }
.curriculum-item {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem;
  border-bottom:1px solid var(--gray-5); transition:var(--transition);
}
.curriculum-item:last-child { border-bottom:none; }
.curriculum-item:hover { background:var(--gray-6); }
.curriculum-item.locked { opacity:.65; }
.curriculum-num { width:28px; height:28px; background:var(--gray-5); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0; }
.curriculum-info { flex:1; }
.curriculum-title { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; }
.curriculum-action { flex-shrink:0; }

/* ── Badges ─────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.2rem .65rem; border-radius:100px; font-size:.75rem; font-weight:700;
}
.badge-sm { font-size:.7rem; padding:.15rem .5rem; }
.badge-lg { font-size:.9rem; padding:.35rem 1rem; }
.badge-success  { background:#dcfce7; color:#166534; }
.badge-warning  { background:#fef9c3; color:#854d0e; }
.badge-danger   { background:#fee2e2; color:#991b1b; }
.badge-blue     { background:#dbeafe; color:#1e40af; }
.badge-purple   { background:#ede9fe; color:#5b21b6; }
.badge-info     { background:#cffafe; color:#155e75; }
.badge-secondary{ background:var(--gray-5); color:var(--gray-1); }

/* ── Progress Bar ───────────────────────── */
.progress-bar-wrap { display:flex; align-items:center; gap:.5rem; margin:.5rem 0; }
.progress-bar { flex:1; height:6px; background:var(--gray-5); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); border-radius:3px; transition:width .6s ease; }
.progress-bar-wrap span { font-size:.8rem; color:var(--gray-2); min-width:38px; text-align:right; }

/* ── Member Layout ──────────────────────── */
.member-layout { display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 68px); }
.member-sidebar { background:var(--dark); padding:1.5rem 0; position:sticky; top:68px; height:calc(100vh - 68px); overflow-y:auto; }
.member-profile { padding:1.25rem 1.5rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.75rem; }
.member-avatar { width:42px; height:42px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.member-info strong { display:block; color:white; font-size:.9rem; }
.member-info small { color:var(--gray-3); font-size:.75rem; }
.member-nav { padding:1rem .75rem; display:flex; flex-direction:column; gap:.25rem; }
.member-nav a { display:flex; align-items:center; gap:.6rem; padding:.65rem .9rem; border-radius:var(--radius-sm); color:var(--gray-3); font-size:.875rem; font-weight:500; transition:var(--transition); }
.member-nav a:hover { background:rgba(255,255,255,.07); color:white; }
.member-nav a.active { background:var(--primary); color:white; }
.member-nav a.text-danger { color:#f87171; }
.member-nav a.text-danger:hover { background:rgba(239,68,68,.15); color:#f87171; }
.member-content { padding:2rem; background:var(--gray-6); }
.member-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.75rem; }
.member-header h1 { font-family:var(--font-display); font-size:2rem; }
.member-header p { color:var(--gray-2); }

/* Member stats */
.member-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.mstat-card { background:var(--white); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow); }
.mstat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.25rem; flex-shrink:0; }
.bg-blue   { background:var(--primary); }
.bg-green  { background:var(--success); }
.bg-orange { background:var(--accent); }
.mstat-card strong { display:block; font-size:1.5rem; font-family:var(--font-display); }
.mstat-card span { font-size:.8rem; color:var(--gray-2); }

/* Section block */
.section-block { background:var(--white); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.section-block-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }
.section-block-header h2 { font-family:var(--font-display); font-size:1.4rem; }

/* My course card */
.my-courses-list { display:flex; flex-direction:column; gap:.75rem; }
.my-course-card { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--gray-5); border-radius:var(--radius-sm); transition:var(--transition); }
.my-course-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.my-course-thumb { width:72px; height:54px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.my-course-thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-placeholder-sm { width:100%; height:100%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.my-course-info { flex:1; min-width:0; }
.my-course-info h4 { font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:.2rem 0 .25rem; }

/* ── Checkout ────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 420px; gap:2rem; margin-top:1.5rem; }
.checkout-summary, .checkout-form-box { background:var(--white); border-radius:var(--radius); padding:1.75rem; box-shadow:var(--shadow); }
.checkout-summary h2, .checkout-form-box h2 { font-family:var(--font-display); font-size:1.4rem; margin-bottom:1.25rem; }
.checkout-course { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-top:1px solid var(--gray-5); border-bottom:1px solid var(--gray-5); margin-bottom:1rem; }
.checkout-thumb { width:80px; height:60px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.checkout-thumb img { width:100%; height:100%; object-fit:cover; }
.checkout-price-row { display:flex; justify-content:space-between; padding:.5rem 0; font-size:.9rem; }
.checkout-price-row.total { font-size:1.1rem; border-top:2px solid var(--gray-5); padding-top:.75rem; margin-top:.25rem; }
.payment-methods { display:grid; gap:.5rem; }
.payment-option { display:flex; align-items:center; gap:.65rem; padding:.65rem .9rem; border:2px solid var(--gray-4); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.payment-option:has(input:checked) { border-color:var(--primary); background:var(--primary-light); }
.payment-option input { accent-color:var(--primary); }
.payment-option span { font-weight:600; font-size:.875rem; }
.checkout-note { font-size:.8rem; color:var(--gray-2); text-align:center; margin-top:.75rem; }

/* ── Transactions list ──────────────────── */
.transactions-list { display:flex; flex-direction:column; gap:1rem; }
.tx-card { background:var(--white); border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow); }
.tx-thumb { width:80px; height:60px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.tx-thumb img { width:100%; height:100%; object-fit:cover; }
.tx-info { flex:1; min-width:0; }
.tx-info h4 { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.3rem; }
.tx-meta { display:flex; flex-wrap:wrap; gap:.75rem; font-size:.8rem; color:var(--gray-2); }
.tx-right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.tx-amount { font-weight:700; font-size:1rem; }

/* ── Learning Layout ────────────────────── */
.learning-layout { display:flex; height:calc(100vh - 68px); }
.learning-sidebar {
  width:340px; flex-shrink:0; background:#1a1d27;
  overflow-y:auto; border-right:1px solid #2d3149;
  display:flex; flex-direction:column;
}
.learning-sidebar-header { padding:1.25rem; border-bottom:1px solid #2d3149; }
.back-link { color:#94a3b8; font-size:.825rem; display:flex; align-items:center; gap:.4rem; margin-bottom:.75rem; }
.back-link:hover { color:#60a5fa; }
.learning-sidebar-header h3 { color:white; font-size:.95rem; font-weight:700; line-height:1.4; margin-bottom:.75rem; }
.material-list { flex:1; padding:.5rem; }
.material-item {
  display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem;
  border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition);
  text-decoration:none; margin-bottom:.25rem;
}
.material-item:hover { background:rgba(255,255,255,.06); }
.material-item.active { background:rgba(37,99,235,.25); border:1px solid rgba(37,99,235,.3); }
.material-item.done .mat-title { opacity:.7; }
.mat-num { width:24px; height:24px; background:rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#94a3b8; flex-shrink:0; }
.mat-info { flex:1; min-width:0; }
.mat-title { color:#e2e8f0; font-size:.85rem; font-weight:600; }
.mat-info small { color:#64748b; font-size:.75rem; }
.mat-icon { flex-shrink:0; font-size:.9rem; }
.learning-main { flex:1; overflow-y:auto; background:#0f1117; display:flex; flex-direction:column; }
.learning-topbar { display:flex; align-items:center; gap:1rem; padding:.85rem 1.25rem; background:#1a1d27; border-bottom:1px solid #2d3149; }
.btn-toggle-sidebar { background:none; border:none; color:#94a3b8; font-size:1.1rem; cursor:pointer; }
.learning-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.825rem; color:#94a3b8; }
.learning-breadcrumb span:last-child { color:white; }
.learning-content { flex:1; display:flex; flex-direction:column; }
.video-player-wrap { background:#000; width:100%; max-height:520px; }
.video-player { width:100%; max-height:520px; }
.pdf-viewer-wrap { flex:1; display:flex; flex-direction:column; padding:1rem; background:#1a1d27; }
.pdf-toolbar { display:flex; gap:.5rem; margin-bottom:.75rem; }
.pdf-viewer { flex:1; width:100%; min-height:500px; border:none; border-radius:var(--radius-sm); background:white; }
.text-content-wrap { padding:2rem; flex:1; overflow-y:auto; }
.text-content { color:#e2e8f0; line-height:1.8; max-width:800px; }
.learning-info { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; padding:1.25rem 1.5rem; background:#1a1d27; border-top:1px solid #2d3149; }
.learning-info-left h2 { color:white; font-size:1.25rem; margin-bottom:.35rem; }
.learning-info-right { display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; flex-shrink:0; }
.material-nav-btns { display:flex; gap:.5rem; }
.btn-mark-done { background:var(--success); color:white; border:none; }
.btn-mark-done.done { background:#1f4a38; color:#6ee7b7; }

/* ── CTA ────────────────────────────────── */
.cta-section { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); }
.cta-box { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:2rem 0; flex-wrap:wrap; }
.cta-content h2 { font-family:var(--font-display); font-size:2rem; color:white; margin-bottom:.35rem; }
.cta-content p { color:rgba(255,255,255,.8); }

/* ── Footer ─────────────────────────────── */
.footer { background:var(--dark); color:#94a3b8; padding:3rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-brand .nav-brand { color:white; margin-bottom:.75rem; }
.footer-brand p { font-size:.875rem; line-height:1.7; max-width:280px; }
.footer-links h4 { color:white; font-weight:700; margin-bottom:.75rem; }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:.4rem; }
.footer-links a { font-size:.875rem; color:#64748b; transition:var(--transition); }
.footer-links a:hover { color:#60a5fa; }
.footer-bottom { border-top:1px solid #1e293b; padding-top:1.25rem; text-align:center; font-size:.8rem; }

/* ── Auth ────────────────────────────────── */
.auth-body { min-height:100vh; display:flex; align-items:stretch; background:var(--dark); }
.auth-wrapper { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; width:100%; }
.auth-left { background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#1e293b 100%); padding:3rem; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.auth-brand a { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:white; display:flex; align-items:center; gap:.5rem; }
.auth-brand i { color:#60a5fa; }
.auth-left-content { flex:1; display:flex; flex-direction:column; justify-content:center; }
.auth-left-content h1 { font-family:var(--font-display); font-size:2.75rem; font-weight:900; color:white; line-height:1.2; margin-bottom:1rem; }
.auth-left-content h1 span { color:#60a5fa; }
.auth-left-content p { color:#94a3b8; font-size:1.05rem; line-height:1.7; max-width:380px; margin-bottom:2rem; }
.auth-stats { display:flex; gap:2rem; }
.auth-stats div { text-align:center; }
.auth-stats strong { display:block; font-family:var(--font-display); font-size:1.75rem; color:white; }
.auth-stats span { font-size:.8rem; color:#64748b; }
.auth-decoration { position:absolute; inset:0; pointer-events:none; }
.deco-circle { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.06); }
.deco-1 { width:400px; height:400px; top:-100px; right:-150px; }
.deco-2 { width:250px; height:250px; bottom:50px; left:-80px; }
.deco-3 { width:150px; height:150px; top:40%; right:10%; background:rgba(37,99,235,.08); }
.auth-right { background:var(--gray-6); display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-card { background:var(--white); border-radius:16px; padding:2.5rem; width:100%; max-width:440px; box-shadow:var(--shadow-lg); }
.auth-card-header { text-align:center; margin-bottom:1.75rem; }
.auth-card-header h2 { font-family:var(--font-display); font-size:1.75rem; font-weight:800; margin-bottom:.35rem; }
.auth-card-header p { color:var(--gray-2); }
.auth-form .form-group { margin-bottom:1.1rem; }
.auth-form .form-group label { display:flex; align-items:center; gap:.4rem; }
.auth-demo { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--gray-5); }
.auth-demo p { font-size:.8rem; color:var(--gray-2); margin-bottom:.5rem; }
.demo-accounts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.demo-account { display:flex; align-items:center; gap:.5rem; padding:.65rem .75rem; border:2px solid var(--gray-4); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.demo-account:hover { border-color:var(--primary); background:var(--primary-light); }
.demo-account i { color:var(--primary); font-size:1.1rem; }
.demo-account strong { display:block; font-size:.8rem; }
.demo-account small { display:block; color:var(--gray-2); font-size:.7rem; }
.auth-back { text-align:center; margin-top:1.25rem; }
.auth-back a { font-size:.875rem; color:var(--gray-2); display:flex; align-items:center; justify-content:center; gap:.35rem; }
.auth-back a:hover { color:var(--primary); }

/* ── Breadcrumb ─────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.825rem; color:var(--gray-2); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--primary); }
.breadcrumb i { font-size:.7rem; color:var(--gray-3); }

/* ── Pagination ─────────────────────────── */
.pagination-wrap { margin-top:2.5rem; display:flex; justify-content:center; }
.pagination-wrap ul { display:flex; list-style:none; gap:.35rem; }
.pagination-wrap ul li a, .pagination-wrap ul li span {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm);
  border:1px solid var(--gray-4); font-size:.875rem; font-weight:600;
  transition:var(--transition); color:var(--gray-1);
}
.pagination-wrap ul li.active a, .pagination-wrap ul li a:hover { background:var(--primary); border-color:var(--primary); color:white; }

/* ── Empty State ────────────────────────── */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--gray-2); }
.empty-state i { font-size:3rem; color:var(--gray-4); margin-bottom:1rem; }
.empty-state h3 { font-size:1.25rem; font-weight:700; color:var(--gray-1); margin-bottom:.5rem; }
.empty-state p { margin-bottom:1.25rem; }

/* ── Profile ────────────────────────────── */
.profile-avatar-section { text-align:center; margin-bottom:1.5rem; }
.profile-avatar-big { width:80px; height:80px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:2rem; font-weight:700; margin:0 auto; }

/* ── Current file/thumb ─────────────────── */
.current-thumbnail { margin-bottom:.75rem; }
.current-thumbnail img { width:120px; height:80px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:.4rem; }
.current-file { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background:var(--gray-6); border-radius:var(--radius-sm); margin-bottom:.5rem; font-size:.875rem; }
.input-icon-preview { display:flex; align-items:center; gap:.5rem; }
.icon-preview { width:36px; height:36px; background:var(--primary-light); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1rem; flex-shrink:0; }

/* ── Responsive ─────────────────────────── */
@media (max-width:1024px) {
  .course-detail-layout { grid-template-columns:1fr; }
  .course-detail-card { position:static; }
  .hero-visual { display:none; }
  .hero-content { grid-template-columns:1fr; }
  .hero h1 { font-size:2.5rem; }
  .checkout-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .member-layout { grid-template-columns:1fr; }
  .member-sidebar { position:fixed; left:-280px; width:280px; top:68px; height:calc(100vh - 68px); z-index:50; transition:var(--transition); }
  .member-sidebar.open { left:0; box-shadow:var(--shadow-lg); }
  .member-stats { grid-template-columns:1fr 1fr; }
  .auth-wrapper { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .learning-sidebar { position:fixed; left:-340px; z-index:50; transition:var(--transition); top:68px; height:calc(100vh - 68px); }
  .learning-sidebar.open { left:0; }
  .courses-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .filter-bar { flex-direction:column; }
  .hero-stats { gap:1.5rem; }
  .hero h1 { font-size:2rem; }
  .cta-box { flex-direction:column; text-align:center; }
}
@media (max-width:480px) {
  .member-stats { grid-template-columns:1fr; }
  .auth-card { padding:1.5rem; }
  .footer-grid { grid-template-columns:1fr; }
  .checkout-layout { gap:1rem; }
}