@charset "utf-8";
/* ==========================================================================
   zero-login.css  —  零域 · 全屏动态登录页（深色金龙主题）
   结构由 zero-login.js 生成： #zl-bg / #zl-stage / .zl-pane
   ========================================================================== */

body.zl-auth{
  background:#05060a !important;
  overflow:hidden !important;
  color:#e8ecf6;
}
/* 干掉 hb-skin / flit2 的白色外壳伪元素，否则动态背景被盖住 */
body.zl-auth #root::before,
body.zl-auth #root::after,
body.zl-auth #root > div::before,
body.zl-auth #root > div::after{ display:none !important; content:none !important; }
body.zl-auth{ background:#05060a !important; }

body.zl-auth #root{
  position:relative;
  z-index:3;
  width:100%;
  height:100svh;
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  padding:0 !important;
  background:transparent !important;
}
body.zl-auth #root > div.zl-grid{
  width:100% !important;
  max-width:none !important;
  height:100svh !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,540px) !important;
  grid-template-rows:1fr !important;
  grid-template-areas:none !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  position:relative;
  z-index:3;
}
body.zl-auth #root > div.zl-grid > *:not(.zl-side){ display:none !important; }

body.zl-auth .zl-side{
  grid-column:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 36px !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible !important;
  position:relative;
  z-index:4;
}

/* ---------------- 背景舞台 ---------------- */
#zl-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 8%, #141019 0%, #08090f 46%, #04050a 100%);
}
.zl-aurora{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  will-change:transform;
}
.zl-a1{
  width:52vw; height:52vw; left:-8vw; top:-12vw;
  background:radial-gradient(circle, rgba(198,142,52,.55) 0%, rgba(198,142,52,0) 68%);
  animation:zl-drift-a 18s ease-in-out infinite alternate;
}
.zl-a2{
  width:44vw; height:44vw; left:18vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(178,26,40,.42) 0%, rgba(178,26,40,0) 70%);
  animation:zl-drift-b 22s ease-in-out infinite alternate;
}
.zl-a3{
  width:36vw; height:36vw; right:-6vw; top:6vh;
  background:radial-gradient(circle, rgba(64,96,200,.28) 0%, rgba(64,96,200,0) 70%);
  animation:zl-drift-c 26s ease-in-out infinite alternate;
}
.zl-gridlines{
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(to right, rgba(226,178,92,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,178,92,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 30% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(60% 60% at 30% 45%, #000 0%, transparent 78%);
  animation:zl-grid-move 40s linear infinite;
}
.zl-vignette{
  position:absolute; inset:0;
  background:radial-gradient(75% 65% at 50% 45%, transparent 35%, rgba(0,0,0,.72) 100%);
}
#zl-fx{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------------- 左侧品牌舞台 ---------------- */
#zl-stage{
  position:fixed; left:0; top:0;
  width:calc(100% - 540px); height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:0 32px;
  z-index:1; pointer-events:none;
  transform:translateZ(0);
  animation:zl-stage-in 1s cubic-bezier(.2,.8,.2,1) both;
}
.zl-eyebrow{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:10.5px; letter-spacing:.26em; color:#c9a25c; text-transform:uppercase;
  margin-bottom:26px;
}
.zl-eyebrow::before,.zl-eyebrow::after{
  content:""; width:clamp(18px,3vw,42px); height:1px;
  background:linear-gradient(90deg,transparent,#c9a25c);
}
.zl-eyebrow::after{ background:linear-gradient(270deg,transparent,#c9a25c) }
.zl-eyebrow em{ font-style:normal; color:#7d5a2c; letter-spacing:.12em }
.zl-eyebrow i{ font-style:normal; width:5px; height:5px; border-radius:50%; background:#e8533f; box-shadow:0 0 10px #e8533f; animation:zl-blink 2s ease-in-out infinite; }

.zl-logo-wrap{
  position:relative; width:min(268px,26vh); aspect-ratio:1;
  display:grid; place-items:center; margin-bottom:26px;
  animation:zl-float 7s ease-in-out infinite;
}
.zl-logo-wrap::before{
  content:""; position:absolute; inset:-14%;
  border-radius:34%;
  background:conic-gradient(from 0deg, rgba(232,196,120,0) 0deg, rgba(232,196,120,.85) 70deg, rgba(232,83,63,.65) 150deg, rgba(232,196,120,0) 250deg, rgba(232,83,63,0) 360deg);
  filter:blur(14px); opacity:.55;
  animation:zl-spin 9s linear infinite;
}
.zl-logo-wrap::after{
  content:""; position:absolute; inset:-6%;
  border-radius:30%;
  border:1px solid rgba(226,178,92,.22);
  box-shadow:0 0 60px -14px rgba(226,178,92,.55), inset 0 0 40px -22px rgba(232,83,63,.8);
}
.zl-logo-wrap img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:cover;
  border-radius:26%;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(232,196,120,.28);
}
.zl-scan{
  position:absolute; left:6%; right:6%; height:16%; z-index:3;
  border-radius:40%;
  background:linear-gradient(180deg, rgba(255,225,160,0), rgba(255,225,160,.16) 45%, rgba(255,225,160,0));
  animation:zl-scan 4.6s ease-in-out infinite;
  pointer-events:none;
}
.zl-title{
  margin:0;
  font-size:clamp(44px,5.4vw,76px);
  line-height:1; font-weight:800; letter-spacing:.16em;
  background:linear-gradient(100deg,#f7e3ad 0%,#e8c478 26%,#b5843a 50%,#f3dcae 74%,#d2a659 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 10px 30px rgba(198,142,52,.28));
  animation:zl-gold 7s ease-in-out infinite;
}
.zl-en{
  margin-top:10px; display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:clamp(9.5px,1vw,11.5px);
  letter-spacing:.3em; color:#8d7346; text-transform:uppercase;
}
.zl-en em{ font-style:normal; color:#b8452f; letter-spacing:.12em }
.zl-type{
  margin:20px 0 0; min-height:26px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; color:#c9d1e0; letter-spacing:.04em;
}
.zl-prompt{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px; font-weight:600; color:#e8c478; opacity:.85; letter-spacing:0;
}
.zl-caret{
  display:inline-block; width:1px; height:15px; margin-left:3px;
  background:#e8c478; vertical-align:-2px;
  animation:zl-caret 1s steps(1) infinite;
}
.zl-feats{
  display:flex; justify-content:center; gap:10px; margin:32px 0 0; padding:0; list-style:none;
}
.zl-feats li{
  min-width:146px;
  padding:12px 14px 11px; border-radius:12px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(226,178,92,.14);
  backdrop-filter:blur(6px);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation:zl-rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.zl-feats li:hover{
  transform:translateY(-2px);
  border-color:rgba(226,178,92,.38);
  box-shadow:0 16px 34px -24px rgba(226,178,92,.85);
}
.zl-feats li:nth-child(1){ animation-delay:.35s }
.zl-feats li:nth-child(2){ animation-delay:.45s }
.zl-feats li:nth-child(3){ animation-delay:.55s }
.zl-f-code{
  display:block; margin-bottom:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:8.5px; letter-spacing:.08em; color:#a98550; opacity:.9; white-space:nowrap;
}
.zl-feats b{ display:block; font-size:13px; color:#f0e2c4; font-weight:600; letter-spacing:.05em }
.zl-f-num{
  font-style:normal; font-weight:700; font-size:15px; color:#f6d79b; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(240,205,138,.38);
}
.zl-f-desc{ display:block; margin-top:4px; font-size:10.5px; color:#7d8798; letter-spacing:.02em }

/* ---------------- 右侧登录卡 ---------------- */
body.zl-auth .zl-pane{
  width:100% !important;
  max-width:376px !important;
  padding:30px 30px 22px !important;
  border-radius:20px !important;
  background:
    linear-gradient(168deg, rgba(24,26,38,.92) 0%, rgba(12,13,20,.94) 55%, rgba(9,10,16,.96) 100%) !important;
  border:1px solid rgba(226,178,92,.20) !important;
  box-shadow:
    0 50px 110px -50px #000,
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 90px -46px rgba(226,178,92,.75) !important;
  backdrop-filter:blur(20px) saturate(120%);
  position:relative;
  animation:zl-card-in .9s cubic-bezier(.2,.8,.2,1) both;
  overflow:hidden;
}
body.zl-auth .zl-pane::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(247,227,173,.65), transparent);
  opacity:.85;
}

/* 卡头 */
.zl-head{ margin-bottom:20px; }
.zl-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.zl-brand img{
  width:36px; height:36px; border-radius:10px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(226,178,92,.32), 0 10px 24px -12px rgba(226,178,92,.9);
}
.zl-brand b{ font-size:15.5px; font-weight:700; color:#f4f7ff; letter-spacing:.08em; }
.zl-brand .zl-ultra{
  font-size:8px; font-weight:700; letter-spacing:.16em;
  color:#f0d08a; border:1px solid rgba(240,208,138,.4);
  border-radius:4px; padding:2px 5px; margin-left:2px;
  background:rgba(240,208,138,.07);
}
.zl-kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:8.5px; letter-spacing:.22em; color:#b98f4e;
  margin-bottom:9px;
}
.zl-kicker::before{ content:""; width:14px; height:1px; background:#b98f4e; opacity:.7 }
.zl-head h1{
  margin:0; font-size:26px; line-height:1.2; font-weight:700;
  color:#f6f8ff; letter-spacing:.01em;
}
.zl-head p{
  margin:8px 0 0; font-size:12.5px; line-height:1.6; color:#8b95a9;
}

/* 表单 */
body.zl-auth .zl-pane form{ display:flex !important; flex-direction:column; gap:15px; }
body.zl-auth .zl-pane label{
  display:block !important; margin:0 0 7px !important;
  font-size:11.5px !important; font-weight:500 !important;
  color:#8b95a9 !important; letter-spacing:.06em;
}
body.zl-auth .zl-pane input[type="text"],
body.zl-auth .zl-pane input[type="password"],
body.zl-auth .zl-pane input:not([type]){
  width:100% !important; height:45px !important;
  padding:0 44px 0 14px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#eef2fb !important;
  font-size:13.5px !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  box-shadow:none !important;
  outline:none !important;
}
body.zl-auth .zl-pane input::placeholder{ color:#596274 !important }
body.zl-auth .zl-pane input:focus{
  border-color:rgba(232,196,120,.72) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3px rgba(226,178,92,.13), 0 0 26px -10px rgba(226,178,92,.85) !important;
}
body.zl-auth .zl-pane input:-webkit-autofill,
body.zl-auth .zl-pane input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eef2fb !important;
  -webkit-box-shadow:0 0 0 1000px #14161f inset !important;
  caret-color:#eef2fb;
}
body.zl-auth .zl-pane button[type="button"]{ color:#7d8798 !important }
body.zl-auth .zl-pane button[type="button"]:hover{ color:#e8c478 !important }

/* 记住账号 */
body.zl-auth .zl-pane input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:15px !important; height:15px !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:4px !important;
  background:rgba(255,255,255,.05) !important;
  position:relative; cursor:pointer; flex:none;
  transition:background .16s ease, border-color .16s ease;
}
body.zl-auth .zl-pane input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#f0d08a,#c4913e) !important;
  border-color:#e8c478 !important;
}
body.zl-auth .zl-pane input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:4.5px; top:1.5px;
  width:4px; height:8px;
  border:solid #1b1305; border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg);
}
body.zl-auth .zl-pane label:has(input[type="checkbox"]),
body.zl-auth .zl-pane [class*="items-center"]:has(> input[type="checkbox"]){
  color:#8b95a9 !important; font-size:11.5px !important;
}

/* 提交按钮 */
body.zl-auth .zl-pane button[type="submit"]{
  position:relative; overflow:hidden;
  width:100% !important; height:46px !important;
  margin-top:4px;
  border:0 !important; border-radius:10px !important;
  background:linear-gradient(135deg,#f4dcab 0%,#e0b667 38%,#c4913e 72%,#a9762b 100%) !important;
  color:#1b1305 !important;
  font-size:13.5px !important; font-weight:700 !important; letter-spacing:.08em !important;
  box-shadow:0 14px 32px -14px rgba(217,169,79,.95), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  cursor:pointer;
}
body.zl-auth .zl-pane button[type="submit"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 20px 40px -16px rgba(217,169,79,1), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body.zl-auth .zl-pane button[type="submit"]:active{ transform:translateY(0) scale(.995) }
body.zl-auth .zl-pane button[type="submit"]::after{
  content:""; position:absolute; top:-20%; left:-140%; width:55%; height:140%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transform:skewX(-18deg);
  animation:zl-sheen 3.6s ease-in-out infinite;
  pointer-events:none;
}
body.zl-auth .zl-pane button[type="submit"]:disabled{ filter:grayscale(.35) brightness(.9); cursor:default }

/* 错误 / 提示 */
body.zl-auth .zl-pane [class*="text-red"],
body.zl-auth .zl-pane .text-destructive{ color:#ff8b9c !important }
body.zl-auth .zl-pane [class*="bg-red"]{ background:rgba(255,90,110,.1) !important; border-color:rgba(255,90,110,.3) !important }
body.zl-auth .zl-pane [class*="text-emerald"],
body.zl-auth .zl-pane [class*="text-green"]{ color:#6ee7b7 !important }

/* 卡脚 */
.zl-foot{
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:9px; color:#5b6478; letter-spacing:.14em;
}
.zl-foot .zl-dot{
  display:inline-flex; align-items:center; gap:6px;
}
.zl-foot .zl-dot i{
  width:5px; height:5px; border-radius:50%; background:#3fd18b;
  box-shadow:0 0 8px #3fd18b; animation:zl-blink 2.4s ease-in-out infinite;
}

/* ---------------- keyframes ---------------- */
@keyframes zl-drift-a{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(6vw,4vh,0) scale(1.12)} }
@keyframes zl-drift-b{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-5vw,-5vh,0) scale(1.15)} }
@keyframes zl-drift-c{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-4vw,6vh,0) scale(1.1)} }
@keyframes zl-grid-move{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-64px,-64px,0)} }
@keyframes zl-spin{ to{ transform:rotate(360deg) } }
@keyframes zl-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes zl-scan{ 0%,100%{ opacity:0; transform:translateY(-40%) } 45%{ opacity:1 } 60%{ opacity:.9; transform:translateY(120%) } }
@keyframes zl-gold{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
@keyframes zl-caret{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes zl-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@keyframes zl-rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
@keyframes zl-stage-in{ from{ opacity:0; transform:translateX(-26px) } to{ opacity:1; transform:translateX(0) } }
@keyframes zl-card-in{ from{ opacity:0; transform:translateY(22px) scale(.985) } to{ opacity:1; transform:translateY(0) scale(1) } }
@keyframes zl-sheen{ 0%{ left:-140% } 55%,100%{ left:150% } }

/* ---------------- 自适应 ---------------- */
@media (max-width:1120px){
  #zl-stage{ width:calc(100% - 470px); padding:0 20px }
  body.zl-auth #root > div.zl-grid{ grid-template-columns:minmax(0,1fr) minmax(0,470px) !important }
  .zl-feats li:nth-child(3){ display:none }
}
@media (max-width:860px){
  #zl-stage{ display:none !important }
  body.zl-auth #root > div.zl-grid{ grid-template-columns:1fr !important }
  body.zl-auth .zl-side{ grid-column:1 !important; padding:0 20px !important }
  body.zl-auth .zl-pane{ max-width:400px !important; padding:26px 22px 18px !important }
}
@media (max-height:720px){
  .zl-logo-wrap{ width:min(190px,20vh); margin-bottom:16px }
  .zl-feats{ margin-top:22px }
}

@media (prefers-reduced-motion: reduce){
  .zl-aurora,.zl-gridlines,.zl-logo-wrap,.zl-logo-wrap::before,.zl-scan,.zl-title,
  body.zl-auth .zl-pane,body.zl-auth .zl-pane button[type="submit"]::after,
  #zl-stage,.zl-feats li,.zl-eyebrow i,.zl-caret,.zl-foot .zl-dot i{ animation:none !important }
}


/* 登录页隐藏侧栏宽度开关等应用内浮件 */
body.zl-auth .flit2-rail-toggle,
body.zl-auth .flit2-meta{ display:none !important; }