/* ═══════════════════════════════════════════════════
   SIMPLEQUIZZ — Design System (Tailwind Utility Equivalents)
   ═══════════════════════════════════════════════════ */

/* ── Layout & Display ── */
.flex { display:flex; } .inline-flex { display:inline-flex; } .flex-1 { flex:1; }
.flex-col { flex-direction:column; } .flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; } .items-start { align-items:flex-start; } .items-end { align-items:flex-end; }
.justify-center { justify-content:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; }
.block { display:block; } .inline-block { display:inline-block; } .hidden { display:none; }
.grid { display:grid; } .grid-cols-1 { grid-template-columns:repeat(1,1fr); }
.grid-cols-2 { grid-template-columns:repeat(2,1fr); } .grid-cols-3 { grid-template-columns:repeat(3,1fr); }
.grid-cols-12 { grid-template-columns:repeat(12,1fr); }
.col-span-1 { grid-column:span 1; } .col-span-2 { grid-column:span 2; } .col-span-3 { grid-column:span 3; }

/* ── Gap ── */
.gap-1 { gap:.25rem; } .gap-1\\.5 { gap:.375rem; } .gap-2 { gap:.5rem; } .gap-2\\.5 { gap:.625rem; }
.gap-3 { gap:.75rem; } .gap-4 { gap:1rem; } .gap-5 { gap:1.25rem; } .gap-6 { gap:1.5rem; } .gap-8 { gap:2rem; } .gap-16 { gap:4rem; }

/* ── Width / Height ── */
.w-full { width:100%; }
.w-1 { width:4px; } .w-1\\.5 { width:6px; } .w-2 { width:8px; } .w-2\\.5 { width:10px; }
.w-3 { width:12px; } .w-3\\.5 { width:14px; } .w-4 { width:16px; } .w-5 { width:20px; }
.w-6 { width:24px; } .w-7 { width:28px; } .w-8 { width:32px; } .w-9 { width:36px; }
.w-10 { width:40px; } .w-12 { width:48px; } .w-14 { width:56px; } .w-16 { width:64px; }
.w-20 { width:80px; } .w-24 { width:96px; } .w-28 { width:112px; } .w-32 { width:128px; } .w-52 { width:208px; } .w-56 { width:224px; }
.h-full { height:100%; }
.h-1\\.5 { height:6px; } .h-2 { height:8px; } .h-2\\.5 { height:10px; }
.h-3 { height:12px; } .h-3\\.5 { height:14px; } .h-4 { height:16px; } .h-5 { height:20px; }
.h-6 { height:24px; } .h-7 { height:28px; } .h-8 { height:32px; } .h-9 { height:36px; }
.h-10 { height:40px; } .h-12 { height:48px; } .h-14 { height:56px; } .h-16 { height:64px; }
.h-20 { height:80px; } .h-32 { height:128px; } .h-56 { height:224px; }
.min-w-0 { min-width:0; } .min-h-screen { min-height:100vh; }

/* ── Max Widths ── */
.max-w-xs { max-width:20rem; } .max-w-sm { max-width:24rem; } .max-w-md { max-width:28rem; }
.max-w-lg { max-width:32rem; } .max-w-xl { max-width:36rem; } .max-w-2xl { max-width:42rem; }
.max-w-3xl { max-width:48rem; } .max-w-4xl { max-width:56rem; } .max-w-5xl { max-width:64rem; } .max-w-6xl { max-width:72rem; }

.flex-shrink-0 { flex-shrink:0; }
.antialiased { -webkit-font-smoothing:antialiased; }

/* ── Typography ── */
.text-left { text-align:left; } .text-center { text-align:center; } .text-right { text-align:right; }
.text-xs { font-size:.75rem; } .text-sm { font-size:.875rem; } .text-base { font-size:1rem; }
.text-lg { font-size:1.125rem; } .text-xl { font-size:1.25rem; } .text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; } .text-4xl { font-size:2.25rem; } .text-7xl { font-size:4.5rem; }
.font-normal { font-weight:400; } .font-medium { font-weight:500; } .font-semibold { font-weight:600; }
.font-bold { font-weight:700; } .font-extrabold { font-weight:800; }
.leading-snug { line-height:1.375; } .leading-relaxed { line-height:1.625; }
.tracking-tight { letter-spacing:-.02em; } .tracking-wide { letter-spacing:.025em; }
.tracking-wider { letter-spacing:.05em; } .tracking-widest { letter-spacing:.1em; }
.tabular-nums { font-variant-numeric:tabular-nums; }
.capitalize { text-transform:capitalize; } .uppercase { text-transform:uppercase; } .normal-case { text-transform:none; }
.italic { font-style:italic; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whitespace-nowrap { white-space:nowrap; } .whitespace-pre-wrap { white-space:pre-wrap; } .break-all { word-break:break-all; }

/* ── Colors ── */
.text-white { color:#fff; } .text-red-400 { color:#f87171; } .text-red-500 { color:#dc2626; } .text-red-600 { color:#b91c1c; }
.bg-white { background:#fff; } .bg-gray-100 { background:#f3f4f6; }
.bg-burgundy-100 { background:#FCF9F2; } .bg-blue-50 { background:#eff6ff; }

/* ── Borders ── */
.border { border:1px solid #e5e7eb; } .border-2 { border-width:2px; }
.border-b { border-bottom:1px solid; } .border-b-2 { border-bottom-width:2px; }
.border-t { border-top:1px solid; } .border-dashed { border-style:dashed; }
.border-blue-100 { border-color:#dbeafe; } .border-red-100 { border-color:#fee2e2; } .border-gray-300 { border-color:#d1d5db; }
.rounded { border-radius:.25rem; } .rounded-lg { border-radius:.5rem; }
.rounded-xl { border-radius:.75rem; } .rounded-2xl { border-radius:1rem; } .rounded-full { border-radius:9999px; }
.divide-y > * + * { border-top:1px solid #e5e7eb; }

/* ── Shadows ── */
.shadow-sm { box-shadow:0 1px 2px rgba(20,23,32,.06); }
.shadow { box-shadow:0 1px 3px rgba(20,23,32,.08),0 1px 2px rgba(20,23,32,.04); }
.shadow-md { box-shadow:0 4px 6px rgba(20,23,32,.07),0 2px 4px rgba(20,23,32,.05); }
.shadow-lg { box-shadow:0 10px 25px rgba(20,23,32,.08),0 4px 10px rgba(20,23,32,.04); }
.shadow-xl { box-shadow:0 20px 50px rgba(20,23,32,.10); }
.shadow-2xl { box-shadow:0 25px 60px rgba(20,23,32,.12); }

/* ── Effects ── */
.opacity-0 { opacity:0; } .opacity-30 { opacity:.3; } .opacity-50 { opacity:.5; } .opacity-100 { opacity:1; }
.object-contain { object-fit:contain; }
.overflow-hidden { overflow:hidden; } .overflow-auto { overflow:auto; }
.overflow-x-auto { overflow-x:auto; } .overflow-y-auto { overflow-y:auto; }

/* ── Position ── */
.relative { position:relative; } .absolute { position:absolute; } .fixed { position:fixed; }
.sticky { position:sticky; top:0; } .inset-0 { inset:0; } .bottom-4 { bottom:1rem; } .right-0 { right:0; }
.z-50 { z-index:50; } .z-40 { z-index:40; }

/* ── Interactivity ── */
.cursor-pointer { cursor:pointer; } .cursor-not-allowed { cursor:not-allowed; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── Transitions ── */
.transition { transition:all .15s ease; }
.transition-all { transition:all .2s ease; }
.transition-colors { transition:color .15s ease,background .15s ease,border-color .15s ease; }
.transition-shadow { transition:box-shadow .2s ease; }
.transition-transform { transition:transform .15s ease; }
.duration-150 { transition-duration:.15s; } .duration-200 { transition-duration:.2s; }
.duration-300 { transition-duration:.3s; } .duration-500 { transition-duration:.5s; } .duration-700 { transition-duration:.7s; }
.ease-in { transition-timing-function:cubic-bezier(.4,0,1,1); }
.ease-out { transition-timing-function:cubic-bezier(0,0,.2,1); }
.ease-in-out { transition-timing-function:cubic-bezier(.4,0,.2,1); }

/* ── Transforms ── */
.scale-95 { transform:scale(.95); } .scale-100 { transform:scale(1); }
.scale-105 { transform:scale(1.05); }
.-rotate-90 { transform:rotate(-90deg); } .rotate-180 { transform:rotate(180deg); }

/* ── Animations ── */
.animate-pulse { animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-spin { animation:spin 1s linear infinite; }
.animate-fade-up { animation:fadeUp .5s ease both; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes spin { 100%{transform:rotate(360deg)} }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:translateY(0)} }

/* ── Spacing: Margin ── */
.mx-auto { margin-left:auto; margin-right:auto; } .ml-auto { margin-left:auto; }
.my-1 { margin-top:.25rem; margin-bottom:.25rem; }
.mb-0\\.5 { margin-bottom:.125rem; } .mb-1 { margin-bottom:.25rem; } .mb-1\\.5 { margin-bottom:.375rem; }
.mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:.75rem; } .mb-4 { margin-bottom:1rem; }
.mb-5 { margin-bottom:1.25rem; } .mb-6 { margin-bottom:1.5rem; } .mb-8 { margin-bottom:2rem; } .mb-10 { margin-bottom:2.5rem; }
.mt-0\\.5 { margin-top:.125rem; } .mt-1 { margin-top:.25rem; } .mt-1\\.5 { margin-top:.375rem; }
.mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; } .mt-4 { margin-top:1rem; } .mt-5 { margin-top:1.25rem; } .mt-8 { margin-top:2rem; }
.ml-1 { margin-left:.25rem; } .ml-2 { margin-left:.5rem; } .ml-3 { margin-left:.75rem; } .ml-4 { margin-left:1rem; }
.-mb-px { margin-bottom:-1px; }

/* ── Spacing: Padding ── */
.p-3 { padding:.75rem; } .p-4 { padding:1rem; } .p-5 { padding:1.25rem; } .p-6 { padding:1.5rem; } .p-7 { padding:1.75rem; } .p-8 { padding:2rem; }
.px-1 { padding-left:.25rem; padding-right:.25rem; } .px-1\\.5 { padding-left:.375rem; padding-right:.375rem; }
.px-2 { padding-left:.5rem; padding-right:.5rem; } .px-2\\.5 { padding-left:.625rem; padding-right:.625rem; }
.px-3 { padding-left:.75rem; padding-right:.75rem; } .px-3\\.5 { padding-left:.875rem; padding-right:.875rem; }
.px-4 { padding-left:1rem; padding-right:1rem; } .px-5 { padding-left:1.25rem; padding-right:1.25rem; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; } .px-7 { padding-left:1.75rem; padding-right:1.75rem; }
.py-0\\.5 { padding-top:.125rem; padding-bottom:.125rem; } .py-1 { padding-top:.25rem; padding-bottom:.25rem; }
.py-1\\.5 { padding-top:.375rem; padding-bottom:.375rem; }
.py-2 { padding-top:.5rem; padding-bottom:.5rem; } .py-2\\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-3 { padding-top:.75rem; padding-bottom:.75rem; } .py-3\\.5 { padding-top:.875rem; padding-bottom:.875rem; }
.py-4 { padding-top:1rem; padding-bottom:1rem; } .py-6 { padding-top:1.5rem; padding-bottom:1.5rem; }
.py-7 { padding-top:1.75rem; padding-bottom:1.75rem; } .py-8 { padding-top:2rem; padding-bottom:2rem; }
.py-10 { padding-top:2.5rem; padding-bottom:2.5rem; } .py-12 { padding-top:3rem; padding-bottom:3rem; }
.py-20 { padding-top:5rem; padding-bottom:5rem; } .py-24 { padding-top:6rem; padding-bottom:6rem; }
.pt-2 { padding-top:.5rem; } .pt-4 { padding-top:1rem; } .pt-5 { padding-top:1.25rem; } .pt-7 { padding-top:1.75rem; }
.pb-3 { padding-bottom:.75rem; } .pb-4 { padding-bottom:1rem; } .pb-5 { padding-bottom:1.25rem; } .pb-6 { padding-bottom:1.5rem; }

/* ── Spacing: Space Between ── */
.space-y-1 > * + * { margin-top:.25rem; } .space-y-1\\.5 > * + * { margin-top:.375rem; }
.space-y-2 > * + * { margin-top:.5rem; } .space-y-3 > * + * { margin-top:.75rem; }
.space-y-4 > * + * { margin-top:1rem; } .space-y-6 > * + * { margin-top:1.5rem; }

/* ── Responsive: sm (≥640px) ── */
@media (min-width:640px) {
  .sm\\:block { display:block; } .sm\\:hidden { display:none; } .sm\\:flex { display:flex; }
  .sm\\:flex-none { flex:none; } .sm\\:flex-row { flex-direction:row; }
  .sm\\:items-center { align-items:center; } .sm\\:items-end { align-items:flex-end; }
  .sm\\:w-auto { width:auto; }
  .sm\\:px-6 { padding-left:1.5rem; padding-right:1.5rem; }
  .sm\\:gap-8 { gap:2rem; } .sm\\:grid-cols-2 { grid-template-columns:repeat(2,1fr); }
  .sm\\:grid-cols-3 { grid-template-columns:repeat(3,1fr); }
  .sm\\:grid-cols-4 { grid-template-columns:repeat(4,1fr); }
}
/* ── Responsive: md (≥768px) ── */
@media (min-width:768px) { .md\\:grid-cols-2 { grid-template-columns:repeat(2,1fr); } }
/* ── Responsive: lg (≥1024px) ── */
@media (min-width:1024px) {
  .lg\\:px-8 { padding-left:2rem; padding-right:2rem; }
  .lg\\:grid-cols-2 { grid-template-columns:repeat(2,1fr); }
  .lg\\:grid-cols-3 { grid-template-columns:repeat(3,1fr); }
  .lg\\:grid-cols-4 { grid-template-columns:repeat(4,1fr); }
}

/* ── Hover Variants ── */
.hover\\:opacity-80:hover { opacity:.8; }
.hover\\:bg-gray-50:hover { background:#f9fafb; }
.hover\\:bg-red-50:hover { background:#fef2f2; }
.hover\\:bg-red-100:hover { background:#fee2e2; }
.hover\\:border-red-200:hover { border-color:#fecaca; }
.hover\\:text-red-600:hover { color:#b91c1c; }
.hover\\:underline:hover { text-decoration:underline; }
.hover\\:shadow-md:hover { box-shadow:0 4px 6px rgba(20,23,32,.07),0 2px 4px rgba(20,23,32,.05); }

/* ═══════════════════════════════════════════════════
   POLISHED COMPONENT STYLES
   ═══════════════════════════════════════════════════ */

/* ── Button base ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.875rem; border:none; cursor:pointer; transition:all .15s ease; text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--brand-burgundy); color:#fff; }
.btn-primary:hover { background:var(--brand-burgundy-dark); }
.btn-ghost { background:transparent; color:#7D6E5D; }
.btn-ghost:hover { background:#FCF9F0; color:#2C2825; }
.btn-danger { background:transparent; color:#9B4B4B; }
.btn-danger:hover { color:#5a3a35; background:#fdf0f0; }
.btn-sm { height:36px; padding:0 .875rem; border-radius:.5rem; font-size:.8125rem; }
.btn-md { height:44px; padding:0 1.25rem; border-radius:.625rem; }
.btn-lg { height:48px; padding:0 1.5rem; border-radius:.75rem; }

/* ── Card ── */
.card { background:#fff; border-radius:.75rem; border:1px solid #D4E5C8; transition:box-shadow .2s ease,transform .2s ease; }
.card-hover:hover { box-shadow:0 4px 12px rgba(20,23,32,.06); transform:translateY(-2px); }
.card-sm { padding:1rem; } .card-md { padding:1.25rem; } .card-lg { padding:1.5rem; }

/* ── Input ── */
.input { width:100%; height:44px; padding:0 .875rem; border-radius:.625rem; border:1.5px solid #D4C8C0; background:#FCF9F2; font-size:.875rem; font-family:inherit; outline:none; transition:border-color .18s ease,box-shadow .18s ease; }
.input:focus { border-color:var(--brand-burgundy); box-shadow:0 0 0 3px rgba(155,75,75,.12); }
.input-error { border-color:#dc2626; background:#fff5f5; }
.input-error:focus { box-shadow:0 0 0 3px rgba(220,38,38,.1); }

/* ── Badge ── */
.badge { display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem; border-radius:9999px; font-size:.6875rem; font-weight:600; text-transform:capitalize; }
.badge-burgundy { background:#FCF9F2; color:#9B4B4B; }
.badge-brown { background:#F0DADA; color:#2C2825; }
.badge-cream { background:#FCF9F2; color:#7D6E5D; }
.badge-draft { background:#F5E8E4; color:#7D6E5D; }
.badge-active { background:#E8E4DF; color:#9B4B4B; }
.badge-paused { background:#F0DADA; color:#7D6E5D; }
.badge-closed { background:#FDF0F0; color:#9B4B4B; }
.badge-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge-dot-burgundy { background:#9B4B4B; }
.badge-dot-brown { background:#2C2825; }
.badge-dot-cream { background:#FCF9F2; }

/* ── Tab ── */
.tab { padding:.625rem 1rem; font-size:.875rem; font-weight:500; border:none; background:transparent; cursor:pointer; transition:color .15s ease,background .15s ease; border-radius:.5rem; color:#7D6E5D; }
.tab:hover { background:#FCF9F0; color:#9B4B4B; }
.tab-active { background:#E8E4DF; color:#9B4B4B; font-weight:600; }

/* ── Stat badge ── */
.stat { display:inline-flex; align-items:center; gap:.5rem; background:#FCF9F2; border:1px solid #D4C8C0; border-radius:.5rem; padding:.375rem .75rem .375rem .625rem; }
.stat-num { font-size:.8125rem; font-weight:700; font-variant-numeric:tabular-nums; }
.stat-label { font-size:.625rem; color:#7D6E5D; }

/* ── Empty state ── */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.5rem; text-align:center; }
.empty-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#FCF9F2; margin-bottom:1rem; }
.empty-icon svg { width:24px; height:24px; color:#9B4B4B; }
.empty h3 { font-size:1rem; font-weight:600; margin:0 0 .25rem; color:#2C2825; }
.empty p { font-size:.8125rem; margin:0 0 1.25rem; max-width:18rem; color:#7D6E5D; }

/* ── Status dot ── */
.status-dot { display:inline-flex; align-items:center; gap:.375rem; font-size:.6875rem; font-weight:600; text-transform:capitalize; }
.status-dot::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.active::before { background:var(--brand-burgundy); }
.status-dot.draft::before { background:#D4E5C8; }
.status-dot.paused::before { background:#e8b84b; }
.status-dot.closed::before { background:#DC2626; }
.status-dot.archived::before { background:#D4E5C8; }