:root {
  --px-mint: #55d4b0;
  --px-mint-bright: #87efd2;
  --px-ink: #263d38;
  --px-line: #76a797;
  --px-cream: #fffef8;
  --px-yellow: #ffd568;
  --px-coral: #ff7b82;
}

html,
body {
  color: var(--px-ink) !important;
  background: #eaf7f1 !important;
}

body {
  background-image:
    linear-gradient(rgba(48, 109, 91, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 109, 91, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 46%) !important;
  background-size: 24px 24px, 24px 24px, 100% 100% !important;
}

body::before {
  opacity: 0.22 !important;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(37, 90, 75, 0.05) 3px 4px) !important;
}

.login-shell {
  border: 2px solid #4f8b7b !important;
  border-radius: 3px !important;
  background: rgba(255, 254, 248, 0.96) !important;
  box-shadow: 7px 7px 0 #b5dbcf, 0 24px 64px rgba(42, 86, 73, 0.17) !important;
}

.login-shell::before {
  border-top: 5px solid var(--px-mint) !important;
  border-left: 5px solid var(--px-mint) !important;
}

.login-shell::after {
  border-right: 5px solid var(--px-yellow) !important;
  border-bottom: 5px solid var(--px-yellow) !important;
}

.hero-side {
  border-right: 2px solid #84aa9e !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 40%),
    linear-gradient(135deg, #77e5c6, #49c3a1) !important;
}

.visual-frame {
  border: 2px solid #2d735f !important;
  border-radius: 2px !important;
  background: #dff8ef !important;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.42), 5px 5px 0 rgba(42, 111, 92, 0.24) !important;
}

.visual-frame img {
  opacity: 0.2 !important;
  filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(1.2) contrast(1.05) !important;
}

.visual-frame::before {
  content: "1UP  0025680  CREDIT 098" !important;
  color: #214f44 !important;
  font-family: Consolas, monospace !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 1px 1px 0 #dcfff4 !important;
}

.visual-frame::after {
  content: "◆ ◆ ◆  PLAYER READY" !important;
  color: #fff8bd !important;
  font-family: Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.brand-mark {
  border-radius: 0 !important;
  outline: 2px solid #2e7966 !important;
  background: linear-gradient(135deg, var(--px-mint-bright), var(--px-mint)) !important;
  box-shadow: 4px 4px 0 #a8d9ca !important;
}

.tabs,
.login-method {
  border: 2px solid #88ad9f !important;
  border-radius: 2px !important;
  background: #edf9f4 !important;
  box-shadow: 3px 3px 0 #c9dfd7 !important;
}

.tabs button,
.login-method button {
  border-radius: 1px !important;
}

.tabs button.active,
.login-method button.active {
  color: #173f34 !important;
  border-color: #2e7763 !important;
  background: linear-gradient(180deg, #80e9ca, #55d4b0) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42) !important;
}

input,
select {
  min-height: 42px !important;
  color: var(--px-ink) !important;
  border: 2px solid #8fb5a9 !important;
  border-radius: 2px !important;
  background: #fffef8 !important;
  box-shadow: inset 4px 0 0 #c9efe2, 2px 2px 0 #d6e8e2 !important;
}

input:focus,
select:focus {
  border-color: #2f8b73 !important;
  box-shadow: 0 0 0 3px rgba(85, 212, 176, 0.2), inset 4px 0 0 var(--px-mint) !important;
}

.code-row button,
.submit-btn {
  color: #173d33 !important;
  border: 2px solid #2f7663 !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #7ae7c7, #55d4b0) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4), 3px 3px 0 #9fcebf !important;
}

.code-row button:active,
.submit-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #9fcebf !important;
}

.dev-code,
.method-note {
  border: 1px solid #84aa9d !important;
  border-radius: 2px !important;
  background: #effaf5 !important;
  box-shadow: inset 4px 0 0 var(--px-mint) !important;
}

@media (max-width: 760px) {
  .hero-side {
    border-right: 0 !important;
    border-bottom: 2px solid #84aa9e !important;
  }
}