.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mr-2 { margin-right: var(--sp-2); }
.ml-2 { margin-left: var(--sp-2); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-2 { padding: var(--sp-2); }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }
.p-8 { padding: var(--sp-8); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

.rounded { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }

.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }

.bg-white { background: var(--white); }
.bg-light { background: var(--light); }
.bg-dark { background: var(--dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.py-12 { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.p-3 { padding: var(--sp-3); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-3 { margin-bottom: var(--sp-3); }
.mr-1 { margin-right: var(--sp-1); }
.mr-3 { margin-right: var(--sp-3); }
.ml-1 { margin-left: var(--sp-1); }
.ml-auto { margin-left: auto; }

.text-dark { color: var(--dark); }
.text-white { color: var(--white); }
.text-red { color: var(--danger); }

.bg-red-light { background: rgba(229,62,62,0.05); }

.font-mono { font-family: 'SFMono-Regular', Consolas, monospace; }

.avatar-sm {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--blue), var(--yellow));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-xs);
}

.badge-red { background: rgba(229,62,62,0.1); color: var(--danger); }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}