feat: complete SSR CRM and refine auth UI

packages/ui/components/TogglePassword.wrn

@@ -107,6 +107,7 @@ component TogglePassword {
           {/if}
         </div>
         <div class="wrn-next__password-control">
+          <span class="wrn-next__password-leading-icon" aria-hidden="true"></span>
           <input
             {...attrs}
             id="{name}-password"
@@ -229,19 +230,32 @@ component TogglePassword {
       width: 100%;
       min-width: 0;
       min-height: 2.75em;
-      padding: 0.65em 3em 0.65em 0.8em;
+      min-height: 3rem;
+      padding: 0.75rem 3rem 0.75rem 2.75rem;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-sm);
       outline: 0;
       color: var(--wrn-color-text);
-      background: var(--wrn-color-bg);
+      background: var(--wrn-color-surface);
       font: inherit;
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
       transition:
         border-color var(--wrn-motion-base) var(--wrn-ease-standard),
         box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
     }
 
+    .wrn-next__password-leading-icon {
+      position: absolute;
+      left: 0.9rem;
+      z-index: 1;
+      width: 1rem;
+      height: 1rem;
+      color: var(--wrn-color-muted);
+      background: currentColor;
+      pointer-events: none;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
+    }
+
     .wrn-next__password-control > input:focus-visible {
       border-color: var(--wrn-component-color);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);