login

frontend/src/styles.css

@@ -19,6 +19,10 @@ button {
   cursor: pointer;
 }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
+.secondary-button {
+  background: #e2e8f0;
+  color: #14213d;
+}
 
 .layout {
   display: grid;
@@ -36,7 +40,15 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .sidebar, .main { display: flex; flex-direction: column; gap: 1rem; }
 .stack { display: flex; flex-direction: column; gap: 0.75rem; }
 .small-gap { gap: 0.5rem; }
-.hero { display: flex; align-items: center; gap: 1rem; }
+.hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.session-user {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #64748b;
+  font-size: 0.95rem;
+}
 .messages {
   flex: 1;
   min-height: 360px;
@@ -113,6 +125,28 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   display: block;
 }
 .avatar-caption { font-weight: 700; }
+.login-page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+}
+.login-panel {
+  width: min(420px, 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+.login-copy {
+  text-align: center;
+}
+.login-copy h1 {
+  margin: 0;
+}
+.login-form {
+  width: 100%;
+}
 
 @keyframes pulse {
   from { transform: scale(1); }
@@ -122,4 +156,10 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 @media (max-width: 920px) {
   .layout { grid-template-columns: 1fr; }
   .composer { grid-template-columns: 1fr; }
+  .hero { align-items: flex-start; }
+  .session-user {
+    width: 100%;
+    margin-left: 0;
+    justify-content: space-between;
+  }
 }