:root{
      --brand:#5b3df5;          /* purple like screenshot */
      --brand-dark:#3f2ad6;
      --bg:#f5f6ff;
      --text:#1c1a46;
      --muted:#6c757d;
      --border:#dfe3ef;
    }

    body{
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .auth-wrap{
      min-height: 100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 32px 12px;
    }

    .auth-card{
      width: 100%;
      max-width: 460px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      box-shadow: 0 1px 0 rgba(16,24,40,.02);
      padding: 38px 34px;
    }

    @media (max-width: 576px){
      .auth-card{ padding: 28px 18px; border-radius: 16px; }
    }
    .title{
      font-weight:700;
      font-size:32px;
      color:#0b3c88;
    }

    .subtitle{
      font-size:14px;
      color:#6c757d;
      margin-bottom:25px;
    }
    @media (max-width: 576px){
      .title{ font-size: 34px; }
    }
    .google-auth-btn {
        border: 1px solid #dadce0;
        border-radius: 14px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        font-weight: 500;
        font-size: 16px;
        color: #3c4043;
        transition: all 0.2s ease-in-out;
    }
    .google-auth-btn:hover {
        background-color: #e8eaed;
        border-color: #c6c6c6;
    }

    .google-icon {
      width: 22px;
      height: 22px;
    }
    .divider{
      display:flex;
      align-items:center;
      gap: 14px;
      margin: 18px 0 16px;
      color: var(--muted);
      font-size: 14px;
      justify-content:center;
    }
    .divider::before,
    .divider::after{
      content:"";
      flex:1;
      height:1px;
      background: var(--border);
    }

    .form-label{
      font-size: 13px;
      color:#4b5563;
      margin-bottom: 6px;
    }

    .form-control{
      border-color: var(--border);
      border-radius: 8px;
      padding: 12px 12px;
    }
    .form-control:focus{
      border-color: rgba(91,61,245,.45);
      box-shadow: 0 0 0 .2rem rgba(91,61,245,.12);
    }

    .link-brand{
      color: var(--brand);
      text-decoration:none;
      font-weight: 600;
    }
    .link-brand:hover{ color: var(--brand-dark); text-decoration:underline; }

    .btn-brand{
      background: var(--brand);
      border-color: var(--brand);
      border-radius: 8px;
      height: 54px;
      font-weight: 700;
    }

    .btn-brand:hover{ 
     background: var(--brand-dark);
     border-color: var(--brand-dark);
    }

    .below-btn-link{
      margin-top: 18px;
      text-align:center;
      font-weight: 700;
    }
    .foot{
      margin-top: 22px;
      text-align:center;
      color:#111827;
      font-size: 14px;
    }
    /* wrapper */
    .input-icon{
      position: relative;
      margin-bottom: 16px;
    }

    /* input */
    .input-icon .form-control{
      height: 50px;
      border-radius: 12px;
      border: 1px solid #d9dde7;
      padding-left: 45px;   /* space for left icon */
      padding-right: 45px;  /* space for right icon */
    }

    .input-icon .form-control:focus{
      border-color: #0b3c88;
      box-shadow: none;
    }

    /* icons (default centered) */
    .input-icon i{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #9aa3b2;
    }

    /* left icon */
    .input-icon i:first-child{
      left: 16px;
    }

    /* right icon (eye) */
    .password-field .toggle-password{
      right: 16px;
      cursor: pointer;
    }
    /* when validated + invalid: move ALL icons */
    .was-validated .input-icon:has(.form-control:invalid) i{
      top: 33% !important;
      color: #dc3545 !important;
    }

    /* when validated + valid: center ALL icons */
    .was-validated .input-icon:has(.form-control:valid) i{
      top: 50% !important;
      color: #198754 !important;
    }
    
   /* Remove Bootstrap validation icon */
    .was-validated .password-field .form-control {
      background-image: none !important;
    }

    /* Optional: remove validation icon positioning */
    .was-validated .password-field .form-control:valid,
    .was-validated .password-field .form-control:invalid {
      background-position: unset !important;
      background-size: unset !important;
    }
    /* Smooth switching */
    .panel{ display:none; }
    .panel.active{ display:block; }