/* ─── Weekend IT Tutorials Hub – file-share design system ────────────────── */

/* ── Buttons (mirrors file-share button pattern exactly) ─────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #6366f1;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(99,102,241,0.3);
}
.btn-primary:hover  { background-color: #4f46e5; box-shadow: 0 4px 12px rgba(99,102,241,0.35); }
.btn-primary:focus  { outline: 2px solid #6366f1; outline-offset: 2px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ffffff;
  color: #6366f1;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid #6366f1;
  cursor: pointer;
  transition: background-color 0.15s;
  text-decoration: none;
}
.btn-secondary:hover { background-color: #f5f3ff; }
.btn-secondary:focus { outline: 2px solid #6366f1; outline-offset: 2px; }

/* ── Card (file-share uses Tailwind utilities directly; this is fallback) ── */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.progress-bar { background-color: #6366f1; }

/* ── Code block ──────────────────────────────────────────────────────────── */
pre { scrollbar-width: thin; scrollbar-color: #6366f1 #1e1b4b; }
pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-track { background: #1e1b4b; }
pre::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 3px; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tab-active   { color: #6366f1; border-bottom-color: #6366f1; }
.tab-inactive { color: #6b7280; border-bottom-color: transparent; }
.tab-inactive:hover { color: #6366f1; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.prose p { margin-bottom: 1em; line-height: 1.8; }