.hidden  { display: none !important; }
.flex    { display: flex; }
.col     { flex-direction: column; }
.gap-1   { gap: 0.5rem; }
.gap-2   { gap: 1rem; }
.gap-3   { gap: 1.5rem; }
.grow    { flex: 1; }
.center  { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.muted   { color: var(--muted); font-size: 0.8rem; }
.error   { color: var(--red); font-size: 0.85rem; }

.badge        { padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; }
.badge-green  { background: #14532d; color: var(--green); }
.badge-yellow { background: #451a03; color: var(--yellow); }
.badge-red    { background: #4c0519; color: var(--red); }
.badge-blue   { background: #0c4a6e; color: var(--primary); }

[x-cloak] { display: none !important; }