* { box-sizing: border-box; }
html, body {
margin: 0; height: 100%; overflow: hidden;
font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
color: #0f172a; background: #eef3fa;
-webkit-font-smoothing: antialiased;
}
#bg {
position: fixed; inset: 0;
background:
radial-gradient(1100px 620px at 50% -12%, #ffffff 0%, rgba(255,255,255,0) 62%),
radial-gradient(900px 520px at 88% 104%, #e2eeff 0%, rgba(226,238,255,0) 70%),
linear-gradient(180deg, #f8fbff 0%, #e9f0f9 100%);
}
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.card {
background: rgba(255,255,255,.9);
border: 1px solid rgba(15,23,42,.07);
border-radius: 16px;
box-shadow: 0 14px 34px -22px rgba(15,23,42,.4);
backdrop-filter: blur(14px) saturate(1.05);
}
/* ============ 顶栏 ============ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 20;
background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(15,23,42,.06);
display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.logo-box {
width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
background: linear-gradient(135deg, #2563eb, #0ea5e9);
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px;
box-shadow: 0 6px 14px -6px rgba(37,99,235,.85);
}
.brand { font-size: 15.5px; font-weight: 800; letter-spacing: -0.2px; white-space: nowrap; }
.brand em { font-style: normal; color: #2563eb; }
.brand small { display: block; font-size: 9.5px; font-weight: 600; color: #94a3b8; letter-spacing: 1.5px; margin-top: -1px; }
.search {
flex: 0 1 340px; display: flex; align-items: center; gap: 8px;
background: #f1f5fb; border: 1px solid rgba(15,23,42,.06); border-radius: 10px;
height: 36px; padding: 0 12px; color: #94a3b8; font-size: 12px;
}
.search svg { flex: 0 0 auto; }
.search kbd {
margin-left: auto; font-family: ui-monospace, monospace; font-size: 10px;
background: #fff; border: 1px solid rgba(15,23,42,.1); border-radius: 5px; padding: 1px 6px; color: #94a3b8;
}
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.env {
display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
background: #f1f5fb; border-radius: 10px; font-size: 12px; font-weight: 600; color: #334155;
cursor: default; white-space: nowrap;
}
.env i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg,#2563eb,#60a5fa); display: inline-block; }
.env small { color: #94a3b8; font-weight: 500; }
.livechip {
display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #059669;
background: rgba(16,185,129,.09); padding: 7px 11px; border-radius: 10px; white-space: nowrap;
}
.livechip i { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: beat 1.6s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5);} 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0);} 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0);} }
.clock { font-size: 12.5px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
.fdechip {
font-size: 11px; font-weight: 700; padding: 7px 11px; border-radius: 10px; white-space: nowrap;
color: #64748b; background: #f1f5fb; transition: all .25s ease;
}
.fdechip.on { color: #be123c; background: rgba(244,63,94,.1); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.avatar {
width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff;
display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.uname { font-size: 11.5px; font-weight: 600; color: #334155; line-height: 1.25; white-space: nowrap; }
.uname small { display: block; font-weight: 500; color: #94a3b8; font-size: 10px; }
/* ============ KPI 卡 ============ */
.kpis { position: fixed; top: 72px; left: 18px; right: 360px; z-index: 15; display: flex; gap: 10px; pointer-events: none; }
.kpi {
flex: 1; min-width: 0; pointer-events: auto;
display: flex; align-items: center; gap: 10px; padding: 11px 13px;
}
.kpi .ic { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; }
.kpi .k { font-size: 10.5px; color: #94a3b8; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.kpi .v { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .v .u { font-size: 10px; font-weight: 600; color: #94a3b8; margin-left: 1px; }
.kpi .sub { font-size: 9.5px; color: #94a3b8; white-space: nowrap; }
.kpi .sub b { color: #059669; font-weight: 700; }
.kpi .sub b.down { color: #e11d48; }
/* ============ 左：阶段列表 ============ */
.leftpanel { position: fixed; left: 18px; top: 146px; bottom: 178px; width: 248px; z-index: 15; display: flex; flex-direction: column; overflow: hidden; }
.panel-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 9px; }
.panel-hd .t { font-size: 12.5px; font-weight: 800; }
.panel-hd .t small { font-weight: 600; color: #94a3b8; margin-left: 5px; font-size: 10px; }
.stage-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #dbe3ee transparent; }
.stage-list::-webkit-scrollbar { width: 5px; }
.stage-list::-webkit-scrollbar-thumb { background: #dbe3ee; border-radius: 3px; }
.stage { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; cursor: pointer; position: relative; transition: background .18s ease; }
.stage:hover { background: rgba(37,99,235,.055); }
.stage.sel { background: rgba(37,99,235,.1); box-shadow: inset 0 0 0 1px rgba(37,99,235,.18); }
.stage .idx {
flex: 0 0 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
font-size: 10px; font-weight: 800; background: #eef2f8; color: #94a3b8; transition: all .2s ease;
}
.stage .meta { flex: 1; min-width: 0; }
.stage .nm { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .cd { font-size: 9px; color: #94a3b8; font-family: ui-monospace, Consolas, monospace; margin-top: 1px; display: flex; gap: 4px; }
.stage .cd b { color: #cbd5e1; font-weight: 400; }
.pill { flex: 0 0 auto; font-size: 9px; padding: 2.5px 7px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-weight: 700; transition: all .2s ease; }
.pill.running { background: rgba(37,99,235,.1); color: #1d4ed8; }
.pill.done { background: rgba(16,185,129,.12); color: #047857; }
.pill.fde { background: rgba(244,63,94,.12); color: #be123c; }
.stage.running .idx { background: rgba(37,99,235,.12); color: #1d4ed8; }
.stage.done .idx { background: rgba(16,185,129,.13); color: #047857; }
.stage.fde .idx { background: rgba(244,63,94,.13); color: #be123c; }
.stage.running::before, .stage.fde::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px; border-radius: 2px;
}
.stage.running::before { background: #2563eb; }
.stage.fde::before { background: #f43f5e; }
/* ============ 右：详情 + 事件流 ============ */
.rightpanel { position: fixed; right: 18px; top: 72px; bottom: 178px; width: 326px; z-index: 15; display: flex; flex-direction: column; gap: 10px; }
.detail-card { padding: 14px 15px 13px; }
.dc-hd { display: flex; align-items: center; gap: 9px; }
.dc-hd .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.dc-hd b { font-size: 14px; font-weight: 800; letter-spacing: -0.2px; }
.badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(37,99,235,.1); color: #1d4ed8; }
.badge.done { background: rgba(16,185,129,.12); color: #047857; }
.badge.fde { background: rgba(244,63,94,.12); color: #be123c; }
.badge.pending { background: #f1f5f9; color: #94a3b8; }
.dc-code { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: #94a3b8; margin: 5px 0 10px 43px; }
.dc-prog-hd { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748b; font-weight: 600; margin-bottom: 5px; }
.dc-prog-hd b { color: #0f172a; font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 4px; background: #e8edf6; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #2563eb, #3b82f6); transition: width .25s ease; }
.kv { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.kv div { font-size: 10.5px; color: #94a3b8; min-width: 0; }
.kv div b { display: block; color: #0f172a; font-weight: 650; font-size: 11.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-btn {
margin-top: 12px; width: 100%; border: 0; cursor: pointer; font-family: inherit;
background: #2563eb; color: #fff; font-size: 12px; font-weight: 700;
padding: 10px; border-radius: 11px; box-shadow: 0 10px 18px -10px rgba(37,99,235,.9);
transition: background .16s ease;
}
.dc-btn:hover { background: #1d4ed8; }
.logcard { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 90px; }
.log { flex: 1; overflow-y: auto; padding: 2px 10px 10px 12px; scrollbar-width: thin; scrollbar-color: #dbe3ee transparent; }
.log::-webkit-scrollbar { width: 5px; }
.log::-webkit-scrollbar-thumb { background: #dbe3ee; border-radius: 3px; }
.row { padding: 6px 0 6px 8px; border-left: 2px solid rgba(15,23,42,.07); animation: slideIn .32s cubic-bezier(.22,.8,.3,1); }
.row.ok { border-left-color: #10b981; }
.row.info { border-left-color: #93b4e6; }
.row.warn { border-left-color: #f59e0b; background: rgba(245,158,11,.05); }
.row.fde { border-left-color: #f43f5e; background: rgba(244,63,94,.055); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.row .l1 { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.row .ts { font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; color: #b6c2d4; font-variant-numeric: tabular-nums; }
.row code { font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; padding: 1.5px 5px; border-radius: 4px; background: rgba(37,99,235,.08); color: #1d4ed8; }
.row.ok code { background: rgba(16,185,129,.1); color: #047857; }
.row.warn code { background: rgba(245,158,11,.13); color: #b45309; }
.row.fde code { background: rgba(244,63,94,.11); color: #be123c; }
.row .msg { font-size: 11px; color: #334155; line-height: 1.45; }
/* ============ 底部流程条 ============ */
.bottombar {
position: fixed; left: 18px; right: 18px; bottom: 14px; height: 132px; z-index: 15;
display: flex; gap: 14px; padding: 14px 18px; align-items: stretch;
}
.bb-phases { flex: 1.35; min-width: 0; display: flex; flex-direction: column; }
.bb-title { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.bb-title .ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(37,99,235,.1); display: grid; place-items: center; color: #2563eb; }
.bb-title small { font-weight: 600; color: #94a3b8; font-size: 10px; }
.stepper { display: flex; align-items: flex-start; margin-top: 16px; flex: 1; }
.step { flex: 1; position: relative; text-align: center; }
.step .dot2 {
width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
background: #eef2f8; color: #94a3b8; border: 2px solid #e2e8f2; position: relative; z-index: 2;
transition: all .3s ease;
}
.step::before {
content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 2.5px;
background: #e2e8f2; z-index: 1;
}
.step:first-child::before { display: none; }
.step.active .dot2 { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 0 0 5px rgba(37,99,235,.14); }
.step.done .dot2 { background: #10b981; border-color: #10b981; color: #fff; }
.step.done::before, .step.active::before { background: #10b981; }
.step .sn { font-size: 10.5px; font-weight: 700; margin-top: 6px; color: #475569; }
.step .ss { font-size: 9px; color: #94a3b8; margin-top: 1px; }
.step.active .sn { color: #1d4ed8; }
.step.active .ss { color: #2563eb; font-weight: 700; }
.bb-current {
flex: .9; min-width: 168px; border: 1px solid rgba(15,23,42,.07); border-radius: 13px;
padding: 10px 13px; display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.bb-k { font-size: 9.5px; font-weight: 700; color: #94a3b8; letter-spacing: .6px; }
.bb-current b { font-size: 13px; font-weight: 800; }
.bb-current .cd2 { font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; color: #94a3b8; }
.mini-bar { height: 5px; border-radius: 3px; background: #e8edf6; overflow: hidden; margin-top: 4px; }
.mini-bar i { display: block; height: 100%; width: 0%; background: #2563eb; border-radius: 3px; transition: width .2s linear; }
.bb-next { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.bb-next .hd { display: flex; justify-content: space-between; align-items: baseline; }
.bb-next .hd span { font-size: 9.5px; font-weight: 700; color: #94a3b8; letter-spacing: .6px; }
.bb-next .hd a { font-size: 10px; color: #2563eb; font-weight: 700; text-decoration: none; cursor: pointer; }
.nxt { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.nxt .nic { width: 26px; height: 26px; border-radius: 8px; background: #eef2f8; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #64748b; flex: 0 0 auto; }
.nxt .nn { flex: 1; min-width: 0; font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxt .nn small { display: block; font-family: ui-monospace, monospace; font-size: 8.5px; color: #94a3b8; font-weight: 500; }
.chip2 { font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; flex: 0 0 auto; }
.chip2.soon { background: rgba(37,99,235,.09); color: #1d4ed8; }
.hint { position: fixed; left: 20px; bottom: 158px; z-index: 14; font-size: 10px; color: #a2aec1; }
.hint b { color: #64748b; font-weight: 650; }
@media (max-width: 1280px) {
.search { display: none; }
.leftpanel { width: 226px; }
.rightpanel { width: 296px; }
.kpis { right: 332px; }
}
@media (max-width: 1020px) {
.leftpanel { display: none; }
.bb-current { display: none; }
.uname { display: none; }
.hint { display: none; }
}