diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index cb8c70a..96d6713 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -85,6 +85,105 @@ ul {
     padding: 1.5rem;
 }
 
+/* ===== Utility backfill (classes already used in templates, previously undefined) ===== */
+
+/* Spacing — padding */
+.p-0 { padding: 0; }
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-8 { padding: var(--space-8); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.pr-4 { padding-right: var(--space-4); }
+
+/* Spacing — margin */
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-6 { margin-bottom: var(--space-6); }
+.ml-2 { margin-left: var(--space-2); }
+
+/* Spacing — gap */
+.gap-1 { gap: var(--space-1); }
+.gap-3 { gap: var(--space-3); }
+
+/* Fl/grid helpers */
+.flex-wrap { flex-wrap: wrap; }
+.flex-shrink-0 { flex-shrink: 0; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.items-start { align-items: flex-start; }
+.block { display: block; }
+.hidden { display: none; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.inset-0 { inset: 0; }
+.top-4 { top: var(--space-4); }
+.left-4 { left: var(--space-4); }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.w-6 { width: 1.5rem; }
+.h-6 { height: 1.5rem; }
+.h-full { height: 100%; }
+.rounded-lg { border-radius: var(--radius-md); }
+.opacity-0 { opacity: 0; }
+.cursor-pointer { cursor: pointer; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.text-center { text-align: center; }
+
+/* Typography */
+.text-xs { font-size: 0.75rem; }
+.text-2xl { font-size: 1.875rem; font-weight: 700; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-normal { font-weight: 400; }
+
+/* Colors */
+.text-white { color: #fff; }
+.text-secondary { color: var(--text-secondary); }
+.text-danger { color: var(--danger); }
+.text-success { color: var(--success); }
+.text-blue-400 { color: #60a5fa; }
+.text-cyan-400 { color: #22d3ee; }
+.text-pink-400 { color: #f472b6; }
+.text-purple-400 { color: #c084fc; }
+.text-orange-400 { color: #fb923c; }
+.text-yellow-400 { color: #facc15; }
+.text-emerald-400 { color: #34d399; }
+
+/* Transitions */
+.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
+.transition-opacity { transition: opacity 0.2s ease; }
+.transition-all { transition: all 0.2s ease; }
+
+/* Hover utilities (escaped selectors) */
+.hover\:text-white:hover { color: #fff; }
+.hover\:underline:hover { text-decoration: underline; }
+.hover\:text-\[var\(--primary\)\]:hover { color: var(--primary); }
+.hover\:border-\[var\(--primary\)\]:hover { border-color: var(--primary); }
+.border-\[var\(--glass-border\)\] { border: 1px solid var(--glass-border); }
+.hover\:bg-blue-400\/10:hover { background: rgba(96, 165, 250, 0.1); }
+.hover\:bg-cyan-400\/10:hover { background: rgba(34, 211, 238, 0.1); }
+.hover\:bg-pink-400\/10:hover { background: rgba(244, 114, 182, 0.1); }
+.hover\:bg-purple-400\/10:hover { background: rgba(192, 132, 252, 0.1); }
+.hover\:bg-orange-400\/10:hover { background: rgba(251, 146, 60, 0.1); }
+.hover\:bg-emerald-400\/10:hover { background: rgba(52, 211, 153, 0.1); }
+.hover\:bg-yellow-400\/10:hover { background: rgba(250, 204, 21, 0.1); }
+
+/* Group hover reveal */
+.group:hover .group-hover\:opacity-100 { opacity: 1; }
+
+/* Spin animation */
+@keyframes spin { to { transform: rotate(360deg); } }
+.animate-spin { animation: spin 1s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+    .animate-spin { animation: none; }
+}
+
 /* Components */
 
 /* GLASS CARD */