:root {
      --primary: #2e3192;
      --primary-dark: #1d226c;
      --yellow: #ffd600;
      --radius: 14px;
      --z-topbar: 9999;
    }

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

    html {
      overflow-x: hidden;
      width: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
      background-color: #f4f6fb;
      min-height: 100vh;
      overflow-x: hidden;
      width: 100%;
      max-width: 100vw;
    }

    /* --- TOPBAR SHARED --- */
    .desktop-topbar,
    .mobile-topbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: var(--z-topbar);
      box-sizing: border-box;
    }

    /* --- DESKTOP TOPBAR --- */
    .desktop-topbar {
      background: var(--primary);
      color: white;
      padding: 16px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0 0 var(--radius) var(--radius);
      min-height: 62px;
      box-shadow: 0 4px 12px rgba(46, 49, 146, 0.12);
      font-weight: 600;
      user-select: none;
      font-size: 16px;
    }

    .desktop-topbar .back-button {
      background-color: #3f4bb8;
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      font-size: 15px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      gap: 8px;
      transition: background-color 0.25s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .back-button:hover {
      background: var(--primary-dark);
      color: white;
    }

    .desktop-topbar .back-button:focus,
    .desktop-topbar .back-button:active {
      outline: 2px solid var(--yellow);
      outline-offset: 2px;
    }

    .desktop-topbar .back-button i {
      font-size: 16px;
    }

    .desktop-topbar .title-section {
      font-size: 22px;
      display: flex;
      align-items: center;
      gap: 11px;
      flex: 1;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .desktop-topbar .title-section i {
      color: var(--yellow);
      font-size: 26px;
      flex-shrink: 0;
    }

    .desktop-topbar .login-icon {
      color: var(--yellow);
      font-size: 24px;
      display: flex;
      align-items: center;
      cursor: default;
      padding-left: 10px;
      flex-shrink: 0;
    }

    /* --- MOBILE TOPBAR --- */
    .mobile-topbar {
      display: none;
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0 0 var(--radius) var(--radius);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
      background: var(--primary);
      color: white;
      padding: 18px 14px 15px;
      flex-direction: column;
      gap: 11px;
      box-sizing: border-box;
      min-height: 64px;
      font-weight: 600;
      font-size: 16px;
    }

    .mobile-topbar .back-row {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .mobile-topbar .back-button {
      width: 100%;
      max-width: 100%;
      background: #3034a0;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
      cursor: pointer;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-decoration: none;
      font-family: inherit;
    }

    .mobile-topbar .back-button:focus,
    .mobile-topbar .back-button:active {
      outline: 2px solid var(--yellow);
    }

    .mobile-topbar .title-row {
      font-weight: 600;
      font-size: 19px;
      display: flex;
      align-items: center;
      gap: 9px;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .mobile-topbar .title-row i,
    .mobile-topbar .icon-row i {
      color: var(--yellow);
      font-size: 24px;
      flex-shrink: 0;
    }

    .mobile-topbar .icon-row {
      display: flex;
      justify-content: center;
    }

    /* Main Wrapper with Background Image */
    .login-wrapper {
      min-height: 100vh;
      background: url('../Image/login.jpg') no-repeat center center/cover;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 15px 60px;
    }

    /* Left Side SVG or Illustration */
    .bg-opacity-img {
      max-height: 500px;
      transition: transform 0.3s ease;
      filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1));
    }

    .bg-opacity-img:hover {
      transform: scale(1.02);
    }

    /* Login Card Styling */
    .login-card {
      background-color: #ffffff;
      position: relative;
      z-index: 2;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
          margin-top: 30px;
    }

    /* Circle Icon Above Card */
    .icon-circle {
      width: 60px;
      height: 60px;
      background-color: #2e3192;
      border-radius: 50%;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* Form Styling */
    .form-label {
      font-weight: 600;
      color: #2e3192;
      margin-bottom: 0.5rem;
      font-size: 0.95rem;
    }

    .input-group-text {
      border: 2px solid #e0e0e0;
      background-color: #f8f9fa !important;
    }

    .form-control {
      border: 2px solid #e0e0e0;
      padding: 0.75rem;
      font-size: max(16px, 1rem);
      transition: border-color 0.3s ease;
      min-height: 44px;
    }

    .form-control:focus {
      border-color: #2e3192;
      box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.1);
    }

    /* Login Button */
    .login-btn {
      background: linear-gradient(135deg, #ffc107, #e0ac00);
      color: #2e3192;
      font-weight: 600;
      transition: all 0.3s ease;
      border-radius: 8px;
      border: none;
      padding: 0.875rem;
      font-size: max(16px, 1rem);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      min-height: 48px;
      touch-action: manipulation;
    }

    .login-btn:hover {
      background: linear-gradient(135deg, #e0ac00, #cc9900);
      color: #2e3192;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    /* Input Placeholder Styling */
    input::placeholder {
      font-size: 0.9rem;
      color: #888;
    }

    /* Message Styling */
    #message {
      padding: 0.75rem;
      border-radius: 8px;
      font-weight: 500;
      font-size: 0.95rem;
    }

    /* Links and Buttons */
    .btn-outline-warning {
      border: 2px solid #ffc107;
      color: #2e3192;
      font-weight: 600;
      transition: all 0.3s ease;
      padding: 0.5rem 1.25rem;
      border-radius: 8px;
    }

    .btn-outline-warning:hover {
      background: linear-gradient(135deg, #ffc107, #e0ac00);
      color: #2e3192;
      border-color: #ffc107;
      transform: translateY(-1px);
    }

    .text-warning {
      color: #ffc107 !important;
    }

    #forgotPasswordBtn {
      color: #2e3192;
      font-weight: 600;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    #forgotPasswordBtn:hover {
      color: #ffc107;
      text-decoration: underline;
    }

    .form-check-input:checked {
      background-color: #2e3192;
      border-color: #2e3192;
    }

    /* Eye Icon Toggle */
    .input-group-text {
      cursor: pointer;
    }

    /* Animations */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-card {
      animation: fadeIn 0.6s ease-in-out;
    }

    /* RESPONSIVE DESIGN */
    @media (max-width: 700px) {
      .desktop-topbar {
        display: none !important;
      }

      .mobile-topbar {
        display: flex !important;
      }

      .login-wrapper {
        padding: 160px 15px 40px;
      }

      .login-card {
        margin-top: 40px;
      }

      .bg-opacity-img {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .mobile-topbar {
        padding: 16px 12px 14px;
      }

      .login-wrapper {
        padding: 160px 10px 30px;
      }

      .login-card {
        padding: 1.5rem !important;
      }

      .icon-circle {
        width: 50px;
        height: 50px;
        top: -25px;
      }

      .icon-circle i {
        font-size: 2rem !important;
      }
    }

    @media (min-width: 701px) {
      .desktop-topbar {
        display: flex !important;
      }

      .mobile-topbar {
        display: none !important;
      }

      .login-wrapper {
        padding: 100px 15px 60px;
      }
    }

    @media (max-width: 768px) and (min-width: 701px) {
      .desktop-topbar {
        padding: 14px 20px;
        font-size: 14px;
      }

      .desktop-topbar .title-section {
        font-size: 18px;
      }

      .desktop-topbar .back-button {
        padding: 6px 12px;
        font-size: 13px;
      }

      .login-wrapper {
        padding: 90px 15px 40px;
      }
    }

    @media (max-width: 991px) {
      .bg-opacity-img {
        display: none;
      }
    }

    @media (orientation: landscape) and (max-height: 500px) {
      .login-wrapper {
        padding: 80px 15px 30px;
      }

      .icon-circle {
        width: 50px;
        height: 50px;
        top: -25px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    button:focus,
    a:focus,
    input:focus {
      outline: 2px solid #2e3192;
      outline-offset: 2px;
    }