:root{
  --bg:#0b1020;
  --bg-soft:#121a30;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2ff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --primary:#4f46e5;
  --primary-2:#7c3aed;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --shadow:0 12px 40px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(79,70,229,.18), transparent 24%),
    radial-gradient(circle at top right, rgba(124,58,237,.14), transparent 18%),
    linear-gradient(180deg, #f8fbff 0%, #f6f8fc 48%, #f4f7fb 100%);
  min-height:100vh;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:24px}
.page-shell{padding:24px 0 40px}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px);
  background:linear-gradient(135deg, rgba(11,16,32,.93), rgba(30,41,59,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(2,6,23,.28);
}
.topbar .container{padding-top:16px;padding-bottom:16px}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(79,70,229,.35)
}
.brand-copy{min-width:0}
.brand-copy strong{display:block;font-size:1rem;color:#fff;letter-spacing:.01em}
.brand-copy span{display:block;font-size:.84rem;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toggle{display:none;border:none;background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links a,.nav-chip{
  text-decoration:none;color:rgba(255,255,255,.86);padding:10px 14px;border-radius:999px;
  transition:.22s ease;background:transparent;border:1px solid transparent;font-weight:600;font-size:.94rem
}
.nav-links a:hover,.nav-links a.active,.nav-chip{
  color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)
}
.nav-user{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav-avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  background:linear-gradient(135deg, #0ea5e9, #4f46e5)
}
.user-meta{line-height:1.2}
.user-meta strong{display:block;color:#fff;font-size:.93rem}
.user-meta span{display:block;color:rgba(255,255,255,.66);font-size:.78rem;text-transform:capitalize}
.hero-banner{
  margin-bottom:22px;padding:28px;border-radius:var(--radius-xl);position:relative;overflow:hidden;
  background:linear-gradient(135deg, rgba(79,70,229,.98), rgba(124,58,237,.95));color:#fff;box-shadow:0 20px 50px rgba(79,70,229,.28)
}
.hero-banner::after{content:"";position:absolute;inset:auto -80px -80px auto;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-banner h1,.hero-banner h2{margin:0 0 10px}
.hero-banner p{margin:0;color:rgba(255,255,255,.86);max-width:760px}
.card{
  background:rgba(255,255,255,.9);border:1px solid rgba(226,232,240,.92);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow);margin-bottom:20px;backdrop-filter:blur(10px)
}
.card.compact{padding:18px}
.card.soft{background:linear-gradient(180deg, #ffffff, #f8fbff)}
.card-header,.section-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.card-header h2,.card-header h3,.section-header h2,.section-header h3{margin:0}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:12px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-weight:700;line-height:1;transition:.2s ease;box-shadow:var(--shadow-soft)
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff}
.btn-secondary{background:#fff;color:var(--text);border-color:var(--line)}
.btn-danger{background:linear-gradient(135deg, #ef4444, #dc2626);color:#fff}
.btn-success{background:linear-gradient(135deg, #22c55e, #16a34a);color:#fff}
.btn-ghost{background:rgba(79,70,229,.08);color:var(--primary);border-color:rgba(79,70,229,.12)}
.btn-block{width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-group{margin-bottom:16px}
.form-group.half{margin-bottom:0}
label{display:block;margin-bottom:7px;font-weight:700;color:#334155}
input,textarea,select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  box-sizing:border-box;background:#fff;color:var(--text);transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:rgba(79,70,229,.55);box-shadow:0 0 0 4px rgba(79,70,229,.12)
}
textarea{min-height:120px;resize:vertical}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:700px}
th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.84rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;background:#f8fafc}
tr:last-child td{border-bottom:none}
.badge{padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.badge-success{background:#dcfce7;color:#166534}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-info{background:#e0e7ff;color:#4338ca}
.stats-grid,.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat-card{position:relative;overflow:hidden}
.stat-card h3{margin:0 0 6px;font-size:2rem;line-height:1}
.stat-card p{margin:0;color:var(--muted);font-weight:600}
.progress{background:#e2e8f0;border-radius:999px;height:10px;overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg, var(--primary), var(--primary-2))}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.grid-sidebar{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.course-card{padding:0;overflow:hidden}
.course-card .card-body{padding:20px}
.cover{aspect-ratio:16/9;object-fit:cover;background:#dbeafe}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.85rem;font-weight:700;margin-bottom:12px}
.info-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.info-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.sidebar-list{display:flex;flex-direction:column;gap:10px}
.lesson-link{display:block;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:12px 14px;transition:.2s ease}
.lesson-link:hover{border-color:#c7d2fe;transform:translateY(-1px)}
.lesson-link.active{border-color:#818cf8;background:#eef2ff;box-shadow:inset 0 0 0 1px rgba(99,102,241,.2)}
.video-shell{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:18px;background:#020617;box-shadow:0 14px 34px rgba(2,6,23,.18)}
.video-shell iframe,.video-shell video{position:absolute;inset:0;width:100%;height:100%;border:0}
.material-item,.inline-list-item{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;background:#fff}
.alert{padding:15px 16px;border-radius:14px;border:1px solid transparent;margin-bottom:20px;font-weight:600}
.alert-success{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.alert-danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.alert-warning{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.alert-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.footer{padding:10px 0 28px;color:#64748b;font-size:.92rem}
.responsive-note{font-size:.9rem;color:var(--muted)}
.mobile-only{display:none}
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px 12px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #25d366, #128c47);
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 36px rgba(18,140,71,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px rgba(18,140,71,.34);
}
.whatsapp-float__icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  flex-shrink:0;
}
.whatsapp-float__icon svg{
  width:24px;
  height:24px;
}
.whatsapp-float__label{
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
@media (max-width: 991px){
  .grid-2,.grid-sidebar{grid-template-columns:1fr}
  .stats-grid,.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-toggle{display:inline-flex}
  .nav-links-wrap{display:none;width:100%}
  .nav-links-wrap.open{display:block}
  .navbar{flex-wrap:wrap}
  .nav-links{padding-top:8px;flex-direction:column;align-items:stretch}
  .nav-user{justify-content:flex-start;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px}
}
@media (max-width: 640px){
  .container{padding:16px}
  .page-shell{padding-top:16px}
  .card{padding:18px;border-radius:16px}
  .hero-banner{padding:22px;border-radius:18px}
  .stats-grid,.dashboard-grid,.form-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .mobile-only{display:block}
  .desktop-inline{display:none}
  .brand-copy span{display:none}
  .whatsapp-float{
    right:14px;
    bottom:14px;
    padding:12px;
  }
  .whatsapp-float__label{
    display:none;
  }
  th,td{padding:12px}
}

/* ===== Checkout v2 ===== */
.checkout-page{display:flex;flex-direction:column;gap:24px}
.checkout-hero{
  display:grid;grid-template-columns:minmax(0,1.2fr) 320px;gap:22px;align-items:stretch;
  padding:30px;border-radius:28px;background:
    radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
  color:#fff;box-shadow:0 24px 60px rgba(15,23,42,.24)
}
.checkout-pill{
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;

    color: #c7d2fe;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);

    width: fit-content;
    margin-bottom: 10px;
}
.checkout-hero h1{margin:14px 0 10px;font-size:clamp(2rem,4vw,3.1rem);line-height:1.05}
.checkout-hero p{margin:0;color:rgba(255,255,255,.82);max-width:720px;font-size:1rem}
.checkout-hero__content{display:flex;flex-direction:column;justify-content:center}
.checkout-hero__points{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.checkout-hero__points span{
  display:inline-flex;align-items:center;padding:9px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.88rem;font-weight:700;color:#fff
}
.checkout-hero__price{
  border-radius:24px;padding:22px;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:center;backdrop-filter:blur(12px)
}
.checkout-hero__label{font-size:.84rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.64)}
.checkout-hero__amount{font-size:clamp(2rem,3vw,2.8rem);font-weight:900;line-height:1;margin:10px 0;color:#fff}
.checkout-hero__meta{font-size:.95rem;color:rgba(255,255,255,.76);line-height:1.5}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.1fr) 390px;gap:22px;align-items:start}
.checkout-panel{
  background:rgba(255,255,255,.88);border:1px solid rgba(226,232,240,.88);border-radius:28px;padding:24px;
  box-shadow:0 14px 44px rgba(15,23,42,.08);backdrop-filter:blur(10px)
}
.checkout-panel--summary{position:sticky;top:96px;padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none}
.checkout-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section-kicker{display:inline-block;margin-bottom:8px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#6366f1}
.checkout-section-head h2{margin:0 0 6px;font-size:1.7rem}
.checkout-section-head p{margin:0;color:var(--muted)}
.payment-badge{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.86rem;font-weight:800;border:1px solid #c7d2fe}
.checkout-notice{margin-bottom:16px;padding:14px 16px;border-radius:16px;border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;font-weight:700}
.checkout-notice--error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.checkout-notice--success{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.checkout-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.checkout-field--full{grid-column:1/-1}
.checkout-field{margin-bottom:0}
.checkout-field small{display:block;margin-top:7px;color:#64748b;font-size:.84rem}
.checkout-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.checkout-trust-card{padding:16px;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid #e2e8f0}
.checkout-trust-card strong{display:block;margin-bottom:6px;font-size:.98rem}
.checkout-trust-card span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5}
.checkout-action-bar{margin-top:8px}
.checkout-pay-btn{padding:16px 18px;border-radius:18px;min-height:72px;flex-direction:column;align-items:flex-start}
.checkout-pay-btn__label{font-size:1.08rem;font-weight:900}
.checkout-pay-btn__sub{font-size:.88rem;color:rgba(255,255,255,.84);font-weight:600}
.checkout-footnote{margin:12px 2px 0;color:var(--muted);font-size:.9rem;line-height:1.6}
.checkout-summary-card{
  overflow:hidden;border-radius:28px;border:1px solid rgba(226,232,240,.92);background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 14px 44px rgba(15,23,42,.08);margin-bottom:18px
}
.checkout-summary-media{position:relative;min-height:220px;background:linear-gradient(135deg,#e0e7ff,#ede9fe)}
.checkout-summary-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.checkout-summary-media--placeholder{display:grid;place-items:center;padding:24px}
.checkout-summary-placeholder{display:flex;flex-direction:column;gap:10px;color:#312e81;text-align:left;max-width:260px}
.checkout-summary-placeholder span{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5}
.checkout-summary-placeholder strong{font-size:1.6rem;line-height:1.15}
.checkout-summary-body{padding:22px}
.checkout-summary-body h3{margin:0 0 10px;font-size:1.45rem}
.checkout-summary-body p{margin:0 0 18px;color:var(--muted);line-height:1.6}
.checkout-price-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0;margin-bottom:16px}
.checkout-price-line span{color:#475569;font-weight:700}
.checkout-price-line strong{font-size:1.3rem}
.checkout-summary-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.checkout-summary-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.checkout-summary-list span{color:#64748b;font-weight:700}
.checkout-summary-list strong{text-align:right}
.checkout-feature-list{display:grid;gap:12px}
.checkout-feature-item{padding:14px 0;border-top:1px solid rgba(226,232,240,.9)}
.checkout-feature-item:first-child{border-top:none;padding-top:0}
.checkout-feature-item strong{display:block;margin-bottom:5px}
.checkout-feature-item span{display:block;color:var(--muted);font-size:.92rem}
@media (max-width: 1100px){
  .checkout-layout{grid-template-columns:1fr}
  .checkout-panel--summary{position:static}
}
@media (max-width: 900px){
  .checkout-hero{grid-template-columns:1fr}
  .checkout-trust-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .checkout-hero,.checkout-panel{padding:20px;border-radius:22px}
  .checkout-form-grid{grid-template-columns:1fr}
  .checkout-pay-btn{align-items:center;text-align:center}
  .checkout-hero__points{gap:8px}
  .checkout-hero__points span{width:100%;justify-content:center}
}