/* ═══════════════════════════════════════════════════
   base.css — Design tokens + reset + typography + layout
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --navy:        #1c1d1f;
  --navy-soft:   #2d2f31;
  --ink:         #3d3d3d;
  --ink-soft:    #6a6f73;
  --ink-faint:   #a1a8b4;
  --border:      #d1d7dc;
  --border-soft: #e8eaed;
  --surface:     #f7f9fa;
  --white:       #ffffff;
  --purple:      #5624d0;
  --purple-h:    #401b9c;
  --purple-soft: #ede8fc;
  --purple-bg:   #f5f0ff;
  --gold:        #eceb98;
  --gold-dark:   #b4690e;
  --green:       #1ea190;
  --green-bg:    #e8f8f7;
  --red:         #d1293d;
  --red-bg:      #fce8eb;
  --orange:      #f4821f;
  --star:        #e59819;
  --r:           4px;
  --r-md:        8px;
  --r-lg:        12px;
  --r-xl:        16px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.08);
  --shadow:      0 2px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.18);
  --font:        'Sora', sans-serif;
  --font-serif:  'DM Serif Display', serif;
  --font-mono:   'JetBrains Mono', monospace;
  --nav-h:       64px;
  --sidebar-w:   256px;
  --t:           .18s ease;
  --max-w:       1200px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--navy); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:var(--font); }
img { max-width:100%; display:block; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--surface); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); }

/* ── Typography ── */
.t-hero   { font-family:var(--font-serif); font-size:clamp(2rem,5vw,3.5rem); line-height:1.1; }
.t-h1     { font-size:2rem; font-weight:700; line-height:1.2; }
.t-h2     { font-size:1.5rem; font-weight:700; line-height:1.3; }
.t-h3     { font-size:1.125rem; font-weight:600; line-height:1.4; }
.t-body   { font-size:.9375rem; line-height:1.7; }
.t-sm     { font-size:.8125rem; }
.t-xs     { font-size:.75rem; }
.t-mono   { font-family:var(--font-mono); font-size:.875rem; }
.t-purple { color:var(--purple); }
.t-muted  { color:var(--ink-soft); }
.t-bold   { font-weight:700; }
.t-medium { font-weight:500; }
.t-center { text-align:center; }

/* ── Layout ── */
.container       { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.container-wide  { max-width:1400px; margin:0 auto; padding:0 32px; }
.container-sm    { max-width:720px; margin:0 auto; padding:0 24px; }
.flex            { display:flex; }
.flex-center     { display:flex; align-items:center; }
.flex-between    { display:flex; align-items:center; justify-content:space-between; }
.flex-col        { display:flex; flex-direction:column; }
.flex-wrap       { flex-wrap:wrap; }
.items-start     { align-items:flex-start; }
.gap-4  { gap:4px; }  .gap-8  { gap:8px; }  .gap-12 { gap:12px; }
.gap-16 { gap:16px; } .gap-20 { gap:20px; } .gap-24 { gap:24px; }
.gap-32 { gap:32px; } .gap-48 { gap:48px; }
.grid-2  { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3  { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4  { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.w-full  { width:100%; }
.mt-4    { margin-top:4px; }
.mt-8    { margin-top:8px; }
.mt-12   { margin-top:12px; }
.mt-16   { margin-top:16px; }
.mt-24   { margin-top:24px; }
.mt-32   { margin-top:32px; }
.mb-8    { margin-bottom:8px; }
.mb-16   { margin-bottom:16px; }
.mb-24   { margin-bottom:24px; }
.mb-32   { margin-bottom:32px; }
.p-16    { padding:16px; }
.p-20    { padding:20px; }
.p-24    { padding:24px; }
.p-32    { padding:32px; }
.page-section { padding:56px 0; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--r); font-size:.875rem; font-weight:600; transition:all var(--t); white-space:nowrap; line-height:1; }
.btn-primary   { background:var(--purple); color:#fff; border:2px solid var(--purple); }
.btn-primary:hover { background:var(--purple-h); border-color:var(--purple-h); }
.btn-outline   { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-outline:hover { background:var(--navy); color:#fff; }
.btn-outline-purple { background:transparent; color:var(--purple); border:2px solid var(--purple); }
.btn-outline-purple:hover { background:var(--purple); color:#fff; }
.btn-ghost     { background:transparent; color:var(--ink); border:2px solid transparent; }
.btn-ghost:hover { background:var(--surface); }
.btn-gold      { background:var(--gold-dark); color:#fff; border:2px solid var(--gold-dark); }
.btn-gold:hover { background:#9a5a0a; border-color:#9a5a0a; }
.btn-danger    { background:var(--red); color:#fff; border:2px solid var(--red); }
.btn-danger:hover { background:#b02030; border-color:#b02030; }
.btn-lg        { padding:14px 28px; font-size:1rem; }
.btn-sm        { padding:6px 14px; font-size:.8125rem; }
.btn-icon      { padding:8px; border-radius:var(--r); }
.btn:disabled  { opacity:.6; cursor:not-allowed; }

/* ── Inputs ── */
.input-group    { display:flex; flex-direction:column; gap:6px; }
.input-label    { font-size:.875rem; font-weight:600; color:var(--navy); }
.input          { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r); font-size:.9375rem; transition:border-color var(--t),box-shadow var(--t); outline:none; background:var(--white); color:var(--navy); }
.input:focus    { border-color:var(--purple); box-shadow:0 0 0 3px rgba(86,36,208,.12); }
.input-search   { padding-left:40px; }
.search-wrap    { position:relative; }
.search-icon    { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; display:flex; }
.select         { width:100%; padding:10px 36px 10px 14px; border:1px solid var(--border); border-radius:var(--r); font-size:.9375rem; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6f73' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--navy); cursor:pointer; outline:none; appearance:none; }
.select:focus   { border-color:var(--purple); box-shadow:0 0 0 3px rgba(86,36,208,.12); }
textarea.input  { resize:vertical; }

/* ── Dividers ── */
.divider    { height:1px; background:var(--border); }
.divider-v  { width:1px; background:var(--border); align-self:stretch; }

/* ── Badges ── */
.badge          { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-size:.75rem; font-weight:600; line-height:1; white-space:nowrap; }
.badge-purple   { background:var(--purple-soft); color:var(--purple); }
.badge-green    { background:var(--green-bg); color:var(--green); }
.badge-gold     { background:#fef9e7; color:var(--gold-dark); }
.badge-red      { background:var(--red-bg); color:var(--red); }
.badge-gray     { background:var(--surface); color:var(--ink); }
.badge-navy     { background:var(--navy); color:#fff; }

/* ── Stars ── */
.stars      { display:inline-flex; gap:1px; }
.star       { color:var(--star); font-size:.875rem; line-height:1; }
.star.empty { color:var(--border); }

/* ── Progress ── */
.progress-bar  { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:var(--purple); border-radius:4px; transition:width .4s ease; }
.progress-fill.green { background:var(--green); }
.progress-fill.red   { background:var(--red); }

/* ── Cards ── */
.card         { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:transform var(--t),box-shadow var(--t); }
.card:hover   { transform:translateY(-2px); box-shadow:var(--shadow); }
.card-body    { padding:16px; }

/* ── Alerts ── */
.alert         { padding:12px 16px; border-radius:var(--r); font-size:.875rem; font-weight:500; display:flex; align-items:flex-start; gap:10px; }
.alert-error   { background:var(--red-bg); color:var(--red); border:1px solid #f5c2c7; }
.alert-success { background:var(--green-bg); color:var(--green); border:1px solid #b7e5df; }
.alert-info    { background:var(--purple-soft); color:var(--purple); border:1px solid #d4c3f7; }
.alert-warn    { background:#fff8e1; color:#b45309; border:1px solid #fde68a; }

/* ── Toast ── */
.toast-container { position:fixed; top:80px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast           { padding:14px 20px; border-radius:var(--r-md); font-size:.875rem; font-weight:500; box-shadow:var(--shadow-lg); pointer-events:all; animation:toastIn .25s ease; display:flex; align-items:center; gap:10px; min-width:260px; max-width:380px; }
.toast-success   { background:var(--navy); color:#fff; }
.toast-error     { background:var(--red); color:#fff; }
.toast-info      { background:var(--purple); color:#fff; }
@keyframes toastIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }

/* ── Modal ── */
.modal-overlay  { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn .15s ease; }
.modal          { background:var(--white); border-radius:var(--r-lg); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:modalIn .2s ease; }
.modal-lg       { max-width:680px; }
.modal-header   { padding:24px 24px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-body     { padding:24px; display:flex; flex-direction:column; gap:16px; }
.modal-footer   { padding:0 24px 24px; display:flex; gap:12px; justify-content:flex-end; }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes modalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }

/* ── Tabs ── */
.tabs       { display:flex; border-bottom:2px solid var(--border); gap:0; overflow-x:auto; }
.tabs::-webkit-scrollbar { display:none; }
.tab        { padding:12px 20px; font-size:.9375rem; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; transition:color var(--t); white-space:nowrap; }
.tab:hover  { color:var(--navy); }
.tab.active { color:var(--purple); border-color:var(--purple); font-weight:600; }

/* ── Table ── */
.table           { width:100%; border-collapse:collapse; font-size:.9375rem; }
.table th        { text-align:left; padding:12px 16px; background:var(--surface); font-weight:600; font-size:.8125rem; color:var(--ink-soft); border-bottom:2px solid var(--border); text-transform:uppercase; letter-spacing:.04em; }
.table td        { padding:14px 16px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.table tr:hover td { background:var(--surface); }
.table tr:last-child td { border-bottom:none; }
.table-container { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }

/* ── Skeleton ── */
.skeleton { background:linear-gradient(90deg,var(--border-soft) 25%,var(--surface) 50%,var(--border-soft) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Misc ── */
.loading-spinner      { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state          { text-align:center; padding:64px 24px; color:var(--ink-soft); }
.empty-state .icon    { font-size:3rem; margin-bottom:16px; }
.section-header       { margin-bottom:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.truncate-2           { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.truncate-1           { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sticky-bar           { position:sticky; top:var(--nav-h); z-index:10; background:var(--white); border-bottom:1px solid var(--border); }
.hide-mobile          { display:block; }

/* ── Hero ── */
.hero          { background:var(--navy); padding:72px 0; position:relative; overflow:hidden; }
.hero::before  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 60% 50%,rgba(86,36,208,.25) 0%,transparent 70%); pointer-events:none; }
.hero-content  { position:relative; max-width:660px; }
.hero-sub      { color:rgba(255,255,255,.8); font-size:1.125rem; margin-bottom:28px; line-height:1.7; }
.hero-stats    { display:flex; gap:32px; flex-wrap:wrap; margin-top:32px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); }
.hero-stat-num { font-size:1.75rem; font-weight:800; color:#fff; line-height:1; }
.hero-stat-lbl { font-size:.8125rem; color:rgba(255,255,255,.6); margin-top:4px; }
.hero-search-bar { position:relative; max-width:520px; }
.hero-search-bar .input { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:100px; padding:14px 14px 14px 44px; font-size:1rem; }
.hero-search-bar .input::placeholder { color:rgba(255,255,255,.5); }
.hero-search-bar .input:focus { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); box-shadow:none; }
.hero-search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.6); pointer-events:none; display:flex; }
.hero-tag { margin-bottom:16px; }

/* ── Category Bar ── */
.cat-bar          { border-bottom:1px solid var(--border); background:var(--white); overflow-x:auto; }
.cat-bar::-webkit-scrollbar { display:none; }
.cat-inner        { display:flex; padding:0 24px; max-width:var(--max-w); margin:0 auto; }
.cat-btn          { padding:14px 18px; font-size:.875rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all var(--t); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; }
.cat-btn:hover    { color:var(--navy); }
.cat-btn.active   { color:var(--purple); border-color:var(--purple); font-weight:600; }

/* ── Exam Cards ── */
.exam-card-wrap  { position:relative; }
.exam-card       { cursor:pointer; }
.exam-card-thumb { aspect-ratio:16/9; position:relative; overflow:hidden; }
.exam-card-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.75rem; }
.exam-card-badge { position:absolute; top:10px; left:10px; }
.exam-card-body  { padding:14px; }
.exam-card-title { font-size:.9375rem; font-weight:700; line-height:1.35; color:var(--navy); margin-bottom:4px; }
.exam-card-instructor { font-size:.8125rem; color:var(--ink-soft); margin-bottom:6px; }
.exam-card-meta  { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.exam-card-rating { font-size:.8125rem; font-weight:700; color:var(--gold-dark); }
.exam-card-count  { font-size:.8125rem; color:var(--ink-soft); }
.exam-card-footer { display:flex; align-items:center; justify-content:space-between; }
.exam-card-price  { font-size:1rem; font-weight:700; }
.exam-card-meta-right { font-size:.8125rem; color:var(--ink-soft); display:flex; align-items:center; gap:4px; }

/* Hover popup */
.exam-card-popup { position:absolute; top:0; left:105%; z-index:50; width:320px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:20px; opacity:0; pointer-events:none; transform:translateX(-8px); transition:opacity .2s ease,transform .2s ease; }
.exam-card-wrap:hover .exam-card-popup { opacity:1; pointer-events:all; transform:translateX(0); }
.exam-card-wrap:nth-child(4n) .exam-card-popup,.exam-card-wrap:nth-child(4n-1) .exam-card-popup { left:auto; right:105%; }
.popup-feature { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }

/* ── Features section ── */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.feature-card { text-align:center; padding:32px 24px; background:var(--white); border-radius:var(--r-lg); border:1px solid var(--border); }
.feature-icon { width:56px; height:56px; border-radius:50%; background:var(--purple-bg); margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }

/* ── Footer ── */
.footer           { background:var(--navy); color:rgba(255,255,255,.6); padding:48px 0 32px; }
.footer-grid      { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo      { font-family:var(--font-serif); font-size:1.5rem; color:#fff; display:block; margin-bottom:12px; }
.footer-desc      { font-size:.875rem; line-height:1.8; margin-bottom:16px; }
.footer-social    { display:flex; gap:10px; }
.footer-social-btn { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.875rem; transition:background var(--t); }
.footer-social-btn:hover { background:rgba(255,255,255,.15); }
.footer .footer-grid h4    { color:#fff; font-size:.9375rem; font-weight:600; margin-bottom:16px; }
.footer .footer-grid a     { display:block; font-size:.875rem; margin-bottom:10px; color:rgba(255,255,255,.6); transition:color var(--t); }
.footer .footer-grid a:hover { color:#fff; }
.footer-bottom       { padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; font-size:.8125rem; flex-wrap:wrap; gap:12px; }
.footer-bottom-links { display:flex; gap:16px; }
.footer-bottom-links a { color:rgba(255,255,255,.5); transition:color var(--t); }
.footer-bottom-links a:hover { color:#fff; }

/* ── Responsive ── */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); }
  .hide-mobile { display:none; }
  .hero { padding:48px 0; }
  .hero-stats { gap:20px; }
  .feature-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:480px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .container,.container-wide { padding:0 16px; }
  .exam-card-popup { display:none; }
}