/* ==========================================================================
   项目驾驶舱 /cockpit — 深色数字孪生风，移动优先（375px 基准）
   ========================================================================== */

.cockpit {
    --cp-bg: #060b16;
    --cp-panel: rgba(15, 27, 52, 0.72);
    --cp-line: rgba(120, 170, 255, 0.14);
    --cp-cyan: #38e1ff;
    --cp-cyan-dim: rgba(56, 225, 255, 0.55);
    --cp-gold: #f6c453;
    --cp-amber: #ffa940;
    --cp-red: #ff5d6c;
    --cp-text: #e6efff;
    --cp-dim: #7f93b8;
    --cp-faint: #54668c;

    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    padding: 22px 16px 40px;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    color: var(--cp-text);
    font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    background-color: var(--cp-bg);
    background-image:
        radial-gradient(ellipse 90% 34% at 50% -6%, rgba(56, 225, 255, 0.10), transparent 70%),
        linear-gradient(rgba(96, 150, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 150, 255, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
}

/* 极光氛围层：固定定位大单图层，仅 transform 慢漂移（合成层，不触发重绘） */
.cockpit::before {
    content: "";
    position: fixed;
    inset: -25% -40%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 30% at 24% 18%, rgba(56, 225, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 38% 30% at 78% 60%, rgba(124, 92, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 40% 26% at 55% 85%, rgba(246, 196, 83, 0.045), transparent 70%);
    animation: cockpit-aurora 42s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes cockpit-aurora {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(3%, 2.5%, 0) scale(1.06); }
}

/* ---------- 业务分类签（sticky，点击 + 内容区横向滑动切换） ---------- */

.cockpit__tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    margin: 0 -16px 14px;
    padding: 8px 16px 10px;
    background: linear-gradient(180deg, rgba(6, 11, 22, 0.96), rgba(6, 11, 22, 0.82));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(120, 170, 255, 0.08);
}

.cockpit__tab {
    flex: 1;
    padding: 6px 0;
    font: inherit;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--cp-faint);
    background: rgba(120, 160, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cockpit__tab.is-active {
    color: var(--cp-cyan);
    font-weight: 600;
    background: rgba(56, 225, 255, 0.1);
    border-color: rgba(56, 225, 255, 0.35);
    box-shadow: 0 0 12px rgba(56, 225, 255, 0.15);
}

/* ---------- 分类切换过渡（@key 重建触发，仅 transform/opacity） ---------- */

.cockpit__pane.pane--initial { animation: pane-in-up 0.5s cubic-bezier(0.16, 0.84, 0.3, 1) both; }
.cockpit__pane.pane--from-right { animation: pane-in-right 0.38s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
.cockpit__pane.pane--from-left { animation: pane-in-left 0.38s cubic-bezier(0.22, 0.9, 0.3, 1) both; }

@keyframes pane-in-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes pane-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: none; }
}

@keyframes pane-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: none; }
}

/* 旅程卡错落入场：--i 由页面按序号注入；scroll-margin 为 sticky 签条留出锚定净空 */
.cpc-enter {
    scroll-margin-top: 60px;
    animation: cpc-enter 0.55s cubic-bezier(0.16, 0.84, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes cpc-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* 卡点锚定提示：辉光一闪即收（起止与卡点常驻态一致，无视觉跳变） */
.cpc-flash .cpc {
    animation: cpc-flash 1.6s ease-out 1;
}

@keyframes cpc-flash {
    0% { border-color: rgba(255, 93, 108, 0.45); box-shadow: 0 6px 24px rgba(2, 8, 24, 0.5); }
    25% { border-color: rgba(255, 93, 108, 0.95); box-shadow: 0 0 26px rgba(255, 93, 108, 0.4); }
    100% { border-color: rgba(255, 93, 108, 0.45); box-shadow: 0 6px 24px rgba(2, 8, 24, 0.5); }
}

body:has(.cockpit) {
    background: #060b16;
}

/* ---------- 头部 ---------- */

.cockpit__header {
    margin-bottom: 18px;
}

.cockpit__titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 演示数据标识：细边框 pill + 微光，金调（样例语义），常驻不闪烁，仅 demo=1 出现 */
.cockpit__demo-badge {
    flex: none;
    font-size: 10px;
    letter-spacing: 2px;
    color: #d9c48a;
    background: rgba(246, 196, 83, 0.07);
    border: 1px solid rgba(246, 196, 83, 0.4);
    border-radius: 999px;
    padding: 2px 10px 2px 12px;
    box-shadow: 0 0 10px rgba(246, 196, 83, 0.12);
}

.cockpit__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    background: linear-gradient(100deg, #eaf6ff 20%, var(--cp-cyan) 60%, #7cc7ff 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(56, 225, 255, 0.25);
}

.cockpit__headline {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--cp-dim);
    letter-spacing: 1px;
}

/* ---------- 全局大数字 ---------- */

.cockpit__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat {
    padding: 14px 14px 12px;
    border: 1px solid var(--cp-line);
    border-radius: 12px;
    background: var(--cp-panel);
}

.stat__value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: #dffbff;
    text-shadow: 0 0 16px var(--cp-cyan-dim), 0 0 42px rgba(56, 225, 255, 0.25);
}

.stat__value small {
    margin-left: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-dim);
    text-shadow: none;
}

.stat__label {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cp-dim);
    letter-spacing: 2px;
}

.stat--gold .stat__value {
    color: #fff3d6;
    text-shadow: 0 0 16px rgba(246, 196, 83, 0.55), 0 0 42px rgba(246, 196, 83, 0.22);
}

.stat--red .stat__value {
    color: #ffe3e6;
    text-shadow: 0 0 16px rgba(255, 93, 108, 0.6), 0 0 42px rgba(255, 93, 108, 0.25);
}

/* 可点击大数字（卡点锚点）：克制的可点暗示 + 轻微按压反馈 */
button.stat {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stat--clickable {
    border-color: rgba(255, 93, 108, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.stat--clickable:hover {
    box-shadow: 0 0 14px rgba(255, 93, 108, 0.18);
}

.stat--clickable:active {
    transform: scale(0.96);
}

/* ---------- 项目旅程卡 ---------- */

.cockpit__journeys {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cpc {
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    background: var(--cp-panel);
    padding: 14px;
    box-shadow: 0 6px 24px rgba(2, 8, 24, 0.5);
}

.cpc--blocked {
    border-color: rgba(255, 93, 108, 0.45);
    animation: cpc-blocked-glow 2s ease-in-out infinite;
}

@keyframes cpc-blocked-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 93, 108, 0.0), 0 6px 24px rgba(2, 8, 24, 0.5); }
    50% { box-shadow: 0 0 18px rgba(255, 93, 108, 0.22), 0 6px 24px rgba(2, 8, 24, 0.5); }
}

.cpc__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cpc__coderow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cpc__code {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--cp-cyan);
    border: 1px solid rgba(56, 225, 255, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    font-variant-numeric: tabular-nums;
}

.cpc__badge {
    font-size: 10px;
    letter-spacing: 2px;
    color: #ffd7db;
    background: rgba(255, 93, 108, 0.16);
    border: 1px solid rgba(255, 93, 108, 0.4);
    border-radius: 4px;
    padding: 1px 6px 1px 8px;
}

.cpc__badge--terminated {
    color: #9aa8c2;
    background: rgba(122, 140, 168, 0.1);
    border-color: rgba(122, 140, 168, 0.32);
}

/* 已完结：金调达成徽标（与文号/演示标同属金色族），区别于已终止的灰调消亡语义 */
.cpc__badge--completed {
    color: #ffe9b8;
    background: rgba(246, 196, 83, 0.12);
    border-color: rgba(246, 196, 83, 0.4);
}

.cpc__completed-at {
    font-size: 10px;
    letter-spacing: 1px;
    color: #d9c48a;
    font-variant-numeric: tabular-nums;
}

.cpc__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

/* 长名阶梯：字数分档由组件 NameLengthClass 判定 */
.cpc__name--long {
    font-size: 14px;
}

.cpc__name--xl {
    font-size: 13px;
    line-height: 1.4;
}

.cpc__chevron {
    flex: none;
    margin-top: 3px;
    color: var(--cp-faint);
    transition: transform 0.3s ease, color 0.3s ease;
}

.cpc__chevron.is-open {
    transform: rotate(180deg);
    color: var(--cp-cyan);
}

.cpc__blockreason {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #ffc9cf;
    background: rgba(255, 93, 108, 0.1);
    border-left: 2px solid var(--cp-red);
    border-radius: 6px;
}

.cpc__termination {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #8e9bb8;
    background: rgba(122, 140, 168, 0.07);
    border-left: 2px solid #5a6a8c;
    border-radius: 6px;
}

/* ---------- 已终止：整卡熄灭，轨道冻结 ---------- */

.cpc--terminated {
    border-color: rgba(122, 140, 168, 0.13);
    background: rgba(10, 15, 27, 0.55);
    box-shadow: none;
}

.cpc--terminated .cpc__code {
    color: var(--cp-faint);
    border-color: rgba(122, 140, 168, 0.25);
}

.cpc--terminated .cpc__name {
    color: #93a1bd;
}

.cpc--terminated .cpc__chevron.is-open {
    color: #8e9bb8;
}

/* 已完成节点仅保留微弱点亮 */
.cpc--terminated .cpc__node--done .cpc__dot {
    background: #3d5560;
    box-shadow: 0 0 5px rgba(56, 225, 255, 0.14);
}

.cpc--terminated .cpc__node--done .cpc__label {
    color: #5c7089;
}

/* 终止时的当前节点：全灰、不呼吸 */
.cpc--terminated .cpc__node--current .cpc__dot {
    background: #4d5a74;
    box-shadow: none;
}

.cpc--terminated .cpc__node--current .cpc__dot::after {
    content: none;
}

.cpc--terminated .cpc__node--current .cpc__label {
    color: #6b7a9e;
    font-weight: 400;
}

/* 已点亮连线冻结：不流光 */
.cpc--terminated .cpc__node--lit:not(:last-child)::after {
    background: rgba(96, 128, 148, 0.28);
    animation: none;
}

/* 越级弧线冻结 */
.cpc--terminated .cpc__arc path {
    stroke: #4d5a74;
    opacity: 0.45;
    filter: none;
    animation: none;
}

/* 当前阶段摘要条熄灭 */
.cpc--terminated .cpc__current {
    background: rgba(122, 140, 168, 0.06);
    border-color: rgba(122, 140, 168, 0.14);
}

.cpc--terminated .cpc__current-stage {
    color: #8e9bb8;
}

/* 终止卡上的周期当前期同样冻结 */
.cpc--terminated .cpc__cycles-dots i.is-current {
    background: #4d5a74;
    box-shadow: none;
    animation: none;
}

/* ---------- 已完结：全亮终态沉静定格（不灰化、无流光，轨道点亮保留为达成记录） ---------- */

.cpc--completed {
    border-color: rgba(246, 196, 83, 0.16);
}

/* 全亮连线定格：静态青色（取流光渐变中段明度），终态不再流动 */
.cpc--completed .cpc__node--lit:not(:last-child)::after {
    background: rgba(56, 225, 255, 0.4);
    animation: none;
}

/* 历史越级弧线定格：金色保留（越级是已发生事实），仅停止流动 */
.cpc--completed .cpc__arc path {
    animation: none;
}

/* ---------- 阶段旅程轨道 ---------- */

.cpc__rail {
    --rail-top: 0px;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-top: 14px;
    padding-top: var(--rail-top);
}

.cpc__rail.has-arc {
    --rail-top: 32px;
}

.cpc__arc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    overflow: visible;
    pointer-events: none;
}

.cpc__arc path {
    fill: none;
    stroke: var(--cp-gold);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px rgba(246, 196, 83, 0.45));
    animation: cpc-arc-flow 1.6s linear infinite;
}

@keyframes cpc-arc-flow {
    to { stroke-dashoffset: -10; }
}

.cpc__node {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 七节点密度平衡（375px 单排不横滚）：圆点 12px、名称 9.5px 四字全名不换行 */
.cpc__dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: cpc-dot-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes cpc-dot-in {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

/* 节点依次点亮：延迟 = 卡片错落（--i 继承自外层包装）+ 节点序 */
.cpc__node:nth-of-type(1) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.cpc__node:nth-of-type(2) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 240ms); }
.cpc__node:nth-of-type(3) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 330ms); }
.cpc__node:nth-of-type(4) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 420ms); }
.cpc__node:nth-of-type(5) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 510ms); }
.cpc__node:nth-of-type(6) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 600ms); }
.cpc__node:nth-of-type(7) .cpc__dot { animation-delay: calc(var(--i, 0) * 70ms + 690ms); }

.cpc__label {
    margin-top: 7px;
    font-size: 9.5px;
    color: var(--cp-faint);
    white-space: nowrap;
}

.cpc__date {
    margin-top: 2px;
    font-size: 9px;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
    min-height: 12px;
}

/* 完成：点亮 */
.cpc__node--done .cpc__dot {
    background: var(--cp-cyan);
    box-shadow: 0 0 8px var(--cp-cyan-dim);
}

.cpc__node--done .cpc__label {
    color: #a8dce8;
}

/* 当前阶段：呼吸高亮 */
.cpc__node--current .cpc__dot {
    background: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan), 0 0 22px rgba(56, 225, 255, 0.45);
}

.cpc__node--current .cpc__dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--cp-cyan);
    animation: cpc-breathe 2.2s ease-out infinite;
}

@keyframes cpc-breathe {
    0% { transform: scale(0.55); opacity: 0.9; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

.cpc__node--current .cpc__label {
    color: var(--cp-cyan);
    font-weight: 600;
}

/* 卡点：红色脉冲 */
.cpc__node--blocked .cpc__dot {
    background: var(--cp-red);
    box-shadow: 0 0 10px rgba(255, 93, 108, 0.8);
}

.cpc__node--blocked .cpc__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--cp-red);
    animation: cpc-pulse 1.3s ease-out infinite;
}

@keyframes cpc-pulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.cpc__node--blocked .cpc__label {
    color: #ff9aa4;
    font-weight: 600;
}

/* 未开始：灰 */
.cpc__node--pending .cpc__dot {
    border: 1px solid var(--cp-faint);
    background: transparent;
}

/* 待接入：灰 + 点线（流程未接入系统的节点保留态） */
.cpc__node--offline .cpc__dot {
    border: 1px dotted var(--cp-faint);
    background: transparent;
}

.cpc__node--offline .cpc__label {
    color: #43537a;
}

/* 待补：被越级跨过、待后补的节点 */
.cpc__node--backfill .cpc__dot {
    border: 1px dashed #8a97b8;
    background: transparent;
    box-shadow: none;
}

.cpc__node--backfill .cpc__label {
    color: #6b7a9e;
}

.cpc__date--backfill {
    color: var(--cp-gold);
    letter-spacing: 1px;
}

/* 待定：排期未定的节点（如先签约待进场），灰调文案与待补金区分，无弧线 */
.cpc__date--tbd {
    color: #8e9bb8;
    letter-spacing: 1px;
}

/* 缺失：质控底线被异常数据违反的红色警示——空心红虚环，区别于可后补的待补与脉冲的卡点 */
.cpc__node--missing .cpc__dot {
    border: 1.5px dashed var(--cp-red);
    background: rgba(255, 93, 108, 0.12);
    box-shadow: 0 0 8px rgba(255, 93, 108, 0.35);
}

.cpc__node--missing .cpc__label {
    color: #ff9aa4;
    font-weight: 600;
}

.cpc__date--missing {
    color: var(--cp-red);
    letter-spacing: 1px;
}

/* 超期角标：服务期限已过（项目级 DelayDays），琥珀色（慢）区别于卡点红（停） */
.cpc__delay {
    margin-top: 3px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1.5;
    white-space: nowrap;
    color: #ffd9a8;
    background: rgba(255, 169, 64, 0.12);
    border: 1px solid rgba(255, 169, 64, 0.4);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* 待补节点两侧连线强制熄灭（双类选择器压过点亮规则），杜绝被跨过仍有点亮的观感 */
.cpc__node.cpc__node--backfill:not(:last-child)::after,
.cpc__node:has(+ .cpc__node--backfill)::after {
    background: rgba(120, 160, 255, 0.05);
    animation: none;
}

/* 周期循环节点的 ↻ 角标 */
.cpc__loop {
    position: absolute;
    top: -7px;
    right: -8px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-style: normal;
    line-height: 1;
    color: var(--cp-gold);
    background: #0a1224;
    border: 1px solid rgba(246, 196, 83, 0.45);
    border-radius: 50%;
}

/* 节点间连线：相邻双节点均已到达则点亮并流光。
   节点圆心 = 12px / 2 = 6px，线高 2px 取 top 5px 使线心精确穿过圆心；
   节点随弧线净空由 rail 的 padding-top 整体下沉，此处不再叠加 --rail-top */
.cpc__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 5px;
    left: calc(50% + 9px);
    right: calc(-50% + 9px);
    height: 2px;
    border-radius: 1px;
    background: rgba(120, 160, 255, 0.1);
}

.cpc__node--lit:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(56, 225, 255, 0.12), rgba(56, 225, 255, 0.6), rgba(56, 225, 255, 0.12));
    background-size: 200% 100%;
    animation: cpc-flow 1.8s linear infinite;
}

@keyframes cpc-flow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---------- 服务周期参照条：旅程轨道的时间轴对照 ---------- */

.cpc__period {
    position: relative;
    margin-top: 16px;
    padding-top: 14px; /* 顶部留给进场标记 */
}

.cpc__period-name {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--cp-faint);
}

/* 实际进场标记：金色菱形 + 日期，悬于周期条上方与计划起点对照 */
.cpc__period-entry {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    white-space: nowrap;
    color: #d9c48a;
    font-variant-numeric: tabular-nums;
}

.cpc__period-entry i {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: var(--cp-gold);
    box-shadow: 0 0 5px rgba(246, 196, 83, 0.5);
}

.cpc__period-bar {
    position: relative;
    height: 4px;
    margin: 2px 0 4px;
    border-radius: 2px;
    background: rgba(120, 160, 255, 0.1);
}

/* 已流逝周期：青色填充，与轨道点亮同色语义 */
.cpc__period-elapsed {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(56, 225, 255, 0.22), rgba(56, 225, 255, 0.55));
}

/* 今天：竖刻线，克制的光晕 */
.cpc__period-today {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 12px;
    border-radius: 1px;
    transform: translateX(-50%);
    background: var(--cp-cyan);
    box-shadow: 0 0 6px var(--cp-cyan-dim);
}

/* 实际进场在条上的对位刻线（金色，与上方菱形呼应） */
.cpc__period-entry-tick {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 8px;
    transform: translateX(-50%);
    background: rgba(246, 196, 83, 0.7);
}

/* 计划进场刻度：金色虚线，与实际进场实线刻度的间距即进场延误信号（仅晚进场时出现） */
.cpc__period-planned-tick {
    position: absolute;
    top: -2px;
    width: 0;
    height: 8px;
    transform: translateX(-50%);
    border-left: 1px dashed rgba(246, 196, 83, 0.5);
}

/* 进场标记上的延迟小注（琥珀，与超期语义同色） */
.cpc__period-entry em {
    font-style: normal;
    color: var(--cp-amber);
}

/* 延期段：推算完成日越过约定止期时，约定段之后的延伸——
   琥珀斜纹 + 虚线描边与约定段的青色实心明确区分，左缘虚线即约定止期界线 */
.cpc__period-slip {
    position: absolute;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 2px 2px 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 169, 64, 0.3) 0 3px,
        rgba(255, 169, 64, 0.05) 3px 6px);
    border: 1px dashed rgba(255, 169, 64, 0.55);
    box-shadow: 0 0 8px rgba(255, 169, 64, 0.16);
}

/* 轨道末端日期在延期时改为推算完成日（琥珀） */
.cpc__period-dates .is-slip {
    color: var(--cp-amber);
}

/* 延期注记：延期天数徽章 + 约定止期，右对齐与轨道末端对位 */
.cpc__period-slip-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    font-size: 9px;
    color: #ffd9a8;
    font-variant-numeric: tabular-nums;
}

.cpc__period-slip-badge {
    padding: 0 5px;
    letter-spacing: 1px;
    color: #ffd9a8;
    background: rgba(255, 169, 64, 0.14);
    border: 1px solid rgba(255, 169, 64, 0.45);
    border-radius: 4px;
}

/* 今天越过服务期末端：琥珀警示（慢/超期语义，区别于卡点红的停滞语义） */
.cpc__period.is-over .cpc__period-elapsed {
    background: linear-gradient(90deg, rgba(255, 169, 64, 0.22), rgba(255, 169, 64, 0.5));
}

.cpc__period.is-over .cpc__period-today {
    background: var(--cp-amber);
    box-shadow: 0 0 8px rgba(255, 169, 64, 0.6);
    animation: cpc-period-warn 1.6s ease-in-out infinite;
}

@keyframes cpc-period-warn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.cpc__period-dates {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
}

/* 已终止：周期条随整卡冻结灰化 */
.cpc--terminated .cpc__period-elapsed {
    background: rgba(122, 140, 168, 0.25);
}

.cpc--terminated .cpc__period-today,
.cpc--terminated .cpc__period-entry-tick {
    background: #4d5a74;
    box-shadow: none;
    animation: none;
}

.cpc--terminated .cpc__period-planned-tick {
    border-color: #4d5a74;
}

.cpc--terminated .cpc__period-entry em {
    color: var(--cp-faint);
}

.cpc--terminated .cpc__period-entry {
    color: var(--cp-faint);
}

.cpc--terminated .cpc__period-entry i {
    background: #4d5a74;
    box-shadow: none;
}

/* ---------- 周期循环：期数进度 ---------- */

.cpc__cycles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(246, 196, 83, 0.05);
    border: 1px solid rgba(246, 196, 83, 0.14);
}

.cpc__cycles-label {
    font-size: 11px;
    color: #d9c48a;
    letter-spacing: 1px;
    white-space: nowrap;
}

.cpc__cycles-dots {
    display: flex;
    gap: 5px;
}

.cpc__cycles-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #6b7a9e;
    background: transparent;
}

.cpc__cycles-dots i.is-done {
    border-color: transparent;
    background: #a8853c;
    box-shadow: 0 0 5px rgba(246, 196, 83, 0.35);
}

.cpc__cycles-dots i.is-current {
    border-color: transparent;
    background: var(--cp-gold);
    box-shadow: 0 0 8px rgba(246, 196, 83, 0.7);
    animation: cpc-cycle-breathe 2.2s ease-in-out infinite;
}

@keyframes cpc-cycle-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.65; }
}

/* ---------- 回款进度带 ---------- */

.cpc__pay {
    margin-top: 12px;
}

.cpc__pay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cp-faint);
}

.cpc__pay-band {
    display: flex;
    gap: 2px;
    height: 26px;
}

.cpc__pay-seg {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(120, 160, 255, 0.06);
    border: 1px solid rgba(120, 160, 255, 0.1);
    overflow: hidden;
}

.cpc__pay-seg.is-reached {
    background: linear-gradient(180deg, rgba(246, 196, 83, 0.3), rgba(246, 196, 83, 0.1));
    border-color: rgba(246, 196, 83, 0.45);
    box-shadow: 0 0 10px rgba(246, 196, 83, 0.16);
}

.cpc__pay-seg-label {
    padding: 0 4px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
}

.cpc__pay-seg.is-reached .cpc__pay-seg-label {
    color: #ffe9b8;
}

/* ---------- 当前阶段摘要 ---------- */

.cpc__current {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(56, 225, 255, 0.07);
    border: 1px solid rgba(56, 225, 255, 0.16);
}

.cpc__current.is-blocked {
    background: rgba(255, 93, 108, 0.08);
    border-color: rgba(255, 93, 108, 0.22);
}

.cpc__current-stage {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--cp-cyan);
    letter-spacing: 1px;
}

.cpc__current.is-blocked .cpc__current-stage {
    color: #ff9aa4;
}

.cpc__current-summary {
    font-size: 12px;
    color: var(--cp-dim);
}

.cpc__meta {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--cp-faint);
    letter-spacing: 0.5px;
}

/* ---------- 项目费用条：预算 vs 累计使用（青色细条，与回款带金色区分） ---------- */

.cpc__expense {
    margin-top: 10px;
}

.cpc__expense-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--cp-dim);
    font-variant-numeric: tabular-nums;
}

.cpc__expense-used {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--cp-faint);
}

.cpc__expense-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(120, 160, 255, 0.08);
    overflow: hidden;
}

.cpc__expense-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #17729c, var(--cp-cyan));
    box-shadow: 0 0 8px rgba(56, 225, 255, 0.3);
    transition: width 0.4s ease;
}

/* 超支：红色满格 + 红色小标（横向细条形态与卡点的节点脉冲、整卡红边区分） */
.cpc__expense.is-over .cpc__expense-bar i {
    background: linear-gradient(90deg, #8c2f3a, var(--cp-red));
    box-shadow: 0 0 10px rgba(255, 93, 108, 0.45);
}

.cpc__expense-over {
    font-size: 10px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    color: #ffc9cf;
    background: rgba(255, 93, 108, 0.14);
    border: 1px solid rgba(255, 93, 108, 0.4);
    border-radius: 4px;
    padding: 0 5px;
}

/* 已终止：费用条随整卡冻结灰化 */
.cpc--terminated .cpc__expense-head,
.cpc--terminated .cpc__expense-used {
    color: var(--cp-faint);
}

.cpc--terminated .cpc__expense-bar i {
    background: #3d4a63;
    box-shadow: none;
}

.cpc--terminated .cpc__expense-over {
    color: #8e9bb8;
    background: rgba(122, 140, 168, 0.1);
    border-color: rgba(122, 140, 168, 0.3);
}

/* 钻取层费用区：超支数值红 */
.cpc__kv dd.is-over {
    color: var(--cp-red);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 文号：批复产物的描边小牌匾（金调、内凹光、等宽数字），突出但不喧宾 */
.cpc__docno {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    color: #ffe9b8;
    background: linear-gradient(180deg, rgba(246, 196, 83, 0.12), rgba(246, 196, 83, 0.04));
    border: 1px solid rgba(246, 196, 83, 0.5);
    border-radius: 3px;
    box-shadow: inset 0 0 6px rgba(246, 196, 83, 0.08), 0 0 10px rgba(246, 196, 83, 0.1);
}

/* ---------- 展开明细 ---------- */

.cpc__detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.cpc__detail.is-open {
    grid-template-rows: 1fr;
}

.cpc__detail-inner {
    overflow: hidden;
    min-height: 0;
}

.cpc__detail-loading {
    padding: 18px 0 6px;
    font-size: 12px;
    color: var(--cp-dim);
    text-align: center;
    letter-spacing: 2px;
}

.cpc__section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(120, 170, 255, 0.14);
}

.cpc__section h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--cp-gold);
}

.cpc__kv {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cpc__kv > div {
    display: flex;
    gap: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.cpc__kv dt {
    flex: none;
    width: 60px;
    color: var(--cp-faint);
}

.cpc__kv dd {
    margin: 0;
    color: var(--cp-text);
    word-break: break-all;
}

.cpc__kv dd.is-amount {
    color: var(--cp-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cpc__empty {
    margin: 0;
    font-size: 12px;
    color: var(--cp-faint);
}

/* ---------- 项目主数据（人工补录入口） ---------- */

.cpc__sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.cpc__sechead h4 {
    margin: 0;
}

.cpc__editbtn {
    flex: none;
    font: inherit;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--cp-dim);
    background: none;
    border: 1px solid rgba(120, 170, 255, 0.25);
    border-radius: 4px;
    padding: 2px 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.cpc__editbtn:hover {
    color: var(--cp-gold);
    border-color: rgba(246, 196, 83, 0.45);
}

.cpc__editbtn:disabled {
    opacity: 0.5;
    cursor: default;
}

.cpc__retrybtn {
    margin-left: 8px;
    font: inherit;
    font-size: 11px;
    color: var(--cp-cyan);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cpc__kv dd.is-empty {
    color: var(--cp-faint);
}

.cpc__period-hint {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cp-amber);
    border: 1px dashed color-mix(in srgb, var(--cp-amber) 55%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--cp-amber) 8%, transparent);
}

.cpc__tasks,
.cpc__members,
.cpc__changes,
.cpc__payments {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cpc__payments li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ---------- 历次质控评审（时间线：最新在上，节点色随状态） ---------- */

.cpc__reviews {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.cpc__reviews li {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 12px 16px;
}

.cpc__reviews li:last-child {
    padding-bottom: 0;
}

.cpc__reviews li > .cpc__deliverable-tag {
    flex: none;
    margin-top: 1px;
}

/* 时间线节点：色随状态，复用徽标三态语义（审批中青脉冲 / 已通过点亮青 / 已驳回红） */
.cpc__reviews li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-faint);
}

.cpc__reviews li.cpc__review--submitted::before {
    background: var(--cp-cyan);
    box-shadow: 0 0 5px var(--cp-cyan-dim);
    animation: cpc-dot-pulse 1.4s ease-in-out infinite;
}

.cpc__reviews li.cpc__review--approved::before {
    background: var(--cp-cyan);
    box-shadow: 0 0 6px var(--cp-cyan);
}

.cpc__reviews li.cpc__review--rejected::before {
    background: var(--cp-red);
    box-shadow: 0 0 5px rgba(255, 93, 108, 0.6);
}

/* 节点间竖向连线 */
.cpc__reviews li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 15px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(120, 170, 255, 0.32), rgba(120, 170, 255, 0.08));
}

.cpc__review-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cpc__review-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cpc__review-type {
    font-size: 11px;
    line-height: 1.5;
    color: var(--cp-text);
    background: rgba(120, 160, 255, 0.05);
    border: 1px solid rgba(120, 170, 255, 0.22);
    border-radius: 4px;
    padding: 0 6px;
}

/* 多于 2 个成果类型时折叠为 +N，悬停/长按 title 见全量 */
.cpc__review-type--more {
    color: var(--cp-dim);
    border-style: dashed;
}

.cpc__review-dates {
    font-size: 10px;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
}

/* 历史条弱化一档：最新送审保持全亮度，时间纵深由明度差承担 */
.cpc__reviews li:not(.is-latest) .cpc__review-type {
    color: var(--cp-dim);
    border-color: rgba(120, 170, 255, 0.14);
    background: none;
}

.cpc__reviews li:not(.is-latest)::before {
    box-shadow: none;
}

/* 已终止：时间线节点随整卡灰化 */
.cpc--terminated .cpc__reviews li::before {
    background: #4d5a74;
    box-shadow: none;
    animation: none;
}

.cpc__deliverable-comment {
    font-size: 11px;
    line-height: 1.5;
    color: #ff9aa4;
}

.cpc__deliverable-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}

.cpc__deliverable-tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* 审批中：青色脉冲点（进行中语义） */
.cpc__deliverable-tag--submitted {
    color: var(--cp-cyan);
    background: rgba(56, 225, 255, 0.06);
    border: 1px solid rgba(56, 225, 255, 0.3);
}

.cpc__deliverable-tag--submitted::before {
    background: var(--cp-cyan);
    box-shadow: 0 0 5px var(--cp-cyan-dim);
    animation: cpc-dot-pulse 1.4s ease-in-out infinite;
}

@keyframes cpc-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 已通过：点亮青（静态，与轨道完成态同语义） */
.cpc__deliverable-tag--approved {
    color: #a8f0ff;
    background: rgba(56, 225, 255, 0.14);
    border: 1px solid rgba(56, 225, 255, 0.45);
}

.cpc__deliverable-tag--approved::before {
    background: var(--cp-cyan);
    box-shadow: 0 0 6px var(--cp-cyan);
}

/* 已退回：红（与卡点同色语义），回退意见随行展示 */
.cpc__deliverable-tag--rejected {
    color: #ff9aa4;
    background: rgba(255, 93, 108, 0.1);
    border: 1px solid rgba(255, 93, 108, 0.45);
}

.cpc__deliverable-tag--rejected::before {
    background: var(--cp-red);
    box-shadow: 0 0 5px rgba(255, 93, 108, 0.6);
}

/* 已终止：徽标随整卡灰化 */
.cpc--terminated .cpc__deliverable-tag {
    color: #8e9bb8;
    background: rgba(122, 140, 168, 0.08);
    border-color: rgba(122, 140, 168, 0.3);
}

.cpc--terminated .cpc__deliverable-tag::before {
    background: #4d5a74;
    box-shadow: none;
    animation: none;
}

.cpc--terminated .cpc__deliverable-comment {
    color: #6b7a9e;
}

.cpc__payment-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cpc__payment-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cp-text);
}

.cpc__payment-meta {
    font-size: 11px;
    color: var(--cp-dim);
    font-variant-numeric: tabular-nums;
}

.cpc__payment-tag {
    flex: none;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--cp-faint);
    border: 1px solid rgba(122, 140, 168, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
}

.cpc__payment-tag.is-reached {
    color: #ffe9b8;
    background: rgba(246, 196, 83, 0.12);
    border-color: rgba(246, 196, 83, 0.4);
}

.cpc__members li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.cpc__member-name {
    color: var(--cp-text);
}

.cpc__member-role {
    color: var(--cp-dim);
}

.cpc__tasks li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.cpc__task-desc {
    color: var(--cp-text);
}

.cpc__task-meta {
    flex: none;
    color: var(--cp-dim);
    font-variant-numeric: tabular-nums;
}

.cpc__changes li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.cpc__change-date {
    flex: none;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
}

.cpc__change-type {
    flex: none;
    color: var(--cp-cyan);
    font-size: 11px;
    border: 1px solid rgba(56, 225, 255, 0.25);
    border-radius: 4px;
    padding: 0 5px;
}

.cpc__change-desc {
    color: var(--cp-dim);
}

/* ---------- 分区标题 ---------- */

.cockpit__sec {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 24px 0 10px;
}

.cockpit__sec h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #9fb4d8;
}

.cockpit__sec-hint {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--cp-faint);
}

.cockpit__sec::after {
    content: "";
    flex: 1;
    height: 1px;
    transform: translateY(-3px);
    background: linear-gradient(90deg, var(--cp-line), transparent);
}

.cockpit__sec--terminated h2 {
    color: var(--cp-faint);
}

/* 已完结分区标题：弱化金调（达成语义），与已终止的灰调区分 */
.cockpit__sec--completed h2 {
    color: #d9c48a;
}

/* ---------- 成员负载：竖向柱状图 ---------- */

.cockpit__members {
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    background: var(--cp-panel);
    padding: 16px 10px 12px;
}

.mchart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.mchart::-webkit-scrollbar {
    display: none;
}

.mchart__col {
    /* 首屏露 3 名（第 4 名列边缘暗示可横滑），其余横向滑动查看 */
    flex: 0 0 30%;
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mchart__value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--cp-gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(246, 196, 83, 0.3);
}

.mchart__bar {
    height: 72px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mchart__bar i {
    display: block;
    width: 58%;
    max-width: 26px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--cp-cyan), #17729c);
    box-shadow: 0 0 10px rgba(56, 225, 255, 0.28);
    transition: height 0.4s ease;
}

.mchart__col.is-open .mchart__bar i {
    background: linear-gradient(180deg, #8ceeff, var(--cp-cyan));
    box-shadow: 0 0 14px rgba(56, 225, 255, 0.5);
}

.mchart__name {
    font-size: 11px;
    color: var(--cp-dim);
    white-space: nowrap;
}

.mchart__col.is-open .mchart__name {
    color: var(--cp-cyan);
    font-weight: 600;
}

.member__projects {
    margin: 12px 0 0;
    padding: 10px 6px 2px;
    border-top: 1px dashed rgba(120, 170, 255, 0.14);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member__projects li {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.member__pname {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cp-text);
}

.member__ptag {
    margin-left: 6px;
    font-size: 9px;
    letter-spacing: 1px;
    color: #8e9bb8;
    border: 1px solid rgba(122, 140, 168, 0.3);
    border-radius: 3px;
    padding: 0 4px;
    vertical-align: 1px;
}

.member__ptag--completed {
    color: #d9c48a;
    border-color: rgba(246, 196, 83, 0.35);
}

.member__pmeta {
    font-size: 11px;
    color: var(--cp-dim);
}

/* ---------- 全员排行（"全部成员"展开） ---------- */

.cockpit__roster-toggle {
    width: 100%;
    margin-top: 10px;
    padding: 7px 0;
    font: inherit;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--cp-dim);
    background: rgba(120, 160, 255, 0.04);
    border: 1px dashed rgba(120, 170, 255, 0.18);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.cockpit__roster-toggle:hover {
    color: var(--cp-cyan);
    border-color: rgba(56, 225, 255, 0.35);
}

.roster {
    margin: 10px 0 0;
    padding: 8px 2px 0;
    list-style: none;
    border-top: 1px dashed rgba(120, 170, 255, 0.14);
    animation: pane-in-up 0.3s ease both;
}

.roster li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 4px;
    font-size: 12px;
}

.roster li.is-idle {
    opacity: 0.55;
}

.roster__rank {
    flex: none;
    width: 18px;
    font-size: 10px;
    color: var(--cp-faint);
    font-variant-numeric: tabular-nums;
}

.roster__name {
    color: var(--cp-text);
}

.roster__count {
    margin-left: auto;
    color: var(--cp-dim);
    font-variant-numeric: tabular-nums;
}

/* ---------- 动效降级：系统减弱动态效果时全部收敛 ---------- */

@media (prefers-reduced-motion: reduce) {
    .cockpit,
    .cockpit *,
    .cockpit::before,
    .cockpit::after,
    .cockpit *::before,
    .cockpit *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 页脚与加载 ---------- */

.cockpit__footer {
    margin-top: 26px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--cp-faint);
}

.cockpit__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 40vh;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--cp-dim);
}

.cockpit__loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan);
    animation: cockpit-loading 1.1s ease-in-out infinite;
}

@keyframes cockpit-loading {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}