diff --git a/public/css/app.css b/public/css/app.css
index 519c7ec..f7d3003 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -416,3 +416,94 @@ form {
[hidden] {
display: none !important;
}
+
+/* -------------------------------------------------------------------------
+ 7. Page-specific: node tree (text detail)
+ -------------------------------------------------------------------------
+ The tree DOM is rendered as plain ul/li with buttons and inputs as
+ direct children of each li. Cypress assertions rely on this exact
+ structure, so we style it via descendant selectors only - no wrapper
+ elements added.
+*/
+
+.node-tree > ul {
+ border-left: 2px solid var(--color-border);
+ padding-left: var(--space-4);
+}
+
+.node-tree ul ul {
+ border-left: 1px solid var(--color-border);
+ margin-top: var(--space-2);
+ margin-left: var(--space-2);
+ padding-left: var(--space-4);
+}
+
+.node-tree li {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-2) 0;
+}
+
+.node-tree li > ul {
+ flex-basis: 100%;
+ margin-top: var(--space-2);
+}
+
+.node-tree li > span {
+ font-weight: 500;
+}
+
+.node-tree li > button {
+ padding: var(--space-1) var(--space-3);
+ font-size: var(--font-size-sm);
+ background-color: var(--color-surface);
+ border: 1px solid var(--color-border-strong);
+ border-radius: var(--radius-sm);
+}
+
+.node-tree li > button.toggle-children {
+ padding: var(--space-1) var(--space-2);
+ background-color: transparent;
+ border-color: transparent;
+ color: var(--color-text-muted);
+ font-size: var(--font-size-base);
+}
+
+.node-tree li > button.toggle-children:hover,
+.node-tree li > button.toggle-children:focus {
+ color: var(--color-text);
+ background-color: var(--color-surface-alt);
+}
+
+.node-tree li > button.add-child {
+ color: var(--color-primary);
+ border-color: var(--color-primary);
+}
+
+.node-tree li > button.add-child:hover,
+.node-tree li > button.add-child:focus {
+ background-color: var(--color-primary);
+ color: #ffffff;
+}
+
+.node-tree li > button.bulk-add-children {
+ color: var(--color-accent);
+ border-color: var(--color-accent);
+}
+
+.node-tree li > button.bulk-add-children:hover,
+.node-tree li > button.bulk-add-children:focus {
+ background-color: var(--color-accent);
+ color: #ffffff;
+}
+
+.node-tree li > input {
+ width: auto;
+ margin-top: 0;
+}
+
+.node-tree li > input.bulk-count {
+ max-width: 6rem;
+}
diff --git a/views/templates/text.php b/views/templates/text.php
index 477ec12..6d41421 100644
--- a/views/templates/text.php
+++ b/views/templates/text.php
@@ -7,8 +7,16 @@
- Back to Texts
-
+
+
+
+