@font-face {
  font-family: 'Instrument Sans';
  src: url('/public/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.rt-account-page {
  --account-ink: #17263e;
  --account-muted: #26374d;
  --account-ease: cubic-bezier(.16, 1, .3, 1);
  min-height: 100vh;
  min-height: 100svh;
  padding: 36px clamp(24px, 4.5vw, 80px) 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--account-ink);
  background: #233f62;
  font-family: 'Instrument Sans', sans-serif;
  isolation: isolate;
  scrollbar-color: #8294ad #233f62;
  caret-color: #2563eb;
}
.rt-account-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(9 25 47 / .3), transparent 30%, rgb(9 25 47 / .66)), url('/public/brand/login-atmosphere-v1.png') center / cover no-repeat;
  pointer-events: none;
}
.rt-account-page ::selection { background: #c8dbff; color: #17263e; }
.rt-account-page a { text-underline-offset: 4px; }
.rt-account-page :focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.rt-account-header, .rt-account-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rt-account-header a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.rt-account-back { gap: 10px; font-size: 14px; }
.rt-account-header a:hover { opacity: .85; }
.rt-account-header a:focus-visible, .rt-account-footer a:focus-visible { outline-color: #fff; }
.rt-account-main { display: grid; grid-template-columns: 1fr minmax(0, 448px); gap: 64px; align-items: center; flex: 1; width: 100%; max-width: 1440px; margin: auto; padding: 24px 0; }
.rt-account-story { color: #fff; align-self: end; padding: 0 0 24px; text-shadow: 0 2px 20px rgb(8 20 37 / .3); }
.rt-account-story p { font-size: clamp(36px, 4.3vw, 66px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 20px; }
.rt-account-story span { font-size: 17px; color: #ebf1fb; }
.rt-account-card { position: relative; padding: 42px; border-radius: 0 96px 0 0; background: #f3f6fb; box-shadow: 0 24px 80px rgb(5 22 44 / .22); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rt-account-card { background: rgb(245 248 253 / .48); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.rt-account-card h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.03em; font-weight: 600; margin: 0 0 12px; text-wrap: balance; }
.rt-account-intro, .rt-account-card .rt-login-sub { color: var(--account-muted); font-size: 15px; text-align: left; margin: 0 0 32px; }
.rt-account-card .rt-field { margin-bottom: 20px; gap: 8px; }
.rt-account-card .rt-field label { font-size: 14px; font-weight: 600; }
.rt-account-card .rt-field input { min-height: 50px; font-size: 16px; background: rgb(255 255 255 / .72); border-color: #a1adbd; color: var(--account-ink); border-radius: 8px; }
.rt-account-card input::placeholder { color: #5d6a7d; opacity: 1; }
.rt-account-card .rt-field input:focus { outline: 2px solid #2563eb; outline-offset: 2px; border-color: #2563eb; }
.rt-account-password { position: relative; }
.rt-account-password input { padding-right: 92px; }
.rt-account-reveal { position: absolute; inset: 3px 4px 3px auto; border: 0; background: transparent; color: #234e91; font: 500 13px 'Instrument Sans', sans-serif; padding: 0 10px; cursor: pointer; border-radius: 5px; }
.rt-account-reveal:hover { background: #e3eafa; }
.rt-account-reveal[hidden] { display: none; }
.rt-account-forgot { display: flex; justify-content: flex-end; margin: -6px 0 26px; font-size: 13px; }
.rt-account-card a { color: #123b7a; }
.rt-account-card .rt-btn { min-height: 50px; font-family: inherit; font-size: 15px; font-weight: 600; background: #2563eb; border-radius: 0 28px 0 0; }
.rt-account-card .rt-btn:hover { background: #1d4ed8; }
.rt-account-card .rt-btn:disabled { cursor: wait; background: #465f92; color: #fff; opacity: 1; }
.rt-account-card .rt-login-footer { border-top: 1px solid rgb(71 88 110 / .2); padding-top: 24px; margin-top: 28px; font-size: 14px; color: var(--account-muted); }
.rt-account-card .rt-muted { color: var(--account-muted); }
.rt-account-card .rt-alert { font-size: 14px; }
.rt-account-footer { color: #e6edf8; font-size: 12px; }
.rt-account-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rt-account-footer a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.rt-account-footer a:hover { text-decoration: underline; }

/* One entrance: panel assembles, contents settle, the surface becomes glass.
   Visible, usable base styles also cover disabled animation and script failure. */
@media (prefers-reduced-motion: no-preference) {
  .rt-account-page:not(.rt-account-error) .rt-account-card { animation: account-arrive 800ms var(--account-ease) both; }
  .rt-account-page:not(.rt-account-error) .rt-account-card > * { animation: account-content 650ms var(--account-ease) both; }
  .rt-account-page:not(.rt-account-error) .rt-account-card > :nth-child(2) { animation-delay: 70ms; }
  .rt-account-page:not(.rt-account-error) .rt-account-card > :nth-child(n+3) { animation-delay: 140ms; }
}
@keyframes account-arrive { from { transform: translateY(20px) scale(.985); background-color: #f3f6fb; } }
@keyframes account-content { from { opacity: .45; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .rt-account-main { gap: 32px; grid-template-columns: 1fr minmax(0, 410px); }
  .rt-account-card { padding: 32px; }
  .rt-account-story p { font-size: 38px; }
  .rt-account-story span { font-size: 15px; }
}
@media (max-width: 700px) {
  .rt-account-page { padding: 20px; gap: 24px; }
  .rt-account-header { gap: 12px; }
  .rt-account-brand svg { width: 159px; height: 30px; }
  .rt-account-back { font-size: 12px; gap: 6px; }
  .rt-account-main { display: block; max-width: 448px; flex: initial; margin: auto; padding: 12px 0; }
  .rt-account-story { display: none; }
  .rt-account-card { padding: 32px 26px; border-top-right-radius: 80px; }
  .rt-account-card h1 { font-size: 29px; }
  .rt-account-page::before { background-position: 37% center; }
  .rt-account-footer { flex-direction: column; gap: 4px; font-size: 11px; }
  .rt-account-footer nav { gap: 16px; justify-content: center; }
}
@media (forced-colors: active) {
  .rt-account-page::before { display: none; }
  .rt-account-card { border: 1px solid CanvasText; }
}