/* ==========================================================================
   东成质量管理学院 · 四大执行阶段统一主题（青蓝 / Cyan）
   用途：design-phase / manufacturing-phase / supply-chain / functional-departments
         四个总览 index 共用，解决四阶段各自为政、风格不统一的问题。
   统一结构：阶段横幅 → 全流程步骤条 → 概述四卡 → 核心工具网格 → 阶段流程
            → 目标清单 → 模块导航 → 前后阶段切换 → 页脚
   ========================================================================== */

:root {
  --p-bg: #f4f7fa;
  --p-surface: #ffffff;
  --p-text: #1f2d3d;
  --p-text2: #4a5568;
  --p-text3: #8896a6;
  --p-border: #e2e9f1;
  --p-border2: #eef2f7;
  --p-c50: #ecfeff;
  --p-c100: #cffafe;
  --p-c200: #a5f3fc;
  --p-c400: #22d3ee;
  --p-c500: #06b6d4;
  --p-c600: #0891b2;
  --p-c700: #0e7490;
  --p-c900: #164e63;
  --p-shadow-sm: 0 2px 12px rgba(15, 42, 74, .06);
  --p-shadow-md: 0 12px 32px rgba(15, 42, 74, .13);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  background: var(--p-bg);
  color: var(--p-text);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1160px; margin: 0 auto; padding: 28px 24px; }

/* ---------- 阶段横幅 ---------- */
.phase-hero {
  position: relative;
  background: linear-gradient(140deg, var(--p-c900) 0%, #155e75 45%, var(--p-c600) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 46px 42px;
  margin-bottom: 26px;
  box-shadow: var(--p-shadow-md);
  overflow: hidden;
}
.phase-hero::before {
  content: ""; position: absolute; top: -90px; right: -60px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(34, 211, 238, .22) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.phase-hero::after {
  content: ""; position: absolute; bottom: -70px; left: -30px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(8, 145, 178, .16) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.phase-hero > * { position: relative; z-index: 1; }
.phase-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.phase-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  padding: 5px 16px; border-radius: 999px; font-size: 12.5px; letter-spacing: 2px;
  font-weight: 600; color: #cffafe;
}
.phase-badge .num { font-size: 16px; font-weight: 800; color: #67e8f9; }
.phase-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; padding: 8px 18px; border-radius: 999px; font-size: 13.5px;
  font-weight: 500; transition: all .25s;
}
.phase-back:hover { background: #fff; color: var(--p-c700); }
.phase-hero h1 { font-size: 34px; font-weight: 800; color: #fff; margin: 18px 0 8px; letter-spacing: -.5px; line-height: 1.25; }
.phase-hero h1 .en { display: block; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .5); letter-spacing: 2.5px; margin-bottom: 8px; }
.phase-hero .sub { font-size: 15.5px; color: rgba(255, 255, 255, .8); max-width: 740px; line-height: 1.85; }
.phase-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.phase-tags span {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  color: #cffafe; font-size: 12.5px; padding: 4px 13px; border-radius: 999px;
}

/* ---------- 全流程步骤条（串成一条链） ---------- */
.phase-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 16px; padding: 18px; margin-bottom: 26px; box-shadow: var(--p-shadow-sm);
}
.p-step {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--p-border);
  transition: all .25s;
}
.p-step .no {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--p-border2); color: var(--p-text3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; transition: all .25s;
}
.p-step .nm { font-size: 14.5px; font-weight: 600; color: var(--p-text2); }
.p-step .en { font-size: 11px; color: var(--p-text3); }
.p-step:hover { border-color: var(--p-c200); }
.p-step.active {
  background: linear-gradient(135deg, var(--p-c50), var(--p-c100));
  border-color: var(--p-c400);
}
.p-step.active .no { background: var(--p-c600); color: #fff; }
.p-step.active .nm { color: var(--p-c700); }
.p-step.active .en { color: var(--p-c600); }

/* ---------- 通用区块 ---------- */
.p-sec {
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 16px; padding: 30px 28px; margin-bottom: 24px; box-shadow: var(--p-shadow-sm);
}
.p-sec h2 {
  color: var(--p-c700); font-size: 1.45rem; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.p-sec .lead { color: var(--p-text2); margin-bottom: 20px; }
.p-sec-title {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--p-c600);
  letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 6px;
}
.p-sec h2::after {
  content: ""; flex: 1; height: 2px; margin-left: 6px;
  background: linear-gradient(90deg, var(--p-c100), transparent);
}

/* 概述四卡 */
.kv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kv-card { background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 12px; padding: 20px; border-top: 4px solid var(--p-c600); }
.kv-card h4 { color: var(--p-c700); margin-bottom: 8px; font-size: 1.02rem; }
.kv-card p { color: var(--p-text2); font-size: .92rem; line-height: 1.7; }
.kv-card:nth-child(2) { border-top-color: var(--p-c400); }
.kv-card:nth-child(3) { border-top-color: var(--p-c500); }
.kv-card:nth-child(4) { border-top-color: #0ea5a4; }

/* 核心工具网格 */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tool-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 12px; padding: 22px 20px; transition: all .28s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-md); border-color: var(--p-c400); }
.tool-card .t-ic {
  width: 44px; height: 44px; border-radius: 11px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--p-c50); color: var(--p-c600); margin-bottom: 14px;
}
.tool-card h4 { color: var(--p-text); font-size: 1.05rem; margin-bottom: 8px; }
.tool-card p { color: var(--p-text3); font-size: .88rem; line-height: 1.7; margin-bottom: 14px; flex: 1; }
.tool-card .go { color: var(--p-c600); font-size: .9rem; font-weight: 600; }

/* 阶段流程 */
.flow-line { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.flow-node {
  position: relative; flex: 1; min-width: 130px;
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: 10px; padding: 14px; text-align: center;
}
.flow-node .fx { font-size: 22px; margin-bottom: 6px; }
.flow-node h4 { color: var(--p-c700); font-size: .98rem; margin-bottom: 4px; }
.flow-node p { color: var(--p-text3); font-size: .82rem; line-height: 1.5; }
.flow-arrow {
  align-self: center; color: var(--p-c400); font-size: 18px; font-weight: 700; flex-shrink: 0;
}

/* 目标清单 */
.goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.goal-box { display: flex; align-items: flex-start; gap: 12px; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 10px; padding: 14px 16px; }
.goal-box .chk { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--p-c600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.goal-box p { color: var(--p-text2); font-size: .92rem; }

/* 模块导航 */
.mod-nav { }
.mod-nav ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mod-nav a {
  display: flex; align-items: center; gap: 10px;
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: 10px; padding: 13px 16px; transition: all .25s;
}
.mod-nav a:hover { background: var(--p-c600); color: #fff; border-color: var(--p-c600); transform: translateY(-2px); }
.mod-nav a span { font-size: 17px; }
.mod-nav a b { font-size: .95rem; font-weight: 600; }
.mod-nav a small { font-size: .8rem; opacity: .75; }

/* 前后阶段切换 */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.pn {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 12px; transition: all .25s;
}
.pn:hover { border-color: var(--p-c400); box-shadow: var(--p-shadow-sm); }
.pn.next { justify-content: flex-end; text-align: right; }
.pn .pn-dir { font-size: .8rem; color: var(--p-text3); letter-spacing: 1px; }
.pn .pn-nm { font-size: 1rem; font-weight: 700; color: var(--p-c700); }
.pn .pn-ic { font-size: 20px; }

/* 页脚 */
.phase-footer {
  background: var(--p-c900); color: rgba(255, 255, 255, .6);
  text-align: center; padding: 22px; border-radius: 14px; margin-top: 10px; font-size: .9em;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.phase-footer b { color: #cffafe; font-weight: 600; }
.phase-footer .fdot { color: rgba(255,255,255,.3); }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .phase-steps, .kv-grid, .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .mod-nav ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .container { padding: 18px 14px; }
  .phase-hero { padding: 30px 22px; }
  .phase-hero h1 { font-size: 26px; }
  .phase-steps, .kv-grid, .tool-grid, .goal-grid, .mod-nav ul, .prevnext { grid-template-columns: 1fr; }
  .flow-line { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); text-align: center; }
}