/* ===== ZX V8 · COSMOS 背景层 v21（程序生成 · 银白旋涡星系） =====
   贴图逐像素生成（按屏幕 1:1 出图，不放大 → 不糊），动效只走 transform/opacity。
   构图：倾斜椭圆盘（长轴左上→右下）、白炽核球、两条宽旋臂 + 细丝、密集暗尘带。
   配色：白炽核 → 亮银 → 银灰 → 冷银，纯灰阶。
*/

html {
  background: #04060a !important;
}
body {
  background: transparent !important;
}

#zx-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 96% at 50% 46%, #10151c 0%, #0a0e14 40%, #05080c 72%, #030507 100%);
}

#zx-cosmos canvas {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ---- 大色晕：很淡的银白辉光，缓慢呼吸 ---- */
#zx-cosmos .c-aura {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(46% 38% at 50% 47%, rgba(226, 234, 244, .10) 0%, rgba(186, 198, 212, .05) 46%, transparent 74%),
    radial-gradient(38% 30% at 62% 58%, rgba(200, 210, 224, .05) 0%, transparent 70%);
  animation: c-aura-breathe 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes c-aura-breathe {
  from { opacity: .68; transform: scale(.98); }
  to   { opacity: 1;   transform: scale(1.04); }
}

/* 倾斜：整盘固定倾角（长轴左上→右下），只做视差平移 */
#zx-cosmos .c-tilt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--tilt, -32deg));
  transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* 压扁成椭圆盘：贴图本身是正圆，所以这里只做一次等比压缩，不产生二次采样 */
#zx-cosmos .c-flat {
  position: absolute;
  inset: 0;
  transform: scaleY(var(--flat, 0.57));
  transform-origin: 50% 50%;
}

/* 旋臂在盘面内自转：正圆坐标系里旋转，再被父层压扁 → 外轮廓恒定不变 */
#zx-cosmos .c-spin {
  position: absolute;
  inset: 0;
  animation: c-spin 60s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes c-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#zx-cosmos .c-disk {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  transform-origin: 50% 50%;
}

/* ---- 星点 / 闪烁 ---- */
#zx-cosmos .c-stars {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .62;
  animation: c-breathe 11s ease-in-out infinite alternate;
}
@keyframes c-breathe {
  from { opacity: .52; }
  to   { opacity: .74; }
}

#zx-cosmos .c-twinkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#zx-cosmos .c-twinkle i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  opacity: .9;
}
#zx-cosmos .c-tw  { animation: c-tw 3.6s ease-in-out infinite alternate; }
#zx-cosmos .c-tw0 { animation: c-tw 3.1s ease-in-out infinite alternate; }
#zx-cosmos .c-tw1 { animation: c-tw 5.2s ease-in-out infinite alternate-reverse; }
#zx-cosmos .c-tw2 { animation: c-tw 7.6s ease-in-out infinite alternate; }
@keyframes c-tw {
  0%   { opacity: .15; }
  45%  { opacity: 1; }
  100% { opacity: .32; }
}

/* ---- 压暗 / 暗角：照片本身边缘已很暗，只补一层很轻的 ---- */
#zx-cosmos .c-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 62% at 51% 50%, rgba(0, 0, 0, 0) 0%, rgba(4, 6, 10, .06) 62%, rgba(4, 6, 10, .34) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, .26) 0%, rgba(4, 6, 10, 0) 18%, rgba(4, 6, 10, 0) 76%, rgba(4, 6, 10, .34) 100%);
  pointer-events: none;
}

/* ---- 登录页：整盘居中，按屏幕大小铺开 ---- */
#zx-cosmos:not(.is-app) .c-tilt {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--tilt, -32deg)) scale(1);
}

/* ---- 登录页：星系本来就是正中，不再上移 ---- */
#zx-cosmos:not(.is-app) .c-veil {
  background:
    radial-gradient(84% 70% at 51% 48%, rgba(0, 0, 0, 0) 0%, rgba(3, 5, 9, 0) 66%, rgba(3, 5, 9, .07) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, .05) 0%, rgba(3, 5, 9, 0) 22%, rgba(3, 5, 9, 0) 78%, rgba(3, 5, 9, .09) 100%);
}

/* ---- 登录后的工作台：缩一档、压暗，让文字表格清楚 ---- */
#zx-cosmos.is-app .c-tilt {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--tilt, -32deg)) scale(.9);
  opacity: .9;
  transition: transform .6s ease, opacity .6s ease;
}
/* 后台：不再用 filter（会逐帧重栅格化），亮度由暗罩控制 */
#zx-cosmos.is-app .c-aura { opacity: .62; }
#zx-cosmos.is-app .c-stars { opacity: .5; }
#zx-cosmos.is-app .c-twinkle { opacity: .7; }
#zx-cosmos.is-app .c-veil {
  background:
    radial-gradient(70% 58% at 51% 46%, rgba(6, 8, 12, .30) 0%, rgba(6, 8, 12, .48) 60%, rgba(5, 7, 10, .70) 100%),
    linear-gradient(180deg, rgba(5, 7, 10, .34) 0%, rgba(5, 7, 10, .12) 26%, rgba(5, 7, 10, .26) 100%);
}

/* ---- 登录页：卡片背后透出星系 ---- */
html body .login-page {
  background:
    radial-gradient(120% 100% at 51% 42%, rgba(3, 6, 10, 0) 0%, rgba(3, 6, 10, .02) 58%, rgba(3, 6, 10, .12) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, .05) 0%, rgba(3, 5, 9, .01) 44%, rgba(3, 5, 9, .12) 100%) !important;
}
.login-container {
  background: linear-gradient(160deg, rgba(16, 20, 26, .025) 0%, rgba(10, 13, 18, .065) 100%) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .90), 0 0 34px rgba(0, 0, 0, .70);
}
/* 左侧品牌区也做成玻璃，让星系在两边都透出来，但比分栏深一档保证 L ogo 对比 */
html body #root .login-brand {
  background:
    radial-gradient(640px 460px at 22% 3%, rgba(238, 243, 250, .10), rgba(0, 0, 0, 0) 60%),
    linear-gradient(160deg, rgba(9, 12, 17, .05) 0%, rgba(6, 9, 13, .11) 100%) !important;
}
html body #root .login-container .login-brand + div {
  background: radial-gradient(140% 100% at 50% 40%, rgba(8, 11, 16, .01) 0%, rgba(8, 11, 16, .05) 100%) !important;
}
/* 版权行压在亮核上也读得清 */
html body #root .login-container [class*="copyright"],
html body #root .login-container [class*="footer"] {
  color: rgba(226, 232, 240, .62) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .95), 0 0 22px rgba(0, 0, 0, .8) !important;
}

#root {
  position: relative;
  z-index: 1;
}

/* 空状态/说明文字压在亮核上也得读得清 */
html body #root .ant-empty,
html body #root .ant-empty div,
html body #root .ant-empty span {
  text-shadow: 0 1px 14px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .72) !important;
}
html body #root .ant-empty-description,
html body #root .ant-empty-normal,
html body #root .ant-table-placeholder {
  color: rgba(226, 232, 240, .74) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .92), 0 0 26px rgba(0, 0, 0, .7) !important;
}

/* 主布局透出背景 */
html body #root .ant-layout,
html body #root .ant-layout-content,
html body #root .ant-layout-inner {
  background: transparent !important;
}
html body #root .control-page,
html body #root .control-page-wrapper {
  background: transparent !important;
}

/* 顶栏/侧栏：深色玻璃，保证文字清晰 */
html body #root .ant-layout-sider,
html body #root .ant-layout-sider-children,
html body #root .ant-layout-header {
  background: rgba(8, 11, 16, .78) !important;
}
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu.ant-menu-dark {
  background: transparent !important;
}

/* ---- 手机：竖向屏幕上把星系放大一档，别只露中心 ---- */
@media (max-width: 900px) {
  #zx-cosmos:not(.is-app) .c-tilt {
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(62deg) scale(.96);
  }
  #zx-cosmos.is-app .c-tilt { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(62deg) scale(.92); }
  #zx-cosmos .c-veil {
    background:
      radial-gradient(72% 52% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(5, 7, 10, .14) 62%, rgba(5, 7, 10, .46) 100%),
      linear-gradient(180deg, rgba(5, 7, 10, .28) 0%, rgba(5, 7, 10, 0) 20%, rgba(5, 7, 10, 0) 74%, rgba(5, 7, 10, .40) 100%);
  }
  #zx-cosmos.is-app .c-veil {
    background:
      radial-gradient(72% 54% at 50% 46%, rgba(6, 8, 12, .26) 0%, rgba(6, 8, 12, .46) 62%, rgba(5, 7, 10, .70) 100%),
      linear-gradient(180deg, rgba(5, 7, 10, .32) 0%, rgba(5, 7, 10, .10) 26%, rgba(5, 7, 10, .28) 100%);
  }
  html body .login-page {
    background:
      radial-gradient(130% 82% at 50% 44%, rgba(4, 7, 12, .02) 0%, rgba(4, 7, 12, .14) 60%, rgba(3, 5, 9, .34) 100%),
      linear-gradient(180deg, rgba(3, 5, 9, .10) 0%, rgba(3, 5, 9, .14) 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #zx-cosmos .c-spin,
  #zx-cosmos .c-stars,
  #zx-cosmos .c-aura,
  #zx-cosmos .c-twinkle i { animation: none !important; transition: none !important; }
}