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

    body {
      font-family: 'Kanit', sans-serif;
      min-height: 100vh;
      color: #21432d;

      background:
        radial-gradient(
          circle at 10% 10%,
          rgba(232, 190, 86, 0.16),
          transparent 28%
        ),
        radial-gradient(
          circle at 90% 80%,
          rgba(226, 137, 81, 0.13),
          transparent 30%
        ),
        linear-gradient(
          135deg,
          #f8f5e9 0%,
          #eef6ed 48%,
          #fffaf0 100%
        );

      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .shape {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    .shape.one {
      width: 340px;
      height: 340px;
      top: -170px;
      left: -100px;
      background: rgba(35, 128, 69, 0.08);
    }

    .shape.two {
      width: 300px;
      height: 300px;
      bottom: -140px;
      right: -80px;
      background: rgba(221, 153, 72, 0.09);
    }

    .container {
      width: min(100%, 570px);
      padding: 24px;
      position: relative;
      z-index: 1;
    }

    .card {
      background: rgba(255, 255, 255, 0.93);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 30px;

      box-shadow:
        0 28px 75px rgba(38, 81, 49, 0.14),
        0 5px 20px rgba(38, 81, 49, 0.06);

      overflow: hidden;
      text-align: center;
    }

    .storefront {
      padding: 30px 32px 0;
    }

    .store-sign {
      position: relative;
      height: 76px;

      background: linear-gradient(
        135deg,
        #176d39,
        #24884b
      );

      border: 3px solid #126032;
      border-bottom: none;
      border-radius: 22px 22px 0 0;

      box-shadow:
        0 9px 18px rgba(28, 111, 58, 0.14);
    }

    .store-sign::before {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: -8px;
      height: 11px;
      background: #126032;
      border-radius: 12px 12px 4px 4px;

      box-shadow:
        0 2px 4px rgba(20, 80, 40, 0.12);
    }

    .store-sign::after {
      content: "";
      position: absolute;
      width: 75px;
      height: 75px;
      right: -25px;
      top: -25px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.07);
    }

    .awning {
      position: relative;
      height: 54px;
      display: flex;
      padding: 0 5px;
      gap: 2px;
      overflow: visible;
      background: transparent;
    }

    .awning span {
      position: relative;
      flex: 1;
      height: 31px;
      margin: 0;
      z-index: 2;
    }

    .awning span::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -13px;
      height: 26px;
      background: inherit;
      border-radius: 0 0 50% 50%;
    }

    .awning span:nth-child(1),
    .awning span:nth-child(5),
    .awning span:nth-child(7) {
      background: #f2c75c;
    }

    .awning span:nth-child(2),
    .awning span:nth-child(4),
    .awning span:nth-child(6),
    .awning span:nth-child(8) {
      background: #fcf6bd;
    }

    .awning span:nth-child(3) {
      background: #2c8950;
    }

    .brand-area {
      padding: 27px 24px 0;
    }

    .brand {
      color: #126b36;
      font-size: 31px;
      line-height: 1.15;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .subtitle {
      margin-top: 8px;
      color: #718476;
      font-size: 15px;
      font-weight: 300;
    }

    .welcome-area {
      padding: 34px 42px 38px;
    }

    .welcome {
      color: #294b34;
      font-size: 25px;
      font-weight: 500;
    }

    .welcome-text {
      margin-top: 7px;
      margin-bottom: 25px;
      color: #8a988e;
      font-size: 13px;
      font-weight: 300;
    }

    .login-buttons {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .login-btn {
      width: 100%;
      min-height: 68px;
      padding: 12px 20px;

      border: none;
      border-radius: 17px;

      font-family: inherit;
      font-size: 17px;
      font-weight: 500;

      cursor: pointer;

      display: flex;
      align-items: center;
      justify-content: center;

      gap: 14px;

      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    .login-btn:hover {
      transform: translateY(-2px);
    }

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

    .customer-btn {
      background:
        linear-gradient(
          135deg,
          #178347,
          #126b36
        );

      color: white;

      box-shadow:
        0 13px 26px rgba(20, 113, 55, 0.20);
    }

    .customer-btn:hover {
      box-shadow:
        0 16px 30px rgba(20, 113, 55, 0.27);
    }

    .consignor-btn {
      background:
        linear-gradient(
          135deg,
          #f2c45e,
          #dda844
        );

      color: #533d13;

      box-shadow:
        0 13px 26px rgba(192, 139, 42, 0.22);
    }

    .consignor-btn:hover {
      box-shadow:
        0 16px 30px rgba(192, 139, 42, 0.28);
    }

    .button-icon {
      width: 39px;
      height: 39px;
      flex: 0 0 39px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .button-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .button-text {
      line-height: 1.2;
    }

    .footer {
      padding: 0 24px 25px;
      color: #a0aaa3;
      font-size: 10px;
      font-weight: 300;
    }

    .modal {
      position: fixed;
      inset: 0;

      background: rgba(20, 49, 30, 0.38);

      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);

      display: none;
      align-items: center;
      justify-content: center;

      padding: 20px;
      z-index: 20;
    }

    .modal.show {
      display: flex;
    }

    .modal-box {
      width: min(100%, 430px);
      background: white;
      border-radius: 25px;
      padding: 31px;

      box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.18);

      animation: popup 0.2s ease;
    }

    @keyframes popup {
      from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .modal-title {
      color: #194d2d;
      font-size: 21px;
      font-weight: 500;
    }

    .consignor-modal-title {
      color: #7b5715;
    }

    .close {
      width: 35px;
      height: 35px;
      border: none;
      border-radius: 50%;
      background: #f2f5f2;
      color: #637268;
      font-size: 20px;
      cursor: pointer;
    }

    .notice {
      padding: 14px;
      margin-bottom: 19px;
      border-radius: 14px;
      background: #f2f8f3;
      color: #63766a;
      font-size: 13px;
      line-height: 1.6;
    }

    .consignor-notice {
      background: #fff8e8;
      color: #75623d;
    }

    .input-group {
      margin-bottom: 15px;
    }

    .input-group label {
      display: block;
      margin-bottom: 7px;
      color: #526659;
      font-size: 13px;
    }

    .input-group input {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid #dce6de;
      border-radius: 13px;
      outline: none;
      font-family: inherit;
      font-size: 15px;
    }

    .input-group input:focus {
      border-color: #32945a;
      box-shadow:
        0 0 0 3px rgba(50, 148, 90, .08);
    }

    .modal-btn {
      width: 100%;
      margin-top: 4px;
      padding: 14px;
      border: none;
      border-radius: 14px;

      background: #188447;
      color: white;

      font-family: inherit;
      font-size: 16px;
      cursor: pointer;
    }

    .consignor-modal-btn {
      background:
        linear-gradient(
          135deg,
          #e8b749,
          #d69c2e
        );

      color: #4d390f;
      font-weight: 500;
    }

    .modal-btn:disabled {
      opacity: .65;
      cursor: wait;
    }


    .register-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 17px 0 13px;
      color: #a0aaa3;
      font-size: 11px;
    }

    .register-divider::before,
    .register-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e5ece7;
    }

    .register-btn {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid #188447;
      border-radius: 14px;
      background: #ffffff;
      color: #188447;
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
    }

    .register-btn:hover {
      background: #f2f8f3;
    }

    .register-btn:disabled {
      opacity: .65;
      cursor: wait;
    }

    .small-note {
      margin-top: 14px;
      text-align: center;
      color: #9aa49e;
      font-size: 11px;
      line-height: 1.5;
    }

    @media (max-width: 600px) {
      .container {
        padding: 14px;
      }

      .storefront {
        padding: 22px 22px 0;
      }

      .store-sign {
        height: 68px;
      }

      .brand {
        font-size: 27px;
      }

      .subtitle {
        font-size: 14px;
      }

      .welcome-area {
        padding: 30px 25px 32px;
      }

      .welcome {
        font-size: 22px;
      }

      .login-btn {
        min-height: 64px;
        font-size: 16px;
      }

      .button-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
      }
    }
  
  /* ===== CUSTOM POPUP ===== */
  .baac-popup-backdrop{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,35,28,.56);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  .baac-popup-backdrop.show{display:flex}
  .baac-popup-card{
    width:min(420px,calc(100vw - 32px));
    background:#fff;
    border-radius:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
    overflow:hidden;
    transform:translateY(8px) scale(.97);
    opacity:0;
    animation:baacPopupIn .20s ease forwards;
  }
  .baac-popup-accent{height:7px;background:#0b7a43}
  .baac-popup-body{padding:28px 28px 22px;text-align:center}
  .baac-popup-icon{
    width:68px;height:68px;margin:0 auto 15px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:34px;font-weight:800;
  }
  .baac-popup-card.warning .baac-popup-icon{background:#fff3d6;color:#b56a00}
  .baac-popup-card.error .baac-popup-icon{background:#fde8e8;color:#c62828}
  .baac-popup-card.success .baac-popup-icon{background:#e6f6ec;color:#08783f}
  .baac-popup-title{
    margin:0 0 8px;color:#173e31;font-size:26px;font-weight:800;line-height:1.25
  }
  .baac-popup-message{
    margin:0;color:#617168;font-size:18px;line-height:1.55;white-space:pre-line
  }
  .baac-popup-actions{
    padding:0 28px 28px;display:flex;justify-content:center;gap:10px
  }
  .baac-popup-btn{
    min-width:140px;border:0;border-radius:14px;padding:12px 20px;
    font:inherit;font-size:18px;font-weight:800;cursor:pointer;
    transition:transform .12s ease,filter .12s ease;
  }
  .baac-popup-btn:hover{filter:brightness(1.03);transform:translateY(-1px)}
  .baac-popup-btn.primary{background:#08783f;color:#fff;box-shadow:0 5px 0 #055c30}
  .baac-popup-btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #055c30}
  @keyframes baacPopupIn{
    to{transform:translateY(0) scale(1);opacity:1}
  }