Polish forgot password and password toggle UI to match design system

static/css/style.css

@@ -110,12 +110,48 @@ body::before {
   font-size: 0.9rem;
   margin-bottom: 1.75rem;
 }
-.auth-container .form-group:last-of-type { margin-bottom: 1.75rem; }
+.auth-container .form-group:last-of-type { margin-bottom: 0.5rem; }
+
+.password-row-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.4rem;
+}
+.password-row-meta label { margin-bottom: 0; }
+.forgot-link {
+  margin: 0;
+}
+.forgot-link a {
+  color: var(--text-dim);
+  font-size: 0.78rem;
+  text-decoration: none;
+  transition: color var(--transition);
+  font-weight: 400;
+}
+.forgot-link a:hover { color: var(--accent); text-decoration: underline; }
+
+.auth-actions { margin-top: 1.75rem; }
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+  color: var(--text-dim);
+  font-size: 0.78rem;
+}
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
 .toggle-auth {
   text-align: center;
-  margin-top: 1.5rem;
+  margin-top: 0;
   color: var(--text-muted);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
 }
 .toggle-auth a {
   color: var(--accent);
@@ -124,47 +160,63 @@ body::before {
 }
 .toggle-auth a:hover { text-decoration: underline; }
 
-.forgot-link {
-  text-align: right;
-  margin-top: -0.5rem;
-  margin-bottom: 0.25rem;
+/* Forgot password page header */
+.forgot-header-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1rem;
+  color: var(--accent);
 }
-.forgot-link a {
+.back-to-login {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   color: var(--text-dim);
   font-size: 0.82rem;
   text-decoration: none;
+  margin-top: 1.75rem;
   transition: color var(--transition);
 }
-.forgot-link a:hover { color: var(--accent); }
+.back-to-login:hover { color: var(--accent); }
 
 /* ---- Password input with eye toggle ---- */
 .input-password-wrap {
   position: relative;
-  display: flex;
-  align-items: center;
 }
 .input-password-wrap input {
-  padding-right: 2.8rem;
+  width: 100%;
+  padding-right: 2.75rem;
 }
 .password-toggle {
   position: absolute;
-  right: 0.6rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  width: 2.5rem;
+  background: transparent;
   border: none;
+  border-left: 1px solid transparent;
+  border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0;
   cursor: pointer;
   color: var(--text-dim);
-  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-xs);
-  transition: color var(--transition), background var(--transition);
+  transition: color var(--transition), background var(--transition), border-color var(--transition);
 }
 .password-toggle:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+  border-left-color: var(--border);
+}
+.password-toggle.active {
   color: var(--accent);
-  background: rgba(45, 212, 191, 0.08);
 }
 .password-toggle svg.eye-closed { display: none; }
 .password-toggle.active svg.eye-open { display: none !important; }

templates/index.html

@@ -27,7 +27,10 @@
               <input type="email" id="login-email" required placeholder="you@example.com" />
             </div>
             <div class="form-group">
-              <label for="login-password">Password</label>
+              <div class="password-row-meta">
+                <label for="login-password">Password</label>
+                <span class="forgot-link"><a href="#" data-view="forgot">Forgot password?</a></span>
+              </div>
               <div class="input-password-wrap">
                 <input type="password" id="login-password" required placeholder="Enter your password" />
                 <button type="button" class="password-toggle" data-target="login-password" aria-label="Show password">
@@ -36,9 +39,11 @@
                 </button>
               </div>
             </div>
-            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+            <div class="auth-actions">
+              <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+            </div>
           </form>
-          <p class="forgot-link"><a href="#" data-view="forgot">Forgot your password?</a></p>
+          <div class="auth-divider">or</div>
           <p class="toggle-auth">Don't have an account? <a href="#" data-view="register">Create one</a></p>
         </div>
       </div>
@@ -76,8 +81,11 @@
                 </button>
               </div>
             </div>
-            <button type="submit" class="btn btn-primary btn-block">Create account</button>
+            <div class="auth-actions">
+              <button type="submit" class="btn btn-primary btn-block">Create account</button>
+            </div>
           </form>
+          <div class="auth-divider">or</div>
           <p class="toggle-auth">Already have an account? <a href="#" data-view="login">Sign in</a></p>
         </div>
       </div>
@@ -93,13 +101,16 @@
           <span>SatDetect</span>
         </div>
         <div class="card">
-          <h2>Reset password</h2>
-          <p class="sub">Enter your email and choose a new password.</p>
+          <div class="forgot-header-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          </div>
+          <h2 style="text-align:center;">Reset your password</h2>
+          <p class="sub" style="text-align:center;">Enter the email you registered with and choose a new password.</p>
           <div id="forgot-error" class="alert alert-error hidden"></div>
           <div id="forgot-success" class="alert alert-success hidden"></div>
           <form id="form-forgot">
             <div class="form-group">
-              <label for="forgot-email">Email</label>
+              <label for="forgot-email">Email address</label>
               <input type="email" id="forgot-email" required placeholder="you@example.com" />
             </div>
             <div class="form-group">
@@ -112,9 +123,16 @@
                 </button>
               </div>
             </div>
-            <button type="submit" class="btn btn-primary btn-block">Reset password</button>
+            <div class="auth-actions">
+              <button type="submit" class="btn btn-primary btn-block">Reset password</button>
+            </div>
           </form>
-          <p class="toggle-auth">Remember your password? <a href="#" data-view="login">Sign in</a></p>
+          <div style="text-align:center;">
+            <a href="#" class="back-to-login" data-view="login">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+              Back to sign in
+            </a>
+          </div>
         </div>
       </div>
     </section>
@@ -271,6 +289,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=6"></script>
+  <script src="/static/js/app.js?v=7"></script>
 </body>
 </html>