.flow-board-cockpit {
  --flow-cockpit-bg: #07101f;
  --flow-cockpit-panel: #0d1a2d;
  --flow-cockpit-panel-strong: #10233b;
  --flow-cockpit-line: #25445f;
  --flow-cockpit-cyan: #37d9ff;
  --flow-cockpit-blue: #2587e8;
  --flow-cockpit-purple: #7868ff;
  --flow-cockpit-green: #35d8a0;
  --flow-cockpit-orange: #ffad45;
  --flow-cockpit-red: #ff6868;
  --flow-cockpit-text: #e7f4ff;
  --flow-cockpit-muted: #91aac0;
  border-radius: 18px;
  color: var(--flow-cockpit-text);
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
.flow-board-cockpit .panel {
  border-color: var(--flow-cockpit-line);
  background: linear-gradient(180deg, rgba(15, 34, 57, .98), rgba(7, 16, 31, .98));
  box-shadow: 0 14px 34px rgba(4, 17, 30, .2), inset 0 1px rgba(255, 255, 255, .03);
}
.flow-board-summary { position: relative; margin-bottom: 16px; overflow: hidden; }
.flow-board-summary::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -180px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(55, 217, 255, .12), transparent 66%);
  pointer-events: none;
}
.flow-board-toolbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 12px; }
.flow-board-toolbar h2, .flow-board-toolbar p { margin: 0; }
.flow-board-toolbar h2 { color: #fff; letter-spacing: .02em; }
.flow-board-toolbar p { margin-top: 4px; color: var(--flow-cockpit-muted); font-size: 12px; }
.flow-refresh-state { display: flex; align-items: center; gap: 8px; color: var(--flow-cockpit-muted); font-size: 12px; }
.flow-refresh-state .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flow-cockpit-green); box-shadow: 0 0 10px rgba(53, 216, 160, .72); }
.flow-refresh-state .button { border-color: #2d6487; background: rgba(9, 29, 48, .76); color: #c9f5ff; padding: 7px 10px; }
.flow-refresh-state .button:hover { border-color: var(--flow-cockpit-cyan); color: #fff; }
.flow-scope-tabs { position: relative; z-index: 1; display: flex; gap: 9px; padding: 3px 20px 14px; overflow-x: auto; }
.flow-scope-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid #2a526f; border-radius: 20px; background: rgba(8, 25, 43, .82); color: #b8cde0; padding: 7px 10px 7px 13px; font-weight: 700; }
.flow-scope-tab:hover { border-color: #3b84af; color: #fff; }
.flow-scope-tab.active { border-color: var(--flow-cockpit-cyan); background: linear-gradient(135deg, rgba(17, 84, 123, .9), rgba(31, 78, 141, .9)); color: #fff; box-shadow: 0 0 16px rgba(55, 217, 255, .16); }
.flow-scope-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 12px; background: var(--flow-cockpit-blue); color: #fff; padding: 0 5px; font-size: 11px; line-height: 1; }
.flow-scope-tab.scope-decision .flow-scope-count { background: var(--flow-cockpit-red); box-shadow: 0 0 10px rgba(255, 104, 104, .28); }
.flow-scope-tab.scope-blocked .flow-scope-count { background: var(--flow-cockpit-orange); color: #351e00; box-shadow: 0 0 10px rgba(255, 173, 69, .24); }
.flow-stage-rail, .issue-flow-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.flow-stage-rail { position: relative; z-index: 1; padding: 0 16px 19px; }
.flow-stage-node { position: relative; min-width: 0; border: 0; background: transparent; color: #8faac0; padding: 7px 3px; text-align: center; }
.flow-stage-node::before { content: ""; position: absolute; z-index: 0; left: -50%; right: 50%; top: 23px; height: 2px; background: linear-gradient(90deg, #31516b, #28455d); }
.flow-stage-node:first-child::before { display: none; }
.flow-stage-index { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border: 1px solid #335a76; border-radius: 11px; background: var(--flow-cockpit-panel-strong); color: #9ab6ca; font-weight: 800; }
.flow-stage-node strong, .flow-stage-node small { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-stage-node strong { font-size: 13px; }
.flow-stage-node small { margin-top: 4px; color: #59dfff; font-size: 11px; }
.flow-stage-node:hover, .flow-stage-node.selected { color: #fff; }
.flow-stage-node.selected::before { background: linear-gradient(90deg, var(--flow-cockpit-purple), var(--flow-cockpit-cyan)); }
.flow-stage-node.selected .flow-stage-index { border-color: var(--flow-cockpit-cyan); background: linear-gradient(145deg, #0f5d8c, #214fa0); color: #fff; box-shadow: 0 0 0 4px rgba(55, 217, 255, .08), 0 0 18px rgba(55, 217, 255, .42); }
.flow-stage-panel .panel-header { align-items: flex-start; border-color: var(--flow-cockpit-line); }
.flow-stage-panel .panel-header h2 { color: #fff; }
.flow-stage-panel .panel-header p, .flow-stage-panel .panel-header small { margin: 4px 0 0; color: var(--flow-cockpit-muted); font-size: 12px; }
.flow-issue-list { display: grid; gap: 9px; padding: 12px; }
.flow-board-cockpit .empty { color: var(--flow-cockpit-muted); }
.flow-issue-card { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(260px, .9fr) minmax(190px, .55fr) auto; align-items: center; gap: 14px; border: 1px solid #254965; border-left: 5px solid var(--flow-cockpit-cyan); border-radius: 12px; background: rgba(8, 23, 40, .94); color: var(--flow-cockpit-text); padding: 12px 13px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.flow-issue-card:hover, .flow-issue-card:focus { transform: translateY(-2px); border-color: var(--flow-cockpit-cyan); box-shadow: 0 10px 26px rgba(2, 15, 28, .36), 0 0 14px rgba(55, 217, 255, .1); outline: none; }
.flow-issue-card.priority-major { border-left-color: var(--flow-cockpit-red); }
.flow-issue-card.priority-urgent { border-left-color: var(--flow-cockpit-orange); }
.flow-issue-summary { min-width: 0; }
.flow-current-label { display: block; margin-bottom: 5px; color: var(--flow-cockpit-cyan); font-size: 11px; font-weight: 800; }
.flow-issue-summary > strong, .flow-issue-summary > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-issue-summary > small { margin-top: 5px; color: var(--flow-cockpit-muted); font-size: 12px; }
.flow-branch-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.flow-branch-tag { max-width: 100%; border: 1px solid #2e6584; border-radius: 12px; background: rgba(32, 104, 139, .18); color: #8ceaff; padding: 3px 7px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-branch-tag.attention { border-color: #8c6230; background: rgba(157, 94, 18, .2); color: #ffc976; }
.flow-next-action { min-width: 0; border-left: 3px solid #2b536c; padding-left: 12px; }
.flow-next-action small, .flow-next-action strong, .flow-next-action span { display: block; }
.flow-next-action small, .flow-next-action span { color: var(--flow-cockpit-muted); font-size: 11px; }
.flow-next-action strong { margin: 4px 0; font-size: 13px; line-height: 1.45; }
.flow-sla { border: 1px solid #2d6685; border-radius: 9px; background: rgba(24, 92, 128, .2); color: #8deaff; padding: 9px; }
.flow-sla small, .flow-sla strong { display: block; }
.flow-sla small { font-size: 11px; }
.flow-sla strong { margin-top: 4px; font-size: 12px; }
.flow-sla.unset { border-color: #385065; background: rgba(91, 110, 126, .12); color: #a6b9c8; }
.flow-sla.dueSoon { border-color: #8b632f; background: rgba(154, 92, 17, .18); color: #ffc66d; }
.flow-sla.overdue { border-color: #874247; background: rgba(157, 41, 52, .18); color: #ff9292; }
.flow-open-hint { color: var(--flow-cockpit-cyan); font-size: 12px; font-weight: 800; white-space: nowrap; }
.flow-closed-panel { margin-top: 16px; }
.flow-closed-panel > summary { display: flex; justify-content: space-between; padding: 15px 18px; cursor: pointer; font-weight: 800; }
.flow-closed-panel > summary span { color: var(--flow-cockpit-muted); font-size: 12px; font-weight: 400; }
.flow-closed-panel .flow-issue-card { opacity: .82; }
.flow-load-warning { margin-bottom: 12px; border: 1px solid #8c6331; border-radius: 10px; background: #382714; color: #ffd38c; padding: 10px 12px; font-size: 12px; }

.business-flow-board {
  width: 100%;
  min-width: 0;
  color: #12354f;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
.business-flow-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.business-flow-heading h2, .business-flow-heading p { margin: 0; }
.business-flow-heading h2 { color: #0d3452; font-size: 25px; }
.business-flow-heading p { margin-top: 5px; color: #58768d; font-size: 12px; }
.business-flow-refresh { display: flex; align-items: center; gap: 8px; color: #5d778b; font-size: 12px; white-space: nowrap; }
.business-flow-refresh > span { width: 8px; height: 8px; border-radius: 50%; background: #19a779; box-shadow: 0 0 0 4px rgba(25, 167, 121, .1); }
.business-flow-refresh .button { padding: 7px 10px; color: #086db7; background: #fff; }
.business-flow-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(120px, auto) minmax(130px, auto) minmax(130px, auto) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid #d3e1eb;
  border-radius: 13px;
  background: #fff;
  padding: 14px;
}
.business-flow-search { position: relative; min-width: 0; }
.business-flow-search span { position: absolute; left: 11px; top: 50%; color: #7d94a6; transform: translateY(-50%); }
.business-flow-search input, .business-flow-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d2e0ea;
  border-radius: 9px;
  background: #fff;
  color: #173b56;
  font: inherit;
  padding: 9px 11px;
}
.business-flow-search input { padding-left: 34px; }
.business-flow-search input:focus, .business-flow-toolbar select:focus { border-color: #168ee0; outline: 3px solid rgba(22, 142, 224, .12); }
.business-flow-toolbar > .button { min-height: 42px; color: #0b6fb7; background: #fff; white-space: nowrap; }
.business-flow-result-count { color: #6a8194; font-size: 12px; white-space: nowrap; }
.business-flow-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 8px; }
.business-flow-columns { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; min-width: 1098px; }
.business-flow-column { min-height: 460px; border-radius: 13px; background: #eaf2f7; padding: 10px; }
.business-flow-column-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 11px; }
.business-flow-column-head strong { color: #113a58; font-size: 14px; }
.business-flow-column-head span { display: grid; place-items: center; min-width: 25px; height: 22px; border-radius: 12px; background: #fff; color: #123b58; padding: 0 7px; font: 800 12px Arial, sans-serif; }
.business-flow-card-list { display: grid; align-content: start; gap: 9px; }
.business-flow-card {
  min-width: 0;
  border: 1px solid #d5e2eb;
  border-left: 4px solid #3ca6dc;
  border-radius: 10px;
  background: #fff;
  color: #153c58;
  padding: 11px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 77, 110, .05);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.business-flow-card:hover, .business-flow-card:focus-visible { border-color: #70b8e5; box-shadow: 0 7px 17px rgba(31, 95, 137, .12); transform: translateY(-1px); outline: none; }
.business-flow-card.priority-major { border-left-color: #df4a4a; }
.business-flow-card.priority-urgent { border-left-color: #ee8a24; }
.business-flow-card-number { color: #0873be; font: 800 12px Arial, sans-serif; }
.business-flow-card h3 { margin: 6px 0 0; color: #103a58; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.business-flow-card p { margin: 6px 0 0; color: #657e91; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.business-flow-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.business-flow-tag { border-radius: 12px; padding: 3px 7px; font-size: 10px; font-weight: 700; }
.business-flow-tag.category { color: #0871b8; background: #e8f4fc; }
.business-flow-tag.priority.normal { color: #276b91; background: #eaf4fa; }
.business-flow-tag.priority.urgent, .business-flow-tag.due-soon { color: #a05b00; background: #fff0d9; }
.business-flow-tag.priority.major, .business-flow-tag.overdue { color: #b92e2e; background: #ffebeb; }
.business-flow-tag.impact { color: #966000; background: #fff5d8; }
.business-flow-card dl { display: grid; gap: 5px; margin: 9px 0 0; border-top: 1px solid #edf2f6; padding-top: 8px; }
.business-flow-card dl > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 7px; font-size: 10px; line-height: 1.4; }
.business-flow-card dt { color: #7890a2; }
.business-flow-card dd { min-width: 0; margin: 0; color: #355873; text-align: right; overflow-wrap: anywhere; }
.business-flow-empty { display: grid; min-height: 94px; place-items: center; color: #758a9a; font-size: 13px; }
.business-flow-warning { margin-bottom: 12px; border: 1px solid #efbd74; border-radius: 10px; background: #fff6e9; color: #925400; padding: 10px 12px; font-size: 12px; }

.detail-flow-wide { grid-column: 1 / -1; border: 1px solid #cfe1ee; border-radius: 13px; background: linear-gradient(180deg, #f8fcff, #fff); padding: 13px 14px; }
.issue-flow-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.issue-flow-heading > div:last-child { max-width: 52%; text-align: right; }
.issue-flow-heading strong, .issue-flow-heading small { display: block; }
.issue-flow-heading small { color: var(--muted); font-size: 11px; }
.issue-flow-heading strong { margin-top: 3px; font-size: 13px; }
.issue-flow-node { position: relative; min-width: 0; text-align: center; color: #7990a1; }
.issue-flow-node::before { content: ""; position: absolute; left: -50%; right: 50%; top: 14px; height: 3px; background: #dbe5ec; }
.issue-flow-node:first-child::before { display: none; }
.issue-flow-node span { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 6px; border: 3px solid #dbe5ec; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 800; }
.issue-flow-node strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.issue-flow-node.completed { color: var(--green); }
.issue-flow-node.completed::before { background: #83ccb2; }
.issue-flow-node.completed span { border-color: var(--green); background: var(--green); color: #fff; }
.issue-flow-node.current { color: var(--blue-700); }
.issue-flow-node.current::before { background: #83ccb2; }
.issue-flow-node.current span { border-color: var(--blue-700); background: var(--blue-700); color: #fff; box-shadow: 0 0 0 4px rgba(8,116,201,.1); }
.issue-flow-branches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; border-top: 1px dashed #d5e2eb; padding-top: 9px; }
.issue-flow-branches > strong { margin-right: 3px; font-size: 11px; }
.issue-flow-branches > span { border-radius: 12px; background: #eaf4fb; color: #27698f; padding: 4px 8px; font-size: 10px; }
.issue-flow-branches > span.attention { background: #fff0dd; color: #995500; }

@media (max-width: 1120px) {
  .flow-issue-card { grid-template-columns: minmax(240px, 1fr) minmax(230px, .9fr) minmax(180px, .6fr); }
  .flow-open-hint { display: none; }
  .flow-stage-node strong { font-size: 11px; }
  .business-flow-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(120px, .5fr) minmax(120px, .5fr); }
}
@media (max-width: 820px) {
  .business-flow-heading { flex-direction: column; }
  .business-flow-refresh { width: 100%; white-space: normal; }
  .business-flow-toolbar { grid-template-columns: 1fr; }
  .business-flow-result-count { justify-self: start; }
  .business-flow-scroll { overflow-x: visible; }
  .business-flow-columns { grid-template-columns: 1fr; min-width: 0; }
  .business-flow-column { min-height: 170px; }
  .flow-board-toolbar { align-items: flex-start; flex-direction: column; }
  .flow-scope-tabs { flex-wrap: wrap; overflow-x: visible; }
  .flow-scope-tab { flex: 1 1 calc(50% - 9px); justify-content: space-between; }
  .flow-stage-rail, .issue-flow-rail { grid-template-columns: 1fr; gap: 0; }
  .flow-stage-rail { padding: 0 14px 14px; }
  .flow-stage-node, .issue-flow-node { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left; padding: 5px 0; }
  .flow-stage-node::before, .issue-flow-node::before { left: 14px; right: auto; top: -50%; bottom: 50%; width: 3px; height: auto; }
  .flow-stage-node:first-child::before, .issue-flow-node:first-child::before { display: none; }
  .flow-stage-index, .issue-flow-node span { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; }
  .flow-stage-node strong, .issue-flow-node strong { grid-column: 2; grid-row: 1; font-size: 12px; }
  .flow-stage-node small { grid-column: 3; grid-row: 1; }
  .flow-issue-card { grid-template-columns: 1fr; gap: 9px; }
  .flow-next-action { border-left: 0; border-top: 2px solid #2b536c; padding: 9px 0 0; }
  .issue-flow-heading { flex-direction: column; }
  .issue-flow-heading > div:last-child { max-width: none; text-align: left; }
  .issue-flow-node { grid-template-columns: 36px minmax(0, 1fr); }
  .issue-flow-branches { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .flow-stage-node.selected .flow-stage-index, .issue-flow-node.current span { animation: flowPulse 2.4s ease-in-out infinite; }
  .flow-refresh-state .status-dot { animation: flowStatusPulse 2.2s ease-in-out infinite; }
  @keyframes flowPulse { 50% { box-shadow: 0 0 0 7px rgba(55, 217, 255, .06), 0 0 22px rgba(55, 217, 255, .48); } }
  @keyframes flowStatusPulse { 50% { opacity: .48; } }
}
@media (prefers-reduced-motion: reduce) {
  .flow-issue-card { transition: none; }
  .flow-issue-card:hover, .flow-issue-card:focus { transform: none; }
}