/* ============================================================
   LF 控制台 · 登录页视觉 v5（2026-11-01）
   —— 由 ly-login.css(v3) 之上覆盖，只改外观，不动 DOM / 不动 JS / 不动接口
   要点：
     1. 背景换成「双龙水墨」原图（login-bg-lingyu），中间纯黑压底给卡片留位置
     2. 去掉 v3 的双层框（圆角玻璃卡 + 内部切角框 → 只留一层卡）
     3. 主按钮改成香槟金实心（原来深黑描金在深色卡上几乎看不见）
     4. 密码"小眼睛"按钮修正（原来被通用 button 规则撑成 18×48 金色药丸）
     5. 账号/密码框统一 48px，金色聚焦光晕，自动填充不再是白底
     6. 手机端：大图裁不出龙 → 换成左右两条透明龙垫底
   选择器说明：v3 用 body.skin-ly .ly-card form > button[type=submit]（0,3,4）
   这类高权重规则，本文件同等权重且加载在后，故能覆盖。
   ============================================================ */

/* ---------- 1. 背景：双龙水墨 + 中心纯黑压底 ---------- */
html.skin-ly-html { background: #000 !important; }
/* body 必须透明，否则会盖住 z-index:-2 的龙图 */
body.skin-ly {
  background: transparent !important;
  color: #e9e6dd;
}

/* 1.1 双龙图：桌面铺满整屏（webp 141KB 优先，png 兜底） */
body.skin-ly::before {
  content: "" !important;
  position: fixed !important;
  left: 0 !important; top: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  z-index: -2 !important;
  pointer-events: none;
  border-radius: 0 !important;
  filter: brightness(1.06) saturate(1.02);
  background: url("./login-bg-lingyu.png") center center / cover no-repeat !important;
  animation: lyBgBreath 26s ease-in-out infinite alternate;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body.skin-ly::before {
    background-image: image-set(
      url("./login-bg-lingyu.webp") type("image/webp"),
      url("./login-bg-lingyu.png") type("image/png")
    ) !important;
  }
}
@keyframes lyBgBreath {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.018) translateY(-4px); }
}

/* 1.2 压暗层：中间 27%~73% 纯黑（原图里自带的标题/表单就藏在这条黑带后面），
       两侧渐隐保留双龙，顶部再补一点金色氛围 */
body.skin-ly::after {
  content: "" !important;
  position: fixed !important;
  left: 0 !important; top: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  z-index: -1 !important;
  pointer-events: none;
  border-radius: 0 !important;
  filter: none !important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 9%, rgba(0,0,0,.44) 16%, rgba(0,0,0,.74) 21%,
      rgba(0,0,0,.94) 25%, #000 28%,
      #000 72%, rgba(0,0,0,.94) 75%, rgba(0,0,0,.74) 79%, rgba(0,0,0,.44) 84%,
      rgba(0,0,0,.14) 91%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, rgba(0,0,0,.26) 100%),
    radial-gradient(52% 34% at 50% 0%, rgba(214,178,74,.10), transparent 74%) !important;
  animation: none !important;
}

/* 1.3 极细网格：只在中间淡入，给龙图一点纵深 */
body.skin-ly #root::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 45%, #000 18%, transparent 62%);
}

/* ---------- 2. 卡片 ----------
   注意：App 会给 .ly-card 打内联 style="background:none !important; box-shadow:none !important"
   —— 内联 !important 优先级高于外部样式表，所以底色/阴影不能写在 .ly-card 上，
   统一由 ::before 这张"卡面"来画。 */
body.skin-ly .ly-grid { align-items: center !important; justify-items: center !important; }
body.skin-ly .ly-card {
  width: min(398px, calc(100vw - 36px)) !important;
  max-width: 398px !important;
  padding: 26px 24px 22px !important;
  border-radius: 20px !important;
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  animation: lyRise .6s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes lyRise { from { opacity: 0; transform: translateY(16px) scale(.986); } to { opacity: 1; transform: none; } }

/* 2.1 卡面：深色墨玉渐变 + 香槟金发丝边 + 外发光 + 顶部高光 */
body.skin-ly .ly-card::before {
  content: "" !important;
  position: absolute;
  inset: -1px;
  box-sizing: border-box;
  border-radius: 21px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 6%, rgba(236,208,126,.55) 50%, transparent 94%) top / 100% 1px no-repeat,
    linear-gradient(168deg, #211d17 0%, #14120f 46%, #0a0908 100%);
  border: 1px solid rgba(206,172,110,.20);
  box-shadow:
    0 34px 84px -30px rgba(0,0,0,.95),
    0 1px 0 rgba(255,236,196,.10) inset,
    0 0 72px -34px rgba(214,178,74,.55);
}
/* 2.2 底部收尾线 */
body.skin-ly .ly-card::after {
  content: "";
  position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(206,172,110,.35), transparent);
  pointer-events: none;
}
/* v3 的切角框在卡里会变成"框里还有框"，隐藏，只保留一层卡边 */
body.skin-ly .ly-card .ly-frame { display: none !important; }

/* ---------- 3. 头部：LOGO / 标题 / 徽章 ---------- */
body.skin-ly .ly-card .ly-head {
  margin: 2px 0 18px !important;
  text-align: center;
}
/* v3 的旋转水墨圆环在窄卡里会变成背后一个灰圆，收掉，改用 LOGO 自带光晕 */
body.skin-ly .ly-ring { display: none !important; }
body.skin-ly .ly-head .ly-logo {
  display: block !important;
  width: 74px !important; height: 74px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(210,176,112,.42),
    0 0 26px rgba(210,176,112,.34),
    0 0 66px rgba(120,170,255,.14) !important;
  animation: lyLogoBreath 4.6s ease-in-out infinite;
}
@keyframes lyLogoBreath {
  0%,100% { box-shadow: 0 0 0 1px rgba(210,176,112,.38), 0 0 24px rgba(210,176,112,.30), 0 0 60px rgba(120,170,255,.12); }
  50%     { box-shadow: 0 0 0 1px rgba(232,204,126,.62), 0 0 36px rgba(222,188,130,.50), 0 0 80px rgba(140,180,255,.18); }
}
body.skin-ly .ly-head .ly-title {
  font-family: "Trajan Pro", "Cinzel", Georgia, "Times New Roman", serif !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: .36em !important;
  text-indent: .36em !important;
  color: #f5e8c8 !important;
  background: linear-gradient(180deg, #f9eecb 0%, #ddbe70 55%, #ad8630 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  animation: none !important;
}
/* JS 注入的副标题就是 "L F"，与上方 LF 标题重复，隐藏掉保持干净 */
body.skin-ly .ly-head .ly-sub { display: none !important; }
body.skin-ly .ly-head .ly-badge {
  margin-top: 13px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 9px;
  padding: 4px 12px !important;
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  text-indent: .22em;
  color: rgba(236,210,140,.9) !important;
  border: 1px solid rgba(206,172,110,.26) !important;
  border-radius: 999px;
  background: rgba(206,172,110,.055);
}
body.skin-ly .ly-head .ly-badge .ln {
  width: 26px !important;
  background: linear-gradient(90deg, transparent, rgba(206,172,110,.62)) !important;
  animation: none !important;
}
body.skin-ly .ly-head .ly-badge .ln.r { background: linear-gradient(270deg, transparent, rgba(206,172,110,.62)) !important; }
body.skin-ly .ly-head .ly-badge .ln::after { display: none; }

/* ---------- 4. 表单容器（去掉 v3 的内层 padding，避免双份留白） ---------- */
body.skin-ly .ly-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  animation: none !important;
}
body.skin-ly .ly-card form > * { margin-top: 0 !important; }

/* ---------- 5. 输入框 ---------- */
body.skin-ly .ly-card input[type="text"],
body.skin-ly .ly-card input[type="password"],
body.skin-ly .ly-card input[type="tel"],
body.skin-ly .ly-card input:not([type]) {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px 0 44px !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  color: #f2efe7 !important;
  caret-color: #e8cc78;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
body.skin-ly .ly-card input::placeholder {
  color: rgba(233,230,221,.34) !important;
  letter-spacing: .08em !important;
}
body.skin-ly .ly-card input:hover { border-color: rgba(206,172,110,.30) !important; }
body.skin-ly .ly-card input:focus,
body.skin-ly .ly-card input:focus-visible {
  outline: none !important;
  border-color: rgba(222,188,124,.72) !important;
  background: rgba(206,172,110,.06) !important;
  box-shadow: 0 0 0 3px rgba(206,172,110,.13), 0 0 22px -6px rgba(206,172,110,.55) !important;
}
/* 浏览器自动填充不要变成白底黑字 */
body.skin-ly .ly-card input:-webkit-autofill,
body.skin-ly .ly-card input:-webkit-autofill:hover,
body.skin-ly .ly-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f2efe7 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(26,24,20,.98) inset !important;
  box-shadow: 0 0 0 1000px rgba(26,24,20,.98) inset !important;
  transition: background-color 9999s ease-out 0s !important;
  caret-color: #e8cc78;
}
/* 左侧账号/密码图标：金色，聚焦点亮 */
body.skin-ly .ly-card form span[class*="absolute"] svg,
body.skin-ly .ly-card form svg { color: #c8ab74 !important; stroke: #c8ab74 !important; }
body.skin-ly .ly-card form div:has(input:focus) span[class*="absolute"] svg {
  color: #edcf8e !important; stroke: #edcf8e !important;
}

/* ---------- 6. 密码"小眼睛"：修正被撑成金色药丸的问题 ---------- */
body.skin-ly .ly-card form button[type="button"] {
  width: 26px !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(206,172,110,.72) !important;
  cursor: pointer;
  transition: color .16s, background .16s;
}
body.skin-ly .ly-card form button[type="button"]:hover {
  color: #edd493 !important;
  background: rgba(206,172,110,.10) !important;
}
body.skin-ly .ly-card form button[type="button"] svg {
  width: 18px !important; height: 18px !important;
}

/* ---------- 7. 主按钮：香槟金实心 ---------- */
body.skin-ly .ly-card form > button[type="submit"] {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  height: 48px !important;
  margin-top: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: .34em !important;
  text-indent: .34em;
  color: #221905 !important;
  background: linear-gradient(180deg, #f6e6b4 0%, #e6c877 42%, #c79f36 100%) !important;
  background-image: linear-gradient(180deg, #f6e6b4 0%, #e6c877 42%, #c79f36 100%) !important;
  box-shadow:
    0 10px 22px -16px rgba(214,178,74,.75),
    0 0 0 1px rgba(255,240,200,.32) inset,
    0 1px 0 rgba(255,255,255,.50) inset !important;
  opacity: 1 !important;
  transition: transform .16s cubic-bezier(.3,.8,.3,1), box-shadow .18s, filter .18s !important;
}
/* 箭头（v3 用 ::after 放的 →），金色按钮上压暗一点 */
body.skin-ly .ly-card form > button[type="submit"]::after {
  content: "\2192";
  margin-left: 12px;
  font-size: .95em;
  letter-spacing: 0;
  opacity: .55;
}
/* 平时不扫光，悬停时扫一道 */
body.skin-ly .ly-card form > button[type="submit"]::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-140%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
body.skin-ly .ly-card form > button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  color: #1b1404 !important;
  background: linear-gradient(180deg, #fbeec6 0%, #eed287 42%, #cfa73d 100%) !important;
  box-shadow:
    0 18px 36px -16px rgba(214,178,74,1),
    0 0 0 1px rgba(255,244,214,.42) inset,
    0 1px 0 rgba(255,255,255,.60) inset !important;
}
body.skin-ly .ly-card form > button[type="submit"]:hover:not(:disabled)::before {
  opacity: 1;
  animation: lySweep .85s ease-out;
}
body.skin-ly .ly-card form > button[type="submit"]:active:not(:disabled) { transform: translateY(0) scale(.995); }
body.skin-ly .ly-card form > button[type="submit"]:disabled {
  opacity: .62 !important;
  color: rgba(34,25,5,.72) !important;
  background: linear-gradient(180deg, #cfc096 0%, #b8a267 45%, #94803f 100%) !important;
  box-shadow: 0 8px 20px -14px rgba(150,124,60,.7) !important;
  cursor: not-allowed;
}
@keyframes lySweep { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }

/* ---------- 8. 错误提示（账号密码错 / 验证码错） ---------- */
body.skin-ly .ly-card .ly-err,
body.skin-ly .ly-card [class*="destructive"],
body.skin-ly .ly-card [role="alert"] {
  border-radius: 10px !important;
  background: rgba(220,38,38,.12) !important;
  border: 1px solid rgba(248,113,113,.32) !important;
  color: #fca5a5 !important;
  font-size: 12.5px !important;
  padding: 8px 12px !important;
  text-align: left;
}

/* ---------- 9. 页脚 ---------- */
/* ::before 画卡面，属于定位元素，会盖住非定位的 .ly-foot，所以这里必须提层 */
body.skin-ly .ly-card .ly-foot {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 16px !important;
  animation: none !important;
}
/* JS 注入的 .ly-foot-brand 与标题下的「内部版」徽章重复，收掉，只留一行标语 */
body.skin-ly .ly-foot-brand { display: none !important; }
body.skin-ly .ly-card .ly-foot-slogan {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px !important;
  letter-spacing: .42em !important;
  text-indent: .42em;
  color: rgba(150,142,126,.78) !important;
}
body.skin-ly .ly-card .ly-foot-slogan::before,
body.skin-ly .ly-card .ly-foot-slogan::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(206,172,110,.55));
}
body.skin-ly .ly-card .ly-foot-slogan::after {
  background: linear-gradient(270deg, transparent, rgba(206,172,110,.55));
}

/* ---------- 10. 二次验证（OTP）页沿用同一套皮肤 ---------- */
body.skin-ly .ly-card input.ly-otp {
  padding-left: 16px !important;
  padding-right: 16px !important;
  text-align: center !important;
  letter-spacing: .44em !important;
  text-indent: .44em !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 19px !important;
  color: #f6ecd9 !important;
}
body.skin-ly .ly-card p { color: #a3adb8 !important; }
body.skin-ly .ly-card h1,
body.skin-ly .ly-card h2,
body.skin-ly .ly-card h3 { color: #f3ead8 !important; }

/* ---------- 11. 竖屏/窄屏：大图 cover 会把中间那条黑带裁偏，
        原图里烤死的标题/表单就可能露出来 → 改用左右两条透明龙垫底 ---------- */
@media (max-width: 900px), (max-aspect-ratio: 7/5) {
  body.skin-ly::before {
    background-image:
      url("./login-dragon-l.webp"),
      url("./login-dragon-r.webp") !important;
    background-position: left bottom, right bottom !important;
    background-size: auto 42vh, auto 42vh !important;
    background-repeat: no-repeat, no-repeat !important;
    filter: brightness(1.06) !important;
    animation: none !important;
  }
  body.skin-ly::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 26%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.40) 100%),
      radial-gradient(70% 30% at 50% 6%, rgba(214,178,74,.09), transparent 72%) !important;
  }
  body.skin-ly #root::before { display: none; }
}
@media (max-width: 520px) {
  body.skin-ly .ly-card {
    width: calc(100vw - 26px) !important;
    padding: 22px 18px 16px !important;
    border-radius: 18px !important;
  }
  body.skin-ly .ly-head .ly-logo { width: 64px !important; height: 64px !important; margin-bottom: 10px !important; }
  body.skin-ly .ly-head .ly-title { font-size: 21px !important; letter-spacing: .3em !important; text-indent: .3em !important; }
  body.skin-ly .ly-card form { gap: 12px !important; }
  body.skin-ly .ly-card input[type="text"],
  body.skin-ly .ly-card input[type="password"],
  body.skin-ly .ly-card input:not([type]) { height: 46px !important; font-size: 16px !important; padding-left: 42px !important; }
  body.skin-ly .ly-card form > button[type="submit"] { height: 46px !important; }
}
@media (max-height: 700px) {
  body.skin-ly .ly-card .ly-head { margin-bottom: 12px !important; }
  body.skin-ly .ly-head .ly-logo { width: 58px !important; height: 58px !important; margin-bottom: 8px !important; }
  body.skin-ly .ly-card form { gap: 10px !important; }
  body.skin-ly .ly-card input[type="text"],
  body.skin-ly .ly-card input[type="password"],
  body.skin-ly .ly-card input:not([type]) { height: 44px !important; }
  body.skin-ly .ly-card form > button[type="submit"] { height: 44px !important; }
  body.skin-ly .ly-card .ly-foot { margin-top: 12px !important; }
  body.skin-ly .ly-card .ly-foot-slogan { font-size: 9.5px !important; gap: 9px; }
  body.skin-ly .ly-card .ly-foot-slogan::before,
  body.skin-ly .ly-card .ly-foot-slogan::after { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.skin-ly .ly-card,
  body.skin-ly::before,
  body.skin-ly::after,
  body.skin-ly .ly-head .ly-logo,
  body.skin-ly .ly-card form > button[type="submit"]::before { animation: none !important; }
}