Fix invite referral uses hint layout

frontend/app/globals.css

@@ -659,6 +659,21 @@ button span {
   justify-items: end;
 }
 
+.user-bulk-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.user-bulk-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
 .toggle {
   display: inline-flex;
   gap: 8px;
@@ -790,6 +805,11 @@ button span {
   gap: 10px;
 }
 
+.captcha-wrap {
+  display: flex;
+  justify-content: center;
+}
+
 .ghost-button {
   background: rgba(255, 255, 255, 0.08);
   color: var(--ink);
@@ -937,6 +957,103 @@ button span {
   gap: 16px;
 }
 
+.settings-checkbox-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+
+.duration-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.duration-row input,
+.duration-row select {
+  width: 100%;
+}
+
+.invite-stack {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  align-items: stretch;
+}
+
+.invite-card h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.invite-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 14px;
+  align-items: start;
+}
+
+.invite-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.invite-card .admin-actions {
+  margin-top: auto;
+}
+
+.invite-grid label {
+  display: grid;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--ink-muted);
+  text-align: left;
+}
+
+.invite-grid input,
+.invite-grid select {
+  width: 100%;
+}
+
+.toggle-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 8px 14px;
+}
+
+.toggle-help {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.field-help {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+.field-inline {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(180px, 260px);
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--ink-muted);
+}
+
+.field-stack {
+  display: grid;
+  gap: 6px;
+}
+
+.field-stack .field-help {
+  text-align: left;
+}
+
 .admin-grid label {
   display: grid;
   gap: 8px;
@@ -1058,7 +1175,7 @@ button span {
 
 .cache-row {
   display: grid;
-  grid-template-columns: 90px minmax(0, 1.6fr) 120px 90px 180px;
+  grid-template-columns: minmax(140px, 1.4fr) 100px 140px 100px 180px;
   gap: 12px;
   padding: 10px 12px;
   border-radius: 12px;
@@ -1066,6 +1183,7 @@ button span {
   background: rgba(255, 255, 255, 0.06);
   font-size: 13px;
   color: var(--ink);
+  align-items: center;
 }
 
 .cache-row span {
@@ -1082,6 +1200,13 @@ button span {
   letter-spacing: 0.08em;
 }
 
+.cache-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .maintenance-grid {
   display: grid;
   gap: 12px;
@@ -1399,6 +1524,22 @@ button span {
     grid-template-columns: 1fr;
   }
 
+  .duration-row {
+    grid-template-columns: 1fr;
+  }
+
+  .field-inline {
+    grid-template-columns: 1fr;
+  }
+
+  .cache-row {
+    grid-template-columns: 1fr;
+  }
+
+  .toggle-row {
+    grid-template-columns: 1fr;
+  }
+
   .card {
     padding: 24px;
   }