/* Black and gold login direction. Kept separate so the authenticated workspace keeps its semantic colors. */
.login-screen-gold {
  --login-gold: #d1a85c;
  --login-gold-bright: #f0d493;
  --login-ivory: #f8f1e2;
  --login-muted: #a59b89;
  --login-bg: #090a0b;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 32px;
  color: var(--login-ivory);
  background:
    radial-gradient(circle at 50% 35%, rgba(192, 143, 62, .12), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(194, 144, 65, .08), transparent 26%),
    var(--login-bg);
}
.login-screen-gold::before,
.login-screen-gold::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.login-screen-gold::before {
  inset: 18px;
  border: 1px solid rgba(210, 168, 92, .18);
}
.login-screen-gold::after {
  inset: 28px;
  border: 1px solid rgba(210, 168, 92, .07);
}
.login-gold-orbit {
  position: absolute;
  z-index: 0;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(223, 182, 104, .13);
  border-radius: 50%;
  pointer-events: none;
}
.login-gold-orbit::after {
  position: absolute;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--login-gold-bright);
  box-shadow: 0 0 16px 3px rgba(240, 212, 147, .4);
}
.login-gold-orbit-a { top: -245px; right: 5%; }
.login-gold-orbit-a::after { right: 60px; bottom: 23px; }
.login-gold-orbit-b { bottom: -300px; left: 8%; width: 500px; height: 500px; opacity: .6; }
.login-gold-orbit-b::after { top: 86px; right: 19px; }
.login-gold-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(175px, .72fr) minmax(380px, 1.35fr) minmax(175px, .72fr);
  width: min(1120px, 100%);
  min-height: min(690px, calc(100vh - 64px));
  overflow: hidden;
  border: 1px solid rgba(213, 173, 96, .56);
  background: linear-gradient(115deg, rgba(17, 16, 14, .95), rgba(8, 9, 10, .9) 48%, rgba(19, 17, 13, .95));
  box-shadow: 0 25px 90px rgba(0, 0, 0, .5), inset 0 0 80px rgba(214, 164, 76, .04);
}
.login-gold-frame::before,
.login-gold-frame::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.login-gold-frame::before {
  inset: 14px;
  border: 1px solid rgba(226, 190, 116, .2);
}
.login-gold-frame::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 168, 92, .2), transparent);
}
.login-screen-gold .login-panel {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(430px, calc(100% - 64px));
  padding: 42px 44px 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-gold-rail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 32px 34px;
  color: rgba(242, 222, 178, .72);
}
.login-gold-rail-left { border-right: 1px solid rgba(211, 170, 96, .22); }
.login-gold-rail-right { border-left: 1px solid rgba(211, 170, 96, .22); }
.login-gold-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--login-gold-bright);
  font: 700 12px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: .18em;
}
.rail-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--login-gold);
  border-radius: 50%;
  color: #18130b;
  background: linear-gradient(145deg, #f1d18d, #a87732);
  font: 700 17px Georgia, "Times New Roman", serif;
}
.login-gold-vertical {
  margin: auto 0;
  color: rgba(211, 170, 96, .62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.login-gold-rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(197, 177, 143, .58);
  font-size: 9px;
  letter-spacing: .12em;
}
.login-gold-rail-right .login-gold-rail-bottom { margin-top: auto; text-align: right; }
.login-gold-seal {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 67px;
  height: 67px;
  border: 1px solid rgba(211, 170, 96, .7);
  border-radius: 50%;
  color: var(--login-gold-bright);
  font: 28px/ .7 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.login-gold-seal span { font: 700 7px/1 Arial, sans-serif; letter-spacing: .2em; }
.login-gold-side-copy { margin-top: auto; margin-bottom: auto; text-align: right; }
.login-gold-side-copy b { display: block; color: var(--login-ivory); font: 400 19px/1.42 Georgia, "Times New Roman", serif; }
.login-gold-side-copy span { display: block; margin-top: 13px; color: rgba(211, 170, 96, .68); font-size: 10px; letter-spacing: .12em; }
.login-gold-lockup { display: flex; align-items: center; gap: 12px; }
.login-screen-gold .login-panel .brand-mark {
  width: 45px;
  height: 45px;
  margin: 0;
  border: 1px solid rgba(244, 211, 139, .7);
  border-radius: 50%;
  color: #1b150b;
  background: linear-gradient(145deg, #f2d18c, #a97832);
  box-shadow: 0 0 0 5px rgba(210, 168, 92, .07);
  font: 700 23px Georgia, "Times New Roman", serif;
}
.login-screen-gold .eyebrow { color: var(--login-gold); font-size: 9px; letter-spacing: 2px; }
.login-gold-caption { display: block; margin-top: 4px; color: rgba(202, 185, 151, .68); font-size: 9px; letter-spacing: .18em; }
.login-gold-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 39px 0 13px;
  color: rgba(211, 170, 96, .75);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}
.login-gold-kicker span { display: inline-block; width: 24px; height: 1px; background: var(--login-gold); }
.login-screen-gold .login-panel h1 {
  margin: 0;
  color: var(--login-ivory);
  font: 400 33px/1.18 Georgia, "Times New Roman", "Microsoft YaHei", serif;
  letter-spacing: .02em;
}
.login-screen-gold .login-copy { margin: 10px 0 27px; color: var(--login-muted); font-size: 12px; }
.login-screen-gold .login-panel label:not(.login-gold-remember) { margin: 17px 0; color: #bfb39d; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.login-screen-gold .login-panel input:not([type="checkbox"]) {
  margin-top: 8px;
  padding: 12px 0;
  border-width: 0 0 1px;
  border-color: #59472b;
  border-radius: 0;
  color: var(--login-ivory);
  background: transparent;
  font-size: 13px;
}
.login-screen-gold .login-panel input:not([type="checkbox"])::placeholder { color: #766c5d; }
.login-screen-gold .login-panel input:not([type="checkbox"]):hover { border-color: #93703a; }
.login-screen-gold .login-panel input:not([type="checkbox"]):focus { border-color: var(--login-gold-bright); box-shadow: 0 1px 0 var(--login-gold-bright); }
.login-gold-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 23px 0 19px; color: #8e826d; font-size: 9px; letter-spacing: .1em; }
.login-gold-remember { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; color: #a99b86 !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.login-gold-remember input { width: 13px; height: 13px; margin: 0; accent-color: var(--login-gold); }
.login-screen-gold .login-panel .primary {
  height: 46px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  color: #1b150b;
  background: linear-gradient(105deg, #a97832, #f0d18d 48%, #ad7c35);
  box-shadow: 0 10px 23px rgba(163, 112, 39, .18);
  font-size: 12px;
  letter-spacing: .12em;
  transition: filter .2s ease, transform .2s ease;
}
.login-screen-gold .login-panel .primary span { margin-left: 8px; font-size: 16px; vertical-align: -1px; }
.login-screen-gold .login-panel .primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.login-screen-gold .login-panel .primary:active { transform: translateY(0); }
.login-screen-gold .login-panel .primary:disabled,
.login-screen-gold .login-panel .primary.is-loading { cursor: wait; filter: saturate(.72); opacity: .78; transform: none; }
.login-gold-divider { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; color: #756951; font-size: 8px; letter-spacing: .2em; }
.login-gold-divider::before, .login-gold-divider::after { height: 1px; flex: 1; content: ""; background: #3f3323; }
.login-screen-gold .login-foot { margin: 16px 0 0; color: #756c5c; font-size: 9px; letter-spacing: .02em; }
.login-screen-gold button:focus-visible,
.login-screen-gold input:focus-visible { outline: 2px solid var(--login-gold-bright); outline-offset: 4px; }

@media (max-width: 820px) {
  .login-screen-gold { padding: 23px; }
  .login-gold-frame { grid-template-columns: 94px minmax(360px, 1fr) 94px; min-height: calc(100vh - 46px); }
  .login-gold-rail { padding: 32px 17px 27px; }
  .login-gold-rail-brand { justify-content: center; }
  .login-gold-rail-brand > span:last-child { display: none; }
  .login-gold-side-copy b { font-size: 15px; }
  .login-gold-side-copy span { font-size: 8px; letter-spacing: .04em; }
  .login-gold-rail-bottom { font-size: 7px; }
  .login-screen-gold .login-panel { width: min(430px, calc(100% - 38px)); padding: 35px 20px; }
}
@media (max-width: 620px) {
  .login-screen-gold { padding: 14px; }
  .login-screen-gold::before { inset: 8px; }
  .login-screen-gold::after { inset: 14px; }
  .login-gold-frame { display: block; min-height: calc(100vh - 28px); }
  .login-gold-rail { display: none; }
  .login-screen-gold .login-panel { width: min(430px, calc(100% - 18px)); min-height: calc(100vh - 28px); margin: 0 auto; padding: 42px 16px 34px; }
  .login-gold-kicker { margin-top: 47px; }
  .login-screen-gold .login-panel h1 { font-size: 30px; }
}
@media (max-width: 360px) {
  .login-screen-gold .login-panel { padding-right: 8px; padding-left: 8px; }
  .login-gold-options { align-items: flex-start; flex-direction: column; }
}