Add hosted login persistence

src/App.css

@@ -7,6 +7,83 @@
   color: #202124;
 }
 
+.login-shell {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 28px;
+  background:
+    linear-gradient(135deg, rgba(47, 111, 94, 0.16), transparent 36%),
+    #ece9df;
+  color: #202124;
+  box-sizing: border-box;
+}
+
+.login-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+  gap: 28px;
+  width: min(760px, 100%);
+  padding: 28px;
+  border: 1px solid #d4cdbd;
+  border-radius: 8px;
+  background: #fffef8;
+  box-shadow: 0 20px 50px rgba(44, 48, 42, 0.14);
+  box-sizing: border-box;
+}
+
+.login-panel h1 {
+  margin: 12px 0 10px;
+  font-size: 42px;
+  line-height: 1.05;
+  letter-spacing: 0;
+}
+
+.login-panel p {
+  margin: 0;
+  color: #657061;
+  line-height: 1.5;
+}
+
+.login-panel form,
+.login-panel label {
+  display: grid;
+  gap: 10px;
+}
+
+.login-panel form {
+  align-content: start;
+  padding-top: 4px;
+}
+
+.login-panel label {
+  color: #657061;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.login-panel input {
+  min-height: 40px;
+  font-size: 15px;
+}
+
+.login-panel button {
+  min-height: 40px;
+  background: #2f6f5e;
+  color: #fffef8;
+  font-size: 14px;
+}
+
+.login-error {
+  padding: 10px 12px;
+  border: 1px solid #d6a5a0;
+  border-radius: 6px;
+  background: #fff4f2;
+  color: #8b231a;
+  font-weight: 700;
+}
+
 .app-shell.menu-open .reader {
   filter: blur(1.5px) brightness(0.62) saturate(0.72);
 }
@@ -260,6 +337,11 @@ button {
   cursor: pointer;
 }
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
@@ -1531,6 +1613,29 @@ textarea:focus-visible {
   color: #eee8d8;
 }
 
+.theme-dark.login-shell {
+  background:
+    linear-gradient(135deg, rgba(47, 111, 94, 0.24), transparent 36%),
+    #161a18;
+}
+
+.theme-dark .login-panel {
+  border-color: #3f493f;
+  background: #222820;
+  color: #eee8d8;
+}
+
+.theme-dark .login-panel p,
+.theme-dark .login-panel label {
+  color: #c4cbbb;
+}
+
+.theme-dark .login-error {
+  border-color: #71443d;
+  background: #35221f;
+  color: #f2b0a8;
+}
+
 .theme-dark .reader {
   background: #161a18;
 }
@@ -1965,6 +2070,20 @@ textarea:focus-visible {
 }
 
 @media (max-width: 760px) {
+  .login-shell {
+    padding: 18px;
+  }
+
+  .login-panel {
+    grid-template-columns: 1fr;
+    gap: 22px;
+    padding: 22px;
+  }
+
+  .login-panel h1 {
+    font-size: 34px;
+  }
+
   .app-shell {
     grid-template-columns: 1fr;
   }