:root {
  --gotripcn-bg: #050814;
  --gotripcn-bg-2: #0b1220;
  --gotripcn-panel: rgba(10, 14, 24, 0.78);
  --gotripcn-panel-strong: rgba(8, 12, 22, 0.9);
  --gotripcn-line: rgba(229, 235, 247, 0.16);
  --gotripcn-line-strong: rgba(229, 235, 247, 0.26);
  --gotripcn-text: #f3f6fb;
  --gotripcn-muted: #a5afbf;
  --gotripcn-soft: rgba(165, 175, 191, 0.68);
  --gotripcn-ink: #050814;
  --gotripcn-gold: #d9b66f;
  --gotripcn-green: #73e0b8;
  --gotripcn-blue: #8eb8ff;
  --gotripcn-radius: 8px;
  --gotripcn-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
  --gotripcn-sans: "Roboto", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gotripcn-brand: "Syncopate", var(--gotripcn-sans);
}

html {
  background: var(--gotripcn-bg);
}

body {
  color: var(--gotripcn-text);
  font-family: var(--gotripcn-sans);
  letter-spacing: 0;
  background:
    radial-gradient(ellipse 70% 45% at 16% 8%, rgba(116, 163, 255, 0.18), transparent 62%),
    radial-gradient(ellipse 54% 38% at 88% 14%, rgba(217, 182, 111, 0.12), transparent 68%),
    linear-gradient(180deg, #09101d 0%, #050814 52%, #03050d 100%) !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(243, 246, 251, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 246, 251, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 84%, transparent 100%);
  opacity: 0.72;
}

.page-logo,
.portal-logo,
.brand,
.brand-mark,
.card .brand {
  font-family: var(--gotripcn-brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.page-logo,
.portal-logo,
.brand {
  color: var(--gotripcn-text) !important;
  text-shadow: 0 12px 42px rgba(0, 0, 0, 0.32);
}

.back-link,
.portal-back-link,
.guide-nav-back,
.nav-link {
  color: rgba(243, 246, 251, 0.74) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.auth-card,
.guide-apply-card,
.glass-panel,
.card,
.login-box {
  border: 1px solid var(--gotripcn-line) !important;
  border-radius: var(--gotripcn-radius) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 44%, rgba(217, 182, 111, 0.055)),
    var(--gotripcn-panel) !important;
  box-shadow: var(--gotripcn-shadow), 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(28px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.08) !important;
}

.auth-card h1,
.guide-auth-title,
.card-title,
.title,
.guide-auth-card h1,
.card h1 {
  color: var(--gotripcn-text) !important;
  font-family: var(--gotripcn-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.kicker,
.eyebrow,
.partner-status,
.guide-auth-sub,
.intro,
.lede,
.subtitle {
  color: var(--gotripcn-muted) !important;
  letter-spacing: 0.04em !important;
}

.kicker,
.eyebrow,
.partner-status {
  color: var(--gotripcn-green) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.title span,
.become-title span {
  color: var(--gotripcn-green) !important;
}

label,
.guide-field label,
.field label {
  color: rgba(243, 246, 251, 0.72) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

input,
textarea,
select,
.portal-input,
.field-shell,
.form-group input,
.guide-field input,
.guide-field textarea,
.field input,
.field textarea,
.field select {
  border-color: rgba(229, 235, 247, 0.14) !important;
  border-radius: var(--gotripcn-radius) !important;
  background: rgba(3, 6, 14, 0.46) !important;
  color: var(--gotripcn-text) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

input:focus,
textarea:focus,
select:focus,
.portal-input:focus {
  border-color: rgba(217, 182, 111, 0.58) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(217, 182, 111, 0.1) !important;
}

.submit-btn,
.guide-submit,
.guide-submit-btn,
.save-btn,
.resend-btn,
.change-email-btn,
.card button,
.login-box button {
  min-height: 48px;
  border: 1px solid rgba(243, 246, 251, 0.2) !important;
  border-radius: var(--gotripcn-radius) !important;
  background: var(--gotripcn-text) !important;
  color: var(--gotripcn-ink) !important;
  font-family: var(--gotripcn-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important;
}

.submit-btn:hover,
.guide-submit:hover,
.guide-submit-btn:hover,
.save-btn:hover,
.card button:hover:not(:disabled),
.login-box button:hover {
  border-color: rgba(217, 182, 111, 0.62) !important;
  background: #ffffff !important;
  color: var(--gotripcn-ink) !important;
  transform: translateY(-1px);
}

.toggle-row,
.guide-apply-row {
  border-top-color: rgba(229, 235, 247, 0.1) !important;
}

.toggle-row a,
.guide-apply-link {
  color: var(--gotripcn-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.error-msg,
.success-msg,
.form-message,
.guide-form-message,
.message,
#login-message,
#save-message {
  border-radius: var(--gotripcn-radius) !important;
  background: rgba(3, 6, 14, 0.46) !important;
}

.proof-item,
.tag-option,
.avatar-dropzone,
.upload-zone,
.guide-upload-zone {
  border-radius: var(--gotripcn-radius) !important;
  border-color: rgba(229, 235, 247, 0.14) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.proof-item:hover,
.tag-option:hover,
.upload-zone:hover,
.guide-upload-zone:hover,
.avatar-dropzone:hover {
  border-color: rgba(217, 182, 111, 0.34) !important;
  background: rgba(217, 182, 111, 0.055) !important;
}

.tag-option.is-active,
.availability-pill,
#availability-pill {
  border-color: rgba(115, 224, 184, 0.32) !important;
  background: rgba(115, 224, 184, 0.1) !important;
  color: var(--gotripcn-green) !important;
}

.auth-city-image::before {
  opacity: 1 !important;
  filter:
    grayscale(0)
    saturate(1.18)
    brightness(1.5)
    contrast(1.1)
    drop-shadow(5px 5px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(-5px -5px 0 rgba(255, 255, 255, 0.56))
    drop-shadow(4px -4px 0 rgba(255, 255, 255, 0.48))
    drop-shadow(-4px 4px 0 rgba(255, 255, 255, 0.48))
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32)) !important;
}

.auth-atmosphere::before {
  background:
    radial-gradient(ellipse 34% 56% at 50% 47%, rgba(5, 8, 20, 0.92) 0%, rgba(5, 8, 20, 0.76) 42%, rgba(5, 8, 20, 0.22) 72%, rgba(5, 8, 20, 0.04) 100%),
    linear-gradient(180deg, rgba(5, 8, 20, 0.2), rgba(5, 8, 20, 0.58)) !important;
}

.guide-route-map svg {
  opacity: 0.42 !important;
}

.bg-accent-text,
.route-label,
.coord-text {
  opacity: 0.72;
}

.portal-login-section,
.guide-stage,
.card {
  position: relative;
  z-index: 2;
}

.guide-stage {
  align-items: center !important;
}

.guide-copy .title,
.title {
  max-width: 760px;
  font-size: clamp(42px, 6.3vw, 78px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.03em !important;
}

.guide-copy .lede,
.lede {
  max-width: 690px;
  color: rgba(243, 246, 251, 0.66) !important;
}

.guide-apply-card,
.auth-card,
.guide-auth-card {
  overflow: hidden;
}

.guide-apply-card::before,
.auth-card::before,
.guide-auth-card::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(142, 184, 255, 0.12), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(217, 182, 111, 0.12), transparent 30%);
}

.gotripcn-language-trigger {
  border-radius: var(--gotripcn-radius) !important;
  border-color: rgba(229, 235, 247, 0.18) !important;
  background: rgba(243, 246, 251, 0.9) !important;
  color: var(--gotripcn-ink) !important;
}

.gotripcn-language-menu {
  border-radius: var(--gotripcn-radius) !important;
  border-color: rgba(229, 235, 247, 0.16) !important;
  background: rgba(248, 250, 252, 0.96) !important;
}

@media (max-width: 760px) {
  body {
    overflow-y: auto !important;
  }

  nav {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 22px 18px 10px !important;
  }

  nav .brand {
    grid-column: 2 !important;
    justify-self: start !important;
    max-width: calc(100vw - 190px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  nav .nav-right {
    grid-column: 3 !important;
    justify-self: end !important;
    transform: none !important;
    padding-right: 86px;
  }

  nav .nav-right {
    display: none !important;
  }

  .page-logo,
  .portal-logo,
  .brand {
    font-size: 22px !important;
  }

  nav .brand {
    font-size: 18px !important;
  }

  .auth-card,
  .guide-apply-card,
  .guide-auth-card,
  .card {
    width: min(100% - 32px, 460px) !important;
  }

  .guide-copy .title,
  .title {
    font-size: clamp(36px, 13vw, 52px) !important;
  }

  .proof-grid {
    grid-template-columns: 1fr !important;
  }
}