/* 2026-10-18 — presentation polish layered over the existing auth and opening surfaces.
   Keeps the original brand animation, auth bridge and state transitions intact. */
:root {
  --auth-gold: #e8c97a;
  --auth-gold-hi: #fff1c4;
  --auth-ink: #08080a;
  --auth-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Shared ambient status: enough detail to make the empty frame feel intentional. */
.auth-runtime {
  position: fixed;
  top: 24px;
  right: 30px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(232, 201, 122, .16);
  border-radius: 999px;
  background: rgba(10, 10, 11, .62);
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, .04), 0 12px 32px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #8f846d;
  font-size: 10.5px;
  letter-spacing: .16em;
  white-space: nowrap;
  pointer-events: none;
  animation: auth-status-in .8s var(--auth-ease) .2s both;
}

.auth-runtime i {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9ba70;
  box-shadow: 0 0 0 4px rgba(217, 186, 112, .08), 0 0 12px rgba(232, 201, 122, .38);
}

.auth-runtime i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(232, 201, 122, .25);
  border-radius: inherit;
  animation: auth-status-pulse 2.6s ease-out infinite;
}

@keyframes auth-status-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-status-pulse {
  0%, 55% { opacity: .6; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- edition chooser ---------- */
.mode-select {
  background:
    radial-gradient(1.2px 1.2px at 18% 26%, rgba(232, 201, 122, .48), transparent),
    radial-gradient(1px 1px at 72% 16%, rgba(232, 201, 122, .34), transparent),
    radial-gradient(1px 1px at 38% 78%, rgba(232, 201, 122, .38), transparent),
    radial-gradient(1.4px 1.4px at 86% 62%, rgba(232, 201, 122, .28), transparent),
    radial-gradient(1px 1px at 10% 86%, rgba(232, 201, 122, .32), transparent),
    radial-gradient(1px 1px at 58% 46%, rgba(232, 201, 122, .24), transparent),
    linear-gradient(115deg, rgba(232, 201, 122, .024), transparent 24%, transparent 76%, rgba(232, 201, 122, .018)),
    radial-gradient(ellipse at 28% 18%, #211d1344, transparent 55%),
    radial-gradient(ellipse at 82% 92%, #1a160f66, transparent 52%),
    transparent !important;
}

.mode-card {
  isolation: isolate;
}

.mode-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  z-index: -1;
  width: 28%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 239, 188, .035), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: auth-card-sheen 10s ease-in-out 2.2s infinite;
}

@keyframes auth-card-sheen {
  0%, 68% { left: -45%; opacity: 0; }
  72% { opacity: 1; }
  100% { left: 128%; opacity: 0; }
}

.mode-card h1 {
  text-shadow: 0 12px 38px rgba(0, 0, 0, .38);
}

.mode-card > p {
  color: #9f9784;
}

.mode-grid {
  position: relative;
}

.mode-grid::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: calc(50% - .5px);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 201, 122, .22), transparent);
  pointer-events: none;
}

.mode-option {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 241, 196, .035), 0 22px 60px -34px rgba(0, 0, 0, .9);
}

.mode-option::before {
  top: 18px;
  bottom: 18px;
  box-shadow: 0 0 16px rgba(232, 201, 122, .2);
}

.mode-option:hover {
  transform: translateY(-6px);
}

.mode-option:focus-visible {
  outline: 2px solid rgba(232, 201, 122, .78);
  outline-offset: 4px;
  border-color: rgba(232, 201, 122, .62);
}

.mode-option:active {
  transform: translateY(-2px) scale(.994);
}

.mode-highlights {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.mode-highlights > span {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(232, 201, 122, .12);
  border-radius: 999px;
  background: rgba(232, 201, 122, .025);
  color: #a99b7d !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: .12em;
  white-space: nowrap;
}

.mode-highlights > span::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b89a59;
  box-shadow: 0 0 6px rgba(232, 201, 122, .35);
}

.mode-option em {
  margin-top: auto !important;
  padding-top: 18px;
}

/* ---------- formal login ----------
   The standalone auth document also uses `.panel` for the login card. Keep every
   auth rule scoped to that document so it cannot clip application pages. */
body[data-release] .shell {
  padding-bottom: 18px;
}

body[data-release] .panel {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(232, 201, 122, .18);
  background:
    linear-gradient(155deg, rgba(35, 34, 36, .82), rgba(13, 13, 15, .9)),
    radial-gradient(420px 220px at 100% 0, rgba(232, 201, 122, .07), transparent 64%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 196, .075),
    inset 0 0 0 1px rgba(255, 255, 255, .01),
    0 46px 100px -34px rgba(0, 0, 0, .88),
    0 0 80px -35px rgba(232, 201, 122, .28) !important;
}

body[data-release] .panel::before {
  background: linear-gradient(90deg, transparent, rgba(255, 232, 171, .78), transparent) !important;
  box-shadow: 0 0 18px rgba(232, 201, 122, .16);
}

body[data-release] .panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -150px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 201, 122, .085), transparent 68%);
  pointer-events: none;
}

body[data-release] .panel > * {
  position: relative;
  z-index: 1;
}

body[data-release] #authShell:not(.hidden) .panel {
  animation: auth-panel-enter .82s var(--auth-ease) .08s both !important;
}

@keyframes auth-panel-enter {
  from {
    opacity: 0;
    transform: translate3d(22px, 24px, 0) scale(.986);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

body[data-release] .panel-header::before {
  content: '02  /  SECURE SIGN-IN';
  display: block;
  margin-bottom: 11px;
  color: #9e8550;
  font: 500 9.5px/1.2 "Segoe UI", sans-serif;
  letter-spacing: .24em;
}

body[data-release] .panel-header h1 {
  letter-spacing: 3px !important;
  text-shadow: 0 10px 32px rgba(0, 0, 0, .42);
}

body[data-release] .tab {
  position: relative;
}

body[data-release] .field input {
  height: 47px !important;
  background: linear-gradient(180deg, rgba(7, 7, 8, .82), rgba(9, 9, 10, .64)) !important;
  transition: border-color .22s, box-shadow .3s, background .22s, transform .22s var(--auth-ease) !important;
}

body[data-release] .field input:hover {
  background: rgba(8, 8, 9, .88) !important;
}

body[data-release] .field input:focus {
  transform: translateY(-1px);
}

body[data-release] .field:focus-within label {
  text-shadow: 0 0 16px rgba(232, 201, 122, .2);
}

body[data-release] #rememberLogin {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 17px;
  width: 17px !important;
  height: 17px !important;
  border: 1px solid rgba(232, 201, 122, .28);
  border-radius: 5px;
  background: rgba(5, 5, 6, .58);
  transition: background .2s, border-color .2s, box-shadow .2s;
}

body[data-release] #rememberLogin:checked {
  border-color: rgba(232, 201, 122, .72);
  background: linear-gradient(145deg, #f0ddb0, #cda34f);
  box-shadow: 0 0 0 3px rgba(232, 201, 122, .055), 0 0 14px rgba(232, 201, 122, .18);
}

body[data-release] #rememberLogin:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #251b09;
  border-bottom: 2px solid #251b09;
  transform: rotate(42deg);
}

body[data-release] #rememberLogin:focus-visible {
  outline: 2px solid rgba(232, 201, 122, .76);
  outline-offset: 3px;
}

body[data-release] .msg {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

body[data-release] .msg:not(:empty)::before {
  content: '·';
  flex: 0 0 auto;
  color: #c9ad70;
  font-size: 16px;
  line-height: 1;
}

body[data-release] .msg.err::before {
  content: '!';
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid rgba(240, 161, 150, .52);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

body[data-release] .msg.ok::before {
  content: '✓';
  color: #e8c97a;
  font-size: 12px;
  font-weight: 700;
}

body[data-release] #submit.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 22px;
}

body[data-release] #submit.btn::before {
  content: '→';
  position: absolute;
  right: 18px;
  color: rgba(35, 25, 8, .6);
  font: 500 17px/1 "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: transform .28s var(--auth-ease), opacity .2s;
}

body[data-release] #submit.btn:hover::before {
  transform: translateX(4px);
}

body[data-release] #submit.btn[aria-busy="true"]::before {
  opacity: 0;
}

body[data-release] .auth-assurance {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 15px;
  color: #787061;
  font-size: 10px;
  letter-spacing: .08em;
  white-space: nowrap;
}

body[data-release] .auth-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-release] .auth-assurance span + span::before {
  content: '';
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: rgba(232, 201, 122, .28);
}

body[data-release] .auth-assurance span::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9b814b;
}

body[data-release] .help summary {
  letter-spacing: .04em;
}

body[data-release] .device {
  padding-bottom: 1px;
}

/* ---------- opening animation ---------- */
#splash.lx-opening .lx-op-brand::before {
  content: '';
  position: absolute;
  top: -56px;
  left: 50%;
  width: min(620px, 70vw);
  height: 210px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 201, 122, .095), transparent 68%);
  filter: blur(3px);
  pointer-events: none;
}

#splash.lx-opening .lx-op-brand > * {
  position: relative;
}

/* The original gradient is clipped by the animated character spans. Apply it per glyph. */
#splash.lx-opening .lx-op-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, .72vw, 12px);
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #e2c27e;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  font-weight: 500;
  letter-spacing: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .34)) drop-shadow(0 0 30px rgba(232, 201, 122, .1));
}

#splash.lx-opening .lx-op-name > span {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #fff9e8 0%, #f2dea9 44%, #d0ac64 72%, #aa8140 100%);
  background-size: 100% 210%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lx-glyph-sheen 7.5s ease-in-out 1.7s infinite;
}

@keyframes lx-glyph-sheen {
  0%, 65%, 100% { background-position: 50% 100%; }
  78% { background-position: 50% 0%; }
}

#splash.lx-opening .lx-op-line {
  width: min(250px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 179, .92) 48%, rgba(232, 201, 122, .5) 52%, transparent) !important;
  box-shadow: 0 0 14px rgba(232, 201, 122, .16);
}

#splash.lx-opening .lx-op-tag {
  color: #b8aa8a;
  letter-spacing: .3em;
  padding-left: .3em;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}

/* A restarted panel transition must never make already-rendered tools disappear.
   Keep the movement and blur, but leave opacity fully visible throughout. */
@keyframes lx-home-stable-in {
  from { opacity: 1; transform: translate3d(0, 7px, 0) scale(.996); filter: blur(.6px); }
  to { opacity: 1; transform: none; filter: none; }
}

body:not([data-release]) #panel-home.active > .home-view,
body:not([data-release]) #panel-home.active > .home-view > *,
body:not([data-release]) #panel-home.active :is(.hv-cats, .directory-tools-grid) > * {
  animation: lx-home-stable-in .28s var(--auth-ease) both !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#splash.lx-opening .lx-op-ui::before {
  content: 'PREPARING YOUR CREATIVE SPACE';
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  color: rgba(174, 158, 124, .56);
  font: 500 8.5px/1.2 "Segoe UI", sans-serif;
  letter-spacing: .26em;
  white-space: nowrap;
  animation: lx-progress-copy 1s ease .45s both;
}

#splash.lx-opening .lx-op-ui::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 61px;
  width: 148px;
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(232, 201, 122, .1), #e8c97a 82%, #fff2c4);
  box-shadow: 0 0 12px rgba(232, 201, 122, .32);
  animation: lx-progress-line 2.85s cubic-bezier(.24, .72, .2, 1) .35s both;
}

@keyframes lx-progress-copy {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes lx-progress-line {
  0% { transform: translateX(-50%) scaleX(0); opacity: 0; }
  12% { opacity: 1; }
  78% { transform: translateX(-50%) scaleX(1); opacity: .85; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}

#splash.lx-opening .lx-op-skip {
  animation: lx-controls-in .55s var(--auth-ease) .28s both;
}

#splash.lx-opening .lx-op-foot {
  animation: lx-controls-in .6s var(--auth-ease) .48s both;
}

@keyframes lx-controls-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.lx .topbar .brand .logo.lx-logo-landed {
  animation: lx-logo-landing .62s cubic-bezier(.16, .82, .24, 1) both;
}

@keyframes lx-logo-landing {
  0% { transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(232, 201, 122, .72)); }
  42% { transform: scale(.96); filter: drop-shadow(0 0 8px rgba(232, 201, 122, .34)); }
  100% { transform: none; filter: none; }
}

@media (max-width: 900px) {
  .auth-runtime {
    top: 16px;
    right: 18px;
    min-height: 28px;
    padding: 0 10px;
    font-size: 9.5px;
  }

  .mode-grid::before {
    display: none;
  }

  .mode-option {
    min-height: 0;
  }

  .mode-highlights {
    margin-top: 14px;
  }

  .mode-option em {
    margin-top: 18px !important;
  }

  .panel-header::before {
    margin-bottom: 8px;
  }

  .auth-assurance {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 5px;
  }

  #splash.lx-opening .lx-op-ui::before {
    bottom: 58px;
    font-size: 8px;
    letter-spacing: .2em;
  }

  #splash.lx-opening .lx-op-ui::after {
    bottom: 47px;
    width: 120px;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .mode-card h1 {
    margin-top: 12px;
  }

  .mode-card > p {
    margin-bottom: 24px;
  }

  .mode-option {
    min-height: 218px;
    padding-top: 23px;
    padding-bottom: 21px;
  }

  .mode-highlights {
    margin-top: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-runtime,
  .auth-runtime i::after,
  .mode-card::after,
  #splash.lx-opening .lx-op-name > span,
  #splash.lx-opening .lx-op-ui::before,
  #splash.lx-opening .lx-op-ui::after,
  #splash.lx-opening .lx-op-skip,
  #splash.lx-opening .lx-op-foot {
    animation: none !important;
  }

  #authShell:not(.hidden) .panel {
    animation: none !important;
  }
}