/* ===========================================================
 * 登录页样式（参考静态模板 login/login.html）
 * 暗色科技风：星空背景 + 旋转地球 + 左右广告面板 + 中央登录卡
 * =========================================================== */

/* ============ 阿里普惠体（本地化，禁止远程 CDN，避免外网慢/超时） ============
   文件：assets/fonts/AlibabaPuHuiTi-2-55-Regular-sub.woff2（Regular 400）
        assets/fonts/AlibabaPuHuiTi-2-65-Medium-sub.woff2 （Medium  600）
   说明：原字库 8.4MB，已按「GB2312 一级常用字(3755) + ASCII + 标点 + 登录页文案」
        子集化并转 woff2，单字重压到 ~490KB；缺失的生僻字自动回退系统字体。
   如需重新生成（本机 venv + fonttools 4.66）：
        1) 取原 TTF：AlibabaPuHuiTi-2-55-Regular.ttf / -65-Medium.ttf
           （npm 包 @fontpkg/alibaba-pu-hui-ti-2-0@2.0.2，或用服务器 curl 下载）
        2) pyftsubset <原.ttf> --text-file=chars.txt --flavor=woff2 \
             --layout-features='*' --name-IDs='1,2,3,4,6' --notdef-outline \
             --output-file=assets/fonts/<名>-sub.woff2
           chars.txt = GB2312 一级字 + ASCII + 标点 + login/index.php 内出现的汉字
   注意：字体与 CSS 走同一站点，务必保持相对路径 ../fonts/ ，不要改回 https CDN。 */
@font-face {
  font-family: "Alibaba PuHuiTi 2.0";
  src: url("../fonts/AlibabaPuHuiTi-2-55-Regular-sub.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alibaba PuHuiTi 2.0";
  src: url("../fonts/AlibabaPuHuiTi-2-65-Medium-sub.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* 页面大标题字体：优设标题黑（免费可商用），只用于 .page-header h1 */
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("../fonts/YouSheBiaoTiHei.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --bg-deep: #040b1c;
  --panel: rgba(8, 22, 48, 0.72);
  --panel-border: rgba(64, 156, 255, 0.28);
  --cyan: #35c6ff;
  --text: #d8e9ff;
  --text-dim: #6f94c4;
  --text-label: #9cc3ee;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Alibaba PuHuiTi 2.0", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow: hidden;
  min-width: 1200px;
}

/* ================= 背景层 ================= */
.bg-layer {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(1100px 520px at 50% 42%, rgba(24, 78, 160, 0.38), transparent 65%),
    radial-gradient(800px 480px at 8% 12%, rgba(16, 52, 110, 0.35), transparent 60%),
    radial-gradient(800px 480px at 92% 88%, rgba(16, 52, 110, 0.30), transparent 60%),
    linear-gradient(165deg, #07142e 0%, #040b1c 50%, #051430 100%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 1; opacity: 0.45; pointer-events: none;
  background-image:
    linear-gradient(rgba(64,156,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,156,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%);
}
/* ================= 旋转深色地球 ================= */
.globe {
  position: fixed; z-index: 1; pointer-events: none;
  width: 820px; height: 820px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0.55;
  background: radial-gradient(circle at 34% 30%, rgba(46, 96, 180, 0.55), rgba(10, 26, 58, 0.92) 58%, rgba(3, 10, 28, 0.96));
  box-shadow:
    inset -50px -36px 90px rgba(0, 0, 0, 0.6),
    inset 30px 24px 70px rgba(60, 130, 220, 0.18),
    0 0 90px rgba(40, 120, 220, 0.22);
  overflow: hidden;
}
/* 经线（随地球自转横向滚动） */
.globe .meridians {
  position: absolute; inset: -10%;
  background-image: repeating-linear-gradient(90deg, rgba(80, 170, 255, 0.22) 0 1px, transparent 1px 70px);
  background-size: 140px 100%;
  border-radius: 50%;
  animation: globeSpin 22s linear infinite;
}
@keyframes globeSpin { from { transform: translateX(0); } to { transform: translateX(140px); } }
/* 纬线（静态弧形，营造球面感） */
.globe .latitudes {
  position: absolute; inset: 0; border-radius: 50%;
  background-image: repeating-linear-gradient(0deg, rgba(80, 170, 255, 0.14) 0 1px, transparent 1px 62px);
}
/* 高光与暗边叠加，增强立体 */
.globe .shade {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.10), transparent 30%),
              radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.45), transparent 55%);
}
/* 大气辉光环 */
.globe .halo {
  position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 60px 10px rgba(45, 120, 220, 0.18);
}
/* 顶部 / 底部科技感边框线 */
.frame-line { position: fixed; z-index: 2; left: 0; right: 0; height: 46px; pointer-events: none; opacity: 0.9; }
.frame-line.top {
  top: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(53,198,255,0.55) 12%, rgba(53,198,255,0.15) 40%, rgba(53,198,255,0.15) 60%, rgba(53,198,255,0.55) 88%, transparent 100%) 0 0 / 100% 2px no-repeat;
}
.frame-line.top::before, .frame-line.top::after {
  content: ""; position: absolute; top: 0; width: 240px; height: 100%;
  border-top: 2px solid rgba(53,198,255,0.65);
}
.frame-line.top::before { left: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.frame-line.top::after  { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%); }
.frame-line.bottom {
  bottom: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(53,198,255,0.45) 12%, rgba(53,198,255,0.12) 40%, rgba(53,198,255,0.12) 60%, rgba(53,198,255,0.45) 88%, transparent 100%) 0 100% / 100% 2px no-repeat;
}
.frame-line.bottom::before, .frame-line.bottom::after {
  content: ""; position: absolute; bottom: 0; width: 240px; height: 100%;
  border-bottom: 2px solid rgba(53,198,255,0.55);
}
.frame-line.bottom::before { left: 0; clip-path: polygon(0 0, 22% 0, 0 100%, 0 100%); transform: scaleX(-1); }
.frame-line.bottom::after  { right: 0; clip-path: polygon(0 0, 78% 0, 100% 100%, 100% 0); }

/* ================= 左右装饰面板 ================= */
.side-col {
  position: fixed; top: 78px; bottom: 96px; z-index: 5;
  width: 340px;                                    /* 左右两栏统一加宽，保证长文案不换行 */
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.side-col.left { left: 30px; }
.side-col.right { right: 30px; }

.deco-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 14px 16px 12px;
  position: relative;
  box-shadow: 0 6px 24px rgba(0, 12, 40, 0.45), inset 0 0 26px rgba(30, 100, 200, 0.06);
  backdrop-filter: blur(4px);
}
.deco-card::before {
  content: ""; position: absolute; top: -1px; left: 14px; right: 60%; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.deco-card .card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; letter-spacing: 2px; color: var(--text-label);
  margin-bottom: 8px;
}
.deco-card .card-title::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.deco-card svg { display: block; width: 100%; }

/* ================= 广告面板 ================= */
.ad-card { pointer-events: auto; }
.ad-card .card-title { margin-bottom: 12px; }

/* 平台能力列表（左） */
.ad-list { list-style: none; }
.ad-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 6px;
  font-size: 15px; letter-spacing: 1px; color: #c3dbf7;
  border-bottom: 1px dashed rgba(64, 156, 255, 0.16);
  transition: all .25s;
}
.ad-list li:last-child { border-bottom: none; }
.ad-list li:hover { color: #fff; padding-left: 12px; }
.ad-list li .a-ico {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 17px;
  background: rgba(53, 198, 255, 0.10);
  border: 1px solid rgba(53, 198, 255, 0.30);
  box-shadow: 0 0 10px rgba(53, 198, 255, 0.12) inset;
  color: var(--cyan);                    /* SVG 用 currentColor 取色，换图标不必改颜色 */
}
/* 图标尺寸统一锁定：无论替换进来的 SVG 自带多大，都压缩到 22×22 居中显示 */
.ad-list li .a-ico svg,
.ad-list li .a-ico img {
  width: 22px; height: 22px; display: block; flex: none;
  max-width: 22px; max-height: 22px; object-fit: contain;
}

/* 广告卡片（右） */
.ad-slogan { display: flex; align-items: center; gap: 14px; }
.ad-slogan .a-ico {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 22px;
  background: rgba(53, 198, 255, 0.10);
  border: 1px solid rgba(53, 198, 255, 0.30);
}
.ad-slogan h3 { font-size: 16px; letter-spacing: 1px; color: #eaf5ff; font-weight: 600; }
.ad-slogan p { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; letter-spacing: 1px; white-space: nowrap; }

.ad-hotline { text-align: center; }
.ad-hotline .ht-label { font-size: 13px; color: var(--text-dim); letter-spacing: 3px; }
.ad-hotline .ht-num {
  margin-top: 8px;
  font-size: 24px; font-weight: 700; letter-spacing: 2px;
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(90deg, #7ec8ff, #35c6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(53, 198, 255, 0.25);
}
.ad-hotline .ht-time { margin-top: 6px; font-size: 12px; color: #6f94c4; letter-spacing: 2px; }

.ad-qr { text-align: center; }
.qr-box {
  width: 104px; height: 104px; margin: 2px auto 10px;
  background: #eaf3ff;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 0 18px rgba(53, 198, 255, 0.25);
}
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-box img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2px; }
.ad-qr .qr-tip { font-size: 13px; color: #c3dbf7; letter-spacing: 3px; }

/* 面板内电路装饰（左下角） */
.ad-circuit {
  position: absolute; right: 8px; bottom: 6px;
  width: 110px; height: 70px; opacity: 0.35; pointer-events: none;
}

/* ================= 中央登录卡片 ================= */
.login-wrap {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 10; width: 560px;
}
.login-card {
  position: relative;
  background: linear-gradient(165deg, rgba(11, 32, 68, 0.94), rgba(7, 18, 42, 0.96));
  border: 1px solid rgba(53, 198, 255, 0.42);
  border-radius: 16px;
  padding: 44px 64px 36px;
  box-shadow:
    0 0 60px rgba(20, 90, 190, 0.35),
    0 0 0 1px rgba(53,198,255,0.08),
    inset 0 0 80px rgba(20, 80, 180, 0.10);
  backdrop-filter: blur(10px);
}
/* 顶角科技装饰 */
.corner { position: absolute; width: 26px; height: 26px; }
.corner.tl { top: -2px; left: -2px; border-top: 3px solid var(--cyan); border-left: 3px solid var(--cyan); border-radius: 16px 0 0 0; }
.corner.tr { top: -2px; right: -2px; border-top: 3px solid var(--cyan); border-right: 3px solid var(--cyan); border-radius: 0 16px 0 0; }
.corner.bl { bottom: -2px; left: -2px; border-bottom: 3px solid var(--cyan); border-left: 3px solid var(--cyan); border-radius: 0 0 0 16px; }
.corner.br { bottom: -2px; right: -2px; border-bottom: 3px solid var(--cyan); border-right: 3px solid var(--cyan); border-radius: 0 0 16px 0; }

/* ================= 页面顶部居中标题 ================= */
.page-header {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 10; text-align: center; width: 100%; pointer-events: none;
}
.page-header h1 {
  font-size: 36px;
  font-family: "YouSheBiaoTiHei", "Alibaba PuHuiTi 2.0", "Microsoft YaHei", sans-serif;
  font-weight: normal;   /* 标题黑本身字重已足，避免浏览器再仿粗变形 */
  letter-spacing: 6px;
  background: linear-gradient(180deg, #ffffff 28%, #8fd0ff 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 28px rgba(53, 198, 255, 0.35);
}
.page-header .sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 14px;
  font-size: 13px; font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: 6px; color: var(--text-dim); font-weight: 300;
}
.page-header .sub::before, .page-header .sub::after {
  content: ""; width: 100px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,198,255,0.75));
}
.page-header .sub::after { background: linear-gradient(90deg, rgba(53,198,255,0.75), transparent); }
.page-header .sub .diamond { color: rgba(53,198,255,0.85); font-size: 9px; letter-spacing: 0; }

.sec-title {
  font-size: 16px; font-weight: 600; letter-spacing: 3px; color: #cfe6ff;
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.sec-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), #1e7fff);
  box-shadow: 0 0 8px rgba(53,198,255,0.7);
}

.field-label { font-size: 13.5px; color: var(--text-dim); margin: 0 0 8px 2px; letter-spacing: 2px; }
.input-box {
  display: flex; align-items: center; gap: 12px;
  background: rgba(6, 18, 40, 0.85);
  border: 1px solid rgba(64, 156, 255, 0.32);
  border-radius: 8px;
  padding: 0 16px; height: 50px;
  transition: all .25s;
}
.input-box:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(53, 198, 255, 0.28), inset 0 0 10px rgba(53,198,255,0.06);
}
.input-box .f-ico { font-size: 17px; width: 22px; text-align: center; filter: grayscale(0.15); }
.input-box .f-ico-svg {
  flex: none; width: 20px; height: 20px; margin: 0 1px;
  color: #8fb3d9;                                  /* 灰蓝单色人形图标，不受 emoji 字体影响 */
}
/* 浏览器 autofill（历史记录/记住密码）强加的黄蓝底色覆盖：
   用不透明内阴影把输入框内部整块染成卡片深色，文字/光标强制为页面配色，
   并用超长过渡抑制 Chrome 的背景闪烁，视觉上与正常状态完全一致 */
.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus,
.input-box input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(6, 18, 40, 0.95) inset;
  -webkit-text-fill-color: #eaf5ff;
  caret-color: #eaf5ff;
  border-radius: 8px;
  transition: background-color 999999s ease-in-out 0s;
}
.input-box input {
  flex: 1; height: 100%; min-width: 0;
  background: transparent; border: none; outline: none;
  color: #eaf5ff; font-size: 15px; letter-spacing: 1.5px;
}
.input-box input::placeholder { color: #52739e; letter-spacing: 2px; }
.gap { height: 20px; }

.btn-login {
  width: 100%; height: 52px; margin-top: 32px;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit;
  font-size: 19px; font-weight: 600; letter-spacing: 16px; text-indent: 16px;
  color: #04223f;
  background: linear-gradient(90deg, #38c6ff 0%, #6bd8ff 50%, #38c6ff 100%);
  box-shadow: 0 0 26px rgba(53, 198, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: all .25s;
}
.btn-login:hover { filter: brightness(1.1); box-shadow: 0 0 38px rgba(53, 198, 255, 0.75), inset 0 1px 0 rgba(255,255,255,0.55); }
.btn-login:active { transform: scale(0.985); }

.status-row { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }
.status-tag {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #8fe8b7; letter-spacing: 1px;
  background: rgba(20, 90, 60, 0.22);
  border: 1px solid rgba(60, 200, 130, 0.35);
  border-radius: 4px; padding: 7px 16px;
}
.status-tag.sync { color: #8fdcff; background: rgba(20, 70, 110, 0.22); border-color: rgba(53, 198, 255, 0.38); }
.status-tag .st-word { color: #ffffff; font-weight: 600; margin-left: 4px; }
.c-sep { color: rgba(53, 198, 255, 0.45); margin: 0 12px; }
.copyright a { color: inherit; text-decoration: none; transition: color .2s; }
.copyright a:hover { color: #8fdcff; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.status-tag.ok .dot { background: #34d399; animation: blinkGreen 1.5s ease-in-out infinite; }
.status-tag.sync .dot { background: #35c6ff; animation: blinkBlue 1.5s ease-in-out infinite; }
@keyframes blinkGreen {
  0%, 100% { opacity: 1; box-shadow: 0 0 9px 1px #34d399; }
  50% { opacity: 0.2; box-shadow: 0 0 2px #34d399; }
}
@keyframes blinkBlue {
  0%, 100% { opacity: 1; box-shadow: 0 0 9px 1px #35c6ff; }
  50% { opacity: 0.2; box-shadow: 0 0 2px #35c6ff; }
}

/* ================= 底部信息条 ================= */
.footer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 14px 20px 18px;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(5, 14, 34, 0.85) 40%);
}
.footer-info {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 14px; color: #b9d4f2; letter-spacing: 1.5px;
  background: rgba(9, 26, 56, 0.75);
  border: 1px solid rgba(53, 198, 255, 0.25);
  border-radius: 6px;
  padding: 9px 34px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.footer-info .sep { color: rgba(53,198,255,0.5); }
.footer-info b { color: #fff; font-weight: 600; }
.copyright { margin-top: 9px; font-size: 12.5px; color: #4c6690; letter-spacing: 3px; }
/* 底部「建议分辨率」：与版权同一行，青色高亮便于识别 */
.copyright .res { color: #8fd0ff; font-weight: 600; letter-spacing: 1px; }

/* ===========================================================
 * 本项目补充：错误提示 / 验证码 / 状态异常态 / 窄屏兜底
 * =========================================================== */
.alert {
  padding: 10px 14px; margin-bottom: 16px; border-radius: 6px;
  font-size: 13px; letter-spacing: 1px; border: 1px solid transparent;
}
.alert.err { color: #ffc9d4; background: rgba(255, 77, 109, .12); border-color: rgba(255, 77, 109, .38); }
.alert.ok  { color: #b9ffe8; background: rgba(34, 211, 166, .12); border-color: rgba(34, 211, 166, .38); }

/* 验证码：输入框右侧图片 */
.input-box.captcha { padding-right: 6px; }
.input-box .captcha-img {
  flex: none; height: 38px; width: 104px; border-radius: 6px; cursor: pointer;
  background: #0b1c38; border: 1px solid rgba(53, 198, 255, .35);
}

/* 状态标签：异常 / 告警态（黄） */
.status-tag.warn { color: #ffd76a; background: rgba(120, 84, 10, .22); border-color: rgba(255, 200, 80, .40); }
.status-tag.warn .dot { background: #ffd76a; animation: blinkYellow 1.5s ease-in-out infinite; }
@keyframes blinkYellow {
  0%, 100% { opacity: 1; box-shadow: 0 0 9px 1px #ffd76a; }
  50% { opacity: .2; box-shadow: 0 0 2px #ffd76a; }
}

/* 状态标签：时间不同步（红，比黄色告警更醒目，闪烁更快） */
.status-tag.bad {
  color: #ff8fa3;
  background: rgba(130, 20, 42, .30);
  border-color: rgba(255, 77, 109, .65);
  box-shadow: 0 0 14px rgba(255, 77, 109, .30), inset 0 0 12px rgba(255, 77, 109, .12);
  animation: glowRed 1.6s ease-in-out infinite;
}
.status-tag.bad .dot { background: #ff4d6d; animation: blinkRed 1s ease-in-out infinite; }
.status-tag.bad .st-word { color: #ff5f7b; }
@keyframes blinkRed {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px 2px #ff4d6d; }
  50% { opacity: .2; box-shadow: 0 0 3px #ff4d6d; }
}
@keyframes glowRed {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 77, 109, .22), inset 0 0 10px rgba(255, 77, 109, .08); }
  50% { box-shadow: 0 0 20px rgba(255, 77, 109, .45), inset 0 0 16px rgba(255, 77, 109, .18); }
}

/* 窄屏兜底：去掉固定定位与左右广告栏，保证登录卡片完整可见 */
@media (max-width: 1280px) {
  body { min-width: 0; overflow: auto; }
  .side-col { display: none; }
  .page-header { position: static; transform: none; padding-top: 56px; }
  .login-wrap { position: static; transform: none; width: 560px; max-width: 100%; margin: 28px auto 24px; }
  .footer-bar { position: static; margin-top: 10px; }
}