:root {
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-800: #1e293b; --slate-900: #0f172a;
  --blue-50: #eff6ff; --blue-500: #3b82f6; --blue-600: #2563eb;
  --blue-700: #1d4ed8; --green-600: #16a34a; --red-50: #fef2f2;
  --red-600: #dc2626; --white: #ffffff; --gray-100: #f3f4f6;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: var(--slate-100); color: var(--slate-800);
  margin: 0; line-height: 1.5;
}

/* Layout */
.container { max-width: 42rem; margin: 0 auto; padding: 0; }
.card { background-color: var(--white); padding: 2rem;
  border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

/* Utility Classes */
.flex { display: flex; }
.flex-grow { flex-grow: 1; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.hidden { display: none; }
.w-full { width: 100%; }
.h-screen { height: 100vh; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }

/* Spacing */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pb-4 { padding-bottom: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* Typography */
.text-sm { font-size: 0.875rem; }
.text-md { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }

.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-800 { color: var(--slate-800); }
.text-slate-900 { color: var(--slate-900); }
.text-blue-600 { color: var(--blue-600); }
.text-green-600 { color: var(--green-600); }
.text-red-600 { color: var(--red-600); }

a.text-blue-600:hover { text-decoration: underline; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:underline:hover { text-decoration: underline; }

/* Borders & Backgrounds */
.border { border: 1px solid var(--slate-200); }
.border-2 { border-width: 2px; }
.border-b { border-bottom: 1px solid var(--slate-200); }
.border-t { border-top: 1px solid var(--slate-200); }
.border-slate-100 { border-color: var(--slate-100); }
.border-slate-200 { border-color: var(--slate-200); }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }

.bg-white { background-color: var(--white); }
.bg-slate-50 { background-color: var(--slate-50); }
.bg-slate-100 { background-color: var(--slate-100); }
.bg-slate-200 { background-color: var(--slate-200); }
.bg-slate-300 { background-color: var(--slate-300); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-red-50 { background-color: var(--red-50); }
.bg-blue-50 { background-color: var(--blue-50); }

/* Elements */
.btn { width: 100%; background-color: var(--blue-600); color: var(--white);
  font-weight: 700; padding: 0.75rem 1rem; border-radius: 0.5rem;
  border: none; font-size: 1.125rem; cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s; }
.btn:hover { background-color: var(--blue-700); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary { background-color: var(--slate-200); color: var(--slate-700);
  padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 0.5rem;
  border: none; cursor: pointer; transition: background-color 0.2s; }
.btn-secondary:hover { background-color: var(--slate-300); }

.input-text { flex-grow: 1; padding: 0.75rem; border-radius: 0.5rem;
  border: 2px solid var(--slate-200); outline: none; }
.input-text:focus { border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }

/* Radio Group Items */
.radio-option { display: flex; align-items: center; padding: 1rem;
  border: 2px solid var(--slate-200); border-radius: 0.5rem;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.radio-option:hover { border-color: var(--slate-300); }
.radio-option.selected { border-color: var(--blue-600);
  background-color: var(--blue-50); }
.radio-option input { height: 1rem; width: 1rem; color: var(--blue-600);
  margin-right: 0.75rem; }

/* Images */
.product-img { width: 6rem; height: 6rem; border-radius: 0.5rem;
  object-fit: cover; background-color: var(--gray-100);
  border: 1px solid var(--slate-200); }
.card-art-img { width: 3rem; height: 2rem; object-fit: contain;
  margin-right: 1rem; border: 1px solid var(--slate-200);
  border-radius: 0.25rem; background-color: white; }

/* Skeleton Loader */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.sk-rect { background-color: var(--slate-300); border-radius: 0.25rem; }
.sk-circle { background-color: var(--slate-300); border-radius: 9999px; }

/* Custom spinner */
.spinner { border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%;
  border-top: 3px solid #3498db; width: 20px; height: 20px;
  animation: spin 1s linear infinite; display: inline-block;
  vertical-align: middle; }
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }