I Want To Heal 2 build v1.0.2

src/styles.css

@@ -197,6 +197,122 @@ h2 {
   position: relative;
 }
 
+.auth-shell {
+  align-items: center;
+  background:
+    radial-gradient(circle at 20% 0%, rgba(229, 185, 95, 0.08), transparent 26%),
+    linear-gradient(180deg, #0d0f15 0%, #07080b 100%);
+  display: flex;
+  min-height: 100dvh;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.auth-panel {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  margin: 0 auto;
+  max-width: 980px;
+  width: 100%;
+}
+
+.auth-panel.single {
+  grid-template-columns: minmax(0, 520px);
+  justify-content: center;
+}
+
+.auth-brand,
+.auth-card {
+  background: var(--panel);
+  border: 3px solid #0c0d11;
+  box-shadow: 7px 7px 0 #08090c;
+  min-width: 0;
+  outline: 2px solid var(--edge);
+  padding: 24px;
+}
+
+.auth-brand {
+  display: grid;
+  align-content: center;
+  gap: 16px;
+  min-height: 360px;
+}
+
+.auth-brand h1 {
+  font-size: clamp(20px, 3.4vw, 34px);
+}
+
+.auth-brand > p:last-child {
+  color: var(--muted);
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.auth-tabs {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.auth-tabs button {
+  background: #17181e;
+  border: 2px solid #090a0d;
+  color: var(--muted);
+  cursor: pointer;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  min-height: 42px;
+  outline: 2px solid #3e3d47;
+}
+
+.auth-tabs button.selected {
+  color: var(--gold);
+  outline-color: var(--gold);
+}
+
+.auth-card form {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.auth-card label {
+  color: var(--muted);
+  display: grid;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  gap: 8px;
+  text-transform: uppercase;
+}
+
+.auth-card input {
+  background: #111217;
+  border: 2px solid #090a0d;
+  color: var(--ink);
+  font: inherit;
+  font-size: 16px;
+  outline: 2px solid #3e3d47;
+  padding: 10px;
+  width: 100%;
+}
+
+.auth-card input:focus {
+  outline-color: var(--gold);
+}
+
+.auth-message {
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.2;
+  margin-top: 16px;
+  min-height: 38px;
+}
+
+.auth-message.error {
+  color: #ff8190;
+}
+
 .action-run-reward-backdrop {
   align-items: center;
   background: rgba(5, 6, 9, 0.78);
@@ -1617,6 +1733,61 @@ h2 {
     width: 100%;
   }
 
+  .auth-shell {
+    padding: 10px;
+  }
+
+  .auth-panel {
+    gap: 10px;
+    grid-template-columns: minmax(0, 0.95fr) minmax(260px, 1.05fr);
+    max-width: none;
+  }
+
+  .auth-brand,
+  .auth-card {
+    box-shadow: none;
+    padding: 14px;
+  }
+
+  .auth-brand {
+    gap: 10px;
+    min-height: 0;
+  }
+
+  .auth-brand h1 {
+    font-size: 18px;
+  }
+
+  .auth-brand > p:last-child,
+  .auth-message {
+    font-size: 14px;
+  }
+
+  .auth-card form {
+    gap: 10px;
+    margin-top: 12px;
+  }
+
+  .auth-tabs button {
+    font-size: 6px;
+    min-height: 34px;
+  }
+
+  .auth-card label {
+    font-size: 6px;
+    gap: 6px;
+  }
+
+  .auth-card input {
+    font-size: 12px;
+    padding: 7px;
+  }
+
+  .auth-message {
+    margin-top: 10px;
+    min-height: 30px;
+  }
+
   .content-screen,
   .message-panel {
     box-shadow: none;
@@ -2005,6 +2176,14 @@ h2 {
     padding: 8px;
   }
 
+  .auth-panel {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .auth-brand {
+    display: none;
+  }
+
   .screen-heading {
     align-items: start;
   }