* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
      font-family: "Inter", sans-serif;
      background: #f5f7fa;
      color: #172033;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ==============================
       MAIN LAYOUT
    ============================== */

    .login-page {
      min-height: 100vh;
      display: flex;
    }

    /* ==============================
       LEFT SIDE
    ============================== */

    .login-visual {
      position: relative;
      width: 52%;
      min-height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(
          circle at 20% 20%,
          rgba(50, 220, 195, .25),
          transparent 35%
        ),
        radial-gradient(
          circle at 80% 70%,
          rgba(74, 108, 255, .25),
          transparent 35%
        ),
        linear-gradient(
          145deg,
          #071c2b 0%,
          #0b3140 45%,
          #071a2a 100%
        );
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 70px;
    }

    .visual-content {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 620px;
    }

    .visual-logo {
      margin-bottom: 65px;
    }

    .visual-logo img {
      width: 145px;
      height: auto;
      filter: brightness(0) invert(1);
    }

    .visual-title {
      font-size: clamp(42px, 4vw, 68px);
      line-height: 1.05;
      letter-spacing: -2.5px;
      font-weight: 800;
      margin: 0 0 25px;
    }

    .visual-title span {
      color: #61e4d0;
    }

    .visual-description {
      font-size: 17px;
      line-height: 1.7;
      max-width: 500px;
      color: rgba(255,255,255,.72);
      margin-bottom: 45px;
    }

    .visual-features {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .feature {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 15px;
      border-radius: 50px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
      font-size: 13px;
      color: rgba(255,255,255,.85);
    }

    .feature-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #61e4d0;
      box-shadow: 0 0 12px rgba(97,228,208,.7);
    }

    /* decorative circles */

    .circle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .circle-1 {
      width: 500px;
      height: 500px;
      right: -220px;
      top: -180px;
      border: 1px solid rgba(255,255,255,.08);
    }

    .circle-2 {
      width: 700px;
      height: 700px;
      right: -350px;
      top: -280px;
      border: 1px solid rgba(255,255,255,.05);
    }

    .circle-3 {
      width: 400px;
      height: 400px;
      left: -250px;
      bottom: -230px;
      background: rgba(97,228,208,.04);
    }

    /* ==============================
       RIGHT SIDE
    ============================== */

    .login-panel {
      width: 48%;
      min-height: 100vh;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 45px;
    }

    .login-box {
      width: 100%;
      max-width: 440px;
    }

    .mobile-logo {
      display: none;
    }

    .welcome {
      margin-bottom: 35px;
    }

    .welcome h1 {
      margin: 0 0 10px;
      font-size: 32px;
      letter-spacing: -1px;
      font-weight: 800;
      color: #101827;
    }

    .welcome p {
      margin: 0;
      color: #7b8495;
      font-size: 14px;
      line-height: 1.6;
    }

    /* ==============================
       ERROR
    ============================== */

    .error-message {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 15px;
      margin-bottom: 22px;
      border-radius: 12px;
      background: #fff1f2;
      border: 1px solid #ffd7dc;
      color: #d92d45;
      font-size: 13px;
      font-weight: 500;
    }

    .error-icon {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #d92d45;
      color: white;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ==============================
       FORM
    ============================== */

    .form-group {
      margin-bottom: 21px;
    }

    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #30394a;
      margin-bottom: 9px;
    }

    .input-wrapper {
      position: relative;
    }

    .input-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: #9ba4b2;
      pointer-events: none;
    }

    .form-input {
      width: 100%;
      height: 52px;
      border: 1px solid #e0e5eb;
      border-radius: 12px;
      background: #fafbfc;
      padding: 0 48px;
      outline: none;
      font-family: inherit;
      font-size: 14px;
      color: #1d2939;
      transition: all .2s ease;
    }

    .form-input::placeholder {
      color: #a8afbb;
    }

    .form-input:hover {
      border-color: #cbd3dd;
    }

    .form-input:focus {
      background: #fff;
      border-color: #4dcdbb;
      box-shadow:
        0 0 0 4px rgba(77,205,187,.10);
    }

    .password-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      background: none;
      cursor: pointer;
      color: #8c95a3;
      padding: 5px;
    }

    .password-toggle:hover {
      color: #30394a;
    }

    /* ==============================
       CAPTCHA
    ============================== */

    .captcha-container {
      margin-top: 5px;
      margin-bottom: 25px;
    }

    .captcha-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #30394a;
      margin-bottom: 9px;
    }

    .captcha-row {
      display: flex;
      gap: 10px;
    }

    .captcha-image-wrapper {
      height: 52px;
      min-width: 105px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      background: #f4f6f8;
      border: 1px solid #e0e5eb;
    }

    .captcha-image-wrapper img {
      width: 67px;
      height: auto;
      cursor: pointer;
    }

    .captcha-input {
      flex: 1;
      padding-left: 16px;
    }

    /* ==============================
       BUTTON
    ============================== */

    .login-button {
      width: 100%;
      height: 53px;
      border: 0;
      border-radius: 12px;
      background:
        linear-gradient(
          135deg,
          #1bbca9 0%,
          #31cdbb 100%
        );
      color: white;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow:
        0 8px 20px rgba(27,188,169,.20);
      transition: all .2s ease;
    }

    .login-button:hover {
      transform: translateY(-1px);
      box-shadow:
        0 12px 25px rgba(27,188,169,.28);
    }

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

    /* ==============================
       FOOTER
    ============================== */

    .login-footer {
      margin-top: 32px;
      text-align: center;
      color: #a0a8b5;
      font-size: 11px;
      line-height: 1.6;
    }

    .login-footer strong {
      color: #737c8b;
      font-weight: 600;
    }

    /* ==============================
       RESPONSIVE
    ============================== */

    @media (max-width: 900px) {

      .login-visual {
        display: none;
      }

      .login-panel {
        width: 100%;
        padding: 30px 24px;
      }

      .login-box {
        max-width: 430px;
      }

      .mobile-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 45px;
      }

      .mobile-logo img {
        width: 145px;
        height: auto;
      }

      .welcome h1 {
        font-size: 29px;
      }
    }

    @media (max-width: 480px) {

      .login-panel {
        padding: 25px 18px;
        align-items: flex-start;
        padding-top: 45px;
      }

      .mobile-logo {
        margin-bottom: 38px;
      }

      .welcome {
        margin-bottom: 28px;
      }

      .welcome h1 {
        font-size: 27px;
      }

      .form-input,
      .captcha-image-wrapper {
        height: 50px;
      }

      .login-button {
        height: 51px;
      }

      .captcha-row {
        gap: 8px;
      }

      .captcha-image-wrapper {
        min-width: 92px;
      }
    }