feat(auth): implement user authentication and email verification

Add registration, login, and logout flows with session management
Integrate Resend for email verification tokens
Create frontend auth views and update topbar state

frontend/src/styles/main.css

@@ -45,7 +45,15 @@ select {
   backdrop-filter: blur(12px);
 }
 
+.topbar-main {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  min-width: 0;
+}
+
 .brand {
+  flex: 0 0 auto;
   font-size: 20px;
   font-weight: 800;
   color: #1d3b2b;
@@ -70,6 +78,38 @@ select {
   color: #ffffff;
 }
 
+.auth-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.auth-actions a,
+.auth-actions .plain-button {
+  min-height: 36px;
+  padding: 7px 12px;
+  border: 1px solid #c7c0b2;
+  border-radius: 8px;
+  background: #fffdfa;
+  color: #4e5c52;
+  font-weight: 800;
+}
+
+.auth-actions a.router-link-active {
+  border-color: #1f6f50;
+  color: #1f5c40;
+}
+
+.auth-user {
+  max-width: 180px;
+  overflow: hidden;
+  color: #566156;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .page {
   width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
@@ -455,6 +495,21 @@ select {
   font-weight: 800;
 }
 
+.primary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-height: 40px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 8px;
+  background: #1f6f50;
+  color: #ffffff;
+  font-weight: 800;
+  cursor: pointer;
+}
+
 .status {
   padding: 18px;
   border: 1px solid #d7d2c4;
@@ -486,6 +541,57 @@ select {
   font-weight: 800;
 }
 
+.auth-page {
+  display: grid;
+  justify-items: center;
+  padding: 24px 0;
+}
+
+.auth-panel {
+  display: grid;
+  gap: 18px;
+  width: min(460px, 100%);
+  padding: 22px;
+  border: 1px solid #d7d2c4;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.auth-panel .page-header {
+  margin-bottom: 0;
+}
+
+.auth-form {
+  display: grid;
+  gap: 14px;
+}
+
+.auth-message {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid #b9d8bd;
+  border-radius: 8px;
+  background: #edf7ef;
+  color: #1f5c40;
+  font-weight: 800;
+}
+
+.auth-message.error {
+  border-color: #e0b0ac;
+  background: #fff0ee;
+  color: #a83f39;
+}
+
+.auth-switch {
+  margin: 0;
+  color: #657067;
+}
+
+.auth-switch a {
+  color: #1f6f50;
+  font-weight: 800;
+}
+
 .admin-layout {
   display: grid;
   grid-template-columns: minmax(320px, 420px) 1fr;
@@ -569,6 +675,18 @@ button:disabled {
     flex-direction: column;
   }
 
+  .topbar-main {
+    align-items: start;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+  }
+
+  .auth-actions {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
   .page-header {
     align-items: start;
     flex-direction: column;