Build 2602261605: invite trace and cross-system user lifecycle

frontend/app/globals.css

@@ -4757,3 +4757,143 @@ textarea {
 .theme-toggle {
   border-radius: 50%;
 }
+
+.invite-trace-toolbar {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) auto;
+  gap: 10px 14px;
+  align-items: end;
+  margin-bottom: 10px;
+}
+
+.invite-trace-filter {
+  display: grid;
+  gap: 6px;
+}
+
+.invite-trace-filter > span {
+  color: #9ea7b6;
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.invite-trace-summary {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  color: #aeb7c4;
+  font-size: 0.8rem;
+}
+
+.invite-trace-summary span {
+  padding: 4px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 5px;
+}
+
+.invite-trace-map {
+  display: grid;
+  gap: 8px;
+}
+
+.invite-trace-row {
+  display: grid;
+  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
+  gap: 10px 12px;
+  align-items: start;
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.015);
+  border-radius: 6px;
+}
+
+.invite-trace-row-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+}
+
+.invite-trace-branch {
+  width: 12px;
+  height: 1px;
+  background: rgba(138, 163, 196, 0.55);
+  position: relative;
+  margin-right: 2px;
+}
+
+.invite-trace-branch::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: -7px;
+  width: 8px;
+  height: 8px;
+  border-left: 1px solid rgba(138, 163, 196, 0.38);
+  border-bottom: 1px solid rgba(138, 163, 196, 0.38);
+}
+
+.invite-trace-user {
+  color: #edf2f8;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.invite-trace-row-meta {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.invite-trace-meta-item {
+  display: grid;
+  gap: 3px;
+  align-content: start;
+  padding: 6px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.01);
+  border-radius: 5px;
+  min-height: 48px;
+}
+
+.invite-trace-meta-item .label {
+  color: #8f9aac;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.invite-trace-meta-item strong {
+  color: #e7edf6;
+  font-size: 0.82rem;
+  word-break: break-word;
+}
+
+@media (max-width: 1180px) {
+  .invite-trace-toolbar {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .invite-trace-summary {
+    justify-content: flex-start;
+  }
+
+  .invite-trace-row {
+    grid-template-columns: 1fr;
+  }
+
+  .invite-trace-row-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .invite-trace-row-meta {
+    grid-template-columns: 1fr;
+  }
+}