:root{
  --navy:#0A2540;
  --navy2:#0F3A63;
  --teal:#10B981;
  --teal-dark:#0E9A6E;
  --amber:#F5A623;
  --ink:#1F2A37;
  --muted:#5B6B7B;
  --line:#E4EBF2;
  --bg:#F6F9FC;
  --card:#FFFFFF;
  --shadow:0 8px 30px rgba(10,37,64,.08);
  --shadow-lg:0 18px 50px rgba(10,37,64,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{text-decoration:none;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.tag{display:inline-block;font-size:12.5px;letter-spacing:.12em;color:var(--teal-dark);font-weight:700;text-transform:uppercase}

/* sub nav */
header.subnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.subnav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:16px}
.brand .dot{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;display:grid;place-items:center;font-size:14px}
.back{font-size:13.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.back:hover{color:var(--navy)}

/* page hero */
.phero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:46px 0 54px;position:relative;overflow:hidden}
.phero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 78% 10%,#000,transparent 68%)}
.phero .wrap{position:relative;z-index:2}
.phero .ic{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--teal),#34D399);color:#063;display:grid;place-items:center;font-size:26px;margin-bottom:14px}
.phero h1{font-size:32px;font-weight:800;margin:6px 0 6px}
.phero .role{color:#7FE3C0;font-weight:700;font-size:14px;margin-bottom:10px}
.phero p{color:#D6E4F0;max-width:680px;font-size:15.5px}

/* kpi */
section{padding:48px 0}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:22px;color:var(--navy);font-weight:800;margin-top:6px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.kpi .n{font-size:28px;font-weight:800;color:var(--navy)}
.kpi .n span{font-size:16px;color:var(--teal-dark)}
.kpi .l{font-size:13px;color:var(--muted);margin-top:4px}

/* modules */
.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.modules{grid-template-columns:1fr}}
.mod{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);display:flex;gap:14px;transition:.2s}
.mod:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.mod .mi{flex:0 0 40px;height:40px;border-radius:10px;background:#EAF1F8;display:grid;place-items:center;font-size:19px}
.mod h4{font-size:15.5px;color:var(--navy);margin-bottom:4px}
.mod p{font-size:13px;color:var(--muted)}

/* table */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.panel .ph{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);font-size:15px;display:flex;justify-content:space-between;align-items:center}
.panel .ph .pill{font-size:12px;font-weight:700;color:var(--teal-dark);background:#E7F8F0;padding:4px 10px;border-radius:999px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#F3F7FB;color:var(--muted);font-weight:700;font-size:12.5px;letter-spacing:.02em}
tbody tr:hover{background:#FAFCFE}
td .st{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.st-ok{background:#E7F8F0;color:var(--teal-dark)}
.st-wait{background:#FEF3E0;color:#C77B12}
.st-run{background:#EAF1F8;color:var(--navy)}

/* note */
.note{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:18px 20px;color:var(--muted);font-size:13.5px;margin-top:18px}
.note b{color:var(--navy)}

footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;text-align:center}

/* system nav strip（全站联动导航） */
.sysnav{background:#fff;border-bottom:1px solid var(--line)}
.sysnav-inner{display:flex;gap:14px;align-items:center;height:44px;overflow-x:auto;font-size:13px;white-space:nowrap}
.sysnav a{color:var(--muted);font-weight:600}
.sysnav a:hover{color:var(--navy)}
.sysnav .cur{color:var(--navy);font-weight:800}
.openbtn{background:var(--teal);color:#fff;border:none;padding:6px 12px;border-radius:8px;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}
.openbtn:hover{background:var(--teal-dark)}

/* 子系统直接开单面板 */
.openpanel{background:linear-gradient(160deg,#fff,#F2FBF7);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.oph{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.oph h3{font-size:17px;color:var(--navy);font-weight:800}
.otag{background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;letter-spacing:.05em}
.ochan{margin-left:auto;font-size:12px;color:var(--teal-dark);background:#E7F8F0;padding:3px 10px;border-radius:20px;font-weight:700}
.ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ogrid label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ogrid select,.ogrid input{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.ogrid input[readonly]{background:#F1F5F9;color:var(--navy)}
.oact{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.obtn{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border:none;padding:10px 18px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(16,185,129,.28)}
.obtn:hover{filter:brightness(1.05)}
.olive{font-size:12.5px;font-weight:700;color:var(--muted)}
.split{margin-top:12px;font-size:13px;color:var(--teal-dark);font-weight:700;background:#E7F8F0;border-radius:10px;padding:10px 12px}
.frow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line)}
.frow:last-child{border-bottom:none}
.fsub{font-size:12px;color:var(--muted)}
.fact{display:flex;align-items:center;gap:10px}
.famt{font-weight:800;color:var(--navy);font-size:15px}
.obtn.sm{padding:7px 13px;font-size:12.5px;box-shadow:none}
.obtn.sm.ok{background:linear-gradient(135deg,var(--navy),var(--navy2))}
.obtn.sm.ok:hover{filter:brightness(1.1)}

/* === 内联 style 迁移工具类（去 CSP unsafe-inline 专项 v2.3） === */
/* 这些类替代原 HTML 中的内联 style="..." 属性，使 CSP style-src 可去掉 'unsafe-inline' */
.hidden{display:none}
.block{display:block}
.center{text-align:center}
.flex{display:flex}
.flex-wrap{display:flex;flex-wrap:wrap}
.flex-gap-10{display:flex;gap:10px}
.flex-gap-24{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.flex-sb-12{display:flex;justify-content:space-between;gap:12px}
.muted{color:var(--muted)}
.t12{font-size:12px}
.t13{font-size:13px}
.fz20{font-size:20px}
.fz42{font-size:42px}
.fw600{font-weight:600}
.fw700{font-weight:700}
.fw800{font-weight:800}
.navy{color:var(--navy)}
.teal-d{color:var(--teal-dark);font-weight:700}
.c-light-teal{color:#7FE3C0}
.c-note-soft{color:#9fb4c6;font-size:14px;line-height:1.7;margin:0}
.mt-0{margin-top:0}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}
.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}
.m-4-0{margin:4px 0}
.m-22-0-4{margin:22px 0 4px}
.m-10-0-4{margin:10px 0 4px}
.ml-8{margin-left:8px}
.pad-6-16-16{padding:6px 16px 16px}
.pad-12{padding:12px}
.pad-14-16{padding:14px 16px}
.pad-16-18{padding:16px 18px}
.pad-16-20{padding:16px 20px}
.pad-18-20{padding:18px 20px}
.pad-22{padding:22px}
.pad-24{padding:24px}
.pad-8-16{padding:8px 16px}
.pad-12-22{padding:12px 22px}
.pad-13-26{padding:13px 26px}
.of-auto{overflow:auto}
.of-max320{max-height:320px;overflow:auto}
.w-auto{width:auto}
.w-48{width:48px}
.w-60{width:60px}
.w-63{width:63%}
.w-200{width:200px}
.fx-120{flex:0 0 120px}
.fx-160{flex:0 0 160px}
.fx-180{flex:0 0 180px}
.fx-200{flex:0 0 200px}
.bd-none{border:none}
.text-white{color:#fff}
.bg-white-top{background:#fff;border-top:1px solid var(--line)}
.bg-white-both{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bg-soft{background:#F3F7FB}
.bg-soft2{background:#EAF1F8;color:var(--navy)}
.bg-warn-red{background:#FDECEA;color:#C0392B}
.bg-teal{background:var(--teal)}
.cta-teal{background:var(--teal);color:#fff;padding:13px 26px;border-radius:12px;font-weight:800;display:inline-block}
.cta-block{display:block;text-align:center;background:var(--teal);color:#fff;padding:12px;border-radius:10px;font-weight:700;margin-top:18px}
.denied-card{text-align:center;max-width:440px;padding:32px;background:#0f2a45;border:1px solid #1d3a59;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.denied-btn{margin-top:18px;padding:10px 22px;border:1px solid #1d3a59;background:#16324f;color:#e8f1f8;border-radius:9px;cursor:pointer;font-size:14px}

/* === H5 移动端适配（前台业务页，2026-09-21） === */
/* 仅作用于前台公共骨架（subnav/phero/section/sysnav），后台页自带布局不受影响 */
@media(max-width:600px){
  .wrap{padding:0 14px}
  section{padding:28px 0}
  header.subnav{position:sticky;top:0}
  .subnav-inner{height:52px;gap:8px}
  .brand{font-size:14.5px;white-space:nowrap}
  .brand .dot{width:24px;height:24px;font-size:12px}
  .back{font-size:12.5px;white-space:nowrap}
  .phero{padding:28px 0 34px}
  .phero h1{font-size:23px}
  .phero p{font-size:13.5px}
  .phero .ic{width:46px;height:46px;font-size:22px}
  .sec-head h2{font-size:19px}
  .sysnav-inner{gap:10px;height:42px;font-size:12.5px;-webkit-overflow-scrolling:touch}
  .kpis{gap:10px}
  .kpi{padding:14px}
  .kpi .n{font-size:22px}
  .modules{gap:10px}
  .mod{padding:14px;flex-direction:column;gap:8px}
  .openpanel{padding:16px 14px}
  .ogrid{grid-template-columns:repeat(2,1fr)}
  .oact{gap:10px}
  .obtn{flex:1;min-width:140px;text-align:center}
  .panel .ph{padding:13px 14px;flex-wrap:wrap;gap:8px}
  th,td{padding:10px 12px}
  .cta-teal{display:block;text-align:center;padding:13px 16px}
  footer{padding:18px 0;font-size:11.5px}
}