diff --git a/go-backend/internal/web/ui/app.css b/go-backend/internal/web/ui/app.css
index 1f0173e..4df44fe 100644
--- a/go-backend/internal/web/ui/app.css
+++ b/go-backend/internal/web/ui/app.css
@@ -1947,3 +1947,88 @@ td.text-right .borderless-icon-button.ui-icon-button-ghost.ui-icon-button-danger
 .message-meta .message-author {
   font-weight: 600;
 }
+
+/* === Tablo Detail Page === */
+
+.tablo-detail-page {
+  padding: 24px 32px;
+}
+
+.tablo-detail-header {
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-bottom: 0;
+}
+
+.tablo-detail-title-row {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  margin-bottom: 0;
+  padding-bottom: 16px;
+}
+
+.tablo-detail-avatar {
+  align-items: center;
+  border-radius: 12px;
+  color: #ffffff;
+  display: flex;
+  flex-shrink: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  height: 48px;
+  justify-content: center;
+  width: 48px;
+}
+
+.tablo-detail-title {
+  color: var(--color-text-primary);
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.tablo-metadata-row {
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  padding-block: 16px;
+}
+
+.tablo-meta-segment {
+  align-items: center;
+  color: var(--color-text-secondary);
+  display: flex;
+  font-size: 0.875rem;
+  gap: 8px;
+}
+
+.tablo-meta-progress {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.tablo-progress-bar {
+  background: var(--color-brand-primary);
+  border-radius: 9999px;
+  height: 5px;
+}
+
+.tablo-tab-bar {
+  border-bottom: 1px solid var(--color-border-muted);
+  display: flex;
+  gap: 24px;
+  margin-top: 0;
+  padding-top: 8px;
+}
+
+.tablo-tab-bar .tab-nav-item {
+  font-size: 0.875rem;
+  padding-bottom: 12px;
+}