/* ===== 零域 · 黑金水墨登录页 v2 (2026-10-29) =====
   依据参考图 1:1 重排：双龙水墨背景 + 竖排中央卡片 + 切角金线边框
   仅作用于登录页（body.skin-ly），不改 React 逻辑 */

html.skin-ly-html{background:#000 !important;}
body.skin-ly{
  background:transparent !important;
  overflow:hidden !important;
  height:100vh;
}

/* 背景图（爹给的参考图本身，铺满整屏） */
body.skin-ly::before{
  content:"";position:fixed;inset:-2px;z-index:-2;pointer-events:none;
  background:url("./login-bg-lingyu.png") center center / cover no-repeat;
}
/* 中心压暗，给卡片留干净底（参考图中心本来就是纯黑，这里只做极轻过渡） */
body.skin-ly::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.50) 19%,
      rgba(0,0,0,.96) 28.5%,
      rgba(0,0,0,1) 31%,
      rgba(0,0,0,1) 69%,
      rgba(0,0,0,.96) 71.5%,
      rgba(0,0,0,.50) 81%,
      rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,.46) 100%);
}

body.skin-ly #root{position:relative;z-index:1;height:100vh;overflow:hidden;}
body.skin-ly #root > div{
  display:block !important;height:100% !important;min-height:0 !important;
  background:transparent !important;
}
/* 隐藏原左侧品牌栏 */
body.skin-ly #root > div > div:first-child{display:none !important;}
body.skin-ly #root > div > div:last-child{
  display:flex !important;align-items:center !important;justify-content:center !important;
  height:100% !important;min-height:0 !important;padding:0 !important;
  background:transparent !important;
}

/* ---------- 卡片（透明，仅承载排版） ---------- */
body.skin-ly .ly-card{
  position:relative;
  width:min(520px,92vw) !important;
  max-width:520px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
body.skin-ly .ly-card > div{background:transparent !important;}
body.skin-ly .ly-card .ly-hide{display:none !important;}

/* ---------- 标题区 ---------- */
.ly-head{position:relative;text-align:center;margin:0 0 clamp(8px,1.8vh,20px);}
/* 背后水墨圆环 */
.ly-ring{
  position:absolute;left:50%;top:50%;
  width:clamp(190px,30vh,320px);height:clamp(190px,30vh,320px);
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 57%,
      rgba(240,235,224,.15) 59.2%,
      rgba(240,235,224,.07) 64%,
      rgba(240,235,224,.14) 67.5%,
      rgba(0,0,0,0) 69%),
    conic-gradient(from 200deg at 50% 50%,
      rgba(255,255,255,.0) 0deg,
      rgba(255,255,255,.10) 40deg,
      rgba(255,255,255,.02) 120deg,
      rgba(255,255,255,.12) 210deg,
      rgba(255,255,255,.03) 300deg,
      rgba(255,255,255,.0) 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 56%, #000 58%, #000 70%, transparent 72%);
          mask:radial-gradient(circle at 50% 50%, transparent 56%, #000 58%, #000 70%, transparent 72%);
  filter:blur(.6px) contrast(1.1);
  opacity:.95;
}
.ly-title{
  position:relative;z-index:2;
  font-family:"STXingkai","华文行楷","STKaiti","KaiTi","楷体",serif;
  font-size:clamp(60px,14.4vh,150px);
  line-height:1.02;font-weight:400;
  color:#f5f2ec;letter-spacing:.055em;padding-left:.055em;
  text-shadow:0 0 42px rgba(255,247,232,.18), 0 0 10px rgba(255,255,255,.10), 0 4px 10px rgba(0,0,0,.9);
}
.ly-sub{
  position:relative;z-index:2;
  margin-top:clamp(4px,1vh,12px);
  font-size:clamp(10px,.9vw,13px);
  letter-spacing:.66em;padding-left:.66em;
  color:#c9b189;font-family:Georgia,"Times New Roman",serif;
}
.ly-badge{
  position:relative;z-index:2;
  margin-top:clamp(10px,1.6vh,20px);
  display:flex;align-items:center;justify-content:center;gap:16px;
  color:#dccbaa;font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.40em;padding-left:.40em;
}
.ly-badge .ln{display:block;width:clamp(40px,5vw,72px);height:1px;position:relative;
  background:linear-gradient(90deg,rgba(198,166,112,0),rgba(198,166,112,.85));}
.ly-badge .ln.r{background:linear-gradient(270deg,rgba(198,166,112,0),rgba(198,166,112,.85));}
.ly-badge .ln::after{
  content:"";position:absolute;top:-2.5px;width:6px;height:6px;
  border-top:1px solid rgba(214,182,124,.9);border-right:1px solid rgba(214,182,124,.9);
  transform:rotate(45deg);
}
.ly-badge .ln.l::after{right:-1px;}
.ly-badge .ln.r::after{left:-1px;transform:rotate(-135deg);}

/* ---------- 表单：切角金线框 ---------- */
body.skin-ly .ly-card form{
  position:relative;z-index:1;
  display:flex !important;flex-direction:column !important;
  gap:clamp(10px,1.5vh,16px) !important;
  padding:clamp(22px,3.6vh,34px) clamp(18px,2.2vw,28px) !important;
  margin:0 !important;
  background:transparent !important;
}
body.skin-ly .ly-card form > *{margin-top:0 !important;}

/* 边框：四条边 + 四个切角斜线（JS 注入 .ly-frame） */
.ly-frame{position:absolute;inset:0;pointer-events:none;z-index:0;}
.ly-frame .e{position:absolute;display:block;background:rgba(186,156,104,.34);}
.ly-frame .t{left:20px;right:20px;top:0;height:1px;
  background:linear-gradient(90deg,rgba(186,156,104,.14),rgba(196,166,112,.42) 22%,rgba(196,166,112,.42) 78%,rgba(186,156,104,.14));}
.ly-frame .b{left:20px;right:20px;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(186,156,104,.14),rgba(196,166,112,.42) 22%,rgba(196,166,112,.42) 78%,rgba(186,156,104,.14));}
.ly-frame .l{top:20px;bottom:20px;left:0;width:1px;
  background:linear-gradient(180deg,rgba(186,156,104,.14),rgba(196,166,112,.40) 20%,rgba(196,166,112,.40) 80%,rgba(186,156,104,.14));}
.ly-frame .r{top:20px;bottom:20px;right:0;width:1px;
  background:linear-gradient(180deg,rgba(186,156,104,.14),rgba(196,166,112,.40) 20%,rgba(196,166,112,.40) 80%,rgba(186,156,104,.14));}
.ly-frame .c{position:absolute;display:block;width:30px;height:1px;background:rgba(196,166,112,.40);transform-origin:0 50%;}
.ly-frame .c.tl{left:0;top:20px;transform:rotate(-45deg);}
.ly-frame .c.tr{right:0;top:20px;transform-origin:100% 50%;transform:rotate(45deg);}
.ly-frame .c.bl{left:0;bottom:20px;transform:rotate(45deg);}
.ly-frame .c.br{right:0;bottom:20px;transform-origin:100% 50%;transform:rotate(-45deg);}
/* 四角小菱形 */
.ly-frame .d{position:absolute;width:5px;height:5px;background:rgba(214,182,124,.55);
  transform:rotate(45deg);}
.ly-frame .d.tl{left:-3px;top:-3px;} .ly-frame .d.tr{right:-3px;top:-3px;}
.ly-frame .d.bl{left:-3px;bottom:-3px;} .ly-frame .d.br{right:-3px;bottom:-3px;}

/* ---------- 输入框 ---------- */
body.skin-ly .ly-card input[type="text"],
body.skin-ly .ly-card input[type="password"],
body.skin-ly .ly-card input:not([type]){
  width:100% !important;
  height:clamp(46px,6.1vh,56px) !important;
  padding-left:52px !important;
  background:rgba(6,6,6,.72) !important;
  border:1px solid rgba(164,140,96,.36) !important;
  border-radius:8px !important;
  color:#f3ead8 !important;
  font-size:clamp(13px,1.05vw,15px) !important;
  letter-spacing:.05em;
  box-shadow:inset 0 0 24px rgba(0,0,0,.55);
  transition:border-color .18s,box-shadow .18s,background .18s !important;
}
body.skin-ly .ly-card input::placeholder{
  color:rgba(226,216,198,.34) !important;letter-spacing:.10em;
}
body.skin-ly .ly-card input:focus{
  background:rgba(10,9,8,.86) !important;
  border-color:rgba(220,186,116,.86) !important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.5), 0 0 0 1px rgba(214,178,110,.20), 0 0 26px rgba(206,172,110,.16) !important;
  outline:none !important;
}
/* 输入框左侧图标金色 */
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 button[type="button"] svg{color:rgba(200,171,116,.7) !important;stroke:rgba(200,171,116,.7) !important;}

/* ---------- 登录按钮 ---------- */
body.skin-ly .ly-card form > button[type="submit"],
body.skin-ly .ly-card form button[type="submit"]{
  position:relative;
  height:clamp(48px,6.5vh,56px) !important;
  margin-top:clamp(8px,1.6vh,16px) !important;
  background:linear-gradient(180deg,#171310 0%,#0b0908 52%,#060505 100%) !important;
  border:1px solid rgba(198,164,96,.60) !important;
  border-radius:8px !important;
  color:#ecd9ad !important;
  font-size:clamp(14px,1.1vw,16px) !important;
  letter-spacing:.46em;text-indent:.46em;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.10), 0 12px 30px rgba(0,0,0,.66) !important;
  transition:all .2s ease !important;
}
body.skin-ly .ly-card form > button[type="submit"]:hover{
  border-color:rgba(236,202,138,.95) !important;
  color:#fff5de !important;
  background:linear-gradient(180deg,#231b12 0%,#120e09 55%,#080605 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,240,204,.20), 0 0 32px rgba(206,172,110,.26), 0 14px 34px rgba(0,0,0,.7) !important;
}
body.skin-ly .ly-card form > button[type="submit"]::after{
  content:"\2192";margin-left:14px;font-size:.95em;letter-spacing:0;opacity:.8;
}

/* ---------- 页脚 ---------- */
.ly-foot{margin:clamp(16px,2.8vh,30px) 0 0;text-align:center;}
.ly-foot-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:clamp(11px,1vw,13px);letter-spacing:.24em;color:#cbbb9c;
}
.ly-foot-brand .ly-sh{color:#c2a26a;font-size:.95em;line-height:1;transform:translateY(-.5px);}
.ly-foot-brand::before,.ly-foot-brand::after{
  content:"";display:block;width:clamp(34px,4vw,52px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,162,106,.62));
}
.ly-foot-brand::after{background:linear-gradient(270deg,transparent,rgba(196,162,106,.62));}
.ly-foot-slogan{
  margin-top:clamp(10px,1.6vh,18px);
  font-size:clamp(9.5px,.82vw,11px);
  letter-spacing:.54em;padding-left:.54em;color:#7c7466;
}

/* ---------- 小屏 / 矮屏 ---------- */
/* 手机端：参考图在窄屏会被裁到「图里自带的卡片」上，改成纯黑底避免重影 */
@media (max-width:760px){
  body.skin-ly::before{
    background-image:none;
    background:radial-gradient(120% 78% at 50% 38%, #12100e 0%, #0a0908 42%, #000 100%);
  }
  body.skin-ly::after{
    background:radial-gradient(70% 40% at 50% 30%, rgba(206,172,110,.06) 0%, rgba(0,0,0,0) 70%);
  }
  body.skin-ly .ly-card{width:92vw !important;}
  .ly-title{font-size:clamp(52px,13vw,86px);}
  .ly-ring{width:clamp(170px,58vw,260px);height:clamp(170px,58vw,260px);}
  .ly-sub{letter-spacing:.5em;padding-left:.5em;}
  .ly-badge{letter-spacing:.28em;padding-left:.28em;gap:10px;}
  body.skin-ly .ly-card form{padding:20px 16px !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:48px !important;padding-left:48px !important;}
  .ly-foot-slogan{letter-spacing:.36em;padding-left:.36em;}
}
@media (max-height:700px){
  .ly-title{font-size:clamp(44px,11vh,72px);}
  .ly-ring{width:clamp(150px,26vh,220px);height:clamp(150px,26vh,220px);}
  body.skin-ly .ly-card form{gap:9px !important;padding:16px 20px !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:46px !important;margin-top:6px !important;}
  .ly-foot{margin-top:12px;}
  .ly-foot-slogan{margin-top:8px;}
}