* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 :root {
   --bg-overlay: rgba(0, 0, 0, 0.45);
   --card-bg: #efefef;
   --left-overlay: linear-gradient(180deg, rgba(4, 45, 70, 0.74) 0%, rgba(2, 31, 52, 0.82) 100%);
   --text-dark: #141414;
   --text-muted: #6d7682;
   --line: #d8dde3;
   --btn: #4a4a4a;
   --btn-hover: #373737;
   --radius: 20px;
 }

 body {
   font-family: "Inter", sans-serif;
   min-height: 100vh;
   position: relative;
   display: grid;
   place-items: center;
   padding: 20px;
   color: var(--text-dark);
   overflow: hidden;
 }

 .page-bg {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -2;
 }

 .page-overlay {
   position: fixed;
   inset: 0;
   background: var(--bg-overlay);
   z-index: -1;
 }

 .auth-card {
   width: min(1020px, 100%);
   height: 640px;
   background: #fff;
   border: 10px solid rgba(255, 255, 255, 0.95);
   border-radius: var(--radius);
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   overflow: hidden;
   box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
 }

 .brand-panel {
   position: relative;
   height: 100%;
   padding: 34px 28px 18px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   color: #fff;
   overflow: hidden;
 }

 .panel-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
 }

 .panel-overlay {
   position: absolute;
   inset: 0;
   background: var(--left-overlay);
   z-index: 1;
 }

 .panel-content {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }

 .hero-copy {
   margin-top: auto;
   margin-bottom: 18px;
 }

 .logo-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30px;
   align-self: center;
 }

 .logo-img {
   width: clamp(200px, 34vw, 215px);
   max-width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
 }

 .hero-copy h1 {
   font-size: clamp(36px, 4vw, 35px);
   font-weight: 800;
   line-height: 1.03;
   margin-bottom: 10px;
 }

 .hero-copy p {
   font-size: 30px;
   line-height: 1.15;
   font-weight: 700;
   margin-bottom: 16px;
   color: #e8eef6;
 }

 .hero-copy small {
   display: block;
   font-size: 16px;
   color: #ffffff;
   margin: 25px 0px
 }

 .brand-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #dce5ef;
   font-size: 11px;
   margin-top: 0;
   gap: 10px;
   flex-wrap: wrap;
 }

 .socials {
   display: flex;
   gap: 14px;
 }

 .socials svg {
   width: 28px;
   height: 28px;
   display: block;
   cursor: default;
 }

 .form-panel {
   display: flex;
   padding: 40px 26px 24px;
   flex-direction: column;
   justify-content: center;
   position: relative;
   height: 100%;
 }

 .form-panel h2 {
   font-size: clamp(30px, 3.5vw, 34px);
   font-weight: 700;
   margin-bottom: 16px;
   letter-spacing: -0.4px;
 }

 form {
   display: grid;
   gap: 10px;
 }

 .name-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }

 label {
   font-size: 14px;
   font-weight: 600;
   color: #354354;
   margin-bottom: 4px;
   display: block;
 }

 input {
   width: 100%;
   border: 1px solid var(--line);
   background: #ffffff;
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 14px;
   color: #111;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
 }

 input::placeholder {
   color: #99a3af;
 }

 input:focus {
   border-color: #7da0be;
   box-shadow: 0 0 0 3px rgba(125, 160, 190, 0.17);
 }

 input.input-error {
   border-color: #c73434;
   box-shadow: 0 0 0 3px rgba(199, 52, 52, 0.14);
 }

 .field-error {
   font-size: 11px;
   color: #b3261e;
   margin-top: 4px;
   transition: all 0.2s;
 }

 .field-error:empty {
   margin-top: 0;
 }

 .password-wrap {
   position: relative;
 }

 .password-toggle {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   width: 18px;
   height: 18px;
   border: none;
   background: transparent;
   padding: 0;
   opacity: 0.75;
   cursor: pointer;
   display: inline-grid;
   place-items: center;
   color: #020202;
 }

 .password-toggle:hover {
   opacity: 1;
 }

 .eye-icon {
   position: absolute;
   inset: 0;
   width: 16px;
   height: 16px;
   margin: auto;
   pointer-events: none;
 }

 .hint {
   font-size: 11px;
   color: #6f7d8d;
   margin-top: 4px;
 }

 .terms {
   margin-top: 10px;
   font-size: 11px;
   color: #5f6773;
   line-height: 1.45;
 }

 .terms a {
   color: #4180c0;
   text-decoration: underline;
 }

 .continue-btn {
   margin-top: 10px;
   width: 100%;
   border: none;
   border-radius: 6px;
   background: var(--btn);
   color: #fff;
   font-size: 24px;
   font-weight: 700;
   padding: 10px 16px;
   cursor: pointer;
   transition: background 0.2s;
 }

 .continue-btn:hover {
   background: var(--btn-hover);
 }

 .signup-view,
 .login-view {
   width: 100%;
 }

 .login-view {
   display: none;
 }

 .form-panel.login-mode .signup-view {
   display: none;
 }

 .form-panel.login-mode .login-view {
   display: block;
 }

 .login-title {
   font-size: clamp(36px, 4.3vw, 52px);
   font-weight: 700;
   line-height: 1.04;
   margin-bottom: 8px;
   letter-spacing: -0.4px;
 }

 .login-subtitle {
   font-size: 15px;
   color: #6e7683;
   margin-bottom: 22px;
 }

 .google-btn {
   width: 100%;
   border: 1px solid #d9dde2;
   border-radius: 6px;
   background: #f3f4f6;
   color: #4d5562;
   font-size: 13px;
   font-weight: 500;
   padding: 12px 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   cursor: pointer;
 }

 .google-g {
   font-size: 20px;
   font-weight: 700;
   line-height: 1;
   background: conic-gradient(#4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .divider {
   margin: 16px 0 18px;
   color: #8d95a2;
   font-size: 11px;
   text-align: center;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .divider::before,
 .divider::after {
   content: "";
   flex: 1;
   border-top: 1px solid #d8dde3;
 }

 .remember-row {
   margin-top: 2px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   font-size: 12px;
   color: #78808c;
 }

 .remember-row label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 0;
   font-size: 12px;
   color: #78808c;
   font-weight: 500;
 }

 .remember-row input[type="checkbox"] {
   width: 12px;
   height: 12px;
   margin: 0;
   border-radius: 2px;
   padding: 0;
 }

 .forgot-link {
   font-size: 12px;
   color: #3d73cc;
   text-decoration: none;
   font-weight: 500;
 }

 .switch-note {
   margin-top: 8px;
   text-align: center;
   color: #7d848f;
   font-size: 14px;
 }

 .switch-note button {
   border: none;
   background: transparent;
   color: #2d5fcd;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   margin-left: 8px;
 }

 /* Toast Messages */
 .toast-container {
   position: fixed;
   top: 40px;
   right: 30px;
   z-index: 1055;
 }

 .toast-message {
   padding: 15px 40px 15px 15px;
   margin-bottom: 10px;
   border-radius: 6px;
   color: #fff;
   position: relative;
   font-size: 15px;
   min-width: 240px;
 }

 .toast-message.alert-danger,
 .toast-message.error {
   background-color: #dc3545;
 }

 .toast-message.alert-success,
 .toast-message.success {
   background-color: #28a745;
 }

 .toast-close {
   position: absolute;
   top: 5px;
   right: 10px;
   font-size: 20px;
   cursor: pointer;
   color: #fff;
   border: none;
   background: transparent;
 }

 /* Verify Modal */
 .verify-modal {
   position: fixed;
   inset: 0;
   background: rgba(8, 12, 18, 0.55);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 50;
   padding: 16px;
 }

 .verify-modal.open {
   display: flex;
 }

 .verify-modal-card {
   position: relative;
   width: min(520px, 100%);
   background: #efefef;
   border: none;
   border-radius: 6px;
   padding: 46px 32px 34px;
   text-align: center;
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
 }

 .verify-close-btn {
   position: absolute;
   top: 10px;
   right: 12px;
   border: none;
   background: transparent;
   color: #556274;
   font-size: 28px;
   line-height: 1;
   cursor: pointer;
   padding: 2px 6px;
 }

 .verify-modal-card h3 {
   font-size: 46px;
   font-weight: 700;
   margin-bottom: 12px;
   color: #1f2a3a;
   letter-spacing: -0.2px;
 }

 .verify-copy {
   font-size: 14px;
   color: #4d5969;
   line-height: 1.45;
   margin-bottom: 24px;
 }

 .verify-copy strong {
   color: #1c2532;
 }

 .verify-field {
   text-align: left;
   margin-bottom: 30px;
 }

 .verify-field label {
   font-size: 20px;
   color: #2b3645;
   margin-bottom: 8px;
   font-weight: 500;
 }

 .verify-field input {
   font-size: 15px;
   padding: 12px 14px;
   border-radius: 7px;
 }

 .verify-meta {
   font-size: 14px;
   color: #667386;
   line-height: 1.7;
   margin-bottom: 20px;
 }

 .verify-meta a {
   color: #6f8097;
   font-weight: 600;
   margin-left: 6px;
 }

 .verify-meta strong {
   color: #1d2836;
 }

 .verify-btn {
   width: 100%;
   border: none;
   border-radius: 6px;
   background: #505050;
   color: #fff;
   font-size: 23px;
   font-weight: 700;
   padding: 11px 14px;
   cursor: pointer;
 }

 @media (max-width: 980px) {
    body {
      overflow: auto;
    }
 
    .auth-card {
      grid-template-columns: 1fr;
      max-width: 620px;
      height: auto;
      margin: 20px 0;
    }
 
    .brand-panel {
      min-height: 340px;
      height: auto;
    }
 
    .hero-copy h1 {
      font-size: 34px;
    }
 
    .hero-copy p {
      font-size: 20px;
    }
 
    .hero-copy small {
      font-size: 21px;
    }
 
    .form-panel {
      padding-top: 30px;
      min-height: 520px;
      height: auto;
    }
 
    .login-title {
      font-size: 42px;
    }
  }
 
  @media (max-width: 560px) {
    body {
      padding: 10px;
      overflow: auto;
    }
 
    .auth-card {
      border-width: 6px;
      grid-template-columns: 1fr;
      max-width: 420px;
      height: auto;
    }
 
    .brand-panel {
      display: none;
    }
 
    .logo-wrap {
      margin-top: 8px;
    }
 
    .form-panel {
      padding: 22px 14px 18px;
      min-height: 520px;
      height: auto;
    }

   .form-panel h2 {
     font-size: 30px;
     margin-bottom: 18px;
   }
   
   .name-row {
     grid-template-columns: 1fr;
   }

   .continue-btn {
     font-size: 20px;
   }

   .brand-footer {
     font-size: 10px;
   }

   .login-title {
     font-size: 30px;
   }

   .login-subtitle {
     font-size: 13px;
     margin-bottom: 14px;
   }

   .switch-note button {
     font-size: 18px;
   }

   .verify-modal-card h3 {
     font-size: 34px;
   }

   .verify-copy {
     font-size: 15px;
     margin-bottom: 18px;
   }

   .verify-field label {
     font-size: 14px;
   }

   .verify-field input {
     font-size: 16px;
     padding: 11px 12px;
   }

   .verify-meta {
     font-size: 13px;
     margin-bottom: 14px;
   }

   .verify-btn {
     font-size: 24px;
     padding: 12px;
   }
 }