/* 产品全景页：首屏模块星图、三个端、九章模块（左目录吸顶 + 示意小画面）、权限、部署。
   小画面全部 aria-hidden，内容以旁边的文字列表为准；动效只在 .is-in 后播放一次。 */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* 首屏 */
.prod-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: 48px; padding-block: 96px 96px; }
.prod-map { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 28px; border: 1px solid rgb(145 165 194 / 18%); border-radius: 24px; background: rgb(8 21 43 / 72%); box-shadow: 0 30px 80px rgb(0 0 0 / 30%); }
.pm-core { grid-column: 2 / 4; grid-row: 2 / 4; display: grid; place-items: center; min-height: 92px; border: 1px solid rgb(25 82 232 / 45%); border-radius: 16px; background: radial-gradient(circle, rgb(25 82 232 / 28%), transparent 75%); }
.pm-core img { width: 64px; height: 64px; }
.pm { display: grid; place-items: center; min-height: 64px; padding: 10px 6px; border: 1px solid rgb(145 165 194 / 20%); border-radius: 12px; color: var(--text); background: var(--navy-2); font-size: 0.86rem; font-weight: 650; text-align: center; }
/* 第一个 span 是中心标志，模块从第 2 个起：第 6–9 个分列标志两侧（第 2、3 行），其余铺满第 1、4 行。 */
.pm:nth-of-type(6) { grid-area: 2 / 1; }
.pm:nth-of-type(7) { grid-area: 2 / 4; }
.pm:nth-of-type(8) { grid-area: 3 / 1; }
.pm:nth-of-type(9) { grid-area: 3 / 4; }
@media (prefers-reduced-motion: no-preference) {
  html.js .pm { animation: pm-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both, pm-glow 6s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms + 150ms), calc(var(--i) * 500ms + 1.2s); }
  html.js .pm-core { animation: pm-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes pm-in { from { opacity: 0; transform: scale(0.86) translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes pm-glow { 0%, 12%, 100% { border-color: rgb(145 165 194 / 20%); box-shadow: none; } 5% { border-color: var(--cyan); box-shadow: 0 0 24px rgb(0 200 229 / 25%); } }

/* 三个端 */
.prod-apps { color: var(--ink); background: var(--ice); }
.prod-apps .eyebrow { color: var(--cobalt); }
.prod-apps .section-lead { color: #4A5D78; }
.prod-apps :focus-visible { outline-color: var(--cobalt); }
.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.app-card { min-width: 0; padding: 30px; border: 1px solid #D8E2EF; border-radius: 20px; background: var(--paper); }
.app-card:first-child { border-color: rgb(25 82 232 / 35%); }
.app-k { display: inline-block; margin-bottom: 26px; padding: 3px 9px; border-radius: 6px; color: var(--paper); background: var(--cobalt); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.12em; }
.app-card:nth-child(2) .app-k { background: #0E7C8E; }
.app-card:nth-child(3) .app-k { background: var(--navy-2); }
.app-card h3 { margin-bottom: 6px; font-size: 1.45rem; }
.app-who { color: var(--cobalt); font-size: 0.88rem; font-weight: 650; }
.app-card p:last-child { margin: 0; color: #4A5D78; }
@media (prefers-reduced-motion: no-preference) {
  html.io .app-card:nth-child(2) { transition-delay: 80ms; }
  html.io .app-card:nth-child(3) { transition-delay: 160ms; }
}

/* 九章模块 */
.prod-modules { color: var(--ink); background: var(--paper); }
.prod-modules :focus-visible { outline-color: var(--cobalt); }
.prod-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-block: 112px; }
.prod-index { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; display: grid; gap: 2px; }
.prod-index-h { margin: 0 0 14px; color: var(--cobalt); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; }
.prod-index a { position: relative; padding: 7px 0 7px 16px; border-left: 2px solid #DFE8F3; color: #5B6E88; font-size: 0.92rem; transition: color 160ms ease, border-color 160ms ease; }
.prod-index a:hover { color: var(--ink); }
.prod-index a[aria-current] { border-left-color: var(--cobalt); color: var(--cobalt); font-weight: 680; }
.prod-chapters { display: grid; gap: 0; min-width: 0; }
.chapter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: 48px; padding-block: 64px; border-top: 1px solid #E4EBF4; scroll-margin-top: calc(var(--nav-h) + 8px); }
.chapter:first-child { padding-top: 0; border-top: 0; }
.chapter-k { margin-bottom: 14px; color: var(--cobalt); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; }
.chapter h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -0.04em; }
.chapter-lead { margin: 16px 0 24px; color: #4A5D78; font-size: 1.04rem; }
.feat { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feat li { position: relative; padding-left: 18px; color: #3A4E6B; font-size: 0.95rem; }
.feat li::before { position: absolute; top: 0.72em; left: 0; width: 7px; height: 7px; border-radius: 2px; content: ""; background: var(--cobalt); }
.feat strong { display: block; color: var(--ink); font-weight: 700; }

/* 示意小画面：通用框 */
.mock { position: sticky; top: calc(var(--nav-h) + 40px); min-width: 0; padding: 20px; overflow: hidden; border: 1px solid #1C3A61; border-radius: 20px; color: var(--text); background: var(--navy-1); box-shadow: 0 26px 60px rgb(11 24 48 / 16%); font-size: 0.86rem; }
.mock-bar { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid rgb(145 165 194 / 16%); }
.mock-bar span { font-weight: 700; }
.mock-bar em { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; font-style: normal; }
.mock-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.mock-foot span { padding: 3px 9px; border: 1px solid rgb(145 165 194 / 22%); border-radius: 999px; color: var(--muted); font-size: 0.74rem; }
.mock .ok { color: var(--success); }
.mock .late, .mock .warn { color: #F2B84B; }
.mock .fix { color: var(--cyan); }
.mock .leave { color: var(--human); }
@media (prefers-reduced-motion: no-preference) {
  html.io .mock:not(.is-in) .tree > span, html.io .mock:not(.is-in) .steps li, html.io .mock:not(.is-in) .week li, html.io .mock:not(.is-in) .run li, html.io .mock:not(.is-in) .log li, html.io .mock:not(.is-in) .f-node { opacity: 0; transform: translate3d(0, 8px, 0); }
  .mock .tree > span, .mock .steps li, .mock .week li, .mock .run li, .mock .log li, .mock .f-node { transition: opacity 360ms ease, transform 360ms ease; }
  .mock :nth-child(2) { transition-delay: 70ms; } .mock :nth-child(3) { transition-delay: 140ms; } .mock :nth-child(4) { transition-delay: 210ms; }
  .mock :nth-child(5) { transition-delay: 280ms; } .mock :nth-child(6) { transition-delay: 350ms; } .mock :nth-child(7) { transition-delay: 420ms; } .mock :nth-child(8) { transition-delay: 490ms; }
}

/* 组织树 */
.tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tree > span { display: grid; place-items: center; min-height: 40px; padding: 6px; border: 1px solid rgb(145 165 194 / 22%); border-radius: 10px; background: var(--navy-2); font-size: 0.78rem; text-align: center; }
.tree .t0 { grid-column: 1 / -1; border-color: var(--cobalt); background: rgb(25 82 232 / 26%); font-weight: 700; }
.tree .t1:nth-child(2) { grid-column: 1 / 2; }
.tree .t1 { grid-column: span 1; }
.tree .t1:nth-child(4) { grid-column: 3 / 5; }
.tree .t-new { border-style: dashed; border-color: var(--cyan); }
.tree .t-new i { margin-left: 4px; color: var(--cyan); font-size: 0.7rem; font-style: normal; }
.tree .t2 { color: var(--muted); }

/* 步骤（职称评审、核算） */
.steps, .run { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li, .run li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgb(145 165 194 / 18%); border-radius: 10px; background: rgb(16 36 67 / 70%); counter-increment: s; }
.steps li::before, .run li::before { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; content: counter(s); color: var(--navy-0); background: var(--muted); font-size: 0.7rem; font-weight: 700; }
.steps li:nth-child(-n+3)::before, .run li:nth-child(-n+3)::before { background: var(--success); }
.steps li:nth-child(4), .run li:nth-child(4) { border-color: var(--cyan); }
.steps li:nth-child(4)::before, .run li:nth-child(4)::before { background: var(--cyan); }
.explain { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; border-left: 2px solid var(--cyan); background: rgb(0 200 229 / 6%); }
.explain b { font-size: 0.82rem; }
.explain span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.74rem; }
.explain em { color: var(--cyan); font-size: 0.72rem; font-style: normal; }

/* 一周考勤 */
.week { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.week li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid rgb(145 165 194 / 16%); border-radius: 10px; background: rgb(16 36 67 / 70%); }
.week b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--navy-0); font-size: 0.78rem; }

/* 漏斗、分布、柱 */
.funnel { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.funnel li { width: var(--w); min-width: 96px; padding: 7px 12px; border-radius: 8px; background: linear-gradient(90deg, var(--cobalt), rgb(0 200 229 / 75%)); font-size: 0.78rem; font-weight: 650; transform-origin: 0 50%; }
.dist, .bars { display: flex; align-items: flex-end; gap: 12px; height: 180px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgb(145 165 194 / 25%); }
.dist li, .bars li { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--cyan), var(--cobalt)); transform-origin: 50% 100%; }
.dist li:nth-child(3) { background: linear-gradient(180deg, var(--human), var(--cobalt)); }
.dist b { position: absolute; bottom: -24px; left: 50%; color: var(--muted); font-size: 0.74rem; transform: translateX(-50%); }
.dist { margin-bottom: 26px; }
@media (prefers-reduced-motion: no-preference) {
  html.io .mock:not(.is-in) .funnel li { transform: scaleX(0.05); }
  html.io .mock:not(.is-in) .dist li, html.io .mock:not(.is-in) .bars li { transform: scaleY(0.04); }
  .funnel li, .dist li, .bars li { transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
  .funnel li:nth-child(n), .bars li:nth-child(n), .dist li:nth-child(n) { transition-delay: calc(var(--d, 0) * 1ms); }
  .funnel li:nth-child(2), .bars li:nth-child(2), .dist li:nth-child(2) { --d: 80; }
  .funnel li:nth-child(3), .bars li:nth-child(3), .dist li:nth-child(3) { --d: 160; }
  .funnel li:nth-child(4), .bars li:nth-child(4), .dist li:nth-child(4) { --d: 240; }
  .funnel li:nth-child(5), .bars li:nth-child(5), .dist li:nth-child(5) { --d: 320; }
  .funnel li:nth-child(6), .bars li:nth-child(6) { --d: 400; }
}

/* 流程 */
.flow { display: grid; justify-items: center; gap: 0; }
.f-node { padding: 8px 14px; border: 1px solid rgb(145 165 194 / 28%); border-radius: 10px; background: var(--navy-2); font-size: 0.8rem; text-align: center; }
.f-line { width: 1px; height: 18px; background: var(--cyan); }
.f-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.f-alt { border-color: rgb(143 167 255 / 45%); }
.f-end { border-color: var(--success); color: var(--success); }

/* 投递日志 */
.log { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.log li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: rgb(16 36 67 / 70%); font-size: 0.78rem; }
.log code { color: var(--text); }

/* 权限与安全 */
.prod-platform { color: var(--text); background: var(--navy-1); }
.plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.plat-grid li { min-width: 0; padding: 26px; border: 1px solid rgb(145 165 194 / 18%); border-radius: 18px; background: rgb(5 11 24 / 50%); transition: border-color 200ms ease; }
.plat-grid li:hover { border-color: rgb(0 200 229 / 45%); }
.plat-grid h3 { margin-bottom: 10px; font-size: 1.1rem; }
.plat-grid h3::before { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; content: ""; background: var(--cyan); vertical-align: 0.15em; }
.plat-grid p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.plat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid rgb(145 165 194 / 18%); list-style: none; }
.plat-strip li { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.plat-strip b { color: var(--cyan); font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; }
.plat-strip span { color: var(--muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  html.io .plat-grid li:nth-child(3n+2) { transition-delay: 70ms; }
  html.io .plat-grid li:nth-child(3n) { transition-delay: 140ms; }
}

/* 部署 */
.prod-deploy { color: var(--ink); background: var(--ice); }
.prod-deploy .eyebrow { color: var(--cobalt); }
.prod-deploy .section-lead { color: #4A5D78; }
.deploy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.deploy-list li { padding: 26px; border: 1px solid #D8E2EF; border-radius: 18px; color: #4A5D78; background: var(--paper); }
.deploy-list strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1.1rem; }

@media (max-width: 1100px) {
  .chapter { grid-template-columns: 1fr; gap: 28px; }
  .mock { position: relative; top: auto; max-width: 560px; }
}
@media (max-width: 960px) {
  .prod-hero-in { grid-template-columns: 1fr; padding-block: 72px 64px; }
  .prod-layout { grid-template-columns: 1fr; gap: 0; padding-block: 72px; }
  .prod-index { position: sticky; z-index: 5; top: var(--nav-h); display: flex; gap: 6px; margin: 0 -20px 32px; padding: 10px 20px; overflow-x: auto; border-bottom: 1px solid #E4EBF4; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); scrollbar-width: none; }
  .prod-index::-webkit-scrollbar { display: none; }
  .prod-index-h { display: none; }
  .prod-index a { flex: none; padding: 6px 12px; border: 1px solid #DFE8F3; border-radius: 999px; font-size: 0.84rem; white-space: nowrap; }
  .prod-index a[aria-current] { border-color: var(--cobalt); color: var(--paper); background: var(--cobalt); }
  .chapter { scroll-margin-top: calc(var(--nav-h) + 64px); }
  .app-cards, .plat-grid, .deploy-list, .plat-strip { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .prod-index { margin-inline: -20px; }
  .chapter { padding-block: 48px; }
}
@media (max-width: 520px) {
  .prod-map { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px; }
  .pm-core { grid-column: 1 / -1; grid-row: auto; order: -1; min-height: 72px; }
  .pm:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .pm { min-height: 52px; font-size: 0.78rem; }
  .app-card, .plat-grid li, .deploy-list li { padding: 22px; }
  .mock { padding: 16px; }
}