html,
body {
      width: 100%;
      min-height: 100%;
    }

body {
      font-family: "Rubik", sans-serif;
      font-weight: 300;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: #1E5579;
      margin: 0;
      letter-spacing: 0.5px;
      background-color: #dff3ff;
      background-image: url('/bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
    }
		

    .upload-container > img {
      width: 108px;
      height: auto;
      margin-bottom: 10px;
    }
    .upload-container {
      text-align: center;
      border: 1px solid rgba(30, 85, 121, 0.18);
      padding: 32px 36px 36px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.78);
      box-shadow: 0 20px 60px rgba(30, 85, 121, 0.12);
      backdrop-filter: blur(10px);
      width: min(520px, 90vw);
    }

    h2 {
      margin-top: 0;
      color: #1E5579;
      font-weight: 500;
    }

    input[type="text"] {
		background: #ffffff;
		border: 1px solid rgba(30, 85, 121, 0.22);
		border-radius: 999px;
		color: #1E5579;
		display: flex;
		outline: 0;
		padding: 12px 18px;
      width: calc(100% - 36px);
    }

      .custom-file-input {
        display: none;
      }

      #file-label-text {
        margin-top: 15px;
      }

    .custom-file-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border: 1px dashed rgba(30, 85, 121, 0.35);
      border-radius: 16px;
      background-color: #f4f9ff;
      color: #1E5579;
      font-weight: 600;
      cursor: pointer;
      margin-top: 20px;
    }

      .custom-file-label img {
        vertical-align: middle;
        margin-right: 10px;
      }

    .custom-file-label:hover {
      background-color: #e9f5ff;
    }

    button {
      background: linear-gradient(95deg, #64cdbf 4.47%, #a3f0e6 39.62%, #64cdbf 65.1%, #269687 95.78%);
      color: #1E5579;
      font-weight: 700;
      padding: 14px 34px;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: -.28px;
      text-transform: capitalize;
      margin-top: 25px;
      box-shadow: 0 12px 24px rgba(38, 150, 135, 0.25);
    }

    button:hover {
      filter: brightness(1.02);
    }

    button:active {
      transform: translateY(1px);
    }

    .upload-container p,
    .upload-container a {
      color: #1E5579 !important;
    }

    .lang-switcher {
      position: absolute;
      top: 18px;
      right: 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 10;
      align-items: flex-end;
    }

    .lang-toggle,
    .lang-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 14px;
      height: 34px;
      border-radius: 12px;
      text-decoration: none;
      color: #1E5579;
      background-color: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(30, 85, 121, 0.18);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.3px;
      box-shadow: 0 6px 14px rgba(30, 85, 121, 0.12);
      cursor: pointer;
    }

    .lang-item span,
    .lang-toggle span {
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .lang-toggle {
      background-color: rgba(255, 255, 255, 0.95);
    }

    .lang-toggle .lang-caret {
      margin-left: 4px;
      font-size: 10px;
      opacity: 0.7;
    }

    .lang-menu {
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 10px;
      border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(30, 85, 121, 0.16);
      box-shadow: 0 10px 24px rgba(30, 85, 121, 0.12);
      backdrop-filter: blur(6px);
      align-items: center;
    }

    .lang-switcher:hover .lang-menu,
    .lang-switcher:focus-within .lang-menu {
      display: flex;
    }

    .lang-item img,
    .lang-toggle img {
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(30, 85, 121, 0.2);
    }

    .lang-item:hover {
      background-color: rgba(230, 245, 255, 0.95);
    }

    .lang-item.is-active {
      background-color: rgba(210, 240, 255, 0.95);
      border-color: rgba(30, 85, 121, 0.3);
    }

      .message {
        margin-top: 20px;
        font-size: 18px;
      }

      .success {
        color: green;
      }

      .error {
        color: red;
      }