diff --git a/public/css/app.css b/public/css/app.css
index bc9ec31..519c7ec 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -216,3 +216,203 @@ button:focus {
 form {
     margin: 0;
 }
+
+/* -------------------------------------------------------------------------
+   4. Layout primitives
+   ------------------------------------------------------------------------- */
+
+.container {
+    width: 100%;
+    max-width: var(--max-width);
+    margin-inline: auto;
+    padding: var(--space-5) var(--space-4);
+}
+
+.container-wide {
+    max-width: var(--max-width-wide);
+}
+
+.stack > * + * {
+    margin-top: var(--space-4);
+}
+
+.stack-sm > * + * {
+    margin-top: var(--space-2);
+}
+
+.stack-lg > * + * {
+    margin-top: var(--space-6);
+}
+
+.cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.cluster-end {
+    justify-content: flex-end;
+}
+
+.cluster-between {
+    justify-content: space-between;
+}
+
+.center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* -------------------------------------------------------------------------
+   5. Components
+   ------------------------------------------------------------------------- */
+
+.site-header {
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-surface);
+}
+
+.site-header .site-header-inner {
+    width: 100%;
+    max-width: var(--max-width);
+    margin-inline: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+}
+
+.btn {
+    display: inline-block;
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-strong);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    font-weight: 500;
+    text-decoration: none;
+    transition: background-color var(--transition-fast),
+        border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.btn:hover,
+.btn:focus {
+    background-color: var(--color-surface-alt);
+    border-color: var(--color-text-muted);
+    text-decoration: none;
+}
+
+.btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: #ffffff;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+    color: #ffffff;
+}
+
+.btn-secondary {
+    background-color: transparent;
+    border-color: var(--color-border-strong);
+    color: var(--color-text);
+}
+
+.btn-danger {
+    background-color: transparent;
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+    background-color: var(--color-danger);
+    color: #ffffff;
+}
+
+.card {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-4);
+    box-shadow: var(--shadow-sm);
+}
+
+.card-link {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    transition: border-color var(--transition-fast),
+        box-shadow var(--transition-fast),
+        transform var(--transition-fast);
+}
+
+.card-link:hover,
+.card-link:focus {
+    border-color: var(--color-border-strong);
+    box-shadow: var(--shadow-md);
+    text-decoration: none;
+}
+
+.list-cards {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+    background-color: rgba(43, 38, 34, 0.45);
+}
+
+.modal[hidden] {
+    display: none;
+}
+
+.modal-content {
+    width: 100%;
+    max-width: 28rem;
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-5);
+}
+
+.error {
+    color: var(--color-danger);
+    font-size: var(--font-size-sm);
+}
+
+.muted {
+    color: var(--color-text-muted);
+}
+
+/* -------------------------------------------------------------------------
+   6. Utilities
+   ------------------------------------------------------------------------- */
+
+.full-width {
+    width: 100%;
+}
+
+.text-center {
+    text-align: center;
+}
+
+[hidden] {
+    display: none !important;
+}