:root {
      color-scheme: light;
    }

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 35%, #FFFFFF 100%);
      color: #0F2A3D;
    }

    a {
      color: #1088C9;
    }

    a:hover {
      color: #0B6FA9;
    }

                                                                        .auth-shell {
      
      min-height: 100vh;
      display: flex;
      gap: clamp(18px, 4vw, 42px);
      padding: clamp(16px, 4vw, 32px);
      box-sizing: border-box;
    }

    .auth-visual {
      position: relative;
      flex: 1 1 52%;
      border-radius: clamp(28px, 6vw, 40px);
      overflow: hidden;
      box-shadow: 0 40px 90px -60px rgba(14, 55, 90, 0.65);
      background: #0F1F3A;
      min-height: clamp(300px, 40vw, 620px);
    }

    .auth-visual-image,
    .auth-visual-overlay,
    .auth-brand-burst,
    .auth-visual-content {
      position: absolute;
      inset: 0;
    }

.auth-visual-image {
      background-size: cover;
      background-position: center bottom;
  background-image: url('../images/login-building.png');
      z-index: 1;
      filter: saturate(1.05);
    }

    .auth-visual-overlay {
      z-index: 2;
      background: linear-gradient(180deg, rgba(6, 21, 35, 0.15) 0%, rgba(6, 21, 35, 0.82) 100%);
    }

    .auth-brand-burst {
      z-index: 3;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
  background-image: url('../images/BURS%20top%20right%20background.png');
      width: clamp(120px, 12vw, 220px);
      height: clamp(120px, 12vw, 220px);
      inset: auto clamp(16px, 4vw, 36px) clamp(16px, 4vw, 36px) auto;
      pointer-events: none;
      opacity: 0.95;
    }

    .auth-dev-badge {
      position: absolute;
      top: clamp(12px, 3vw, 24px);
      left: clamp(12px, 3vw, 24px);
      z-index: 4;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      color: #B91C1C;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .auth-visual-content {
      z-index: 4;
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2vw, 28px);
      padding: clamp(24px, 6vw, 48px);
      padding-top: clamp(32px, 8vw, 64px);
      padding-right: clamp(24px, 8vw, 72px);
      color: #F8FAFC;
      justify-content: flex-end;
    }

    .auth-visual-pill {
      align-self: flex-start;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(248, 250, 252, 0.18);
      border: 1px solid rgba(248, 250, 252, 0.25);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .auth-visual-heading {
      margin: 0;
      font-size: clamp(28px, 3.2vw, 42px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.01em;
    }

    .auth-visual-card {
      background: rgba(15, 31, 58, 0.55);
      backdrop-filter: blur(10px);
      border-radius: clamp(20px, 4vw, 28px);
      border: 1px solid rgba(248, 250, 252, 0.18);
      padding: clamp(18px, 3vw, 26px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 420px;
      box-shadow: 0 32px 70px -50px rgba(5, 14, 26, 0.6);
    }

    .auth-visual-card p {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
      color: rgba(248, 250, 252, 0.9);
    }

    .auth-visual-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13px;
      color: rgba(248, 250, 252, 0.86);
    }

    .auth-visual-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .auth-visual-list svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .auth-panel {
      flex: 1 1 44%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
    }

    .auth-logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: clamp(20px, 4vw, 32px);
    }

    .auth-logo {
      width: clamp(200px, 32vw, 264px);
      height: auto;
      filter: drop-shadow(0 12px 28px rgba(11, 47, 83, 0.22));
    }

    .auth-card {
      background: #FFFFFF;
      border-radius: clamp(24px, 5vw, 32px);
      border: 1px solid #E1EEF8;
      box-shadow: 0 36px 82px -52px rgba(15, 23, 42, 0.46);
      padding: clamp(26px, 5vw, 40px);
      display: flex;
      flex-direction: column;
      gap: clamp(18px, 3vw, 28px);
    }

    .auth-heading {
      margin: 0;
      font-size: clamp(24px, 3vw, 30px);
      font-weight: 600;
      text-align: center;
      color: #0F2A3D;
    }

    .auth-subheading {
      margin: 0;
      font-size: 15px;
      text-align: center;
      color: #4F5F74;
      line-height: 1.6;
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .auth-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #3F5169;
    }

    .auth-input {
      width: 100%;
      border: 1px solid #D3E1F0;
      border-radius: 12px;
      background: #F5F8FC;
      padding: 14px 16px;
      font-size: 14px;
      color: #0F2A3D;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .auth-input::placeholder {
      color: #8795A7;
    }

    .auth-input:focus {
      border-color: #1088C9;
      background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(16, 136, 201, 0.16);
      outline: none;
    }

    .auth-readonly-field {
      width: 100%;
      border-radius: 12px;
      background: #EEF3F9;
      border: 1px solid #D3E1F0;
      padding: 14px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #0F2A3D;
    }

    .auth-error {
      display: flex;
      gap: 12px;
      align-items: center;
      border-radius: 16px;
      padding: 16px 18px;
      background: linear-gradient(180deg, rgba(254, 226, 226, 0.9), rgba(255, 241, 242, 0.95));
      border: 1px solid rgba(248, 113, 113, 0.38);
      color: #7F1D1D;
      font-size: 13px;
      line-height: 1.6;
    }

    .auth-error svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .auth-links {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #3F5169;
    }

    .auth-link-set {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .auth-link-set a {
      font-weight: 600;
      text-decoration: none;
    }

    .auth-link-set a:hover {
      text-decoration: underline;
    }

    .auth-submit {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #1088C9 0%, #3FBCE5 100%);
      color: #FFFFFF;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 16px;
      font-size: 13px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      box-shadow: 0 24px 48px -28px rgba(16, 136, 201, 0.6);
    }

    .auth-submit:hover:not(.loading) {
      transform: translateY(-1px);
      box-shadow: 0 28px 54px -28px rgba(16, 136, 201, 0.68);
    }

    .auth-submit.loading {
      opacity: 0.72;
      cursor: default;
    }

    .auth-loading {
      display: none;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .auth-loading svg {
      width: 20px;
      height: 20px;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 18px;
      margin: 4px 0 8px;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #DFE7F1;
    }

    .auth-divider span {
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #6C7C90;
    }

    .auth-secondary-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .auth-secondary-button {
      width: 100%;
      border-radius: 12px;
      border: 1.2px solid rgba(52, 103, 130, 0.28);
      background: rgba(16, 136, 201, 0.12);
      color: #0F2A3D;
      font-weight: 600;
      font-size: 13px;
      text-align: center;
      padding: 14px;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .auth-secondary-button:hover {
      transform: translateY(-1px);
      border-color: rgba(16, 136, 201, 0.38);
      box-shadow: 0 18px 32px -26px rgba(16, 136, 201, 0.35);
    }

    .auth-register {
      text-align: center;
      font-size: 14px;
      color: #42566D;
    }

    .auth-register a {
      color: #1088C9;
      font-weight: 700;
      text-decoration: none;
    }

    .auth-register a:hover {
      text-decoration: underline;
    }

    .auth-footer {
      margin-top: clamp(24px, 4vw, 36px);
    }

    @media (max-width: 1024px) {
      .auth-shell {
        flex-direction: column;
        padding: clamp(20px, 6vw, 32px);
      }

      .auth-visual {
        min-height: clamp(280px, 50vw, 420px);
      }

      .auth-panel {
        flex: none;
      }
    }

    @media (max-width: 640px) {
      .auth-shell {
        padding: clamp(16px, 6vw, 24px);
        gap: 16px;
      }

      .auth-card {
        padding: clamp(22px, 8vw, 28px);
      }

      .auth-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .auth-visual-card {
        gap: 10px;
      }
    }