diff --git a/deploy/tksea-portal/portal.css b/deploy/tksea-portal/portal.css
index 03f747c7..c269c8d6 100644
--- a/deploy/tksea-portal/portal.css
+++ b/deploy/tksea-portal/portal.css
@@ -984,7 +984,17 @@ pre code { color: inherit; }
 .cta-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 700; font-size: 13px; text-decoration: none; }
 .cta-link:hover { color: var(--teal-400); text-decoration: underline; }
 .footer-note { font-size: 12px; color: var(--text-muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
-.hint { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); }
+/* .hint sits inside a <label> AFTER the <input>. Force it to its own block
+   below the input — otherwise the inline hint box overlaps the input and
+   the last line gets covered. Also clear the margin on the first <input>
+   inside a label so it hugs the field label text. */
+.hint { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); margin-top: 6px; }
+label:not(.field-label):not(.raw-input) > input,
+label:not(.field-label):not(.raw-input) > select,
+label:not(.field-label):not(.raw-input) > textarea { display: block; width: 100%; margin-top: 4px; }
+label:not(.field-label):not(.raw-input) > .hint + input,
+label:not(.field-label):not(.raw-input) > .hint + select,
+label:not(.field-label):not(.raw-input) > .hint + textarea { margin-top: 6px; }
 .subtle, .muted-block { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
 .muted-block { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-elev-2); border: 1px solid var(--border-subtle); }
 .row-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }