/*
 * M10-R13 · 邀请门页三主题轻量皮肤
 * 仅在 gate-r10.js 确认后挂上的 html.yz-gate 内生效；不接管鉴权或表单逻辑。
 */
html.yz-gate {
  --gate-page: #dbe7f4;
  --gate-sky: #eef6ff;
  --gate-orb-a: rgba(101,158,218,.34);
  --gate-orb-b: rgba(133,111,204,.24);
  --gate-ink: #2e4159;
  --gate-sub: #526b86;
  --gate-accent: #7668c7;
  --gate-accent-2: #5f9ed4;
  --gate-glass: rgba(250,253,255,.46);
  --gate-glass-2: rgba(241,248,255,.28);
  --gate-line: rgba(255,255,255,.62);
  --gate-line-soft: rgba(78,105,136,.16);
  --gate-field: rgba(255,255,255,.48);
  --gate-shadow: rgba(72,96,128,.24);
  color-scheme: light;
}

html.yz-gate[data-theme="peach"] {
  --gate-page: #f2dfca;
  --gate-sky: #fff2e5;
  --gate-orb-a: rgba(227,160,82,.38);
  --gate-orb-b: rgba(199,107,67,.25);
  --gate-ink: #493528;
  --gate-sub: #725845;
  --gate-accent: #c76b43;
  --gate-accent-2: #e3a052;
  --gate-glass: rgba(255,250,242,.50);
  --gate-glass-2: rgba(255,244,231,.30);
  --gate-line: rgba(255,251,244,.70);
  --gate-line-soft: rgba(112,75,47,.16);
  --gate-field: rgba(255,251,245,.54);
  --gate-shadow: rgba(115,78,49,.24);
}

html.yz-gate[data-theme="night"] {
  --gate-page: #071426;
  --gate-sky: #102746;
  --gate-orb-a: rgba(85,201,232,.22);
  --gate-orb-b: rgba(157,139,255,.20);
  --gate-ink: #eaf4ff;
  --gate-sub: #aec7df;
  --gate-accent: #55c9e8;
  --gate-accent-2: #9d8bff;
  --gate-glass: rgba(13,29,54,.58);
  --gate-glass-2: rgba(9,22,43,.42);
  --gate-line: rgba(126,176,238,.25);
  --gate-line-soft: rgba(126,176,238,.18);
  --gate-field: rgba(7,19,38,.56);
  --gate-shadow: rgba(0,5,18,.62);
  color-scheme: dark;
}

html.yz-gate,
html.yz-gate body {
  min-height: 100%;
  background: var(--gate-page);
}

html.yz-gate body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--gate-ink);
  font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",
               -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html.yz-gate body::before {
  content: "";
  position: fixed;
  z-index: -3;
  inset: -3.5%;
  background:
    radial-gradient(46% 54% at 16% 18%,var(--gate-orb-a),transparent 72%),
    radial-gradient(52% 58% at 84% 82%,var(--gate-orb-b),transparent 74%),
    linear-gradient(145deg,var(--gate-sky),var(--gate-page));
  transform: scale(1.025);
  animation: yzGateDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}

html.yz-gate body::after {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 58% at 50% 42%, transparent 28%, rgba(8,18,34,.10) 100%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 34% 68%, rgba(73,94,130,.10));
}

html.yz-gate[data-theme="night"] body::after {
  background:
    radial-gradient(70% 58% at 50% 42%, transparent 24%, rgba(2,8,22,.50) 100%),
    linear-gradient(135deg, rgba(104,208,235,.08), transparent 36% 66%, rgba(157,139,255,.09));
}

html.yz-gate body > .card {
  position: relative;
  z-index: 2;
  width: min(468px,calc(100vw - 36px));
  padding: 44px 40px 36px;
  overflow: hidden;
  color: var(--gate-ink);
  background:
    linear-gradient(155deg,var(--gate-glass),var(--gate-glass-2));
  border: 1px solid var(--gate-line);
  border-radius: 28px;
  box-shadow:
    0 36px 90px -42px var(--gate-shadow),
    0 12px 32px -24px var(--gate-shadow),
    inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter: blur(20px) saturate(1.38);
  -webkit-backdrop-filter: blur(20px) saturate(1.38);
  animation: yzGateCardIn .75s cubic-bezier(.22,1,.36,1) both;
}

html.yz-gate[data-theme="night"] body > .card {
  box-shadow:
    0 42px 100px -44px rgba(0,0,0,.82),
    0 0 70px -42px rgba(85,201,232,.48),
    inset 0 1px 0 rgba(160,212,255,.12);
}

html.yz-gate body > .card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(330px 150px at 50% -25px,
      color-mix(in srgb,var(--gate-accent) 20%,transparent),transparent 72%);
}

html.yz-gate body > .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 112px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,var(--gate-accent),transparent);
  box-shadow: 0 0 18px color-mix(in srgb,var(--gate-accent) 45%,transparent);
}

html.yz-gate .gate-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb,var(--gate-accent) 34%,transparent);
  border-radius: 999px;
  color: var(--gate-sub);
  background: color-mix(in srgb,var(--gate-field) 76%,transparent);
  font: 700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .13em;
}

html.yz-gate .gate-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gate-accent);
  box-shadow: 0 0 12px var(--gate-accent);
  animation: yzGatePulse 2.6s ease-in-out infinite;
}

html.yz-gate h1 {
  position: relative;
  margin: 0;
  color: transparent;
  background: linear-gradient(115deg,var(--gate-ink) 8%,var(--gate-accent) 54%,var(--gate-accent-2) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Noto Serif SC","Songti SC","STSong",serif;
  font-size: clamp(30px,4.2vw,38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .035em;
  filter: drop-shadow(0 5px 16px color-mix(in srgb,var(--gate-shadow) 26%,transparent));
}

html.yz-gate .sub {
  margin: 10px 0 28px;
  color: var(--gate-sub);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
}

html.yz-gate #lead {
  margin: 0 0 14px;
  color: var(--gate-ink);
  font-family: "Noto Serif SC","Songti SC",serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
}

html.yz-gate input {
  height: 48px;
  margin-bottom: 12px;
  padding: 0 16px;
  color: var(--gate-ink);
  background: var(--gate-field);
  border: 1px solid var(--gate-line-soft);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
  font-size: 13px;
  transition: border-color .22s,box-shadow .22s,background .22s;
}

html.yz-gate input::placeholder {
  color: var(--gate-sub);
  opacity: .76;
}

html.yz-gate input:focus {
  border-color: color-mix(in srgb,var(--gate-accent) 58%,transparent);
  background: color-mix(in srgb,var(--gate-field) 90%,white 10%);
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--gate-accent) 13%,transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}

html.yz-gate button#go {
  position: relative;
  height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--gate-accent) 58%,white 16%);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(112deg,var(--gate-accent),var(--gate-accent-2));
  box-shadow:
    0 14px 30px -18px color-mix(in srgb,var(--gate-accent) 78%,transparent),
    inset 0 1px 0 rgba(255,255,255,.30);
  font-size: 14px;
  letter-spacing: .12em;
  transition: transform .22s,box-shadow .22s,filter .22s;
}

html.yz-gate button#go::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,transparent 28%,rgba(255,255,255,.28) 48%,transparent 68%);
  transform: translateX(-120%);
  animation: yzGateSheen 6.5s ease-in-out 1.2s infinite;
}

html.yz-gate button#go:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 18px 34px -18px color-mix(in srgb,var(--gate-accent) 90%,transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}

html.yz-gate button#go:active:not(:disabled) { transform: translateY(0); }

html.yz-gate #err {
  margin-top: 13px;
  padding: 9px 11px;
  color: color-mix(in srgb,#b33b4d 82%,var(--gate-ink));
  background: color-mix(in srgb,#f6465d 10%,transparent);
  border: 1px solid color-mix(in srgb,#f6465d 22%,transparent);
  border-radius: 10px;
  font-size: 11px;
}

html.yz-gate[data-theme="night"] #err { color: #ffb1bf; }

html.yz-gate .foot {
  color: var(--gate-sub);
  opacity: .78;
}

/*
 * ?code= 的旧门页会在外部样式之后追加 html.lite 白底规则。
 * 用更高但仍局限于门页的选择器收回三主题令牌，避免夜航输入框失焦后白底浅字。
 */
html.yz-gate.lite body {
  background: var(--gate-page);
  color: var(--gate-ink);
}
html.yz-gate.lite body > .card {
  background: linear-gradient(155deg,var(--gate-glass),var(--gate-glass-2));
  border-color: var(--gate-line);
}
html.yz-gate.lite .sub,
html.yz-gate.lite .foot,
html.yz-gate.lite #boot {
  color: var(--gate-sub);
}
html.yz-gate.lite input {
  color: var(--gate-ink);
  background: var(--gate-field);
  border-color: var(--gate-line-soft);
}
html.yz-gate.lite #err {
  color: color-mix(in srgb,#b33b4d 82%,var(--gate-ink));
}
html.yz-gate.lite[data-theme="night"] #err { color: #ffb1bf; }

html.yz-gate #boot {
  position: relative;
  min-height: 70px;
  padding-top: 48px;
  color: var(--gate-sub);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .10em;
}

html.yz-gate #boot::before,
html.yz-gate #boot::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
}

html.yz-gate #boot::before {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb,var(--gate-accent) 20%,transparent);
  border-top-color: var(--gate-accent);
  border-right-color: var(--gate-accent-2);
  animation: yzGateSpin 1.1s linear infinite;
}

html.yz-gate #boot::after {
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--gate-accent);
  box-shadow: 0 0 18px var(--gate-accent);
  animation: yzGateCorePulse 1.8s ease-in-out infinite;
}

html.yz-gate body.is-entering > .card {
  box-shadow:
    0 36px 90px -40px var(--gate-shadow),
    0 0 54px -30px color-mix(in srgb,var(--gate-accent) 62%,transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}

html.yz-gate .gate-theme-switch {
  position: fixed;
  z-index: 4;
  top: max(18px,env(safe-area-inset-top));
  right: max(18px,env(safe-area-inset-right));
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--gate-line);
  border-radius: 999px;
  background: var(--gate-glass);
  box-shadow: 0 12px 30px -22px var(--gate-shadow);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
}

html.yz-gate .gate-theme-switch button {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--gate-sub);
  background: transparent;
  box-shadow: none;
  font: 700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  transition: color .2s,background .2s,transform .2s;
}

html.yz-gate .gate-theme-switch button:hover { transform: translateY(-1px); }
html.yz-gate .gate-theme-switch button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(112deg,var(--gate-accent),var(--gate-accent-2));
}

@keyframes yzGateCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes yzGateDrift {
  from { transform: scale(1.025) translate3d(-.35%,0,0); }
  to { transform: scale(1.045) translate3d(.35%,-.25%,0); }
}
@keyframes yzGateSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes yzGatePulse {
  0%,100% { opacity: .58; transform: scale(.84); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes yzGateCorePulse {
  0%,100% { opacity: .58; transform: translateX(-50%) scale(.84); }
  50% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes yzGateSheen {
  0%,62% { transform: translateX(-120%); }
  78%,100% { transform: translateX(120%); }
}

@media (max-width: 560px) {
  html.yz-gate body { align-items: center; }
  html.yz-gate body > .card {
    padding: 38px 24px 30px;
    border-radius: 24px;
  }
  html.yz-gate h1 { font-size: 30px; }
  html.yz-gate .sub { font-size: 12px; }
  html.yz-gate .gate-theme-switch {
    top: max(12px,env(safe-area-inset-top));
    right: max(12px,env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.yz-gate body::before,
  html.yz-gate body > .card,
  html.yz-gate .gate-kicker::before,
  html.yz-gate button#go::after,
  html.yz-gate #boot::before,
  html.yz-gate #boot::after {
    animation: none !important;
  }
}