duplicate removed

src/app/app.module.ts

@@ -25,12 +25,9 @@ import { RootRedirectComponent } from './root-redirect/root-redirect.component';
 import { HeaderComponent } from './shared/header/header.component';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { PronunciationComponent } from './pronunciation/pronunciation.component';
-import { PronunciationVideoComponent } from './pronunciationvideo/pronunciationvideo.component';
-import { PronunciationRaggComponent } from './pronunciationragg/pronunciationragg.component';
-
 import { FooterComponent } from './footer/footer.component';
-// If you have AppButtonComponent, import it here as well
-// import { AppButtonComponent } from './app-button/app-button.component';
+import { ButtonComponent } from './shared/button/button.component';
+
 
 @NgModule({
   declarations: [
@@ -39,18 +36,7 @@ import { FooterComponent } from './footer/footer.component';
     AuthenticationComponent,
     AuthComponent,
     RootRedirectComponent,
-    PronunciationComponent,
-    PronunciationVideoComponent,
-    PronunciationRaggComponent,
-    FooterComponent,
-    //GenerateQuestionsComponent,
-    //VocabularyBuilderComponent,
-    //FindwordComponent,
-    //HeaderComponent,
-    //SignInComponent,
-    //ReadingComponent,
-    //WritingComponent,
-    // AppButtonComponent 
+    PronunciationComponent,    
   ],
   imports: [
     BrowserModule,
@@ -61,7 +47,16 @@ import { FooterComponent } from './footer/footer.component';
     MatDialogModule,
     MatSlideToggleModule,
     MatIconModule,
-    MatCardModule
+    MatCardModule,
+    FooterComponent, 
+    GenerateQuestionsComponent, 
+    VocabularyBuilderComponent, 
+    FindwordComponent, 
+    HeaderComponent, 
+    SignInComponent, 
+    ReadingComponent, 
+    WritingComponent,
+    ButtonComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/auth/auth.component.css

@@ -1,4 +1,4 @@
-.py-learn-text {
+/*.py-learn-text {
   font-size: 4vw;
   font-weight: 600;
   color: #073879;
@@ -33,9 +33,9 @@
   width: 66vw;
   height: 600px;
   background-color: white;
-  border-radius: 24px;
+  border-radius: 24px;*/
   /*box-shadow: #ffffff 0px 5px 15px;*/
-  box-shadow: #ffffff 1px 1px 51px;
+  /*box-shadow: #ffffff 1px 1px 51px;
   overflow: hidden;
 }
 
@@ -87,9 +87,9 @@ h2 {
 input[type="text"],
 input[type="password"] {
   width: 100%;
-  padding: 16px;
+  padding: 16px;*/
   /* margin: 12px 0; */
-  border: 1px solid #dadce0;
+  /*border: 1px solid #dadce0;
   border-radius: 6px;
   font-size: 18px;
   margin-bottom: 1vw;
@@ -160,11 +160,11 @@ button {
 
     .footer-link a:hover {
       text-decoration: underline;
-    }
+    }*/
 
 
 /* Positioning the social media icons at the top-right corner */
-.social-media-icons {
+/*.social-media-icons {
   position: absolute;
   top: 1vw;
   right: 2vw;
@@ -179,33 +179,33 @@ button {
 }
 
   .social-icon img:hover {
-    transform: scale(1.1); /* Slight zoom effect on hover */
-  }
+    transform: scale(1.1);*/ /* Slight zoom effect on hover */
+  /*}
 
 .language-grade-container {
   display: flex;
-  gap: 13vw; /* Gap between Language and Grade sections */
-  align-items: center;
+  gap: 13vw;*/ /* Gap between Language and Grade sections */
+  /*align-items: center;
 }
 
 .language-switcher,
 .grade-switcher {
   display: flex;
   align-items: center;
-  gap: 0.5vw; /* Gap between label and select box */
-}
+  gap: 0.5vw;*/ /* Gap between label and select box */
+/*}
 
 .language-label, .grade-label {
-  color: #007bff; /* Blue for Language label */
-  font-size: 1vw;
+  color: #007bff;*/ /* Blue for Language label */
+  /*font-size: 1vw;
   font-weight: bold;
 }
 
 
 
-.dropdown-select {
+.dropdown-select {*/
   /* padding: 0.5vw; */
-  font-size: 1vw;
-  border-radius: 5px;
+  /*font-size: 1vw;
+  border-radius: 5px;*/
   /* border: 1px solid #000; */
-}
+/*}*/

src/app/auth/auth.component.html

@@ -1,20 +1,20 @@
-<div class="login-wrapper">
-  <div class="login-container">
+<!--<div class="login-wrapper">
+  <div class="login-container">-->
     <!-- Left side image and logo -->
-    <div class="login-image">
+    <!--<div class="login-image">
       <img src="assets/images/login/lion.png" alt="Login Illustration" class="bgImage" />
       <img src="assets/images/pykara-logo.png" alt="Pykara Logo" class="logo" />
-    </div>
+    </div>-->
 
     <!-- Right side form -->
-    <div class="login-box">
+    <!--<div class="login-box">
       <div class="logo-header">
-        <span class="py-learn-text">Py- Learn</span>
+        <span class="py-learn-text">Py- Learn</span>-->
         <!-- Added self-learning system text here -->
-        <div class="self-learning-system">(A Self-Learning System)</div>
+        <!--<div class="self-learning-system">(A Self-Learning System)</div>
       </div>
 
-      <h2>Login</h2>
+      <h2>Login</h2>-->
       <!--<p class="subtitle">Use your Pykara account</p>-->
       <!--<input type="text" [(ngModel)]="username" placeholder="Username or Email" />
 
@@ -31,7 +31,7 @@
 
   <button (click)="login()">Login</button>-->
 
-      <form (ngSubmit)="login()" #loginForm="ngForm" autocomplete="on">
+      <!--<form (ngSubmit)="login()" #loginForm="ngForm" autocomplete="on">
         <input type="text" name="username" [(ngModel)]="username" placeholder="Username or Email" required />
 
         <div class="password-field">
@@ -82,11 +82,11 @@
 
   <div class="footer-link">
     <a href="https://pykara.ai" target="_blank">www.pykara.ai</a>
-  </div>
+  </div>-->
 
 
   <!-- Social Media Icons at the top-right -->
-  <div class="social-media-icons">
+  <!--<div class="social-media-icons">
     <a href="https://www.youtube.com/@PykaraTechnologies/videos" target="_blank" class="social-icon">
 
       <img src="assets/images/home/youtube-icon.png" alt="YouTube">
@@ -98,4 +98,4 @@
   </div>
 
 
-</div>
+</div>-->

src/app/auth/auth.component.ts

@@ -9,64 +9,64 @@ type GradeLevel = 'lowergrade' | 'midgrade' | 'highergrade';
 })
 export class AuthComponent {
 
-  username: string = '';
-  password: string = '';
-  errorMessage: string = '';
-  showPassword: boolean = false;
+  //username: string = '';
+  //password: string = '';
+  //errorMessage: string = '';
+  //showPassword: boolean = false;
 
-  constructor(private authService: AuthService, private router: Router) { }
+  //constructor(private authService: AuthService, private router: Router) { }
 
-  //ngOnInit(): void {
-  //  this.authService.checkSession();
-  //}
-  // ✅ Handle Login
-  login(): void {
-    this.authService.login(this.username, this.password).subscribe(
-      (response) => {
-        // 1) Prefer grade coming from backend if it exists
-        let level = this.normalizeGrade(
-          (response?.gradeLevel ?? response?.grade ?? response?.role ?? '')
-        );
+  ////ngOnInit(): void {
+  ////  this.authService.checkSession();
+  ////}
+  //// ✅ Handle Login
+  //login(): void {
+  //  this.authService.login(this.username, this.password).subscribe(
+  //    (response) => {
+  //      // 1) Prefer grade coming from backend if it exists
+  //      let level = this.normalizeGrade(
+  //        (response?.gradeLevel ?? response?.grade ?? response?.role ?? '')
+  //      );
 
-        // 2) Otherwise derive it from the USERNAME exactly as you requested
-        if (!level) level = this.normalizeGrade(this.username);
+  //      // 2) Otherwise derive it from the USERNAME exactly as you requested
+  //      if (!level) level = this.normalizeGrade(this.username);
 
-        // 3) Persist for ApiService -> sets X-User per request
-        if (!level) level = 'highergrade'; // final fallback (optional)
-        localStorage.setItem('gradeLevel', level);
+  //      // 3) Persist for ApiService -> sets X-User per request
+  //      if (!level) level = 'highergrade'; // final fallback (optional)
+  //      localStorage.setItem('gradeLevel', level);
 
-        // 4) Proceed as before
-        this.authService.setLoggedIn(true);
-        this.authService.startAutoRefresh();
+  //      // 4) Proceed as before
+  //      this.authService.setLoggedIn(true);
+  //      this.authService.startAutoRefresh();
 
-        const redirectUrl = localStorage.getItem('redirectAfterLogin') || '/home';
-        localStorage.removeItem('redirectAfterLogin');
-        this.router.navigate([redirectUrl]);
-      },
-      () => {
-        this.errorMessage = 'Invalid username or password';
-      }
-    );
-  }
+  //      const redirectUrl = localStorage.getItem('redirectAfterLogin') || '/home';
+  //      localStorage.removeItem('redirectAfterLogin');
+  //      this.router.navigate([redirectUrl]);
+  //    },
+  //    () => {
+  //      this.errorMessage = 'Invalid username or password';
+  //    }
+  //  );
+  //}
 
   
-  private normalizeGrade(v: string): GradeLevel | '' {
-    const s = (v || '').trim().toLowerCase();
-    if (s === 'lowergrade' || s === 'lower' || s === 'low' || s === 'l') return 'lowergrade';
-    if (s === 'midgrade' || s === 'mid' || s === 'm') return 'midgrade';
-    if (s === 'highergrade' || s === 'higher' || s === 'high' || s === 'h') return 'highergrade';
-    return '';
-  }
+  //private normalizeGrade(v: string): GradeLevel | '' {
+  //  const s = (v || '').trim().toLowerCase();
+  //  if (s === 'lowergrade' || s === 'lower' || s === 'low' || s === 'l') return 'lowergrade';
+  //  if (s === 'midgrade' || s === 'mid' || s === 'm') return 'midgrade';
+  //  if (s === 'highergrade' || s === 'higher' || s === 'high' || s === 'h') return 'highergrade';
+  //  return '';
+  //}
 
-  // ✅ Check if user is logged in
-  isLoggedIn(): boolean {
-    return this.authService.isLoggedIn();
-  }
+  //// ✅ Check if user is logged in
+  //isLoggedIn(): boolean {
+  //  return this.authService.isLoggedIn();
+  //}
 
 
-  togglePasswordVisibility(): void {
-    this.showPassword = !this.showPassword;
-  }
+  //togglePasswordVisibility(): void {
+  //  this.showPassword = !this.showPassword;
+  //}
 
 
 }

src/app/authentication/authentication.component.css

@@ -1,25 +1,25 @@
 
-.py-learn-text {
+/*.py-learn-text {
   font-size: 4vw;
   font-weight: 600;
   color: #073879;
   font-family: Amonk_Outline;
-}
+}*/
 
 
 
 
 /* Wrapper for the full screen */
-.login-wrapper {
+/*.login-wrapper {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #05234b;
-}
+}*/
 
 /* Container for left and right split */
-.login-container {
+/*.login-container {
   display: flex;
   width: 1100px;
   height: 600px;
@@ -27,10 +27,10 @@
   border-radius: 24px;
   box-shadow: #ffffff 0px 5px 15px;
   overflow: hidden;
-}
+}*/
 
 /* Left section (image) */
-.login-image {
+/*.login-image {
   flex: 1;
   background-color: #e8f0fe;
   display: flex;
@@ -39,12 +39,12 @@
 
 .bgImage {
   width: 100%;
-  height: 66vh;
+  height: 66vh;*/
   /*opacity: 0.5;*/
-}
+/*}*/
 
 /* Right section (form) */
-.login-box {
+/*.login-box {
   flex: 1;
   padding: 60px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -118,8 +118,8 @@ button {
 
   .password-field input {
     width: 100%;
-    padding-right: 40px; /* space for the icon */
-  }
+    padding-right: 40px;*/ /* space for the icon */
+  /*}
 
 .toggle-password {
   position: absolute;
@@ -130,4 +130,4 @@ button {
   font-size: 1.2vw;
   color: #555;
   user-select: none;
-}
+}*/

src/app/authentication/authentication.component.html

@@ -1,13 +1,13 @@
-<div class="login-wrapper">
-  <div class="login-container">
+<!--<div class="login-wrapper">
+  <div class="login-container">-->
     <!-- Left side image -->
-    <div class="login-image">
+    <!--<div class="login-image">
       <img src="assets/images/lion1.png" alt="Login Illustration" class="bgImage"/>
       <img src="assets/images/pykara-logo.png" alt="Pykara Logo" class="logo" />
-    </div>
+    </div>-->
 
     <!-- Right side form -->
-    <div class="login-box">
+    <!--<div class="login-box">
 
       <div class="logo-header">
         <span class="py-learn-text">Py Learn</span>
@@ -23,9 +23,9 @@
                  [(ngModel)]="password"
                  placeholder="Password" />
           <span class="toggle-password" (click)="togglePasswordVisibility()">
-            <i class="{{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}"></i>
+            <i class="{{ showPassword ? 'fas fa-eye' : 'fas fa-eye-slash' }}"></i>-->
             <!-- {{ showPassword ? '👁️' : '🙈' }}-->
-          </span>
+          <!--</span>
         </div>
 
         <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>
@@ -44,4 +44,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>-->

src/app/authentication/authentication.component.ts

@@ -14,33 +14,33 @@ export class AuthenticationComponent {
 
   constructor(private authService: AuthenticationService, private router: Router) { }
 
-  // ✅ Login functionality
-  login(): void {
-    this.authService.login(this.username, this.password).subscribe(
-      (response: any) => {
-        // Directly access the tokens from the response body
-        const token = response.access_token;  // Access the access token directly from the body
-        this.authService.storeToken(token);
-        this.router.navigate(['/home']);  // Redirect to the home page or dashboard after successful login
-      },
-      (error) => {
-        this.errorMessage = 'Invalid username or password';  // Show error message if login fails
-      }
-    );
-  }
-
-
-  // ✅ Check if the user is logged in (token is stored in localStorage)
-  get isLoggedIn(): boolean {
-    return this.authService.isLoggedIn();
-  }
-
-
-  showPassword: boolean = false;
-
-  togglePasswordVisibility(): void {
-    this.showPassword = !this.showPassword;
-  }
+  //// ✅ Login functionality
+  //login(): void {
+  //  this.authService.login(this.username, this.password).subscribe(
+  //    (response: any) => {
+  //      // Directly access the tokens from the response body
+  //      const token = response.access_token;  // Access the access token directly from the body
+  //      this.authService.storeToken(token);
+  //      this.router.navigate(['/home']);  // Redirect to the home page or dashboard after successful login
+  //    },
+  //    (error) => {
+  //      this.errorMessage = 'Invalid username or password';  // Show error message if login fails
+  //    }
+  //  );
+  //}
+
+
+  //// ✅ Check if the user is logged in (token is stored in localStorage)
+  //get isLoggedIn(): boolean {
+  //  return this.authService.isLoggedIn();
+  //}
+
+
+  //showPassword: boolean = false;
+
+  //togglePasswordVisibility(): void {
+  //  this.showPassword = !this.showPassword;
+  //}
 
 
 

src/app/footer/footer.component.css

@@ -72,7 +72,6 @@ footer {
   text-align: center;
   width: 100%;
   position: relative;
-  margin-top: 28vw;
   font-size: 18px;
   font-weight: 700;
   font-family: Inter, Segoe UI, -apple-system, BlinkMacSystemFont, sans-serif;

src/app/footer/footer.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { BrandService } from '../shared/brand.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
+  styleUrls: ['./footer.component.css'],
+  standalone: true,
+  imports: [CommonModule]
 })
 export class FooterComponent {
   showPrivacyPopup = false;

src/app/home/home.component.css

@@ -1,14 +1,25 @@
 .hero {
-  background: url('/assets/images/home/background.png') no-repeat;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 .hero-text {
   color: white;
   text-align: left;
-  max-width: 50%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 1vw;
+  background-image: url('/assets/images/home/background.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
   position: relative;
-  transform: translate(1vw, 17vw);
+  top: 5vw;
+  padding-bottom: 5vw;
 }
 
 h1 {
@@ -241,7 +252,6 @@ h1 {
   padding: 3vw 2vw;
   background-color: #f9f9f9;
   position: relative;
-  top: 30vw;
 }
 
 .section-title {

src/app/home/home.component.html

@@ -73,8 +73,8 @@
     <h1>{{ brand.name }}</h1>
     <h2>A Self-Learning System</h2>
     <p>
-      It is a personalized self-learning system helps students to improve their language skills through interactive and customized exercises.
-      With engaging activities and instant feedback, learning becomes easy and enjoyable!
+      It is a personalized self-learning system helps students to improve their language skills through interactive<br />and customized exercises.
+      With engaging activities and instant feedback,<br />learning becomes easy and enjoyable!
     </p>
   </div>
 

src/app/reading/reading.component.css

@@ -706,8 +706,14 @@
 
 .icon-img {
   width: 4.5vw;
+  cursor: pointer;
+  transition: transform 0.3s;
 }
 
+  .icon-img:hover, .icon-img:focus {
+    transform: scale(1.1);
+  }
+
 
 .passage-text .highlight {
   background-color: yellow;

src/app/sign-in/sign-in.component.css

@@ -15,65 +15,6 @@
   backdrop-filter: blur(16px);
 }
 
-/* Ensure no solid white background is set anywhere */
-
-.signin-header {
-  width: 420px;
-  max-width: 95vw;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding: 0;
-  position: absolute;
-  top: -28px;
-  right: 12px;
-  pointer-events: none;
-  z-index: 2;
-}
-.signin-logo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  pointer-events: auto;
-}
-.signin-login-link {
-  font-size: 1.1rem;
-  color: #fff;
-  margin-top: 0;
-  pointer-events: auto;
-  background: #18314a;
-  border-radius: 0 0 12px 12px;
-  padding: 8px 18px 4px 18px;
-  box-shadow: 0 2px 8px #0002;
-  position: relative;
-  right: 0;
-  top: 0;
-}
-.signin-login-link a {
-  color: #1de9b6;
-  text-decoration: underline;
-  margin-left: 6px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.signin-box {
-  margin: 0 auto;
-  /* Center the box horizontally and vertically */
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: #18314a;
-  border-radius: 22px;
-  box-shadow: 0 12px 48px #000a;
-  padding: 48px 38px 32px 38px;
-  width: 420px;
-  max-width: 95vw;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 .signin-title {
   color: #38bdf8;
   font-size: 2.1rem;
@@ -83,51 +24,60 @@
   letter-spacing: 1px;
   text-shadow: 0 2px 8px #0008;
 }
+
 form {
   width: 100%;
 }
+
 .signin-row {
   display: flex;
   gap: 24px;
   margin-bottom: 18px;
 }
+
 .signin-field {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.signin-field label {
-  color: #fff;
-  font-weight: 600;
-  margin-bottom: 6px;
-  font-size: 1rem;
-  letter-spacing: 0.5px;
-}
-.signin-field input {
-  background: #fff;
-  color: #18314a;
-  border: none;
-  border-radius: 8px;
-  padding: 12px 14px;
-  font-size: 1rem;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px #0002;
-  transition: border 0.2s, box-shadow 0.2s;
-}
-.signin-field input:focus {
-  outline: 2px solid #1de9b6;
-  border-color: #1de9b6;
-  box-shadow: 0 0 0 2px #1de9b688;
-}
-.signin-field input::placeholder {
-  color: #b0b8c1;
-  opacity: 1;
-}
-.signin-field small.error {
-  color: #ff5252;
-  font-size: 0.85rem;
-  margin-top: 4px;
-}
+
+  .signin-field label {
+    color: #fff;
+    font-weight: 600;
+    margin-bottom: 6px;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+  }
+
+  .signin-field input {
+    background: #fff;
+    color: #18314a;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 14px; /* KEEP THIS */
+    font-size: 1rem; /* KEEP THIS */
+    margin-bottom: 2px;
+    box-shadow: 0 1px 4px #0002;
+    transition: border 0.2s, box-shadow 0.2s;
+  }
+
+    .signin-field input:focus {
+      outline: 2px solid #1de9b6;
+      border-color: #1de9b6;
+      box-shadow: 0 0 0 2px #1de9b688;
+    }
+
+    .signin-field input::placeholder {
+      color: #b0b8c1;
+      opacity: 1;
+    }
+
+  .signin-field small.error {
+    color: #ff5252;
+    font-size: 0.85rem;
+    margin-top: 4px;
+  }
+
 .signin-options-row {
   display: flex;
   justify-content: space-between;
@@ -135,6 +85,7 @@ form {
   margin-bottom: 2vw;
   margin-top: -8px;
 }
+
 .remember-me {
   display: flex;
   align-items: center;
@@ -142,22 +93,26 @@ form {
   font-size: 1rem;
   color: #b0b8c1;
 }
+
   .remember-me input[type="checkbox"] {
     accent-color: #38bdf8;
     width: 16px;
     height: 16px;
   }
+
 .forgot-password {
   font-size: 1rem;
 }
+
 .forgot-link {
   color: #38bdf8;
   text-decoration: underline;
   font-weight: 500;
   cursor: pointer;
 }
+
 .signin-btn {
-  width:100%;
+  width: 100%;
   background: #18314a;
   color: #fff;
   border: none;
@@ -169,19 +124,18 @@ form {
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
 }
+
   .signin-btn:hover {
     background: #38bdf8;
   }
+
 .signin-footer {
   color: #b0b8c1;
   font-size: 0.95rem;
   text-align: center;
   margin-top: 8px;
 }
-.signin-footer .footer-sep {
-  display: block;
-  height: 16px;
-}
+
   .signin-footer a {
     color: #38bdf8;
     text-decoration: underline;
@@ -189,6 +143,7 @@ form {
     font-weight: 600;
     cursor: pointer;
   }
+
 .signin-close {
   position: absolute;
   top: 18px;
@@ -209,43 +164,12 @@ form {
   transition: background 0.2s, color 0.2s;
   box-shadow: 0 2px 8px #0005;
 }
+
   .signin-close:hover {
     background: #38bdf8;
     color: #18314a;
   }
 
-@media (max-width: 700px) {
-  .signin-box {
-    padding: 18px 6vw 18px 6vw;
-    width: 98vw;
-  }
-  .signin-header {
-    flex-direction: column;
-    align-items: flex-start;
-    width: 98vw;
-    padding: 0 0 12px 0;
-  }
-  .signin-title {
-    font-size: 1.3rem;
-  }
-  .signin-row {
-    flex-direction: column;
-    gap: 0;
-  }
-}
-.ai-particle-bg {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background: url('/assets/particles.svg');
-  opacity: 0.18;
-  animation: particleDrift 18s linear infinite;
-}
-@keyframes particleDrift {
-  0% { background-position: 0 0; }
-  100% { background-position: 120px 80px; }
-}
 .spinner {
   display: inline-block;
   width: 18px;
@@ -259,113 +183,15 @@ form {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg);} 
-  100% { transform: rotate(360deg);} 
-}
+  0% {
+    transform: rotate(0deg);
+  }
 
-.py-logo-glow {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  box-shadow: 0 0 24px #38bdf8, 0 0 12px #13bfa6;
-  animation: logoGlow 3.5s ease-in-out infinite alternate;
-}
-@keyframes logoGlow {
-  0% { box-shadow: 0 0 12px #38bdf8, 0 0 6px #13bfa6; }
-  100% { box-shadow: 0 0 32px #38bdf8, 0 0 18px #13bfa6; }
-}
-.ai-scan-line {
-  display: none;
-}
-.ai-slide-in {
-  animation: slideInBox 0.8s cubic-bezier(.39,.58,.57,1) both;
-}
-@keyframes slideInBox {
-  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
-  100% { opacity: 1; transform: translateY(0) scale(1); }
-}
-.lock-icon {
-  color: #38bdf8;
-  font-size: 1.2em;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-.signin-tagline {
-  color: #b0b8c1;
-  font-size: 1.08em;
-  text-align: center;
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-.signin-welcome {
-  color: #38bdf8;
-  font-size: 1.05em;
-  text-align: center;
-  margin-bottom: 18px;
-  font-weight: 600;
-}
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 22px;
-}
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: #b0b8c1;
-  border-radius: 22px;
-  transition: .4s;
-}
-.switch input:checked + .slider {
-  background: #38bdf8;
-}
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 3px;
-  bottom: 3px;
-  background: #fff;
-  border-radius: 50%;
-  transition: .4s;
-}
-.switch input:checked + .slider:before {
-  transform: translateX(16px);
-}
-.signin-hint {
-  color: #b0b8c1;
-  font-size: 0.95em;
-  text-align: right;
-  margin-bottom: 8px;
-}
-.ai-pulse {
-  animation: aiPulseGlow 1.5s infinite alternate;
-}
-@keyframes aiPulseGlow {
-  0% { box-shadow: 0 2px 12px #38bdf844; }
-  100% { box-shadow: 0 2px 24px #38bdf888; }
-}
-.signin-session-tip {
-  color: #b0b8c1;
-  font-size: 0.95em;
-  text-align: center;
-  margin-bottom: 8px;
-}
-.signin-security-note {
-  color: #ff5252;
-  font-size: 0.95em;
-  font-weight: 600;
-  display: block;
-  margin-bottom: 4px;
+  100% {
+    transform: rotate(360deg);
+  }
 }
+
 .signin-error-toast {
   background: transparent;
   color: #ff5252;
@@ -377,14 +203,33 @@ form {
   text-align: center;
   animation: shakeError 0.3s cubic-bezier(.39,.58,.57,1);
 }
+
 @keyframes shakeError {
-  0% { transform: translateX(0); }
-  20% { transform: translateX(-8px); }
-  40% { transform: translateX(8px); }
-  60% { transform: translateX(-8px); }
-  80% { transform: translateX(8px); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-8px);
+  }
+
+  40% {
+    transform: translateX(8px);
+  }
+
+  60% {
+    transform: translateX(-8px);
+  }
+
+  80% {
+    transform: translateX(8px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
 }
+
 .forgot-modal-bg {
   position: fixed;
   inset: 0;
@@ -395,10 +240,17 @@ form {
   justify-content: center;
   animation: fadeInModalBg 0.4s;
 }
+
 @keyframes fadeInModalBg {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
+
 .forgot-modal {
   background: #fff;
   border-radius: 18px;
@@ -413,21 +265,32 @@ form {
   align-items: center;
   animation: fadeInModal 0.4s;
 }
+
 @keyframes fadeInModal {
-  from { opacity: 0; transform: scale(0.98); }
-  to { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
+
 .forgot-modal h3 {
   color: #38bdf8;
   margin: 12px 0 8px 0;
   font-size: 1.4em;
   font-weight: 700;
 }
+
 .forgot-modal p {
   color: #23272b;
   font-size: 1.08em;
   margin-bottom: 18px;
 }
+
 .forgot-modal input[type="email"] {
   background: #f4f6fa;
   color: #18314a;
@@ -439,6 +302,7 @@ form {
   box-shadow: 0 1px 4px #0002;
   width: 100%;
 }
+
 .modal-close {
   width: 23%;
   background: #18314a;
@@ -458,49 +322,6 @@ form {
     background: #38bdf8;
     color: #18314a;
   }
-.google-signin-row {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-#google-btn-div {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-#google-btn-div > div {
-  width: 100%;
-  min-width: 0;
-  border-radius: 8px !important;
-  padding: 14px 0 !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  box-shadow: 0 2px 8px #0003 !important;
-  background: #fff !important;
-  color: #18314a !important;
-  border: none !important;
-  margin: 0 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.g-signin2 {
-  width: 100%;
-  min-width: 0;
-  border-radius: 8px !important;
-  padding: 14px 0 !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  box-shadow: 0 2px 8px #0003 !important;
-  background: #fff !important;
-  color: #18314a !important;
-  border: none !important;
-  margin: 0 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
 .eye-toggle {
   position: absolute;
@@ -518,282 +339,95 @@ form {
   opacity: 0.7;
   transition: color 0.2s, opacity 0.2s;
 }
+
 #password {
   padding-right: 40px;
 }
 
-.password-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+.auth-card {
+  width: 1140px; /* viewport width remains */
+  height: 700px; /* increased height to accommodate content and remove scroll */
+  perspective: none;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12), #ffffff 1px 1px 51px; /* added white glow */
+  margin: 0 auto;
 }
-.password-label .eye-toggle {
-  position: static;
-  right: auto;
-  top: auto;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  color: #888;
-  opacity: 0.9;
-  padding: 0 4px;
+
+.card-inner {
+  width: 200%; /* contains both faces side-by-side */
+  height: 100%;
+  display: flex; /* place front and back side-by-side */
+  /* much slower transition so flip is clearly visible to users */
+  transition: transform 0.7s cubic-bezier(.22, .9, .32,1);
+  will-change: transform;
+}
+
+.auth-card.flipped .card-inner {
+  transform: translate3d(-50%,0,0);
 }
-.password-label .eye-toggle:hover {
-  color: #555;
+
+.auth-card:not(.flipped) .card-inner {
+  transform: translate3d(0,0,0);
+}
+
+.card-front .main-panel,
+.card-back .main-panel {
+  transition: opacity 1s ease 0.15s;
+}
+
+.card-front[aria-hidden="true"] .main-panel,
+.card-back[aria-hidden="true"] .main-panel {
+  opacity: 0;
+}
+
+.card-front[aria-hidden="false"] .main-panel,
+.card-back[aria-hidden="false"] .main-panel {
   opacity: 1;
 }
 
-/* --- UI DESIGN UPDATE TO MATCH SCREENSHOT --- */
-.auth-box {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  width: 820px;
-  max-width: 98vw;
-  min-width: 340px;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #0002;
+.card-front, .card-back {
+  width: 50%;
+  height: 100%;
+  flex: 0 0 50%;
+  box-sizing: border-box;
+  position: relative; /* allow absolute children inside */
   overflow: hidden;
-  background: none;
 }
 
-.panel-left {
+.card-content {
+  display: flex;
+  height: 100%;
+  flex-direction: row-reverse;
+}
+
+.side-panel {
+  width: 48%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-panel {
+  width: 55%;
+  padding: 48px 48px;
+  box-sizing: border-box;
   background: #fff;
-  color: #222;
+  overflow: visible;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 48px 32px;
 }
-.panel-left .signin-title {
-  font-size: 2.1rem;
-  font-weight: 800;
-  margin-bottom: 12px;
-  text-align: center;
-  color: #222;
-}
-.panel-left .signin-desc {
-  font-size: 1.05rem;
-  margin-bottom: 24px;
-  text-align: center;
-  color: #555;
-}
-.panel-left .signin-btn {
-  background: var(--primary-cyan-mid);
-  color: #fff;
-  border: none;
-  border-radius: 999px;
-  padding: 12px 32px;
-  font-size: 1.1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.panel-left .signin-btn:hover {
-  background: var(--primary-cyan-dark);
-  color: #fff;
-}
-
-.panel-right {
-  background: linear-gradient(135deg, var(--primary-cyan-dark) 0%, var(--primary-cyan-mid) 100%);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 32px;
-}
-.panel-right .signup-title {
-  font-size: 2rem;
-  font-weight: 800;
-  margin-bottom: 18px;
-  text-align: left;
-  color: #fff;
-}
-.panel-right .signup-desc {
-  font-size: 1.05rem;
-  margin-bottom: 24px;
-  text-align: center;
-  color: #fff;
-}
-.panel-right .signup-btn {
-  background: none;
-  color: #fff;
-  border: 2px solid #fff;
-  border-radius: 999px;
-  padding: 12px 32px;
-  font-size: 1.1rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-  box-shadow: none;
-}
-
-
-/* Input fields and buttons for left panel */
-.panel-left .signin-field input,
-.panel-left .signin-field select {
-  background: #f5f5f5;
-  color: #222;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 12px 14px;
-  font-size: 1rem;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px #0001;
-  transition: border 0.2s, box-shadow 0.2s;
-}
-.panel-left .signin-field input:focus,
-.panel-left .signin-field select:focus {
-  outline: 2px solid #ff416c;
-  border-color: #ff416c;
-  box-shadow: 0 0 0 2px #ff416c44;
-}
-
-/* Social buttons row for left panel */
-.panel-left .social-row {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 18px;
-  justify-content: center;
-}
-.panel-left .social-btn {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background: #f5f5f5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.3em;
-  color: var(--primary-cyan-dark);
-  border: none;
-  cursor: pointer;
-  box-shadow: 0 2px 8px #0001;
-  transition: background 0.2s, color 0.2s;
-}
-.panel-left .social-btn:hover {
-  background: var(--primary-cyan-dark);
-  color: #fff;
-}
-
-/* Professional shadow and rounded corners for the whole box */
-.auth-box {
-  box-shadow: 0 8px 32px #0002;
-  border-radius: 18px;
-}
-
-/* Ensure identical size and prevent clipping */
-.auth-box {
-  display: grid;
-  grid-template-columns: 420px 600px; /* match sign-up columns */
-  width: 1020px; /* increased to accommodate both panels */
-  height: 620px; /* increased height to avoid overflow */
-  max-width: 98vw;
-  min-width: 340px;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #0002;
-  overflow: visible; /* ensure no content is clipped */
-  background: none;
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* Reduce right panel width to make it less large */
-.auth-box {
-  display: grid;
-  grid-template-columns: 360px 840px; /* reduced right panel from 600px to 520px */
-  width: 850px; /* adjusted total width to match columns */
-  height: 820px;
-  max-width: 98vw;
-  min-width: 340px;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #0002;
-  overflow: visible; /* ensure no content is clipped */
-  background: none;
-  position: relative;
-  box-sizing: border-box;
-  justify-content:end;
-  align-items:baseline;
-  justify-items:start;
-}
-
-/* Ensure panels occupy full height and use box-sizing */
-.panel-left, .panel-right {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* Card viewport and sliding inner container */
-.auth-card {
-  width: 1140px; /* viewport width remains */
-  height: 700px; /* increased height to accommodate content and remove scroll */
-  perspective: none;
-  overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.12), #ffffff 1px 1px 51px; /* added white glow */
-  margin: 0 auto;
-}
-
-.card-inner {
- width:200%; /* contains both faces side-by-side */
- height:100%;
- display: flex; /* place front and back side-by-side */
- /* much slower transition so flip is clearly visible to users */
- transition: transform 0.7s cubic-bezier(.22, .9, .32,1);
- will-change: transform;
-}
-
-.auth-card.flipped .card-inner {
- transform: translate3d(-50%,0,0);
-}
-.auth-card:not(.flipped) .card-inner {
- transform: translate3d(0,0,0);
-}
-
-/* panel fade with proper syntax */
-.card-front .main-panel,
-.card-back .main-panel {
- transition: opacity 1s ease 0.15s;
-}
-.card-front[aria-hidden="true"] .main-panel,
-.card-back[aria-hidden="true"] .main-panel {
- opacity:0;
-}
-.card-front[aria-hidden="false"] .main-panel,
-.card-back[aria-hidden="false"] .main-panel {
- opacity:1;
-}
-
-/* faces: each takes 50% of the inner width (i.e. the viewport) */
-.card-front, .card-back {
-  width: 50%;
-  height: 100%;
-  flex: 0 0 50%;
-  box-sizing: border-box;
-  position: relative; /* allow absolute children inside */
-  overflow: hidden;
-}
-
-/* layout inside each face: side-panel + main-panel split */
-.card-content {
-  display: flex;
-  height: 100%;
-  flex-direction: row-reverse;
-}
-.side-panel { width: 48%; display:flex; align-items:center; justify-content:center; }
-.main-panel { width: 55%; padding: 48px 48px; box-sizing:border-box; background:#fff; overflow: visible; display:flex; flex-direction:column; align-items:center; }
-
-/* center logo header */
-.logo-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+
+.logo-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   margin-bottom: 8px;
 }
+
 .py-learn-text {
   font-size: 3vw;
   font-weight: 600;
@@ -801,6 +435,7 @@ form {
   font-family: Amonk_Outline;
   margin-bottom: 1vw;
 }
+
 .self-learning-system {
   font-size: 1.2vw;
   font-weight: bolder;
@@ -808,46 +443,47 @@ form {
   margin-top: -.8vw;
 }
 
-.side-right {
-  background: linear-gradient(135deg,#137ec4 0%,#137ec4 100%);
+.card-front .main-panel .signin-title {
+  color: #222;
 }
-.side-left {
-  background: linear-gradient(135deg, #137ec4 0%, #38bdf8 100%);
+
+.card-back .main-panel .signup-title {
+  color: #222;
 }
-.side-inner { color:#fff; text-align:center; padding: 32px; }
-.side-inner h3 { font-size: 1.6rem; margin-bottom:12px; }
-.side-text { opacity: 0.95; }
-.panel-cta { background:none; border:2px solid #fff; color:#fff; padding:10px 22px; border-radius:999px; cursor:pointer; margin-top:12px; }
 
-/* Ensure sign-in text colors for white main panel */
-.card-front .main-panel .signin-title { color: #222; }
-.card-back .main-panel .signup-title { color: #222; }
+@media (max-width: 900px) {
+  .auth-card {
+    width: 92vw;
+    height: auto;
+  }
 
-/* Maintain previous smaller-screen behavior (stack panels) */
-@media (max-width: 900px){
-  .auth-card{ width:92vw; height:auto; }
-  .card-inner{ width: 200%; /* still double width but we'll stack */ }
-  .card-content{ flex-direction: column; }
-  .side-panel{ width:100%; height:200px; }
-  .main-panel{ width:100%; overflow: visible; }
-}
+  .card-inner {
+    width: 200%; /* still double width but we'll stack */
+  }
 
-/* keep existing control styles unchanged (inputs/buttons/etc.) */
+  .card-content {
+    flex-direction: column;
+  }
+
+  .side-panel {
+    width: 100%;
+    height: 200px;
+  }
 
-/* minimal overwrite of previous rules that used absolute positioning */
-.m, .signin-close, .card-back .signin-close { position: absolute; top: 5px; right: 5px; z-index: 10; }
+  .main-panel {
+    width: 100%;
+    overflow: visible;
+  }
+}
 
-/* accessibility: hide offscreen face from assistive tech when sliding */
 .card-front[aria-hidden="true"], .card-back[aria-hidden="true"] {
   pointer-events: none;
 }
 
-/* Change right panel gradient to blue/cyan */
 .side-panel.side-right {
   background: linear-gradient(135deg, #1d608b 0%, #1d608b 100%);
 }
 
-/* Info box styling for right panel */
 .side-info-box {
   position: absolute;
   top: 164px;
@@ -857,58 +493,13 @@ form {
   z-index: 2;
   text-align: left;
 }
-.side-info-title {
-  font-size: 1.35rem;
-  font-weight: 800;
-  color: #fff;
-  margin-bottom: 6px;
-  letter-spacing: 0.5px;
-}
-.side-info-desc {
-  font-size: 1.08rem;
-  color: #e0f7fa;
-  margin-bottom: 8px;
-}
-.side-info-link {
-  color: #fff;
-  font-weight: 700;
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-.side-info-link:hover {
-  color: #23395d;
-}
 
-/* Ensure info box is above image */
 .side-panel {
   position: relative;
 }
 
-/* Google button row spacing */
-.google-signin-row {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-#google-btn-div {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-.g-signin2 {
-
-  margin: 0 auto;
-}
-
-/* Ensure main-panel text is black (readable on white background) */
 .card-front .main-panel,
 .card-front .main-panel .signin-title,
-.card-front .main-panel .signin-tagline,
-.card-front .main-panel .signin-welcome,
-.card-front .main-panel .signin-session-tip,
-.card-front .main-panel .signin-hint,
 .card-front .main-panel .signin-footer,
 .card-front .main-panel label,
 .card-front .main-panel .signin-field small,
@@ -916,34 +507,36 @@ form {
   color: #23395d !important;
 }
 
-/* Ensure required field errors are red on the front main panel */
-.card-front .main-panel .signin-field small.error {
-  color: #ff5252 !important;
-}
+  .card-front .main-panel .signin-field small.error {
+    color: #ff5252 !important;
+  }
+
+  .card-front .main-panel a {
+    color: #0b57a4 !important;
+  }
 
-/* Keep links styled but darken slightly for contrast */
-.card-front .main-panel a {
- color: #0b57a4 !important;
-}
 .signin-divider-row {
- display: flex;
- align-items: center;
- justify-content: center;
- width:100%;
- margin:12px 018px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 12px 018px 0;
 }
+
 .divider {
- flex:1;
- height:1px;
- background: #b0b8c1;
- margin:08px;
+  flex: 1;
+  height: 1px;
+  background: #b0b8c1;
+  margin: 08px;
 }
+
 .divider-or {
- color: #23395d;
- font-size:1.08em;
- font-weight:600;
- margin:08px;
+  color: #23395d;
+  font-size: 1.08em;
+  font-weight: 600;
+  margin: 08px;
 }
+
 .google-btn {
   width: 100%;
   height: 45px;
@@ -963,311 +556,128 @@ form {
   gap: 12px;
   transition: background 0.2s, color 0.2s;
 }
+
   .google-btn:hover {
     background: #38bdf8;
   }
+
 .google-logo {
- width:24px;
- height:24px;
-}
-.fact-rotator {
- font-size:1.18rem;
- font-weight:700;
- color: #fff;
- margin-bottom:8px;
- min-height:32px;
- text-align: left;
- transition: opacity 0.6s;
- letter-spacing:0.5px;
- animation: fadeFact0.6s;
-}
-@keyframes fadeFact {
- from { opacity:0; }
- to { opacity:1; }
+  width: 24px;
+  height: 24px;
 }
+
 .side-panel.side-left {
   position: relative;
   overflow: hidden;
   background: #1d608b; /* Strong blue for contrast */
   min-height: 400px;
 }
+
 .side-img {
- position: absolute;
- top:0; left:0;
- width:100%; height:100%;
- object-fit: cover;
- z-index:0;
-}
-.side-bg-shapes {
- position: absolute;
- top:0; left:0; right:0; bottom:0;
- width:100%; height:100%;
- z-index:1;
- pointer-events: none;
-}
-.bg-circle {
- position: absolute;
- border-radius:50%;
- opacity:0.85;
-}
-.circle1 {
-  width: 120px;
-  height: 120px;
-  top: 18px;
-  left: 18px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-.circle2 {
-  width: 80px;
-  height: 80px;
-  top: 71%;
-  left: 113px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle3 {
-  width: 48px;
-  height: 48px;
-  top: 80%;
-  left: 70%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle4 {
-  width: 160px;
-  height: 160px;
-  top: 70px;
-  right: 204px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.7;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
 }
 
-.circle5 {
-  width: 36px;
-  height: 36px;
+.side-welcome-overlay {
+  position: absolute;
   top: 30%;
-  left: 80%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.6;
-}
-
-.circle6 {
-  width: 60px;
-  height: 60px;
-  bottom: 12%;
-  right: 18%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.5;
-}
-
-.circle7 {
-  width: 54px;
-  height: 54px;
-  top: 10%;
-  right: 10%;
-  background: #18314a;
-  opacity: 0.8;
-}
-
-.circle8 {
-  width: 32px;
-  height: 32px;
-  bottom: 20%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.8;
+  left: 50px;
+  width: 93%;
+  text-align: start;
+  z-index: 2;
+  padding: 024px;
+  pointer-events: auto;
 }
 
-.circle9 {
-  width: 44px;
-  height: 44px;
-  top: 75%;
-  left: 40%;
-  background: #18314a;
-  opacity: 0.7;
+.welcome-back-title {
+  font-size: 2.1rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 8px;
 }
 
-.circle10 {
-  width: 28px;
-  height: 28px;
-  top: 15%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.9;
+.welcome-back-desc {
+  font-size: 1rem;
+  color: #e0f7fa;
+  margin-bottom: 18px;
 }
 
-.circle11 {
-  width: 38px;
-  height: 38px;
-  bottom: 10%;
-  right: 10%;
+.action-btn {
+  width: 21%;
   background: #18314a;
-  opacity: 0.7;
-}
-
-.circle12 {
-  width: 22px;
-  height: 22px;
-  top: 85%;
-  right: 20%;
-  background: #14263c;
-  opacity: 0.8;
-}
-
-/* New large solid circles for sign-in page background */
-.circle-large1 {
- width:220px;
- height:220px;
- top:40px;
- left:60px;
- background: #137ec4;
- opacity:0.45;
- z-index:0;
-}
-.circle-large2 {
- width:180px;
- height:180px;
- bottom:40px;
- right:40px;
- background: #38bdf8;
- opacity:0.35;
- z-index:0;
-}
-.circle-large3 {
- width:140px;
- height:140px;
- top:60%;
- left:60%;
- background: #18314a;
- opacity:0.25;
- z-index:0;
-}
-.circle-large4 {
- width:100px;
- height:100px;
- bottom:11%;
- left:5%;
- background: #13bfa6;
- opacity:0.52;
- z-index:0;
-}
-
-/* Add more white rings for contrast */
-.bg-ring {
- position: absolute;
- border-radius:50%;
- border:6px solid #fff;
- background: none;
- opacity:0.8;
- z-index:1;
-}
-.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
-.ring2 { width:48px; height:48px; top:60px; right:32px; }
-.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
-.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
-.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
-.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
-.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
-.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
-.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
-
-.side-welcome-overlay {
- position: absolute;
- top:30%;
- left:50px;
- width:93%;
- text-align: start;
- z-index:2;
- padding:024px;
- pointer-events: auto;
-}
-.welcome-back-title {
- font-size:2.1rem;
- font-weight:800;
- color: #fff;
- margin-bottom:8px;
- 
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-top: 18px;
+  margin-bottom: 0;
+  display: inline-block;
+  letter-spacing: 0.5px;
+  box-shadow: 02px 8px #0003;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
 }
-.welcome-back-desc {
- font-size:1rem;
- color: #e0f7fa;
- margin-bottom:18px;
 
-}
-.action-btn {
- width:21%;
- background: #18314a;
- color: #fff;
- border: none;
- border-radius:8px;
- padding:14px 0;
- font-size:1.1rem;
- font-weight:700;
- margin-top:18px;
- margin-bottom:0;
- display: inline-block;
- letter-spacing:0.5px;
- box-shadow:02px 8px #0003;
- cursor: pointer;
- transition: background 0.2s, color 0.2s;
-}
-.action-btn:hover {
- background: #38bdf8;
- color: #18314a;
-}
-
-/* Place reveal icon inline when inside the password label */
-.password-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
+  .action-btn:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
 
-/* Wrap for input with trailing icon */
 .input-with-icon {
   position: relative;
   display: flex;
   align-items: center;
 }
-.input-with-icon input {
-  width: 100%;
-  padding-right: 42px; /* space for the icon */
-}
-.input-with-icon .eye-toggle {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  font-size: 1.2em;
-  color: #888;
-  cursor: pointer;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.8;
-}
-.input-with-icon .eye-toggle:hover {
-  opacity: 1;
-  color: #555;
-}
 
-/* add invalid input red outline */
+  .input-with-icon input {
+    width: 100%;
+    padding-right: 42px; /* space for the icon */
+  }
+
+  .input-with-icon .eye-toggle {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 1.2em;
+    color: #888;
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+    opacity: 0.8;
+  }
+
+    .input-with-icon .eye-toggle:hover {
+      opacity: 1;
+      color: #555;
+    }
+
 .signin-field input.invalid {
   border: 1px solid #ff5252;
 }
 
-/* === Readability enhancements for left image overlay (scoped) === */
-.side-panel.side-left { position: relative; }
-.side-panel.side-left::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(205deg, rgba(5,25,46,0.85) 8%, rgba(5,25,46,0.70) 40%, rgba(5,25,46,0.35) 75%);
-  z-index: 1; /* sits above the image, below text card */
-  pointer-events: none;
+.side-panel.side-left {
+  position: relative;
 }
-/* Frosted glass card for the welcome text */
+
+  .side-panel.side-left::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(205deg, rgba(5,25,46,0.85) 8%, rgba(5,25,46,0.70) 40%, rgba(5,25,46,0.35) 75%);
+    z-index: 1; /* sits above the image, below text card */
+    pointer-events: none;
+  }
+
   .side-panel.side-left .side-welcome-overlay {
     position: absolute;
     top: 44%;
@@ -1282,93 +692,43 @@ form {
     box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
     max-width: 429px;
     width: auto;
-    
     text-align: center;
   }
-/* Strengthen text contrast */
-.side-panel.side-left .welcome-back-desc,
-.side-panel.side-left .welcome-back-title { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
-/* Refine button inside overlay only */
-.side-panel.side-left .action-btn {
-  background: #38bdf8;
-  color: #082a47;
-  border: 1px solid #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
-  padding: 10px 28px;
-  width: auto; /* shrink to content */
-  margin-top: 4px;
-  letter-spacing: 0.6px;
-  transition: background .25s, box-shadow .25s, transform .25s;
-}
-.side-panel.side-left .action-btn:hover {
-  background: #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
-  transform: translateY(-2px);
-}
-.side-panel.side-left .action-btn:active { transform: translateY(0); }
-.side-panel.side-left .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
-/* Responsive adjustment so card stays readable on narrow screens */
-@media (max-width: 900px) {
-  .side-panel.side-left .side-welcome-overlay {
-    left: 50%;
-    top: auto;
-    bottom: 20px;
-    transform: translateX(-50%);
-    max-width: 92%;
-    padding: 18px 20px 22px;
+
+  .side-panel.side-left .welcome-back-desc,
+  .side-panel.side-left .welcome-back-title {
+    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
   }
-}
-/* === End readability enhancements === */
 
+  .side-panel.side-left .action-btn {
+    background: #38bdf8;
+    color: #082a47;
+    border: 1px solid #4fd3ff;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+    padding: 10px 28px;
+    width: auto; /* shrink to content */
+    margin-top: 4px;
+    letter-spacing: 0.6px;
+    transition: background .25s, box-shadow .25s, transform .25s;
+  }
+
+    .side-panel.side-left .action-btn:hover {
+      background: #4fd3ff;
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+      transform: translateY(-2px);
+    }
+
+    .side-panel.side-left .action-btn:active {
+      transform: translateY(0);
+    }
+
+    .side-panel.side-left .action-btn:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 3px;
+    }
 
-/* === Readability enhancements for right image overlay (scoped) === */
-.side-panel.side-right { position: relative; overflow:hidden; }
-.side-panel.side-right::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(205deg, rgba(5,25,46,0.85) 10%, rgba(5,25,46,0.70) 45%, rgba(5,25,46,0.32) 78%);
-  z-index: 1; /* above image, below info card */
-  pointer-events: none;
-}
-.side-panel.side-right .side-info-box {
-      position: absolute;
-    top: 38%;
-    left: 7%;
-    z-index: 2;
-    background: rgba(15, 40, 70, 0.55);
-    backdrop-filter: blur(6px) saturate(140%);
-    -webkit-backdrop-filter: blur(6px) saturate(140%);
-    padding: 20px 24px 24px;
-    border-radius: 18px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
-    max-width: 469px;
-    /* width: auto; */
-    text-align: center;
-}
-.side-panel.side-right .welcome-back-title,
-.side-panel.side-right .welcome-back-desc { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
-.side-panel.side-right .action-btn {
-  background: #38bdf8;
-  color: #082a47;
-  border: 1px solid #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
-  padding: 10px 28px;
-  width: auto;
-  margin-top: 4px;
-  letter-spacing: 0.6px;
-  transition: background .25s, box-shadow .25s, transform .25s;
-}
-.side-panel.side-right .action-btn:hover {
-  background: #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
-  transform: translateY(-2px);
-}
-.side-panel.side-right .action-btn:active { transform: translateY(0); }
-.side-panel.side-right .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
 @media (max-width: 900px) {
-  .side-panel.side-right .side-info-box {
+  .side-panel.side-left .side-welcome-overlay {
     left: 50%;
     top: auto;
     bottom: 20px;
@@ -1377,354 +737,23 @@ form {
     padding: 18px 20px 22px;
   }
 }
+
 .side-panel.side-right {
   position: relative;
   overflow: hidden;
-  background: #1d608b; /* Strong blue for contrast */
-  min-height: 400px;
-}
-.side-img {
- position: absolute;
- top:0; left:0;
- width:100%; height:100%;
- object-fit: cover;
- z-index:0;
-}
-.side-bg-shapes {
- position: absolute;
- top:0; left:0; right:0; bottom:0;
- width:100%; height:100%;
- z-index:1;
- pointer-events: none;
-}
-.bg-circle {
- position: absolute;
- border-radius:50%;
- opacity:0.85;
-}
-.circle1 {
-  width: 120px;
-  height: 120px;
-  top: 18px;
-  left: 18px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-.circle2 {
-  width: 80px;
-  height: 80px;
-  top: 71%;
-  left: 113px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle3 {
-  width: 48px;
-  height: 48px;
-  top: 80%;
-  left: 70%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-}
-
-.circle4 {
-  width: 160px;
-  height: 160px;
-  top: 70px;
-  right: 204px;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.7;
-}
-
-.circle5 {
-  width: 36px;
-  height: 36px;
-  top: 30%;
-  left: 80%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.6;
-}
-
-.circle6 {
-  width: 60px;
-  height: 60px;
-  bottom: 12%;
-  right: 18%;
-  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
-  opacity: 0.5;
 }
 
-.circle7 {
-  width: 54px;
-  height: 54px;
-  top: 10%;
-  right: 10%;
-  background: #18314a;
-  opacity: 0.8;
-}
-
-.circle8 {
-  width: 32px;
-  height: 32px;
-  bottom: 20%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.8;
-}
-
-.circle9 {
-  width: 44px;
-  height: 44px;
-  top: 75%;
-  left: 40%;
-  background: #18314a;
-  opacity: 0.7;
-}
-
-.circle10 {
-  width: 28px;
-  height: 28px;
-  top: 15%;
-  left: 60%;
-  background: #14263c;
-  opacity: 0.9;
-}
-
-.circle11 {
-  width: 38px;
-  height: 38px;
-  bottom: 10%;
-  right: 10%;
-  background: #18314a;
-  opacity: 0.7;
-}
-
-.circle12 {
-  width: 22px;
-  height: 22px;
-  top: 85%;
-  right: 20%;
-  background: #14263c;
-  opacity: 0.8;
-}
-
-/* New large solid circles for sign-in page background */
-.circle-large1 {
- width:220px;
- height:220px;
- top:40px;
- left:60px;
- background: #137ec4;
- opacity:0.45;
- z-index:0;
-}
-.circle-large2 {
- width:180px;
- height:180px;
- bottom:40px;
- right:40px;
- background: #38bdf8;
- opacity:0.35;
- z-index:0;
-}
-.circle-large3 {
- width:140px;
- height:140px;
- top:60%;
- left:60%;
- background: #18314a;
- opacity:0.25;
- z-index:0;
-}
-.circle-large4 {
- width:100px;
- height:100px;
- bottom:11%;
- left:5%;
- background: #13bfa6;
- opacity:0.52;
- z-index:0;
-}
-
-/* Add more white rings for contrast */
-.bg-ring {
- position: absolute;
- border-radius:50%;
- border:6px solid #fff;
- background: none;
- opacity:0.8;
- z-index:1;
-}
-.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
-.ring2 { width:48px; height:48px; top:60px; right:32px; }
-.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
-.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
-.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
-.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
-.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
-.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
-.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
-
-.side-welcome-overlay {
- position: absolute;
- top:30%;
- left:50px;
- width:93%;
- text-align: start;
- z-index:2;
- padding:024px;
- pointer-events: auto;
-}
-.welcome-back-title {
- font-size:2.1rem;
- font-weight:800;
- color: #fff;
- margin-bottom:8px;
- 
-}
-.welcome-back-desc {
- font-size:1rem;
- color: #e0f7fa;
- margin-bottom:18px;
-
-}
-.action-btn {
- width:21%;
- background: #18314a;
- color: #fff;
- border: none;
- border-radius:8px;
- padding:14px 0;
- font-size:1.1rem;
- font-weight:700;
- margin-top:18px;
- margin-bottom:0;
- display: inline-block;
- letter-spacing:0.5px;
- box-shadow:02px 8px #0003;
- cursor: pointer;
- transition: background 0.2s, color 0.2s;
-}
-.action-btn:hover {
- background: #38bdf8;
- color: #18314a;
-}
-
-/* Place reveal icon inline when inside the password label */
-.password-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Wrap for input with trailing icon */
-.input-with-icon {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.input-with-icon input {
-  width: 100%;
-  padding-right: 42px; /* space for the icon */
-}
-.input-with-icon .eye-toggle {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  font-size: 1.2em;
-  color: #888;
-  cursor: pointer;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.8;
-}
-.input-with-icon .eye-toggle:hover {
-  opacity: 1;
-  color: #555;
-}
-
-/* add invalid input red outline */
-.signin-field input.invalid {
-  border: 1px solid #ff5252;
-}
-
-/* === Readability enhancements for left image overlay (scoped) === */
-.side-panel.side-left { position: relative; }
-.side-panel.side-left::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(205deg, rgba(5,25,46,0.85) 8%, rgba(5,25,46,0.70) 40%, rgba(5,25,46,0.35) 75%);
-  z-index: 1; /* sits above the image, below text card */
-  pointer-events: none;
-}
-/* Frosted glass card for the welcome text */
-  .side-panel.side-left .side-welcome-overlay {
+  .side-panel.side-right::before {
+    content: "";
     position: absolute;
-    top: 44%;
-    left: 10%;
-    z-index: 2;
-    background: rgba(15, 40, 70, 0.55);
-    backdrop-filter: blur(6px) saturate(140%);
-    -webkit-backdrop-filter: blur(6px) saturate(140%);
-    padding: 20px 24px 24px;
-    border-radius: 18px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
-    max-width: 429px;
-    width: auto;
-    
-    text-align: center;
+    inset: 0;
+    background: linear-gradient(205deg, rgba(5,25,46,0.85) 10%, rgba(5,25,46,0.70) 45%, rgba(5,25,46,0.32) 78%);
+    z-index: 1; /* above image, below info card */
+    pointer-events: none;
   }
-/* Strengthen text contrast */
-.side-panel.side-left .welcome-back-desc,
-.side-panel.side-left .welcome-back-title { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
-/* Refine button inside overlay only */
-.side-panel.side-left .action-btn {
-  background: #38bdf8;
-  color: #082a47;
-  border: 1px solid #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
-  padding: 10px 28px;
-  width: auto; /* shrink to content */
-  margin-top: 4px;
-  letter-spacing: 0.6px;
-  transition: background .25s, box-shadow .25s, transform .25s;
-}
-.side-panel.side-left .action-btn:hover {
-  background: #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
-  transform: translateY(-2px);
-}
-.side-panel.side-left .action-btn:active { transform: translateY(0); }
-.side-panel.side-left .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
-/* Responsive adjustment so card stays readable on narrow screens */
-@media (max-width: 900px) {
-  .side-panel.side-left .side-welcome-overlay {
-    left: 50%;
-    top: auto;
-    bottom: 20px;
-    transform: translateX(-50%);
-    max-width: 92%;
-    padding: 18px 20px 22px;
-  }
-}
-/* === End readability enhancements === */
-
 
-/* === Readability enhancements for right image overlay (scoped) === */
-.side-panel.side-right { position: relative; overflow:hidden; }
-.side-panel.side-right::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(205deg, rgba(5,25,46,0.85) 10%, rgba(5,25,46,0.70) 45%, rgba(5,25,46,0.32) 78%);
-  z-index: 1; /* above image, below info card */
-  pointer-events: none;
-}
-.side-panel.side-right .side-info-box {
-      position: absolute;
+  .side-panel.side-right .side-info-box {
+    position: absolute;
     top: 38%;
     left: 7%;
     z-index: 2;
@@ -1736,29 +765,41 @@ form {
     border: 1px solid rgba(255, 255, 255, 0.15);
     box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
     max-width: 469px;
-    /* width: auto; */
     text-align: center;
-}
-.side-panel.side-right .welcome-back-title,
-.side-panel.side-right .welcome-back-desc { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
-.side-panel.side-right .action-btn {
-  background: #38bdf8;
-  color: #082a47;
-  border: 1px solid #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
-  padding: 10px 28px;
-  width: auto;
-  margin-top: 4px;
-  letter-spacing: 0.6px;
-  transition: background .25s, box-shadow .25s, transform .25s;
-}
-.side-panel.side-right .action-btn:hover {
-  background: #4fd3ff;
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
-  transform: translateY(-2px);
-}
-.side-panel.side-right .action-btn:active { transform: translateY(0); }
-.side-panel.side-right .action-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
+  }
+
+  .side-panel.side-right .welcome-back-title,
+  .side-panel.side-right .welcome-back-desc {
+    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
+  }
+
+  .side-panel.side-right .action-btn {
+    background: #38bdf8;
+    color: #082a47;
+    border: 1px solid #4fd3ff;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px -4px rgba(0,0,0,0.55);
+    padding: 10px 28px;
+    width: auto;
+    margin-top: 4px;
+    letter-spacing: 0.6px;
+    transition: background .25s, box-shadow .25s, transform .25s;
+  }
+
+    .side-panel.side-right .action-btn:hover {
+      background: #4fd3ff;
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px -6px rgba(0,0,0,0.6);
+      transform: translateY(-2px);
+    }
+
+    .side-panel.side-right .action-btn:active {
+      transform: translateY(0);
+    }
+
+    .side-panel.side-right .action-btn:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 3px;
+    }
+
 @media (max-width: 900px) {
   .side-panel.side-right .side-info-box {
     left: 50%;
@@ -1770,16 +811,21 @@ form {
   }
 }
 
-/* Top-left brand logo inside popup */
 .signin-brand-logo {
   position: absolute;
   top: 18px;
   left: 24px;
   z-index: 1200;
- 
 }
-.signin-brand-logo .brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; }
-.brand-logo-img { /* width: 42px; */
+
+  .signin-brand-logo .brand-link {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+  }
+
+.brand-logo-img {
   height: 42px;
   display: block;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
@@ -1789,16 +835,37 @@ form {
   border-radius: 1vw;
   margin: 0.5vw;
 }
-.brand-text { font-size:1.05rem; font-weight:700; letter-spacing:0.6px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.6); font-family:inherit; }
-.signin-brand-logo:hover .brand-text { color:#4fd3ff; }
 
-@media (max-width:700px){
-  .signin-brand-logo { top:10px; left:10px; padding:6px 12px 6px 8px; }
-  .brand-logo-img { width:34px; height:34px; }
-  .brand-text { font-size:0.9rem; }
+.brand-text {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  color: #fff;
+  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
+  font-family: inherit;
+}
+
+.signin-brand-logo:hover .brand-text {
+  color: #4fd3ff;
+}
+
+@media (max-width:700px) {
+  .signin-brand-logo {
+    top: 10px;
+    left: 10px;
+    padding: 6px 12px 6px 8px;
+  }
+
+  .brand-logo-img {
+    width: 34px;
+    height: 34px;
+  }
+
+  .brand-text {
+    font-size: 0.9rem;
+  }
 }
 
-/* Bottom-right watermark */
 .signin-watermark {
   text-decoration: none;
   position: absolute;
@@ -1808,14 +875,17 @@ form {
   font-weight: 600;
   letter-spacing: 0.5px;
   color: #ffffff;
-    
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
-@media (max-width:700px){
-  .signin-watermark { bottom:8px; right:12px; font-size:0.65rem; }
+
+@media (max-width:700px) {
+  .signin-watermark {
+    bottom: 8px;
+    right: 12px;
+    font-size: 0.65rem;
+  }
 }
 
-/* Social Media Icons Top-Right for Sign-In (Home Style) */
 .social-icons.signin-social-icons {
   position: absolute;
   top: 18px;
@@ -1824,66 +894,77 @@ form {
   display: flex;
   gap: 18px;
 }
-.social-icons.signin-social-icons .social-icon {
-  width: 42px;
-  height: 42px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: #fff;
-  color: #38bdf8;
-  font-size: 18px;
-  box-shadow: 0 0 0 1px #214055, 0 4px 14px #0006;
-  transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
-  text-decoration: none;
-}
-.social-icons.signin-social-icons .social-icon.facebook {
-  color: #1877f2;
-}
-.social-icons.signin-social-icons .social-icon.youtube {
-  color: #ff0000;
-}
-.social-icons.signin-social-icons .social-icon.linkedin {
-  color: #0a66c2;
-}
-.social-icons.signin-social-icons .social-icon.instagram {
-  color: #fd5949;
-}
-.social-icons.signin-social-icons .social-icon.facebook:hover {
-  background-color: #1877f2;
-  color: #fff;
-}
-.social-icons.signin-social-icons .social-icon.youtube:hover {
-  background-color: #ff0000;
-  color: #fff;
-}
-.social-icons.signin-social-icons .social-icon.linkedin:hover {
-  background-color: #0a66c2;
-  color: #fff;
-}
-.social-icons.signin-social-icons .social-icon.instagram:hover {
-  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
-  color: #fff;
-  filter: brightness(1.15);
-  box-shadow: 0 6px 22px rgba(253, 89, 73, .6);
-}
-.social-icons.signin-social-icons .social-icon.website:hover {
-  background-color: #009688;
-  color: #fff;
-  transform: translateY(-4px);
-  box-shadow: 0 6px 20px #00968888, 0 0 0 2px #009688 inset;
-}
-@media (max-width:700px){
+
+  .social-icons.signin-social-icons .social-icon {
+    width: 42px;
+    height: 42px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #fff;
+    color: #38bdf8;
+    font-size: 18px;
+    box-shadow: 0 0 0 1px #214055, 0 4px 14px #0006;
+    transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
+    text-decoration: none;
+  }
+
+    .social-icons.signin-social-icons .social-icon.facebook {
+      color: #1877f2;
+    }
+
+    .social-icons.signin-social-icons .social-icon.youtube {
+      color: #ff0000;
+    }
+
+    .social-icons.signin-social-icons .social-icon.linkedin {
+      color: #0a66c2;
+    }
+
+    .social-icons.signin-social-icons .social-icon.instagram {
+      color: #fd5949;
+    }
+
+    .social-icons.signin-social-icons .social-icon.facebook:hover {
+      background-color: #1877f2;
+      color: #fff;
+    }
+
+    .social-icons.signin-social-icons .social-icon.youtube:hover {
+      background-color: #ff0000;
+      color: #fff;
+    }
+
+    .social-icons.signin-social-icons .social-icon.linkedin:hover {
+      background-color: #0a66c2;
+      color: #fff;
+    }
+
+    .social-icons.signin-social-icons .social-icon.instagram:hover {
+      background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
+      color: #fff;
+      filter: brightness(1.15);
+      box-shadow: 0 6px 22px rgba(253, 89, 73, .6);
+    }
+
+    .social-icons.signin-social-icons .social-icon.website:hover {
+      background-color: #009688;
+      color: #fff;
+      transform: translateY(-4px);
+      box-shadow: 0 6px 20px #00968888, 0 0 0 2px #009688 inset;
+    }
+
+@media (max-width:700px) {
   .social-icons.signin-social-icons {
     top: 10px;
     right: 10px;
     gap: 10px;
   }
-  .social-icons.signin-social-icons .social-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 1em;
-  }
-}
 
+    .social-icons.signin-social-icons .social-icon {
+      width: 28px;
+      height: 28px;
+      font-size: 1em;
+    }
+}

src/app/sign-up/sign-up.component.css

@@ -4,60 +4,6 @@
   min-height: 100vh;
 }
 
-.signup-bg {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f7fafd;
-}
-
-.signup-container {
-  display: flex;
-  width: 100vw;
-  max-width: 1200px;
-  min-height: 600px;
-  border-radius: 0;
-  box-shadow: none;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-}
-
-.signup-panel-right {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 0;
-}
-
-.signup-panel-right {
-  flex: 1 1 0;
-  background: #f7fafd;
-}
-
-.create-card {
-  background: #fff;
-  width: 90%;
-  max-width: 540px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 38px 38px 28px 38px;
-  border-radius: 18px;
-  box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18), 0 0 0 2px rgba(56, 189, 248, 0.08);
-  margin: 0 auto;
-}
-
-.create-title {
-  font-size: 2.1rem;
-  font-weight: 900;
-  text-align: center;
-  margin-bottom: 28px;
-  letter-spacing: 0.6px;
-  color: #23395d;
-}
-
 .signup-title.center-title {
   text-align: center;
   margin-bottom: 32px;
@@ -182,18 +128,6 @@
     color: #fff;
   }
 
-.create-login-link {
-  grid-column: 1 / -1;
-  text-align: center;
-  color: #137ec4;
-  margin-top: 0px;
-}
-
-  .create-login-link a {
-    color: #137ec4;
-    font-weight: 700;
-  }
-
 .create-footer {
   grid-column: 1 / -1;
   text-align: center;
@@ -208,80 +142,6 @@
   margin-top: 0px;
 }
 
-.welcome-info-box {
-  position: absolute;
-  top: 32px;
-  left: 0;
-  width: 100%;
-  padding: 0 32px;
-  z-index: 2;
-  text-align: left;
-}
-
-.welcome-info-title {
-  font-size: 1.35rem;
-  font-weight: 800;
-  color: #fff;
-  margin-bottom: 6px;
-  letter-spacing: 0.5px;
-}
-
-.welcome-info-desc {
-  font-size: 1.08rem;
-  color: #e0f7fa;
-  margin-bottom: 8px;
-}
-
-.welcome-info-link {
-  color: #fff;
-  font-weight: 700;
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-  .welcome-info-link:hover {
-    color: #23395d;
-  }
-
-/* Extra whitespace and centering for small screens */
-@media (max-width: 900px) {
-  .signup-container {
-    flex-direction: column;
-    width: 98vw;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .signup-panel-right {
-    padding: 18px 6vw;
-  }
-
-  .create-card {
-    padding: 18px 6vw;
-    margin: 0 auto;
-  }
-
-  .create-form {
-    grid-template-columns: 1fr;
-    gap: 18px;
-  }
-
-  .create-btn {
-    width: 100%;
-  }
-}
-
-@media (max-width: 600px) {
-  .create-card {
-    padding: 10px 2vw;
-  }
-
-  .signup-panel-right {
-    padding: 10px 2vw;
-  }
-}
-
 .signin-close {
   position: absolute;
   top: 5px;
@@ -308,7 +168,6 @@
     color: #18314a;
   }
 
-/* Eye toggle inside password fields: match sign-in positioning */
 .form-field .eye-toggle {
   position: absolute;
   right: 12px;
@@ -334,338 +193,24 @@
     outline: none;
   }
 
-  /* Ensure button SVG scales nicely */
-  .form-field .eye-toggle svg {
-    width: 22px;
-    height: 22px;
-  }
-
-/* Small screen tweak: move eye toggle slightly up if spacing differs */
-@media (max-width: 700px) {
-  .form-field .eye-toggle {
-    top: 28px;
-  }
-}
-
-.fact-rotator {
-  font-size: 1.18rem;
-  font-weight: 700;
-  color: #fff;
-  margin-bottom: 18px;
-  min-height: 32px;
-  text-align: center;
-  transition: opacity 0.6s;
-  letter-spacing: 0.5px;
-  animation: fadeFact 0.6s;
-}
-
-@keyframes fadeFact {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.side-panel.side-right {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
-  min-height: 100%;
-}
-
-.side-panel.side-left {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
- 
-  min-height: 100%;
-}
-
-.wave-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.wave-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-.circle {
-  position: absolute;
+.spinner {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 3px solid #fff;
+  border-top: 3px solid #38bdf8;
   border-radius: 50%;
-  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
-  opacity: 0.85;
-}
-
-.circle1 {
-  width: 90px;
-  height: 90px;
-  top: 80px;
-  left: 60px;
-  box-shadow: 0 0 32px #7b2ff2aa;
-}
-
-.circle2 {
-  width: 60px;
-  height: 60px;
-  top: 220px;
-  left: 220px;
-  box-shadow: 0 0 24px #38bdf8aa;
-}
-
-.circle3 {
-  width: 120px;
-  height: 120px;
-  bottom: 40px;
-  left: 120px;
-  box-shadow: 0 0 48px #7b2ff2aa;
-}
-
-.circle4 {
-  width: 36px;
-  height: 36px;
-  bottom: 80px;
-  right: 60px;
-  box-shadow: 0 0 12px #38bdf8aa;
-}
-
-.welcome-content {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: 80px;
-}
-
-.welcome-title {
-  font-size: 2.2rem;
-  font-weight: 800;
-  color: #fff;
-  margin-bottom: 18px;
-  text-shadow: 0 2px 16px #0006;
-}
-
-.welcome-subtitle {
-  font-size: 1.08rem;
-  color: #e0e7ef;
-  margin-bottom: 32px;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 8px #0004;
-}
-
-.welcome-footer {
-  font-size: 1.05rem;
-  color: #fff;
-  opacity: 0.7;
-  margin-top: 120px;
-  letter-spacing: 2px;
-}
-
-/* Glossy info popup for role info */
-.role-info-popup-bg {
-  position: fixed;
-  inset: 0;
-  background: rgba(30, 41, 59, 0.55);
-  backdrop-filter: blur(1px);
-  z-index: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 48px 56px 48px 24px;
-  animation: fadeInModalBg 0.3s;
-}
-
-@keyframes fadeInModalBg {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+  animation: spin 0.7s linear infinite;
+  vertical-align: middle;
+  margin-right: 8px;
 }
 
-@keyframes popupOpen {
+@keyframes spin {
   0% {
-    opacity: 0;
-    transform: scale(0.92) translateY(24px);
+    transform: rotate(0deg);
   }
 
   100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.role-info-popup {
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 4px;
-  box-shadow: 0 8px 32px #38bdf844 0 24px #1e293b88;
-  padding: 22px 28px 18px 28px;
-  min-width: 220px;
-  max-width: 90vw;
-  text-align: left;
-  z-index: 3001;
-  font-size: 0.98em;
-  color: #23395d;
-  letter-spacing: 0.2px;
-  line-height: 1.5;
-  position: relative;
-  font-family: inherit;
-  opacity: 1;
-  animation: popupOpen 1.2s cubic-bezier(.22, .9, .32, 1) both;
-}
-
-  .role-info-popup .close-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 24px;
-    height: 24px;
-    border: none;
-    background: #14263c;
-    color: #fff;
-    border-radius: 50%;
-    font-size: 1.1rem;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 10;
-    transition: background 0.2s, color 0.2s;
-    box-shadow: 0 2px 8px #0005;
-  }
-
-    .role-info-popup .close-btn:hover {
-      background: #38bdf8;
-      color: #18314a;
-    }
-
-.role-info-btn {
-  background: none;
-  border: none;
-  color: #38bdf8;
-  font-size: 1.15em;
-  cursor: pointer;
-  margin-left: 6px;
-  vertical-align: middle;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.2s;
-}
-
-  .role-info-btn:hover {
-    color: #137ec4;
+    transform: rotate(360deg);
   }
-
-/* Spinner for loading state on buttons */
-.spinner {
- display: inline-block;
- width:18px;
- height:18px;
- border:3px solid #fff;
- border-top:3px solid #38bdf8;
- border-radius:50%;
- animation: spin0.7s linear infinite;
- vertical-align: middle;
- margin-right:8px;
-}
-@keyframes spin {
-0% { transform: rotate(0deg);}
-100% { transform: rotate(360deg);}
-}
-
-/* Info button and floating info popup styles */
-.info-btn {
- background: #38bdf8;
- color: #fff;
- border: none;
- border-radius:50%;
- width:28px;
- height:28px;
- font-size:1.1rem;
- font-weight: bold;
- cursor: pointer;
- margin-left:8px;
-}
-
-.info-popup-bg {
- position: fixed;
- inset:0;
- background: rgba(30,41,59,0.45);
- backdrop-filter: blur(2px);
- z-index:;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.info-popup {
-  background: rgba(255,255,255,0.85);
-  border-radius: 16px;
-  box-shadow: 08px 32px #38bdf844,0024px #1e293b88;
-  padding: 24px 28px 18px 28px;
-  min-width: 320px;
-  max-width: 90vw;
-  text-align: left;
-  font-size: 0.98rem;
-  color: #23395d;
-  position: relative;
-  font-family: inherit;
-  left: 840px;
-}
-
-.info-title {
- font-size:1.08rem;
- font-weight:700;
- margin-bottom:8px;
- color: #38bdf8;
- letter-spacing:0.5px;
-}
-
-.info-text {
- font-size:0.95rem;
- color: #23395d;
- opacity:0.95;
-}
-
-.info-close {
- position: absolute;
- top:8px;
- right:12px;
- background: none;
- border: none;
- font-size:1.5rem;
- color: #38bdf8;
- cursor: pointer;
- font-weight: bold;
- opacity:0.7;
- transition: opacity 0.2s;
-}
-.info-close:hover {
- opacity:1;
 }