feat: move user creation into modal flow

src/app.css

@@ -102,19 +102,19 @@ button {
 .sidebar-foot p,
 .service-row span,
 .user-cell span,
-.nav-item small {
+.table-foot {
   margin: 0;
   color: var(--muted);
 }
 
 .login-form,
-.user-form {
+.modal-form {
   display: grid;
   gap: 14px;
 }
 
 .login-form label,
-.user-form label {
+.modal-form label {
   display: grid;
   gap: 6px;
   color: var(--text);
@@ -122,7 +122,7 @@ button {
 }
 
 .login-form input,
-.user-form input {
+.modal-form input {
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
@@ -132,17 +132,18 @@ button {
 }
 
 .login-form input:focus,
-.user-form input:focus {
+.modal-form input:focus {
   outline: 2px solid rgba(31, 111, 235, 0.18);
   border-color: var(--accent);
 }
 
 .login-form button,
 .action-row button,
-.user-form button,
+.modal-form button,
 .copy-link,
 .danger-link,
-.nav-item {
+.nav-item,
+.ghost-button {
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
@@ -151,7 +152,8 @@ button {
 
 .login-form button,
 .action-row button,
-.user-form button {
+.modal-form button,
+.header-actions button {
   padding: 10px 14px;
   border-radius: 10px;
   border: 1px solid var(--accent);
@@ -168,7 +170,11 @@ button {
 
 .login-form button:hover,
 .action-row button:hover,
-.user-form button:hover {
+.modal-form button:hover,
+.header-actions button:hover,
+.ghost-button:hover,
+.copy-link:hover,
+.danger-link:hover {
   filter: brightness(0.98);
 }
 
@@ -189,7 +195,7 @@ button {
 
 .app-shell {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
+  grid-template-columns: 220px minmax(0, 1fr);
   gap: 16px;
   padding: 16px;
 }
@@ -206,11 +212,11 @@ button {
 
 .brand-block {
   display: grid;
-  gap: 8px;
+  gap: 4px;
 }
 
 .brand-block h1 {
-  font-size: 1.25rem;
+  font-size: 1.12rem;
 }
 
 .nav-list {
@@ -219,14 +225,14 @@ button {
 }
 
 .nav-item {
-  padding: 12px;
-  border-radius: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
   text-align: left;
   border: 1px solid transparent;
   background: transparent;
   color: var(--text);
-  display: grid;
-  gap: 2px;
+  display: block;
+  font-weight: 500;
 }
 
 .nav-item.active {
@@ -247,7 +253,7 @@ button {
 }
 
 .topbar {
-  padding: 18px 20px;
+  padding: 14px 18px;
   border-radius: 14px;
   display: flex;
   justify-content: space-between;
@@ -260,7 +266,7 @@ button {
   gap: 10px;
   flex-wrap: wrap;
   color: var(--muted);
-  font-size: 0.92rem;
+  font-size: 0.88rem;
 }
 
 .tab-grid {
@@ -269,16 +275,19 @@ button {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.users-grid,
+.users-grid {
+  grid-template-columns: 1fr;
+}
+
 .system-grid {
   grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
 }
 
 .panel-card {
   border-radius: 14px;
-  padding: 20px;
+  padding: 18px;
   display: grid;
-  gap: 16px;
+  gap: 14px;
   min-width: 0;
 }
 
@@ -388,6 +397,12 @@ button {
   align-items: start;
 }
 
+.header-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
 .table-wrap {
   overflow: auto;
   border: 1px solid var(--border);
@@ -480,6 +495,10 @@ tbody tr:last-child td {
   grid-column: 1 / -1;
 }
 
+.table-foot {
+  font-size: 0.88rem;
+}
+
 pre {
   margin: 0;
   padding: 14px;
@@ -493,6 +512,51 @@ pre {
   line-height: 1.6;
 }
 
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.18);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.modal-card {
+  width: min(100%, 480px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
+  padding: 18px;
+  display: grid;
+  gap: 16px;
+}
+
+.modal-header,
+.modal-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.modal-form {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.modal-actions {
+  grid-column: 1 / -1;
+  justify-content: end;
+}
+
+.ghost-button {
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--text);
+}
+
 @media (max-width: 1120px) {
   .app-shell {
     grid-template-columns: 1fr;
@@ -527,6 +591,14 @@ pre {
     align-items: start;
   }
 
+  .header-actions,
+  .modal-form,
+  .modal-actions {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .sparkline-row {
     grid-template-columns: 52px minmax(0, 1fr);
   }