/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#111827;background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}

/* ── Variables ── */
:root{
  --blue:#1a56db;--blue-dark:#1342a3;--blue-light:#eff6ff;
  --green:#059669;--green-light:#ecfdf5;
  --red:#dc2626;--red-light:#fef2f2;
  --yellow:#d97706;--yellow-light:#fffbeb;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;
  --gray-700:#374151;--gray-900:#111827;
  --radius:10px;--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
}

/* ── Typography ── */
h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-0.02em}
h2{font-size:clamp(1.35rem,3vw,1.875rem);font-weight:700;line-height:1.3}
h3{font-size:1.25rem;font-weight:600;line-height:1.4}
h4{font-size:1rem;font-weight:600}
p{color:var(--gray-700)}

/* ── Layout ── */
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section-sm{padding:40px 0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.flex{display:flex;align-items:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}

/* ── Navbar ── */
.navbar{background:#fff;border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-size:1.25rem;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px}
.nav-logo span{color:var(--gray-900)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--gray-700);transition:all .15s}
.nav-links a:hover,.nav-links a.active{background:var(--blue-light);color:var(--blue)}
.nav-cta{background:var(--blue);color:#fff!important;border-radius:8px;padding:8px 16px!important}
.nav-cta:hover{background:var(--blue-dark)!important;color:#fff!important}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:.3s}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;border-bottom:1px solid var(--gray-200);padding:12px;gap:4px;align-items:stretch}
  .nav-links.open{display:flex}
  .nav-toggle{display:flex}
}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,#eff6ff 0%,#e0f2fe 50%,#f0fdf4 100%);padding:80px 0 64px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--blue-light);color:var(--blue);font-size:13px;font-weight:500;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.hero h1{margin-bottom:16px}
.hero p{font-size:1.125rem;color:var(--gray-500);margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.hero-stat strong{display:block;font-size:1.5rem;font-weight:700;color:var(--blue)}
.hero-stat span{font-size:13px;color:var(--gray-500)}
.hero-img{border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;background:var(--blue-light);min-height:300px;display:flex;align-items:center;justify-content:center}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr}.hero-img{display:none}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;border:none;transition:all .15s;cursor:pointer;text-align:center}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--blue);border:2px solid var(--blue)}.btn-outline:hover{background:var(--blue-light)}
.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:#047857}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:14px 32px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-block{width:100%;justify-content:center}

/* ── Cards ── */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);overflow:hidden;transition:all .2s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--gray-300)}
.card-img{width:100%;height:180px;object-fit:cover;background:var(--gray-100)}
.card-img-placeholder{width:100%;height:180px;background:linear-gradient(135deg,var(--blue-light),#e0f2fe);display:flex;align-items:center;justify-content:center;font-size:3rem}
.card-body{padding:20px}
.card-title{font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:8px;line-height:1.4}
.card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-green{background:var(--green-light);color:var(--green)}
.badge-yellow{background:var(--yellow-light);color:var(--yellow)}
.card-desc{font-size:13px;color:var(--gray-500);margin-bottom:14px;line-height:1.5}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.price{font-size:1.125rem;font-weight:700;color:var(--blue)}
.price-free{color:var(--green)}

/* ── Course page ── */
.course-hero{background:linear-gradient(135deg,#1e3a8a 0%,#1a56db 100%);color:#fff;padding:60px 0}
.course-hero h1{color:#fff;margin-bottom:12px}
.course-hero p{color:rgba(255,255,255,.85);font-size:1.05rem}
.course-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;margin-top:-32px}
.course-sidebar{position:sticky;top:84px;height:fit-content}
.buy-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px;border:1px solid var(--gray-200)}
.buy-price{font-size:2rem;font-weight:700;color:var(--blue);margin-bottom:4px}
.buy-price-original{font-size:1rem;color:var(--gray-400);text-decoration:line-through;margin-bottom:16px}
.chapter-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.chapter-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;background:var(--gray-50);border:1px solid var(--gray-200);font-size:14px;cursor:pointer;transition:.15s}
.chapter-item:hover{background:var(--blue-light);border-color:var(--blue);color:var(--blue)}
.chapter-item.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.chapter-num{width:28px;height:28px;border-radius:50%;background:var(--blue-light);color:var(--blue);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chapter-item.active .chapter-num{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:768px){.course-layout{grid-template-columns:1fr}.course-sidebar{position:static}}

/* ── Learning area ── */
.learn-area{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);overflow:hidden}
.learn-header{padding:20px 24px;border-bottom:1px solid var(--gray-200);background:var(--gray-50);display:flex;align-items:center;justify-content:space-between}
.learn-content{padding:24px;min-height:300px;line-height:1.8;color:var(--gray-700)}
.learn-content h2,h3,h4{color:var(--gray-900);margin:20px 0 8px}
.learn-content p{margin-bottom:12px}
.learn-content ul,ol{padding-left:20px;margin-bottom:12px}
.learn-content li{margin-bottom:4px}
.learn-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.learn-content th{background:var(--blue);color:#fff;padding:10px 12px;text-align:left}
.learn-content td{padding:10px 12px;border-bottom:1px solid var(--gray-200)}
.learn-content tr:nth-child(even) td{background:var(--gray-50)}
.learn-nav{display:flex;gap:12px;padding:16px 24px;border-top:1px solid var(--gray-200);justify-content:space-between}

/* ── Test / MCQ ── */
.test-area{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);padding:24px}
.question-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:20px;margin-bottom:16px}
.question-num{font-size:12px;font-weight:600;color:var(--blue);text-transform:uppercase;margin-bottom:8px}
.question-text{font-weight:500;color:var(--gray-900);margin-bottom:14px}
.option-list{display:flex;flex-direction:column;gap:8px}
.option-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--gray-200);cursor:pointer;transition:.15s;font-size:14px}
.option-item:hover{border-color:var(--blue);background:var(--blue-light)}
.option-item.selected{border-color:var(--blue);background:var(--blue);color:#fff}
.option-item.correct{border-color:var(--green);background:var(--green-light);color:var(--green)}
.option-item.wrong{border-color:var(--red);background:var(--red-light);color:var(--red)}
.option-radio{width:18px;height:18px;border:2px solid var(--gray-300);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.option-item.selected .option-radio{border-color:#fff;background:#fff}
.option-item.selected .option-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* ── Result ── */
.result-box{text-align:center;padding:40px 24px}
.result-score{font-size:4rem;font-weight:800;color:var(--blue);line-height:1}
.result-grade{font-size:1.5rem;font-weight:700;margin:8px 0}
.result-passed{color:var(--green)}.result-failed{color:var(--red)}
.result-cert{background:var(--green-light);border:1px solid var(--green);border-radius:var(--radius);padding:20px;margin:20px 0;text-align:center}

/* ── Forms ── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:14px;font-weight:500;color:var(--gray-700);margin-bottom:6px}
.form-control{width:100%;padding:10px 14px;border:1px solid var(--gray-300);border-radius:8px;font-size:15px;color:var(--gray-900);background:#fff;transition:.15s}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.form-control.error{border-color:var(--red)}
.form-error{font-size:12px;color:var(--red);margin-top:4px}
textarea.form-control{resize:vertical;min-height:100px}
select.form-control{cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ── Alert ── */
.alert{padding:14px 18px;border-radius:8px;font-size:14px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.alert-info{background:var(--blue-light);color:var(--blue);border:1px solid #bfdbfe}
.alert-success{background:var(--green-light);color:var(--green);border:1px solid #a7f3d0}
.alert-error{background:var(--red-light);color:var(--red);border:1px solid #fecaca}
.alert-warning{background:var(--yellow-light);color:var(--yellow);border:1px solid #fde68a}

/* ── OTP Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:16px;padding:32px;max-width:420px;width:100%;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.modal h3{margin-bottom:8px}
.otp-input{display:flex;gap:8px;justify-content:center;margin:20px 0}
.otp-digit{width:52px;height:60px;border:2px solid var(--gray-300);border-radius:10px;font-size:1.5rem;font-weight:700;text-align:center;color:var(--gray-900);transition:.15s}
.otp-digit:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.1)}

/* ── Footer ── */
.footer{background:var(--gray-900);color:rgba(255,255,255,.7);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand{font-size:1.25rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.footer h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:12px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer ul li a{font-size:14px;color:rgba(255,255,255,.6);transition:.15s}
.footer ul li a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ── Admin ── */
.admin-layout{display:flex;min-height:100vh;background:var(--gray-50)}
.admin-sidebar{width:240px;background:#1e293b;color:#fff;flex-shrink:0;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50}
.admin-sidebar-logo{padding:20px;font-size:1rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px}
.admin-nav{padding:12px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:2px;transition:.15s}
.admin-nav a:hover,.admin-nav a.active{background:rgba(255,255,255,.1);color:#fff}
.admin-nav .nav-section{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.3);padding:14px 14px 6px}
.admin-main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.admin-topbar{background:#fff;border-bottom:1px solid var(--gray-200);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.admin-topbar h1{font-size:1.125rem;font-weight:600;color:var(--gray-900)}
.admin-content{padding:24px;flex:1}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);padding:20px}
.stat-value{font-size:1.75rem;font-weight:700;color:var(--blue);margin-bottom:4px}
.stat-label{font-size:13px;color:var(--gray-500)}
.table-wrap{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);overflow:hidden}
.table-header{padding:16px 20px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.table-header h3{font-size:1rem;font-weight:600}
table.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{background:var(--gray-50);padding:10px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);border-bottom:1px solid var(--gray-200)}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--gray-50)}
.status-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600}
.status-active{background:var(--green-light);color:var(--green)}
.status-draft{background:var(--gray-100);color:var(--gray-500)}
.status-paid{background:var(--green-light);color:var(--green)}
.status-failed{background:var(--red-light);color:var(--red)}
.action-btns{display:flex;gap:6px;flex-wrap:wrap}
.admin-card{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);padding:24px;margin-bottom:20px}
.admin-card h3{font-size:1rem;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--gray-200)}
@media(max-width:768px){.admin-sidebar{width:100%;position:relative;height:auto}.admin-main{margin-left:0}}

/* ── Timer ── */
.timer{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--blue-light);color:var(--blue);border-radius:999px;font-size:14px;font-weight:600}
.timer.warning{background:var(--yellow-light);color:var(--yellow)}
.timer.danger{background:var(--red-light);color:var(--red)}

/* ── Progress ── */
.progress{background:var(--gray-200);border-radius:999px;height:8px;overflow:hidden;margin:12px 0}
.progress-bar{height:100%;background:var(--blue);border-radius:999px;transition:width .3s}

/* ── Embed widget ── */
.widget-wrap{max-width:100%;font-size:14px}
.widget-course-list{display:flex;flex-direction:column;gap:12px}
.widget-course-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--gray-200);border-radius:8px;cursor:pointer;transition:.15s;background:#fff}
.widget-course-item:hover{border-color:var(--blue);background:var(--blue-light)}
.widget-course-img{width:72px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--gray-100)}
.widget-course-title{font-weight:600;color:var(--gray-900);font-size:13px;margin-bottom:4px;line-height:1.3}
.widget-price{color:var(--blue);font-weight:700;font-size:13px}

/* ── Utilities ── */
.text-center{text-align:center}
.text-sm{font-size:13px}
.text-gray{color:var(--gray-500)}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider{border:none;border-top:1px solid var(--gray-200);margin:24px 0}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--gray-100);border-radius:999px;font-size:12px;color:var(--gray-600);font-weight:500}
.spin{animation:spin .8s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Complete overhaul
   Breakpoints: 768px (tablet), 480px (mobile), 360px (small mobile)
   ════════════════════════════════════════════════════════════════ */

/* ── Base mobile resets ── */
@media (max-width:768px) {
  html { font-size:15px; }
  .container { padding:0 16px; }
  .section { padding:40px 0; }
  h1 { font-size:1.6rem; }
  h2 { font-size:1.3rem; }
}

/* ── Navbar mobile ── */
@media (max-width:768px) {
  .nav-inner { height:56px; }
  .nav-logo { font-size:1.1rem; }
  .nav-links {
    top:56px;
    padding:8px 12px 16px;
    box-shadow:0 8px 16px rgba(0,0,0,.08);
  }
  .nav-links a { padding:10px 12px; font-size:14px; }
  .nav-cta { text-align:center; }
}

/* ── Hero mobile ── */
@media (max-width:768px) {
  .hero { padding:48px 0 36px; }
  .hero h1 { font-size:1.65rem; }
  .hero p { font-size:1rem; }
  .hero-stats { gap:16px; }
  .hero-stat strong { font-size:1.25rem; }
}

/* ── Trust bar mobile ── */
@media (max-width:600px) {
  .trust-bar { flex-direction:column; gap:10px; align-items:flex-start; padding:16px; }
}

/* ── Course layout mobile (sidebar below content) ── */
@media (max-width:900px) {
  .course-layout {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }
  .course-sidebar { position:static !important; order:2; }
  .course-layout > div:first-child { order:1; }
}

/* ── Buy card mobile ── */
@media (max-width:768px) {
  .buy-card { padding:20px 16px; }
  .buy-price { font-size:1.75rem; }
}

/* ── What you'll learn grid: 2-col → 1-col on mobile ── */
@media (max-width:600px) {
  .learn-2col { grid-template-columns:1fr !important; }
}

/* ── Learn area mobile ── */
@media (max-width:600px) {
  .learn-header { padding:14px 16px; flex-wrap:wrap; gap:8px; }
  .learn-content { padding:16px; font-size:14px; }
  .learn-nav { padding:12px 16px; }
  .learn-nav button { font-size:13px; padding:8px 14px; }
}

/* ── MCQ options mobile ── */
@media (max-width:600px) {
  .option-item { padding:10px 12px; font-size:13px; }
  .test-area { padding:16px; }
}

/* ── OTP modal mobile ── */
@media (max-width:480px) {
  .modal { padding:24px 16px; }
  .otp-digit { width:40px; height:52px; font-size:1.25rem; }
  .otp-input { gap:5px; }
}

/* ── Cards grid mobile ── */
@media (max-width:480px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; gap:16px; }
  .card-img { height:160px; }
}
@media (min-width:481px) and (max-width:768px) {
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* ── Footer mobile ── */
@media (max-width:480px) {
  .footer { padding:32px 0 16px; }
  .footer-grid { gap:20px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:8px; }
}

/* ── Buttons mobile ── */
@media (max-width:480px) {
  .btn-lg { padding:12px 20px; font-size:14px; }
  .btn { font-size:14px; }
  .hero-btns { flex-direction:column; }
  .hero-btns .btn { width:100%; justify-content:center; }
}

/* ── Tables mobile — horizontal scroll ── */
@media (max-width:768px) {
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .admin-table { min-width:600px; }
  .admin-table th, .admin-table td { padding:10px 12px; font-size:12px; }
}

/* ── Admin layout mobile ── */
@media (max-width:900px) {
  .admin-sidebar {
    width:100%;
    position:fixed;
    top:0; left:-100%;
    height:100vh;
    z-index:200;
    transition:left .25s;
    overflow-y:auto;
  }
  .admin-sidebar.open { left:0; }
  .admin-main { margin-left:0; }
  .admin-topbar { padding:12px 16px; }
  .admin-content { padding:16px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .admin-menu-toggle {
    display:flex !important;
    align-items:center;
    gap:8px;
    background:none;
    border:1px solid var(--gray-200);
    border-radius:8px;
    padding:6px 12px;
    font-size:14px;
    cursor:pointer;
    color:var(--gray-700);
  }
  .admin-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:199;
  }
  .admin-overlay.open { display:block; }
}
@media (min-width:901px) {
  .admin-menu-toggle { display:none !important; }
}
@media (max-width:600px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .action-btns { flex-wrap:wrap; gap:4px; }
  .action-btns .btn { padding:6px 10px; font-size:12px; }
}
@media (max-width:400px) {
  .stats-grid { grid-template-columns:1fr; }
}

/* ── Admin forms mobile ── */
@media (max-width:600px) {
  .form-row { grid-template-columns:1fr !important; }
  .admin-card { padding:16px; }
}

/* ── Admin 2-col grids mobile ── */
@media (max-width:768px) {
  .admin-2col { grid-template-columns:1fr !important; }
}

/* ── Affiliate dashboard mobile ── */
@media (max-width:768px) {
  .aff-grid { grid-template-columns:1fr !important; }
}

/* ── Course page hero mobile ── */
@media (max-width:768px) {
  .course-hero { padding:36px 0 24px; }
  .course-hero h1 { font-size:1.4rem; }
}

/* ── Store product page mobile ── */
@media (max-width:768px) {
  .store-hero { padding:36px 0 24px; }
}

/* ── Download page mobile ── */
@media (max-width:480px) {
  #certDlBtns { flex-direction:column; }
  #certDlBtns .btn { width:100%; justify-content:center; }
}

/* ── Freebie modal iframe mobile ── */
@media (max-width:600px) {
  #freebieFrame, #freebieHomeFrame, #cFreebieFrame { height:380px !important; }
  .freebie-modal-footer { flex-direction:column; align-items:stretch; }
  .freebie-modal-footer .btn { width:100%; justify-content:center; }
}

/* ── Verify page mobile ── */
@media (max-width:480px) {
  .verify-cert-info { font-size:13px; }
}

/* ── Embed widget responsive ── */
@media (max-width:480px) {
  .w-body { padding:10px; }
  .w-item { padding:8px; gap:8px; }
  .w-img { width:52px; height:42px; }
}

/* ── Touch targets minimum 44px ── */
@media (max-width:768px) {
  .btn, button, a.btn {
    min-height:44px;
  }
  .chapter-item { min-height:44px; }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], select, textarea {
    font-size:16px !important; /* Prevents iOS zoom on focus */
    min-height:44px;
  }
  .otp-digit { font-size:20px !important; }
}

/* ── Prevent horizontal overflow ── */
* { box-sizing:border-box; }
body { overflow-x:hidden; }
img { max-width:100%; }
pre, code { white-space:pre-wrap; word-break:break-word; }
table { word-break:break-word; }

/* ── Mobile-specific spacing utilities ── */
@media (max-width:480px) {
  .mt-mobile-0 { margin-top:0 !important; }
  .section { padding:32px 0; }
  .section-sm { padding:24px 0; }
}