/* ===== 登录门户 · 全屏沉浸式指挥中心（大气版）===== */
:root{ --bg0:#040c1e; --cyan:#00e5ff; --blue:#3b8cff; --green:#22d3a6; --gold:#ffb02e;
  --ink:#eaf3ff; --text:#cfe3ff; --sub:#90abd6; --dim:#6f8bbd; --line:rgba(70,128,224,.24); }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; background:var(--bg0); }
body{ font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--text);
  -webkit-font-smoothing:antialiased; overflow:hidden; }

/* 背景层 */
.pt-bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1400px 760px at 78% -14%, rgba(36,92,200,.42), transparent 58%),
    radial-gradient(1100px 620px at 6% 116%, rgba(20,64,150,.36), transparent 58%),
    var(--bg0); }
.pt-bg::before{ content:""; position:absolute; inset:0; opacity:.55;
  background:linear-gradient(rgba(80,140,255,.045) 1px,transparent 1px) 0 0/58px 58px,
            linear-gradient(90deg,rgba(80,140,255,.045) 1px,transparent 1px) 0 0/58px 58px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000,transparent 82%); }
.pt-bg .orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.pt-bg .o1{ width:520px; height:520px; background:rgba(0,120,255,.35); left:-6%; top:6%; }
.pt-bg .o2{ width:420px; height:420px; background:rgba(0,229,255,.22); right:2%; bottom:-4%; }
.pt-bg .scan{ position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),transparent);
  animation:scan 9s linear infinite; }
@keyframes scan{ 0%{ top:0; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ top:100%; opacity:0 } }

/* 主容器：占满全屏 */
.pt{ position:relative; z-index:1; height:100vh; display:flex; flex-direction:column;
  padding:30px 56px 26px; }

/* 顶栏 */
.pt-top{ display:flex; align-items:center; flex:none; padding-bottom:18px;
  border-bottom:1px solid var(--line); position:relative; }
.pt-top::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.7),transparent); }
.pt-top .em{ width:54px; height:54px; border-radius:50%; flex:none; margin-right:16px;
  background:radial-gradient(circle at 50% 40%,#ffd36b,#e8a020); color:#b3340f; font-weight:800; font-size:28px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 26px rgba(255,180,40,.55); }
.pt-top h1{ font-size:27px; font-weight:800; color:#fff; letter-spacing:1.5px; line-height:1.2; }
.pt-top .en{ font-size:11px; letter-spacing:4px; color:var(--dim); margin-top:4px; }
.pt-top .clock{ margin-left:auto; text-align:right; }
.pt-top .clock .t{ font-size:30px; font-weight:700; color:#eaf3ff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(0,229,255,.45); line-height:1; }
.pt-top .clock .d{ font-size:12.5px; color:var(--sub); letter-spacing:1px; margin-top:6px; }

/* 主体 hero */
.pt-hero{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:8px 0; min-height:0; }
.pt-badge{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--cyan);
  border:1px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08); padding:6px 18px; border-radius:30px;
  letter-spacing:2px; }
.pt-title{ font-size:54px; font-weight:800; color:#fff; letter-spacing:3px; margin-top:22px; line-height:1.15;
  background:linear-gradient(180deg,#fff,#9fd0ff); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-shadow:0 4px 40px rgba(60,140,255,.3); }
.pt-sub{ font-size:17px; color:var(--sub); margin-top:18px; letter-spacing:1px; max-width:880px; line-height:1.8; }
.pt-sub b{ color:#bfe0ff; font-weight:600; }

/* KPI 大数字条 */
.pt-kpis{ display:flex; gap:46px; margin-top:34px; padding:20px 44px; border-radius:14px;
  background:linear-gradient(180deg,rgba(20,42,88,.5),rgba(10,22,46,.5)); border:1px solid var(--line);
  backdrop-filter:blur(4px); position:relative; }
.pt-kpis::before,.pt-kpis::after{ content:""; position:absolute; width:14px; height:14px; }
.pt-kpis::before{ left:-1px; top:-1px; border-left:2px solid var(--cyan); border-top:2px solid var(--cyan); }
.pt-kpis::after{ right:-1px; bottom:-1px; border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan); }
.pt-kpi{ text-align:center; }
.pt-kpi .n{ font-size:42px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#74c2ff); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }
.pt-kpi .n small{ font-size:18px; -webkit-text-fill-color:var(--sub); }
.pt-kpi .l{ font-size:13px; color:var(--sub); margin-top:10px; letter-spacing:1px; }
.pt-kpi.gold .n{ background:linear-gradient(180deg,#fff,#ffce6b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pt-kpi.green .n{ background:linear-gradient(180deg,#fff,#66e6b8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* 角色入口大磁贴 */
.pt-roles{ flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:6px; }
.role{ position:relative; overflow:hidden; border-radius:14px; padding:24px 24px 22px; cursor:pointer;
  background:linear-gradient(160deg,rgba(20,40,82,.66),rgba(10,22,46,.72)); border:1px solid var(--line);
  border-top:3px solid var(--c); transition:.18s; display:flex; flex-direction:column; }
.role::after{ content:"进入 →"; position:absolute; right:22px; bottom:20px; font-size:13px; color:var(--dim); transition:.18s; }
.role:hover{ transform:translateY(-4px); border-color:var(--c);
  box-shadow:0 18px 44px rgba(0,120,255,.28), inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent); }
.role:hover::after{ color:var(--c); right:18px; }
.role .ic{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:27px; color:#fff; background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c),#000 26%));
  box-shadow:0 10px 24px color-mix(in srgb,var(--c) 40%,transparent); margin-bottom:16px; }
.role .nm{ font-size:21px; font-weight:800; color:#fff; }
.role .ds{ font-size:13px; color:var(--sub); margin-top:8px; line-height:1.6; }

.pt-foot{ flex:none; text-align:center; font-size:12px; color:var(--dim); letter-spacing:1px; padding-top:18px; }
.pt-foot b{ color:var(--sub); }

/* ===== 手机自适配 ===== */
@media (max-width:900px){
  body{ overflow-y:auto; }
  .pt{ height:auto; min-height:100vh; padding:20px 18px 28px; }
  .pt-top{ flex-wrap:wrap; gap:10px; }
  .pt-top h1{ font-size:19px; letter-spacing:.5px; }
  .pt-top .em{ width:44px; height:44px; font-size:23px; }
  .pt-top .clock{ display:none; }
  .pt-hero{ padding:30px 0; }
  .pt-title{ font-size:30px; letter-spacing:1px; margin-top:16px; }
  .pt-sub{ font-size:14px; margin-top:14px; }
  .pt-kpis{ flex-wrap:wrap; gap:18px 28px; padding:18px 22px; margin-top:26px; justify-content:center; }
  .pt-kpi .n{ font-size:30px; }
  .pt-roles{ grid-template-columns:repeat(2,1fr); gap:13px; margin-top:26px; }
  .role{ padding:18px 16px; border-radius:12px; }
  .role::after{ display:none; }
  .role .ic{ width:46px; height:46px; font-size:23px; border-radius:12px; margin-bottom:12px; }
  .role .nm{ font-size:18px; }
}
@media (max-width:420px){
  .pt-roles{ grid-template-columns:1fr 1fr; }
  .pt-kpis{ gap:14px 22px; }
  .pt-kpi .n{ font-size:26px; }
  .pt-kpi .l{ font-size:11.5px; }
}