:root{--vata-bg:#f8fafc;--vata-card:#fff;--vata-ink:#0f172a;--vata-muted:#64748b;--vata-line:#e5e7eb;--vata-accent:#2563eb;--vata-green:#16a34a;--vata-warn:#f59e0b;--vata-shadow:0 18px 45px rgba(15,23,42,.07)}
.vata-wrap{max-width:1120px;margin:24px auto;padding:18px;border-radius:24px;background:#f8fafc;color:var(--vata-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vata-hero,.vata-card{background:var(--vata-card);border:1px solid var(--vata-line);border-radius:22px;box-shadow:var(--vata-shadow)}
.vata-hero{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;padding:24px;align-items:start}
.vata-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900;line-height:1}
.vata-hero h2{margin:12px 0 8px;font-size:clamp(30px,5vw,48px);line-height:.98;letter-spacing:-.055em}
.vata-hero p{margin:0;color:var(--vata-muted);font-size:15px;line-height:1.5}
.vata-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vata-stat-grid div{padding:15px;border:1px solid var(--vata-line);border-radius:18px;background:var(--vata-bg);text-align:center}
.vata-stat-grid strong{display:block;font-size:25px;letter-spacing:-.04em}
.vata-stat-grid span{display:block;margin-top:4px;color:var(--vata-muted);font-size:12px;font-weight:850}
.vata-language-toggle{display:flex;gap:8px;margin:16px 0}
.vata-language-toggle button{border:1px solid var(--vata-line);border-radius:999px;padding:10px 14px;background:#fff;color:var(--vata-muted);font-weight:900;cursor:pointer}
.vata-language-toggle button.active{border-color:var(--vata-accent);background:var(--vata-accent);color:#fff}
.vata-progress{height:10px;margin:16px 0;border-radius:999px;background:#e2e8f0;overflow:hidden}
.vata-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--vata-accent),var(--vata-green));transition:.2s ease}
.vata-card{padding:18px;margin-bottom:16px}
.vata-schedule h3,.vata-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.035em}
.vata-schedule-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.vata-schedule-grid div{padding:13px;border:1px solid var(--vata-line);border-radius:16px;background:var(--vata-bg)}
.vata-schedule-grid b{display:block;color:var(--vata-accent);font-size:16px}.vata-schedule-grid span{display:block;color:var(--vata-muted);font-size:13px;line-height:1.35}
.vata-modules{display:grid;gap:16px}
.vata-module.is-complete{border-color:#bbf7d0;background:linear-gradient(180deg,#fff,#f0fdf4)}
.vata-module-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.vata-module-head h3{margin:10px 0 4px;font-size:24px}
.vata-module-head p{margin:0;color:var(--vata-muted)}
.vata-module-head>strong{display:grid;place-items:center;min-width:64px;height:64px;border-radius:999px;background:#eff6ff;color:var(--vata-accent);font-size:18px}
.vata-lesson{margin-top:14px;padding:15px;border-radius:18px;background:#f8fafc;border:1px solid var(--vata-line);color:#334155;line-height:1.6}
.vata-checklist{display:grid;gap:8px;margin:14px 0}
.vata-checklist div{padding:11px;border-radius:14px;background:#fff;border:1px solid var(--vata-line);color:#475569;font-weight:750}
.vata-quiz{border-top:1px solid var(--vata-line);padding-top:14px;margin-top:14px}
.vata-quiz h4{margin:0 0 8px;font-size:16px}.vata-question{margin:0 0 10px;font-weight:850}
.vata-quiz label{display:flex;gap:9px;align-items:flex-start;margin:8px 0;padding:10px;border:1px solid var(--vata-line);border-radius:14px;background:#fff;cursor:pointer}
.vata-quiz input{margin-top:2px;accent-color:var(--vata-accent)}
.vata-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vata-actions button{border:1px solid var(--vata-line);border-radius:999px;padding:10px 14px;background:#fff;color:var(--vata-ink);font-weight:900;cursor:pointer}
.vata-actions .vata-submit-quiz{border-color:var(--vata-accent);background:var(--vata-accent);color:#fff}
.vata-result{margin-top:10px;color:var(--vata-muted);font-weight:850}
.vata-cert{text-align:center}.vata-cert strong{display:block;font-size:22px;color:#9a3412}.vata-cert.is-certified{background:#ecfdf5;border-color:#bbf7d0}.vata-cert.is-certified strong{color:#166534}
.vata-notice{max-width:720px;margin:24px auto;padding:18px;border-radius:18px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
@media(max-width:900px){.vata-hero{grid-template-columns:1fr}.vata-stat-grid,.vata-schedule-grid{grid-template-columns:1fr}.vata-wrap{padding:12px}.vata-hero,.vata-card{padding:16px}.vata-module-head{display:block}.vata-module-head>strong{margin-top:12px}}


/* Basic social promotion guide cards */
.vata-basic-guide,
.vata-dos-card {
  margin-bottom: 16px;
}

.vata-guide-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.vata-guide-grid div {
  border: 1px solid var(--vata-line);
  border-radius: 16px;
  background: var(--vata-bg);
  padding: 13px;
}

.vata-guide-grid b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--vata-accent);
  color: #fff;
  font-size: 13px;
  margin-bottom: 8px;
}

.vata-guide-grid span {
  color: var(--vata-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.vata-dos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vata-dos-grid div {
  border: 1px solid var(--vata-line);
  border-radius: 16px;
  background: var(--vata-bg);
  padding: 14px;
}

.vata-dos-grid strong {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  background: #ecfdf5;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 8px;
}

.vata-dos-grid div:nth-child(2) strong {
  background: #fff7ed;
  color: #9a3412;
}

.vata-dos-grid p {
  margin: 0;
  color: var(--vata-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media(max-width:900px) {
  .vata-guide-grid,
  .vata-dos-grid {
    grid-template-columns: 1fr;
  }
}


/* Platform specific basics */
.vata-platform-card {
  margin-bottom: 16px;
}

.vata-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vata-platform-grid div {
  border: 1px solid var(--vata-line);
  border-radius: 16px;
  background: var(--vata-bg);
  padding: 14px;
}

.vata-platform-grid strong {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eff6ff;
  color: var(--vata-accent);
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 8px;
}

.vata-platform-grid p {
  margin: 0;
  color: var(--vata-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media(max-width:900px) {
  .vata-platform-grid {
    grid-template-columns: 1fr;
  }
}