body.gulu-legacy-page {
  min-height: 100vh;
  margin: 0;
  color: var(--gulu-text);
  font-family: var(--gulu-font);
  background:
    linear-gradient(180deg, rgba(252, 253, 251, 0.94), rgba(252, 253, 251, 0.98)),
    url("/assets/gulu-page-bg.png") center / cover no-repeat fixed,
    var(--gulu-bg);
}

.gulu-legacy-shell {
  width: min(1180px, calc(100vw - 64px));
  margin: 18px auto 28px;
}

.gulu-legacy-main {
  margin-top: 14px;
}

.gulu-legacy-hero {
  margin-top: 12px;
}

.gulu-legacy-page .container,
.gulu-legacy-page .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.gulu-legacy-page header:not(.gulu-topbar) {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.gulu-legacy-page .header-content {
  display: none;
}

.gulu-legacy-page .card,
.gulu-legacy-page .glass {
  border: 1px solid var(--gulu-line) !important;
  border-radius: var(--gulu-radius-lg) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 34px rgba(15, 121, 88, 0.06) !important;
  backdrop-filter: none !important;
}

.gulu-legacy-page .card-title,
.gulu-legacy-page h2,
.gulu-legacy-page h3 {
  color: var(--gulu-text);
  font-weight: 950;
}

.gulu-legacy-page .form-input,
.gulu-legacy-page .form-select,
.gulu-legacy-page input,
.gulu-legacy-page select,
.gulu-legacy-page textarea {
  border-color: var(--gulu-line) !important;
  border-radius: var(--gulu-radius-sm) !important;
  background: #fff !important;
}

.gulu-legacy-page .form-input:focus,
.gulu-legacy-page .form-select:focus,
.gulu-legacy-page input:focus,
.gulu-legacy-page select:focus,
.gulu-legacy-page textarea:focus {
  border-color: var(--gulu-brand) !important;
  box-shadow: 0 0 0 3px rgba(15, 121, 88, 0.1) !important;
}

.gulu-legacy-page .btn-primary,
.gulu-legacy-page .brand-btn,
.gulu-legacy-page .btn.brand,
.gulu-legacy-page button.btn-primary,
.gulu-legacy-page button.brand {
  border: 0 !important;
  border-radius: var(--gulu-radius-sm) !important;
  background: var(--gulu-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

.gulu-legacy-page .btn-primary:hover,
.gulu-legacy-page .brand-btn:hover {
  background: var(--gulu-brand-dark) !important;
  transform: translateY(-1px);
}

.gulu-legacy-page .btn-secondary,
.gulu-legacy-page .tab,
.gulu-legacy-page .tab-link {
  border-color: var(--gulu-line) !important;
  border-radius: var(--gulu-radius-sm) !important;
  background: #fff !important;
  color: var(--gulu-text) !important;
}

.gulu-legacy-page .tab-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  text-decoration: none !important;
}

.gulu-legacy-page .tab-link:hover {
  border-color: rgba(15, 121, 88, 0.24) !important;
  color: var(--gulu-brand) !important;
}

.gulu-legacy-page .tab.active,
.gulu-legacy-page .level-card.selected,
.gulu-legacy-page .product-item.selected {
  border-color: rgba(15, 121, 88, 0.28) !important;
  background: var(--gulu-brand-soft) !important;
  color: var(--gulu-brand) !important;
}

.gulu-legacy-page .level-price,
.gulu-legacy-page .info-value.highlight,
.gulu-legacy-page .product-price .discounted {
  color: var(--gulu-brand) !important;
}

.gulu-legacy-page .message-success {
  border-color: rgba(15, 121, 88, 0.22) !important;
  background: var(--gulu-brand-soft) !important;
  color: var(--gulu-brand) !important;
}

.gulu-legacy-page .payment-guide,
.gulu-legacy-page .save-reminder {
  border: 1px solid rgba(15, 121, 88, 0.16) !important;
  border-radius: var(--gulu-radius-lg) !important;
  background: linear-gradient(135deg, rgba(230, 244, 239, 0.72), rgba(255, 250, 238, 0.92)) !important;
}

.gulu-legacy-page .payment-guide .tip-icon,
.gulu-legacy-page .save-reminder .tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gulu-brand-soft);
  color: var(--gulu-brand);
  font-size: 11px !important;
  font-weight: 950;
  letter-spacing: 0;
}

.gulu-legacy-page .guide-title,
.gulu-legacy-page .reminder-title {
  color: var(--gulu-brand) !important;
  font-weight: 950 !important;
}

.gulu-legacy-page .guide-text,
.gulu-legacy-page .reminder-text {
  color: var(--gulu-muted) !important;
}

.gulu-legacy-page .cashier {
  border-color: var(--gulu-line) !important;
  border-radius: var(--gulu-radius-lg) !important;
  background: #fff !important;
}

.gulu-legacy-page .cashier-head {
  border-bottom-color: var(--gulu-line) !important;
  background: var(--gulu-brand-soft) !important;
  color: var(--gulu-brand) !important;
}

.gulu-legacy-page pre {
  border-color: var(--gulu-line) !important;
  border-radius: var(--gulu-radius-md) !important;
  background: #f7fbf9 !important;
  color: var(--gulu-text) !important;
}

.gulu-legacy-page .gradient-bg {
  display: none !important;
}

.gulu-log-page .gulu-legacy-main > .text-center {
  margin-bottom: 18px;
  padding: 28px 32px;
  border: 1px solid var(--gulu-line);
  border-radius: var(--gulu-radius-lg);
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.97), rgba(248, 253, 250, 0.94) 42%, rgba(230, 244, 239, 0.78)),
    url("/assets/gulu-hero-final.png") right center / auto 180% no-repeat;
  text-align: left;
  box-shadow: 0 14px 34px rgba(15, 121, 88, 0.06);
}

.gulu-log-page .gulu-legacy-main h1 {
  margin: 0;
  color: var(--gulu-text) !important;
  font-size: 28px;
  font-weight: 950;
}

.gulu-log-page .gulu-legacy-main p {
  color: var(--gulu-muted) !important;
}

.gulu-log-page .btn-primary {
  background: var(--gulu-brand) !important;
}

.gulu-log-page .input-focus:focus {
  border-color: var(--gulu-brand) !important;
  box-shadow: 0 0 0 3px rgba(15, 121, 88, 0.1) !important;
}

@media (max-width: 760px) {
  .gulu-legacy-shell {
    width: calc(100vw - 24px);
    margin: 12px auto 20px;
  }

  .gulu-topbar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .gulu-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow: auto;
  }
}