/* Keep the bundled PatternFly background from covering the Rogue Arena animation. */
.pf-c-form-control,
.login-pf-page .pf-c-form-control,
.card-pf .pf-c-form-control,
input.pf-c-form-control {
  border-radius: 8px !important;
  border: 1px solid rgba(107, 214, 195, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  width: 100%;
  font-size: 1.25rem !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pf-c-form-control:focus,
.login-pf-page .pf-c-form-control:focus,
input.pf-c-form-control:focus {
  border-color: rgba(107, 214, 195, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}

.pf-c-form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.login-pf {
  background: none;
}

.login-pf body {
  background: #010102;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated background container */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* Teal radial gradient glow */
.animated-bg::before {
  content: '';
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 300%;
  height: 150%;
  background: radial-gradient(
    ellipse at center,
    rgba(80, 200, 210, 0.15) 0%,
    rgba(80, 200, 210, 0.08) 25%,
    rgba(80, 200, 210, 0.03) 45%,
    transparent 70%
  );
  pointer-events: none;
}

/* Particle styles */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(80, 200, 210, 0.4);
  box-shadow: 0 0 10px rgba(80, 200, 210, 0.3);
  pointer-events: none;
}

/* Individual particle animations - 30 particles */
.particle:nth-child(1) { width: 4px; height: 4px; left: 10%; top: 90%; animation: float-up 25s infinite linear; animation-delay: 0s; }
.particle:nth-child(2) { width: 6px; height: 6px; left: 20%; top: 85%; animation: float-up 30s infinite linear; animation-delay: -5s; }
.particle:nth-child(3) { width: 3px; height: 3px; left: 35%; top: 95%; animation: float-up 22s infinite linear; animation-delay: -10s; }
.particle:nth-child(4) { width: 5px; height: 5px; left: 50%; top: 88%; animation: float-up 28s infinite linear; animation-delay: -3s; }
.particle:nth-child(5) { width: 4px; height: 4px; left: 65%; top: 92%; animation: float-up 24s infinite linear; animation-delay: -8s; }
.particle:nth-child(6) { width: 7px; height: 7px; left: 80%; top: 87%; animation: float-up 32s infinite linear; animation-delay: -15s; }
.particle:nth-child(7) { width: 3px; height: 3px; left: 90%; top: 94%; animation: float-up 20s infinite linear; animation-delay: -12s; }
.particle:nth-child(8) { width: 5px; height: 5px; left: 15%; top: 80%; animation: float-up 26s infinite linear; animation-delay: -18s; }
.particle:nth-child(9) { width: 4px; height: 4px; left: 45%; top: 96%; animation: float-up 23s infinite linear; animation-delay: -7s; }
.particle:nth-child(10) { width: 6px; height: 6px; left: 75%; top: 82%; animation: float-up 29s infinite linear; animation-delay: -20s; }
.particle:nth-child(11) { width: 3px; height: 3px; left: 5%; top: 75%; animation: float-up 21s infinite linear; animation-delay: -2s; }
.particle:nth-child(12) { width: 5px; height: 5px; left: 55%; top: 78%; animation: float-up 27s infinite linear; animation-delay: -14s; }
.particle:nth-child(13) { width: 4px; height: 4px; left: 28%; top: 91%; animation: float-up 25s infinite linear; animation-delay: -9s; }
.particle:nth-child(14) { width: 6px; height: 6px; left: 95%; top: 85%; animation: float-up 31s infinite linear; animation-delay: -16s; }
.particle:nth-child(15) { width: 4px; height: 4px; left: 42%; top: 89%; animation: float-up 24s infinite linear; animation-delay: -11s; }
.particle:nth-child(16) { width: 3px; height: 3px; left: 8%; top: 83%; animation: float-up 26s infinite linear; animation-delay: -4s; }
.particle:nth-child(17) { width: 5px; height: 5px; left: 22%; top: 93%; animation: float-up 28s infinite linear; animation-delay: -13s; }
.particle:nth-child(18) { width: 4px; height: 4px; left: 38%; top: 86%; animation: float-up 23s infinite linear; animation-delay: -6s; }
.particle:nth-child(19) { width: 6px; height: 6px; left: 52%; top: 91%; animation: float-up 31s infinite linear; animation-delay: -17s; }
.particle:nth-child(20) { width: 3px; height: 3px; left: 68%; top: 84%; animation: float-up 22s infinite linear; animation-delay: -1s; }
.particle:nth-child(21) { width: 5px; height: 5px; left: 82%; top: 95%; animation: float-up 27s infinite linear; animation-delay: -19s; }
.particle:nth-child(22) { width: 4px; height: 4px; left: 12%; top: 77%; animation: float-up 24s infinite linear; animation-delay: -8s; }
.particle:nth-child(23) { width: 7px; height: 7px; left: 32%; top: 81%; animation: float-up 33s infinite linear; animation-delay: -21s; }
.particle:nth-child(24) { width: 3px; height: 3px; left: 48%; top: 97%; animation: float-up 21s infinite linear; animation-delay: -3s; }
.particle:nth-child(25) { width: 5px; height: 5px; left: 62%; top: 79%; animation: float-up 29s infinite linear; animation-delay: -15s; }
.particle:nth-child(26) { width: 4px; height: 4px; left: 78%; top: 93%; animation: float-up 25s infinite linear; animation-delay: -7s; }
.particle:nth-child(27) { width: 6px; height: 6px; left: 88%; top: 76%; animation: float-up 30s infinite linear; animation-delay: -22s; }
.particle:nth-child(28) { width: 3px; height: 3px; left: 3%; top: 88%; animation: float-up 22s infinite linear; animation-delay: -10s; }
.particle:nth-child(29) { width: 5px; height: 5px; left: 58%; top: 94%; animation: float-up 26s infinite linear; animation-delay: -5s; }
.particle:nth-child(30) { width: 4px; height: 4px; left: 72%; top: 87%; animation: float-up 24s infinite linear; animation-delay: -18s; }

/* Float up animation with slight horizontal drift */
@keyframes float-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  5% { opacity: 0.6; }
  50% { opacity: 0.4; }
  95% { opacity: 0; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* Alternate animation with different drift */
.particle:nth-child(even) { animation-name: float-up-alt; }

@keyframes float-up-alt {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  5% { opacity: 0.5; }
  50% { opacity: 0.3; }
  95% { opacity: 0; }
  100% { transform: translateY(-100vh) translateX(-25px); opacity: 0; }
}

textarea.pf-c-form-control {
  height: auto;
}

.pf-c-alert__title {
  font-size: var(--pf-global--FontSize--xs);
}

.pf-c-alert {
  grid-gap: 4px;
  padding: 8px;
  margin-bottom: 12px;
}

#kc-info-message.instruction,
#kc-info-message p.instruction {
  margin: 5px 0;
  color: white;
  opacity: 0.7;
}

.pf-c-button {
  border: none;
  border-radius: 4px;
  color: #21252a;
  font-weight: 700;
}

.kc-form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-pf-settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pf-c-button[value="Submit"] {
  display: block;
  margin-left: auto;
}

.kc-form-options div div.checkbox {
  display: block;
  margin-left: auto;
}

.pf-c-button.pf-m-control {
  border: solid var(--pf-global--BorderWidth--sm);
  border-color: rgba(230, 230, 230, 0.5);
}

.pf-c-button.pf-m-primary {
  background-color: #3d8a7d !important;
  color: #ffffff !important;
  border: 1px solid rgba(107, 214, 195, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.pf-c-button.pf-m-primary:hover {
  background-color: #4a9e8f !important;
  color: #ffffff !important;
  border-color: rgba(107, 214, 195, 0.5) !important;
  box-shadow: 0 4px 12px rgba(61, 138, 125, 0.4) !important;
}

h1#kc-page-title {
  margin-top: 10px;
  font-weight: 500;
}

#kc-locale ul {
  background-color: var(--pf-global--BackgroundColor--100);
  display: none;
  top: 20px;
  min-width: 100px;
  padding: 0;
}

#kc-locale-dropdown {
  display: inline-block;
}

#kc-locale-dropdown:hover ul {
  display: block;
}

#kc-locale-dropdown a {
  color: var(--pf-global--Color--200);
  text-align: right;
  font-size: var(--pf-global--FontSize--sm);
}

a#kc-current-locale-link::after {
  content: "\2c5";
  margin-left: var(--pf-global--spacer--xs);
}

.login-pf .container {
  padding-top: 40px;
}

.login-pf a:hover {
  color: #0099d3;
}

#kc-logo {
  width: 100%;
}

#kc-header {
  color: #ededed;
  overflow: visible;
  white-space: nowrap;
}

.rogue-logo {
  background-image: url(../img/rogue-arena-logo.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 100px;
  background-size: 65%;
  margin-bottom: 5px;
}

button[aria-label="Show password"] {
  display: none; /* This will make the button invisible and remove it from the document flow */
}

#kc-content {
  width: 100%;
}

#kc-attempted-username {
  font-size: 20px;
  font-family: inherit;
  font-weight: normal;
  padding-right: 10px;
}

#kc-username {
  text-align: center;
  margin-bottom: -10px;
}

#kc-webauthn-settings-form {
  padding-top: 8px;
}

#kc-form-webauthn .select-auth-box-parent {
  pointer-events: none;
}

#kc-form-webauthn .select-auth-box-desc {
  color: var(--pf-global--palette--black-600);
}

#kc-form-webauthn .select-auth-box-headline {
  color: var(--pf-global--Color--300);
}

#kc-form-webauthn .select-auth-box-icon {
  flex: 0 0 3em;
}

#kc-form-webauthn .select-auth-box-icon-properties {
  margin-top: 10px;
  font-size: 1.8em;
}

#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class {
  margin-top: 3px;
}

#kc-form-webauthn .pf-l-stack__item {
  margin: -1px 0;
}

#kc-content-wrapper {
  margin-top: 20px;
}

#kc-form-wrapper {
  margin-top: 10px;
}


/* Registration prompt under the sign-in options: a plain centred line, no box */
#kc-info-wrapper {
  font-size: 15px;
  padding: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

#kc-form-options span {
  display: block;
}

#kc-form-options .checkbox {
  margin-top: 0;
  color: #b3b3b3;
}

#kc-terms-text {
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
}

#kc-terms-text + form {
  display: flex;
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#kc-terms-text p {
  color: white;
  opacity: 0.7;
}

#kc-registration {
  margin-bottom: 0;
}

#kc-registration a {
  color: #5ec7b5;
  font-weight: 600;
  margin-left: 4px;
}

.login-pf-signup {
}

/* TOTP */

.subtitle {
  text-align: right;
  margin-top: 30px;
  color: #909090;
}

.required {
  color: var(--pf-global--danger-color--200);
}

ol#kc-totp-settings {
  margin: 0;
  padding-left: 20px;
}

ul#kc-totp-supported-apps {
  margin-bottom: 10px;
}

#kc-totp-secret-qr-code {
  max-width: 150px;
  max-height: 150px;
}

#kc-totp-secret-key {
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  padding: 10px 0;
}

/* OAuth */

#kc-oauth h3 {
  margin-top: 0;
}

#kc-oauth ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#kc-oauth ul li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  padding: 10px 0;
}

#kc-oauth ul li:first-of-type {
  border-top: 0;
}

#kc-oauth .kc-role {
  display: inline-block;
  width: 50%;
}

/* Code */
#kc-code textarea {
  width: 100%;
  height: 8em;
}

/* Social */
.kc-social-links {
  margin-top: 20px;
}

.kc-social-provider-logo {
  font-size: 23px;
  width: 30px;
  height: 25px;
  float: left;
}

.kc-social-gray {
  color: var(--pf-global--Color--200);
}

.kc-social-item {
  margin-bottom: var(--pf-global--spacer--sm);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #21252a;
  text-align: center;
  background-color: #ffffff;
  border: none !important;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Secondary buttons on the Keycloak base pages the theme does not override (account linking,
   terms, verify e-mail, ...): PatternFly v3's gradient btn-default becomes the flat white
   style the social buttons use, with breathing room between stacked buttons. */
.pf-c-button.btn-default,
.pf-c-button.btn-default:focus {
  background-color: #ffffff;
  background-image: none;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #21252a;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
}

.pf-c-button.btn-default:hover {
  background-color: #f3f5f7;
  background-image: none;
  color: #21252a;
}

.pf-c-button.btn-default.pf-m-block + .pf-c-button.pf-m-block {
  margin-top: 10px;
}

/* Account-link confirmation: linking to the existing account is the expected choice */
#linkAccount.pf-c-button.btn-default {
  background-color: #3d8a7d;
  color: #ffffff;
  border: 1px solid rgba(107, 214, 195, 0.3);
}

#linkAccount.pf-c-button.btn-default:hover {
  background-color: #4a9e8f;
  color: #ffffff;
}

/* Keep the label dark on hover (the card-wide link hover turns anchors teal) */
.card-pf a.kc-social-item:hover,
.card-pf a.kc-social-item:focus {
  color: #21252a;
  background-color: #f3f5f7;
  text-decoration: none;
}

/* PatternFly's control buttons draw a second border on a pseudo-element (darker and thicker
   at the bottom, blue on hover). With the element border gone too, the buttons sit flat on
   the card with only the drop shadow, like the Sign In button. */
.kc-social-item::after,
.kc-social-item:hover::after,
.kc-social-item:focus::after,
.kc-social-item:active::after {
  border: none !important;
}

.kc-social-provider-name {
  position: relative;
  top: 3px;
}

.kc-social-icon-text {
  left: -15px;
}

.kc-social-grid {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  grid-column-end: span 6;
  --pf-l-grid__item--GridColumnEnd: span 6;
}

.kc-social-grid .kc-social-icon-text {
  left: -10px;
}

.kc-login-tooltip {
  position: relative;
  display: inline-block;
}

#kc-login.pf-c-button[name="login"] {
  margin-left: auto;
  display: block;
  margin-bottom: 10px;
  width: 100%;

}

.kc-social-section {
  text-align: center;
}

/* Full-colour brand mark (img or inline svg) in a social button; sized to match the icon box */
.kc-social-brand-logo {
  width: 20px;
  height: 20px;
  float: left;
  margin: 2px 0 0 4px;
}

/* "View more options" fold for the brokers past the first one. The list is a flex
   container, so the fold wrapper must be told to span it or its buttons shrink to fit. */
#kc-social-more-list {
  width: 100%;
}

#kc-social-more-list[hidden] {
  display: none;
}

.kc-social-more {
  background: none;
  border: none;
  color: var(--pf-global--Color--200);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0 10px;
  width: 100%;
}

.kc-social-more:hover,
.kc-social-more:focus-visible {
  text-decoration: underline;
}

.kc-social-section hr {
  margin-bottom: 10px;
}

.kc-login-tooltip .kc-tooltip-text {
  top: -3px;
  left: 160%;
  background-color: black;
  visibility: hidden;
  color: #fff;

  min-width: 130px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  padding: 5px;

  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}

/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
  visibility: visible;
  opacity: 0.7;
}

/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
  content: " ";
  position: absolute;
  top: 15px;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

@media (min-width: 768px) {
  #kc-container-wrapper {
    position: absolute;
    width: 100%;
  }

  .login-pf .container {
    padding-right: 80px;
  }

  #kc-locale {
    position: relative;
    text-align: right;
    z-index: 9999;
  }
}

@media (max-width: 767px) {
  #kc-header {
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    text-align: left;
  }

  #kc-header-wrapper {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 60px 0 0;
    color: #72767b;
    letter-spacing: 0;
  }

  div.kc-logo-text {
    margin: 0;
    width: 150px;
    height: 32px;
    background-size: 100%;
  }

  #kc-form {
    float: none;
  }

  #kc-info-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent;
  }

  .login-pf .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  #kc-locale {
    position: absolute;
    width: 200px;
    top: 20px;
    right: 20px;
    text-align: right;
    z-index: 9999;
  }
}

@media (min-height: 646px) {
  #kc-container-wrapper {
    bottom: 12%;
  }
}

@media (max-height: 645px) {
  #kc-container-wrapper {
    padding-top: 50px;
    top: 20%;
  }
}

.card-pf form.form-actions .btn {
  float: right;
  margin-left: 10px;
}

#kc-form-buttons {
  margin-top: 20px;
}

.login-pf-page .login-pf-brand {
  margin-top: 20px;
  max-width: 360px;
  width: 40%;
}

.select-auth-box-arrow {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.select-auth-box-icon {
  display: flex;
  flex: 0 0 2em;
  justify-content: center;
  margin-right: 1rem;
  margin-left: 3rem;
}

.select-auth-box-parent {
  border-top: 1px solid var(--pf-global--palette--black-200);
  padding-top: 1rem;
  padding-bottom: 1rem;
  cursor: pointer;
}

.select-auth-box-parent:hover {
  background-color: #f7f8f8;
}

.select-auth-container {
  padding-bottom: 0px !important;
}

.select-auth-box-headline {
  font-size: var(--pf-global--FontSize--md);
  color: var(--pf-global--primary-color--100);
  font-weight: bold;
}

.select-auth-box-desc {
  font-size: var(--pf-global--FontSize--sm);
}

.select-auth-box-paragraph {
  text-align: center;
  font-size: var(--pf-global--FontSize--md);
  margin-bottom: 5px;
}

/* Card styling */
.card-pf,
.login-pf-page .card-pf {
  margin: 0 auto !important;
  padding: 30px 50px !important;
  max-width: 520px !important;
  margin-top: 15vh !important;
  border-radius: 16px !important;
  background: rgba(12, 14, 17, 0.95) !important;
  border: 1px solid rgba(107, 214, 195, 0.1) !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  backdrop-filter: blur(20px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

/* Tagline styling */
.card-tagline {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-bottom: 25px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.card-pf a {
  color: #6bd6c3;
  margin-left: auto;
  transition: color 0.2s ease;
}

.card-pf a:hover {
  color: #85f0dd;
}

/*phone*/
@media (max-width: 767px) {
  .login-pf-page .card-pf {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-top: 0;
    box-shadow: 0 0;
  }

  .kc-social-grid {
    grid-column-end: 12;
    --pf-l-grid__item--GridColumnEnd: span 12;
  }

  .kc-social-grid .kc-social-icon-text {
    left: -15px;
  }
}

.login-pf-page .login-pf-signup {
  font-size: 15px;
  margin-top: 18px;
}
#kc-content-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

.login-pf-page.login-pf-page-accounts {
  margin-left: auto;
  margin-right: auto;
}

.login-pf-page .btn-primary {
  margin-top: 0;
}

.login-pf-page .list-view-pf .list-group-item {
  border-bottom: 1px solid #ededed;
}

.login-pf-page .list-view-pf-description {
  width: 100%;
}

#kc-form-login div.form-group:last-of-type,
#kc-register-form div.form-group:last-of-type,
#kc-update-profile-form div.form-group:last-of-type,
#kc-update-email-form div.form-group:last-of-type {
  margin-bottom: 0px;
}

.form-group input,
.login-pf-page .form-group input,
.card-pf .form-group input {
  color: #ffffff !important;
}

.form-group label,
.login-pf-page .form-group label,
.card-pf .form-group label,
.pf-c-form__label,
.pf-c-form__label-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  margin-bottom: 8px;
}

.no-bottom-margin {
  margin-bottom: 0;
}

#kc-back {
  margin-top: 5px;
}

/* Recovery codes */
.kc-recovery-codes-warning {
  margin-bottom: 32px;
}
.kc-recovery-codes-warning .pf-c-alert__description p {
  font-size: 0.875rem;
}
.kc-recovery-codes-list {
  list-style: none;
  columns: 2;
  margin: 16px 0;
  padding: 16px 16px 8px 16px;
  border: 1px solid #d2d2d2;
}
.kc-recovery-codes-list li {
  margin-bottom: 8px;
  font-size: 11px;
}
.kc-recovery-codes-list li span {
  color: #6a6e73;
  width: 16px;
  text-align: right;
  display: inline-block;
  margin-right: 1px;
}

.kc-recovery-codes-actions {
  margin-bottom: 24px;
}
.kc-recovery-codes-actions button {
  padding-left: 0;
}
.kc-recovery-codes-actions button i {
  margin-right: 8px;
}

.kc-recovery-codes-confirmation {
  align-items: baseline;
  margin-bottom: 16px;
}
/* End Recovery codes */

/* ---------- /start landing mode (body.ra-landing, set by js/landing.js) ---------- */
.ra-landing-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  filter: blur(1px);
  pointer-events: none;
}
.ra-landing-logo {
  position: absolute;
  top: 18px;
  left: 32px;
  width: 190px;
  height: 48px;
  background: url(../img/rogue-arena-logo.png) left center / contain no-repeat;
}
.ra-landing-preview {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 16px;
  background: rgba(8, 10, 16, 0.95);
  border: 1px solid rgba(107, 214, 195, 0.18);
  color: rgba(255, 255, 255, 0.7);
}
.ra-landing-preview-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ra-landing-preview-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ra-landing .card-pf,
.ra-landing .login-pf-page .card-pf {
  margin-top: 12vh !important;
  padding-top: 0 !important;
  overflow: hidden;
}
.ra-landing-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 -50px 22px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(107, 214, 195, 0.18), rgba(95, 191, 249, 0.08));
  border-bottom: 1px solid rgba(107, 214, 195, 0.3);
}
.ra-landing-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(107, 214, 195, 0.18);
  color: #6bd6c3;
}
.ra-landing-banner-copy strong {
  display: block;
  color: #6bd6c3;
  font-size: 16px;
  font-weight: 600;
}
.ra-landing-banner-copy span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.ra-landing-mascot {
  width: 44px;
  height: 44px;
  margin: -8px auto 10px;
  background: url(../img/oracle-mascot.svg) center / contain no-repeat;
}
@media (max-width: 767px) {
  .ra-landing-banner { margin-left: -16px; margin-right: -16px; }
  .ra-landing-logo { left: 16px; width: 150px; }
}

/* ---------- /try/<code> landing mode (body.ra-landing-try, set by js/landing.js) ----------
   Showcase hero on the left, the unchanged login card on the right. The hero mirrors the app's
   FeaturedShowcase (EnvironmentsModal.styles.ts): hex pattern, teal/blue glow, floating image
   card, mono tags, heavy title, author row, coloured stats. */
body.ra-landing-try:not(.ra-try-showcase-failed) .login-pf-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 84px 32px 40px;
  box-sizing: border-box;
}
body.ra-landing-try:not(.ra-try-showcase-failed) #kc-header {
  display: none;
}
body.ra-landing-try:not(.ra-try-showcase-failed) .login-pf-page .card-pf {
  width: 100%;
  margin: 0 !important;
  padding-top: 30px !important;
  overflow: visible;
}
.ra-try-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  min-height: min(640px, calc(100vh - 124px));
  padding: 40px 0 0;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(33, 37, 42, 0.72);
  border: 1px solid rgba(107, 214, 195, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ra-try-hex {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.02;
  background-image:
    linear-gradient(30deg, #6bd6c3 12%, transparent 12.5%, transparent 87%, #6bd6c3 87.5%, #6bd6c3),
    linear-gradient(150deg, #6bd6c3 12%, transparent 12.5%, transparent 87%, #6bd6c3 87.5%, #6bd6c3),
    linear-gradient(30deg, #6bd6c3 12%, transparent 12.5%, transparent 87%, #6bd6c3 87.5%, #6bd6c3),
    linear-gradient(150deg, #6bd6c3 12%, transparent 12.5%, transparent 87%, #6bd6c3 87.5%, #6bd6c3),
    linear-gradient(60deg, rgba(107, 214, 195, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(107, 214, 195, 0.5) 75%, rgba(107, 214, 195, 0.5)),
    linear-gradient(60deg, rgba(107, 214, 195, 0.5) 25%, transparent 25.5%, transparent 75%, rgba(107, 214, 195, 0.5) 75%, rgba(107, 214, 195, 0.5));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.ra-try-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(107, 214, 195, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(95, 191, 249, 0.05) 0%, transparent 50%);
}
.ra-try-showcase-loading::after {
  content: '';
  position: absolute;
  left: 60px;
  right: 40%;
  bottom: 60px;
  height: 120px;
  z-index: 2;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  background-size: 200% 100%;
  animation: ra-try-shimmer 1.4s ease-in-out infinite;
}
@keyframes ra-try-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes ra-try-float-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ra-try-fade-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.ra-try-image {
  position: relative;
  z-index: 3;
  align-self: center;
  width: min(400px, calc(100% - 48px));
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 1px solid rgba(107, 214, 195, 0.12);
  background: rgba(42, 46, 51, 0.4);
  backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  animation: ra-try-float-in 1s ease-out;
}
.ra-try-image::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(107, 214, 195, 0.25), transparent 50%, rgba(95, 191, 249, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ra-try-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ra-try-content {
  position: relative;
  z-index: 5;
  padding: 0 60px 60px;
  animation: ra-try-fade-in-left 0.7s ease-out;
}
.ra-try-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ra-try-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 5px;
  color: var(--ra-try-tone);
  background: var(--ra-try-tone-bg);
  border: 1px solid var(--ra-try-tone-border);
}
.ra-try-tone-primary { --ra-try-tone: #6bd6c3; --ra-try-tone-bg: rgba(107, 214, 195, 0.1); --ra-try-tone-border: rgba(107, 214, 195, 0.2); }
.ra-try-tone-blue { --ra-try-tone: #5fbff9; --ra-try-tone-bg: rgba(95, 191, 249, 0.1); --ra-try-tone-border: rgba(95, 191, 249, 0.2); }
.ra-try-tone-green { --ra-try-tone: #43e97b; --ra-try-tone-bg: rgba(67, 233, 123, 0.1); --ra-try-tone-border: rgba(67, 233, 123, 0.2); }
.ra-try-tone-gold { --ra-try-tone: #ffca28; --ra-try-tone-bg: rgba(255, 202, 40, 0.1); --ra-try-tone-border: rgba(255, 202, 40, 0.2); }
.ra-try-tone-red { --ra-try-tone: #ef5350; --ra-try-tone-bg: rgba(239, 83, 80, 0.1); --ra-try-tone-border: rgba(239, 83, 80, 0.2); }
.ra-try-name {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.ra-try-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #b0b0b0;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}
.ra-try-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #6bd6c3;
  color: #21252a;
  font-size: 0.7rem;
  font-weight: 700;
}
.ra-try-description {
  max-width: 500px;
  margin: 0 0 28px;
  color: #b0b0b0;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ra-try-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ra-try-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.ra-try-stat-value {
  color: var(--ra-try-tone);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.ra-try-stat-label {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  body.ra-landing-try:not(.ra-try-showcase-failed) .login-pf-page {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    padding: 76px 16px 24px;
    gap: 20px;
  }
  .ra-try-showcase { min-height: 0; gap: 24px; padding-top: 24px; }
  .ra-try-content { padding: 0 24px 28px; }
  .ra-try-name { font-size: 1.75rem; }
  .ra-try-description { -webkit-line-clamp: 4; margin-bottom: 20px; }
  .ra-try-stat-value { font-size: 1.6rem; }
  .ra-try-showcase-loading { min-height: 220px; }
  .ra-try-showcase-loading::after { left: 24px; right: 24px; bottom: 24px; height: 96px; }
}
@media (max-width: 767px) {
  body.ra-landing-try:not(.ra-try-showcase-failed) .login-pf-page .card-pf { padding: 24px 16px !important; }
}