.eleve-wrapper { 
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5efe8;
  }

  .eleve-card {
      display: flex;
      width: 100%;
      max-width: 1111px;
      min-height: 680px;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 8px 48px rgba(80, 50, 20, 0.10);
  }

  /* ── LEFT PANEL ── */
  .eleve-left {
      flex: 0 0 60%;
      position: relative;
      overflow: hidden;
      min-height: 320px;
  }

  .eleve-left-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* fallback gradient if image not found */
  .eleve-left-fallback {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, #d4b896 0%, #c8a882 40%, #b89370 100%);
      display: flex;
      align-items: flex-end;
      padding: 24px;
  }

  .eleve-back-btn {
      position: absolute;
      top: 18px;
      left: 18px;
      display: flex;
      align-items: center;
      gap: 4px;
      
      font-size: 13px;
      font-weight: 400;
      color: #fff;
      border: none;
      border-radius: 2px;
      padding: 5px 12px;
      cursor: pointer;
      text-decoration: none;
      letter-spacing: 0.02em;
      backdrop-filter: blur(4px);
      transition: background 0.2s;
  }

  .eleve-back-btn:hover {
      background: rgba(255, 255, 255, 0.8);
  }

  .eleve-back-btn svg {
      width: 14px;
      height: 14px;
  }

  /* ── RIGHT PANEL ── */
  .eleve-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 52px;
      background: #fff;
  }

  .eleve-logo { 
      font-size: 26px;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: #1a1a1a;
      text-align: center;
      margin-bottom: 30px;
  }

  .eleve-title {
      
      font-size: 15px;
      font-weight: 400;
      color: #555;
      text-align: center;
      margin-bottom: 28px;
      letter-spacing: 0.04em;
  }

  .eleve-field {
      margin-bottom: 16px;
  }

  .eleve-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: #333;
      margin-bottom: 6px;
      letter-spacing: 0.04em;
  }

  .eleve-input-wrap {
      position: relative;
  }

  .eleve-input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #ddd;
      border-radius: 3px;
      
      font-size: 13px;
      color: #333;
      background: #fafafa;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      letter-spacing: 0.02em;
  }

  .eleve-input::placeholder {
      color: #b0a89e;
  }

  .eleve-input:focus {
      border-color: #6c3eff;
      background: #fff;
  }

  .eleve-eye-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #aaa;
      display: flex;
      align-items: center;
  }

  .eleve-eye-btn svg {
      width: 17px;
      height: 17px;
  }

  .eleve-forgot {
      display: block;
      text-align: right;
      font-size: 11.5px;
      color: #002AC4;
      text-decoration: none;
      margin-top: 5px;
      letter-spacing: 0.02em;
      transition: opacity 0.2s;
  }

  .eleve-forgot:hover {
      opacity: 0.7;
  }

  .eleve-btn-primary {
      width: 100%;
      padding: 12px;
      background: #002AC4;
      color: #fff;
      border: none;
      border-radius: 3px;
      
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.08em;
      cursor: pointer;
      margin-top: 20px;
      transition: background 0.2s, transform 0.1s;
  }

  .eleve-btn-primary:hover {
      background: #002AC4;
  }

  .eleve-btn-primary:active {
      transform: scale(0.99);
  }

  .eleve-or {
      text-align: center;
      font-size: 12px;
      color: #bbb;
      margin: 18px 0 14px;
      position: relative;
      letter-spacing: 0.06em;
  }

  .eleve-or::before,
  .eleve-or::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 42%;
      height: 1px;
      background: #ebebeb;
  }

  .eleve-or::before {
      left: 0;
  }

  .eleve-or::after {
      right: 0;
  }

  .eleve-btn-google {
      width: 100%;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 3px;
      
      font-size: 13px;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      letter-spacing: 0.03em;
      transition: background 0.2s, border-color 0.2s;
  }

  .eleve-btn-google:hover {
      background: #f7f7f7;
      border-color: #ccc;
  }

  .eleve-btn-google img {
      width: 18px;
      height: 18px;
  }

  .eleve-register {
      text-align: center;
      font-size: 12px;
      color: #888;
      margin-top: 18px;
      letter-spacing: 0.02em;
  }

  .eleve-register a {
      color: 002AC4;
      text-decoration: none;
      font-weight: 500;
  }

  .eleve-register a:hover {
      text-decoration: underline;
  }
   .eleve-login {
        text-align: center;
        font-size: 12px;
        color: #888;
        margin-top: 18px;
        letter-spacing: 0.02em;
    }

    .eleve-login a {
        color: 002AC4;
        text-decoration: none;
        font-weight: 500;
    }

    .eleve-login a:hover {
        text-decoration: underline;
    }
     .eleve-heading {
            
            font-size: 17px;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 7px;
            letter-spacing: 0.01em;
        }

        .eleve-subtext {
            font-size: 12.5px;
            font-weight: 400;
            color: #777;
            margin-bottom: 22px;
            line-height: 1.6;
            letter-spacing: 0.01em;
        }

  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
      .eleve-wrapper {
          padding: 16px;
          background: #f5efe8;
      }

      .eleve-card {
          flex-direction: column;
          max-width: 420px;
          min-height: auto;
      }

      .eleve-left {
          flex: 0 0 220px;
          min-height: 220px;
      }

      .eleve-right {
          padding: 32px 28px;
      }
  }

  @media (max-width: 420px) {
      .eleve-right {
          padding: 28px 20px;
      }

      .eleve-logo {
          font-size: 22px;
      }
  }