feat(auth): implement user and device authentication

backend-api/internal/transport/webui/static/admin.css

@@ -144,6 +144,27 @@ a {
   font-weight: 700;
 }
 
+.logout-form {
+  margin: 0;
+}
+
+.logout-button {
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.logout-button:hover,
+.logout-button:focus-visible {
+  border-color: var(--text-muted);
+  color: var(--text);
+}
+
 .page {
   width: min(calc(100% - 32px), 1180px);
   margin: 0 auto;
@@ -705,6 +726,65 @@ tbody tr:last-child td {
   cursor: wait;
 }
 
+.login-body {
+  min-height: 100vh;
+  display: grid;
+  background: #eef1f0;
+}
+
+.login-page {
+  width: min(calc(100% - 28px), 430px);
+  margin: auto;
+  padding: 32px 0;
+}
+
+.login-brand {
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  color: var(--ink);
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.login-panel {
+  padding: 28px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.login-panel h1 {
+  margin: 0;
+}
+
+.login-panel form {
+  display: grid;
+  gap: 16px;
+  margin-top: 22px;
+}
+
+.password-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.password-field input {
+  border-radius: 5px 0 0 5px;
+}
+
+.password-toggle {
+  min-width: 64px;
+  border-left: 0;
+  border-radius: 0 5px 5px 0;
+}
+
+.login-submit {
+  width: 100%;
+}
+
 @media (max-width: 760px) {
   .page {
     width: min(calc(100% - 20px), 1180px);
@@ -797,6 +877,11 @@ tbody tr:last-child td {
     font-size: 13px;
   }
 
+  .logout-button {
+    padding-inline: 8px;
+    font-size: 13px;
+  }
+
   .title-row,
   .detail-title {
     align-items: stretch;