/* ========================================
   三年之约（/pact.html）—— 公益自我监督与互相监督
   v6：「公益森林」视觉体系，pc- 前缀为本页专用
   深邃森林绿 + 鎏金点缀 + 象牙纸面，庄重高级的公益质感
   ======================================== */

/* ---------- 页面级变量与背景：象牙纸面 + 森林光晕 ---------- */
.page-pact {
    --pc-gold: #c9a34e;
    --pc-gold-deep: #a8842f;
    --pc-forest: #1c3a26;
    --pc-forest-2: #2a5537;
    background:
        radial-gradient(1400px 560px at 88% -140px, rgba(28, 58, 38, 0.09), transparent 62%),
        radial-gradient(1000px 480px at -120px 26%, rgba(201, 163, 78, 0.08), transparent 58%),
        radial-gradient(900px 500px at 50% 120%, rgba(93, 151, 67, 0.07), transparent 60%),
        var(--bg-color, #f7f8f4);
}

/* ---------- 契约宣言头图：深邃森林绿 + 鎏金 ---------- */
.pc-scroll {
    position: relative;
    background:
        radial-gradient(900px 320px at 82% -60px, rgba(201, 163, 78, 0.16), transparent 60%),
        radial-gradient(700px 400px at -80px 110%, rgba(93, 151, 67, 0.28), transparent 58%),
        linear-gradient(150deg, var(--pc-forest, #1c3a26) 0%, var(--pc-forest-2, #2a5537) 62%, #35673f 100%);
    border: none;
    border-radius: var(--radius-12);
    box-shadow: 0 18px 44px rgba(20, 46, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 46px 44px var(--space-40);
    margin-bottom: var(--space-32);
    overflow: hidden;
}
.pc-scroll::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.028) 23px 24px),
        radial-gradient(1.5px 1.5px at 22% 30%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 68% 22%, rgba(255, 255, 255, 0.28) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 84% 62%, rgba(255, 255, 255, 0.22) 50%, transparent 51%);
    pointer-events: none;
}
.pc-scroll::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--pc-gold, #c9a34e) 30%, #e8cd8a 50%, var(--pc-gold, #c9a34e) 70%, transparent);
    opacity: 0.85;
    pointer-events: none;
}
.pc-scroll-wax {
    position: absolute;
    top: -18px; right: var(--space-24);
    width: 76px; height: 76px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 32% 30%, #d9b45f, #a8842f 72%);
    color: #fdf6e4; font-size: var(--fs-26); font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.22);
    transform: rotate(12deg);
    font-family: var(--font-serif-kai);
}
.pc-scroll-body { position: relative; }
.pc-scroll-overline {
    display: inline-block;
    font-size: var(--fs-12); letter-spacing: 4px;
    color: #e8cd8a;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(232, 205, 138, 0.4);
    padding-bottom: var(--space-6); margin-bottom: var(--space-12);
}
.pc-scroll-title {
    margin: 0 0 12px;
    font-size: var(--fs-h1);
    letter-spacing: 3px;
    color: #f7f4ea;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    font-family: var(--font-serif-kai);
}
.pc-scroll-lede {
    margin: 0;
    font-size: var(--fs-14); line-height: 2.1;
    color: rgba(247, 244, 234, 0.82);
    max-width: 640px;
}
.pc-scroll-lede b { color: #e8cd8a; font-weight: 700; }
.pc-tl-badges {
    display: inline-flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
    margin-top: var(--space-16); padding: var(--space-10) var(--space-16);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(232, 205, 138, 0.35);
    border-radius: var(--radius-pill);
}
.pc-tl-badge {
    display: inline-flex; align-items: center; gap: var(--space-8);
    font-size: var(--fs-14); font-weight: 700; color: #f7f4ea;
    font-family: var(--font-serif); letter-spacing: 1px;
}
.pc-tl-badge i {
    font-style: normal; font-size: var(--fs-12); font-weight: 500;
    padding: var(--space-2) var(--space-10); border-radius: var(--radius-pill);
    background: rgba(232, 205, 138, 0.16); color: #e8cd8a;
}
.pc-tl-badge--accent i { background: rgba(163, 116, 62, 0.35); color: #ffd9a8; }
.pc-tl-arrow { color: rgba(232, 205, 138, 0.6); font-size: var(--fs-13); }

.pc-panel.active { display: block; }

/* ---------- 立约时间窗横幅 ---------- */
.pc-window {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    background: linear-gradient(135deg, rgba(201, 163, 78, 0.12), rgba(201, 163, 78, 0.04));
    border: 1px solid rgba(201, 163, 78, 0.35);
    border-radius: var(--radius-8);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-24);
    font-size: var(--fs-13);
    color: var(--pc-gold-deep, #a8842f);
}
.pc-window-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary-color, #5d9743);
    box-shadow: 0 0 0 3px rgba(93, 151, 67, 0.18);
    flex: none;
    animation: pc-pulse 2.4s ease-in-out infinite;
}
@keyframes pc-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(93, 151, 67, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(93, 151, 67, 0.08); }
}
.pc-window-text b { font-weight: 700; }

/* ---------- 卡片容器 ---------- */
.pc-card {
    position: relative;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(251, 250, 245, 0.94));
    border: 1px solid rgba(93, 151, 67, 0.14);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.7); padding: var(--space-24) ;
}
.pc-card::before {
    content: '';
    position: absolute; top: 0; left: var(--space-16); right: var(--space-16); height: 2px;
    background: linear-gradient(90deg, transparent, rgba(201, 163, 78, 0.35), transparent);
    border-radius: var(--radius-2);
    pointer-events: none;
}

/* ---------- 步骤标题 ---------- */
.pc-step-head {
    display: flex; align-items: center; gap: var(--space-10);
    margin: 22px 0 14px;
}
.pc-step-head:first-child { margin-top: 0; }
.pc-step-no {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-color, #5d9743);
    color: #fff; font-size: var(--fs-13); font-weight: 700;
    flex: none;
}
.pc-step-title { font-size: var(--fs-15); font-weight: 700; color: var(--text-primary, #333); }

/* ---------- 表单 ---------- */
.pc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16) var(--space-20);
}
.pc-field-full { grid-column: 1 / -1; }
.pc-field label {
    display: block; margin-bottom: var(--space-6);
    font-size: var(--fs-13); font-weight: 600; color: var(--text-primary, #333);
}
.pc-req { color: #d9534f; font-style: normal; }
.pc-field input,
.pc-field textarea,
.pc-captcha-row input,
.pc-item-add input,
.pc-content-edit textarea,
.pc-punch-note input{
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color, #ddd);
    border-radius: var(--radius-8);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #333);
    font-size: var(--fs-14);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pc-field input:focus,
.pc-field textarea:focus,
.pc-captcha-row input:focus,
.pc-item-add input:focus,
.pc-content-edit textarea:focus,
.pc-punch-note input:focus{
    outline: none;
    border-color: var(--primary-color, #5d9743);
    box-shadow: 0 0 0 3px rgba(93, 151, 67, 0.14);
}
.pc-field textarea, .pc-content-edit textarea { resize: vertical; min-height: 74px; }
.pc-hint { margin: 6px 0 0; font-size: var(--fs-12); color: var(--text-muted, #888); line-height: var(--lh-ui); }
.pc-hint-flow { margin-top: var(--space-10); }
.pc-hint-strong { color: #b88230; }
.pc-hint-strong b { font-weight: 700; }

/* ---------- 图形验证码行 ---------- */
.pc-captcha-row {
    display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
}
.pc-captcha-row input { flex: 1; min-width: 160px; max-width: 260px; }
.pc-captcha-img {
    width: 132px; height: 44px; flex: none;
    border-radius: var(--radius-8);
    border: 1px solid var(--border-color, #ddd);
    overflow: hidden;
    cursor: pointer;
    background: #eef6ea;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #888);
    font-size: var(--fs-12);
}
.pc-captcha-img svg { width: 100%; height: 100%; display: block; }
.pc-captcha-img.pc-loading { animation: pc-blink 0.9s linear infinite; }
@keyframes pc-blink { 50% { opacity: 0.45; } }

/* ---------- 按钮 ---------- */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6);
    padding: var(--space-10) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid transparent;
    font-size: var(--fs-14); font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.pc-btn:active { transform: translateY(1px); }
.pc-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.pc-btn-primary {
    background: linear-gradient(150deg, var(--pc-forest-2, #2a5537), var(--pc-forest, #1c3a26));
    color: #f3efdf;
    box-shadow: 0 4px 14px rgba(28, 58, 38, 0.35);
    letter-spacing: 1px;
}
.pc-btn-primary:hover:not([disabled]) { filter: brightness(1.18); }
.pc-btn-ghost {
    background: transparent;
    color: var(--pc-forest-2, #2a5537);
    border-color: rgba(201, 163, 78, 0.55);
}
.pc-btn-ghost:hover:not([disabled]) { background: rgba(93, 151, 67, 0.08); }
.pc-btn-sm { padding: var(--space-6) var(--space-12); font-size: var(--fs-13); }
.pc-actions { margin-top: var(--space-24); display: flex; align-items: center; gap: var(--space-12); }

/* ---------- 消息提示 ---------- */
.pc-msg { margin: 14px 0 0; font-size: var(--fs-13); min-height: 20px; line-height: 1.7; }
.pc-msg.ok { color: var(--primary-dark, #3f7a2c); font-weight: 600; }
.pc-msg.err { color: #c14a45; font-weight: 600; }

/* ---------- 名单 ---------- */
.pc-roster-meta { margin-bottom: var(--space-16); font-size: var(--fs-13); color: var(--text-secondary, #666); }
.pc-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}
.pc-roster-card {
    display: flex; gap: var(--space-12); align-items: flex-start;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(93, 151, 67, 0.14);
    border-radius: var(--radius-12);
    padding: var(--space-16);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.pc-roster-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pc-roster-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-color, #5d9743), var(--primary-light, #7ab85e));
    color: #fff; font-size: var(--fs-18); font-weight: 700;
}
.pc-roster-body { min-width: 0; }
.pc-roster-name { margin: 0 0 4px; font-size: var(--fs-15); color: var(--text-primary, #333); }
.pc-roster-content { margin: 0; font-size: var(--fs-13); line-height: var(--lh-base); color: var(--text-secondary, #555); word-break: break-word; }
.pc-roster-content.pc-roster-empty { color: var(--text-muted, #999); font-style: italic; }
.pc-roster-time { display: block; margin-top: var(--space-6); font-size: var(--fs-12); color: var(--text-muted, #999); }
.pc-more { margin-top: var(--space-20); text-align: center; }
.pc-more[hidden] { display: none; }

/* [hidden] 会被 flex / inline-flex 的 display 声明覆盖，统一显式声明隐藏 */
.pc-cta-btn[hidden] { display: none; }
.pc-window[hidden] { display: none; }
.pc-apply-card[hidden] { display: none; }
/* 进入履约中心后：整块「提交你的立约申请」模块（含模块标题、验证码）隐藏 */
.pg-section.pc-panel-wrap[data-pactno-hide][hidden] { display: none; }
.pc-roster-tip { margin-top: var(--space-16); text-align: center; font-size: var(--fs-13); color: var(--text-muted, #888); }
.pc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted, #999);
    font-size: var(--fs-14);
}

/* ---------- 完成记录入口 ---------- */
.pc-record-entry { margin-bottom: var(--space-24); }
.pc-hint-guard { display: flex; align-items: center; gap: var(--space-6); }

/* ---------- 记录详情 ---------- */
.pc-record { display: grid; gap: var(--space-16); }
.pc-record[hidden] { display: none; }
.pc-record-exit { text-align: center; }
.pc-progress-head {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-16);
    margin-bottom: var(--space-16);
}
.pc-record-name { margin: 0 0 4px; font-size: var(--fs-17); color: var(--text-primary, #333); }
.pc-record-window { margin: 0; font-size: var(--fs-12); color: var(--text-muted, #888); }
.pc-progress-ring {
    width: 72px; height: 72px; border-radius: 50%;
    flex: none;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--primary-color, #5d9743) calc(var(--percent, 0) * 1%), rgba(93, 151, 67, 0.14) 0);
    position: relative;
}
.pc-progress-ring::after {
    content: '';
    position: absolute; inset: var(--space-6);
    border-radius: 50%;
    background: var(--bg-card, #fff);
}
.pc-progress-num { position: relative; z-index: 1; font-size: var(--fs-15); font-weight: 700; color: var(--primary-dark, #4a7a35); }
.pc-progress-bar {
    height: 10px; border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.14);
    overflow: hidden;
}
.pc-progress-fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--primary-light, #7ab85e), var(--primary-color, #5d9743));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-progress-meta { margin: 10px 0 0; font-size: var(--fs-13); color: var(--text-secondary, #666); }

.pc-card-head {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
    margin-bottom: var(--space-10);
}
.pc-card-head h4 { margin: 0; font-size: var(--fs-15); color: var(--text-primary, #333); }
.pc-card-head-actions { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.pc-record-content { margin: 0; font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--text-secondary, #555); white-space: pre-wrap; word-break: break-word; }
.pc-content-edit { margin-top: var(--space-12); }
.pc-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-10); margin-top: var(--space-10); }

/* ---------- 任务模板库 ---------- */
.pc-task-tpl { margin: 4px 0 14px; }
.pc-task-tpl[hidden] { display: none; }
.pc-task-tpl-tip { margin: 0 0 12px; font-size: var(--fs-13); color: var(--text-secondary, #666); line-height: 1.7; }
.pc-task-tpl-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12);
    max-height: 420px;
    overflow-y: auto;
    padding-right: var(--space-4);
}
.pc-tpl-group { grid-column: 1 / -1; }
.pc-tpl-group-title {
    display: inline-flex; align-items: center; gap: var(--space-6);
    margin: 4px 0 8px;
    font-size: var(--fs-13); font-weight: 700; letter-spacing: 1px;
    color: var(--primary-dark, #4a7a35);
    border-left: 3px solid var(--primary-color, #5d9743);
    padding-left: var(--space-8);
}
.pc-tpl-group-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.pc-tpl-item {
    display: flex; align-items: flex-start; gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color, #e3e8e0);
    border-radius: var(--radius-8);
    background: var(--bg-card, #fff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    color: var(--text-secondary, #555);
}
.pc-tpl-item:hover { border-color: rgba(93, 151, 67, 0.5); }
.pc-tpl-item.checked {
    border-color: var(--primary-color, #5d9743);
    background: rgba(93, 151, 67, 0.07);
    color: var(--primary-dark, #3f7a2c);
}
.pc-tpl-item input { margin-top: var(--space-2); accent-color: var(--primary-color, #5d9743); flex: none; }
.pc-tpl-item b { color: var(--text-primary, #333); font-weight: 600; }
.pc-tpl-item .pc-tpl-adopted { margin-left: auto; font-size: var(--fs-11); color: var(--text-muted, #999); flex: none; }

/* ---------- 每日打卡 ---------- */
.pc-punch-streak {
    font-size: var(--fs-13); font-weight: 700;
    color: #d9772f;
    background: rgba(217, 119, 47, 0.10);
    border: 1px solid rgba(217, 119, 47, 0.30);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-12);
}
.pc-punch-action { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.pc-punch-today { font-size: var(--fs-13); color: var(--primary-dark, #3f7a2c); font-weight: 600; }
.pc-punch-note { margin-top: var(--space-12); }
.pc-punch-note[hidden] { display: none; }
.pc-punch-cal {
    display: grid;
    grid-template-columns: repeat(auto-fill, 16px); gap: var(--space-2);
    margin-top: var(--space-16);
    max-height: 210px;
    overflow-y: auto;
    padding: var(--space-4) var(--space-2);
}
.pc-punch-cell {
    width: 16px; height: 16px;
    border-radius: var(--radius-4);
    background: rgba(93, 151, 67, 0.08);
    cursor: default;
    flex: none;
}
.pc-punch-cell--punch { background: var(--primary-color, #5d9743); }
.pc-punch-cell--today { outline: 2px solid rgba(217, 119, 47, 0.55); outline-offset: 1px; }

/* ---------- 微信社群引导卡 ---------- */
.pc-wechat-card {
    display: flex; align-items: center; gap: var(--space-20);
    background: linear-gradient(135deg, rgba(93, 151, 67, 0.10), rgba(255, 255, 255, 0.92));
    border: 1px dashed rgba(93, 151, 67, 0.45);
}
.pc-wechat-body { min-width: 0; }
.pc-wechat-body h4 { margin: 0 0 6px; font-size: var(--fs-15); color: var(--primary-dark, #4a7a35); }
.pc-wechat-body p { margin: 0; font-size: var(--fs-13); line-height: var(--lh-loose); color: var(--text-secondary, #555); }
.pc-wechat-id {
    font-family: var(--font-mono);
    color: var(--primary-dark, #1e5c38);
    font-size: var(--fs-15);
    letter-spacing: 1px;
}
.pc-wechat-qr {
    flex: none;
    width: 120px; height: 120px;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.25);
    background: #fff;
    padding: var(--space-4);
}

/* ---------- 完成项列表 ---------- */
.pc-item-list { list-style: none; margin: 0 0 8px; padding: 0; }
.pc-item-list:empty { margin: 0; }
.pc-item {
    display: flex; align-items: flex-start; gap: var(--space-10);
    padding: var(--space-10) var(--space-4);
    border-bottom: 1px dashed var(--border-light, #eee);
}
.pc-item:last-child { border-bottom: none; }
.pc-item-title { font-size: var(--fs-14); line-height: 1.7; color: var(--text-primary, #333); word-break: break-word; }
.pc-item.done .pc-item-title { color: var(--primary-dark, #4a7a35); }
.pc-item-time { display: block; font-size: var(--fs-12); color: var(--text-muted, #999); margin-top: var(--space-2); }
.pc-item-del {
    border: none; background: none;
    color: var(--text-muted, #999);
    font-size: var(--fs-15); cursor: pointer;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-4);
    flex: none;
}
.pc-item-del:hover { color: #c14a45; background: rgba(193, 74, 69, 0.08); }
.pc-item-add { margin-top: var(--space-8); }
.pc-item-add[hidden] { display: none; }
.pc-items-card .pc-hint { margin-top: var(--space-12); }

/* ---------- v9 增量（Issue #28 第十一轮）：
   自律宣言 / 履约见证证书卡 / 任务清单引导链接
   ======================================== */

/* 自律长跑宣言 */
.pc-mission-oath {
    margin: 16px auto 0;
    max-width: 820px;
    font-size: var(--fs-14);
    line-height: 2;
    color: var(--text-secondary, #555);
    background: linear-gradient(120deg, rgba(201, 163, 78, 0.10), rgba(201, 163, 78, 0.04));
    border: 1px dashed rgba(201, 163, 78, 0.45);
    border-radius: var(--radius-12);
    padding: var(--space-12) var(--space-16);
}
.pc-mission-oath b { color: var(--pc-gold-deep, #a8842f); font-weight: 700; }

/* 履约见证：证书与纪念品 */
.pc-cert { margin-bottom: var(--space-32); }
.pc-cert-card {
    display: flex;
    align-items: center; gap: var(--space-20);
    background:
        radial-gradient(420px 160px at 88% 0%, rgba(201, 163, 78, 0.16), transparent 70%),
        radial-gradient(300px 180px at 6% 100%, rgba(93, 151, 67, 0.10), transparent 65%),
        linear-gradient(160deg, rgba(240, 247, 237, 0.96), rgba(255, 255, 255, 0.93));
    border: 1px solid rgba(201, 163, 78, 0.4);
    border-radius: var(--radius-12);
    box-shadow: 0 8px 26px rgba(28, 58, 38, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: var(--space-20) var(--space-24);
    position: relative;
    overflow: hidden;
}
.pc-cert-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--pc-gold, #c9a34e) 30%, #e8cd8a 50%, var(--pc-gold, #c9a34e) 70%, transparent);
}
.pc-cert-medal {
    flex: none;
    width: 96px; height: 104px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 8px 18px rgba(138, 106, 36, 0.35));
}
.pc-cert-medal svg { width: 100%; height: 100%; }
.pc-cert-title {
    margin: 0 0 8px;
    font-size: var(--fs-17);
    font-weight: 800;
    color: var(--pc-forest, #1c3a26);
}
.pc-cert-text {
    margin: 0;
    font-size: var(--fs-13);
    line-height: 2;
    color: var(--text-secondary, #555);
}
.pc-cert-text b { color: var(--pc-gold-deep, #a8842f); font-weight: 700; }

/* 任务清单引导链接 */
a.pc-link { color: var(--primary-dark, #4a7a35); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
a.pc-link:hover { color: var(--pc-gold-deep, #a8842f); }

/* ---------- 响应式 ---------- */
@media (max-width: 767px) {
    .pc-form-grid { grid-template-columns: 1fr; }
    .pc-roster-grid { grid-template-columns: 1fr; }
    .pc-task-tpl-body { grid-template-columns: 1fr; }
    .pc-tpl-group-items { grid-template-columns: 1fr; }
    .pc-card { padding: var(--space-16) ; }
    .pc-scroll { padding: var(--space-24) var(--space-20); }
    .pc-scroll-wax { width: 58px; height: 58px; font-size: var(--fs-20); top: -14px; right: var(--space-16); }
    .pc-wechat-card { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-window-dot { animation: none; }
    .pc-progress-fill { transition: none; }
    .pc-roster-card:hover { transform: none; }
}

/* ---------- 右侧边栏小部件 ---------- */
.pc-side-widget { margin-bottom: var(--space-24); }
.pc-side-wechat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-side-wechat img {
    display: block;
    margin: 0 auto;
    width: 140px; height: 140px;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.25);
    background: #fff; padding: var(--space-4);
}
.pc-side-wechat p { margin: 10px 0 0; font-size: var(--fs-12); line-height: var(--lh-base); color: var(--text-secondary, #666); }
.pc-side-wechat b { color: var(--primary-dark, #1e5c38); font-family: var(--font-mono); }
.pc-side-rules {
    margin: 0; padding-left: var(--space-16);
    font-size: var(--fs-12); line-height: 2; color: var(--text-secondary, #666);
}

/* ========================================
   v4 增量（Issue #28 第八轮）：
   任务清单库总览 / 程序员工具箱 / 侧边栏增强
   ======================================== */

/* ---------- 任务清单库总览 ---------- */
.pc-tasklib-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-10); margin-bottom: var(--space-12);
}
.pc-tasklib-cats { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.pc-tasklib-cat {
    padding: var(--space-6) var(--space-12); border-radius: var(--radius-pill);
    border: 1px solid rgba(93, 151, 67, 0.28);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary, #555);
    font-size: var(--fs-13); font-weight: 500; cursor: pointer;
    transition: all var(--transition-fast);
}
.pc-tasklib-cat:hover { border-color: rgba(93, 151, 67, 0.6); color: var(--primary-dark, #4a7a35); }
.pc-tasklib-cat.active {
    background: linear-gradient(135deg, #5d9743, #4a7a35);
    border-color: transparent; color: #fff;
    box-shadow: 0 3px 10px rgba(93, 151, 67, 0.3);
}
.pc-tasklib-count { font-size: var(--fs-12); color: var(--text-muted, #999); }
.pc-tasklib-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-12);
}
.pc-tl-card {
    position: relative;
    display: flex; align-items: flex-start; gap: var(--space-12);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(93, 151, 67, 0.16);
    border-radius: var(--radius-8);
    box-shadow: var(--shadow-sm);
    padding: var(--space-16) var(--space-16) var(--space-12);
    animation: pcTlIn 0.45s ease both;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
@keyframes pcTlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-tl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 151, 67, 0.45);
    box-shadow: 0 8px 20px rgba(93, 151, 67, 0.14);
}
.pc-tl-icon {
    flex: none; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-18); border-radius: var(--radius-12);
    background: radial-gradient(120% 120% at 0% 0%, rgba(93, 151, 67, 0.16), transparent 60%), rgba(240, 247, 237, 0.9);
    border: 1px solid rgba(93, 151, 67, 0.18);
}
.pc-tl-body { min-width: 0; flex: 1; }
.pc-tl-title { margin: 0; font-size: var(--fs-14); font-weight: 700; color: var(--text-primary, #333); line-height: 1.5; }
.pc-tl-desc { margin: 5px 0 0; font-size: var(--fs-12); color: var(--text-secondary, #666); line-height: var(--lh-ui); }
.pc-tl-cat {
    flex: none; align-self: flex-start;
    font-size: var(--fs-11); font-weight: 600;
    padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill);
    color: #4a7a35; background: rgba(93, 151, 67, 0.12);
}
.pc-tl-cat--tech { color: #2c6e8f; background: rgba(52, 152, 219, 0.12); }

/* 任务清单卡片认领/完成态 */
.pc-tl-claim { margin-top: var(--space-10); font-size: var(--fs-12); }
.pc-tl-card--done { border-color: rgba(93, 151, 67, 0.55); background: linear-gradient(150deg, rgba(240, 249, 235, 0.96), rgba(255, 255, 255, 0.94)); }
.pc-tl-card--done .pc-tl-title { color: var(--primary-dark, #4a7a35); }
.pc-tl-card--done .pc-tl-icon { background: rgba(93, 151, 67, 0.16); }
.pc-tl-card--claimed { border-style: dashed; }







/* ---------- 程序员の浪漫 · 代码化誓言 ---------- */
.pc-vow-card { margin-bottom: var(--space-4); }
.pc-vow-code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: var(--fs-14);
    line-height: 2;
    white-space: pre-wrap;
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-8);
    background: #0d1b12;
    color: #cfe8c9;
    overflow-x: auto;
}
.pc-vow-code .kw { color: #f5d67b; }
.pc-vow-code .fn { color: #8ad3f0; }
.pc-vow-code .str { color: #a8d89a; }
.pc-vow-code .cm { color: rgba(207, 232, 201, 0.45); font-style: italic; }

/* ---------- v4 移动端响应式 ---------- */
@media (max-width: 767px) {
    .pc-tasklib-grid { grid-template-columns: 1fr; }
    .pc-tasklib-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ---------- v6 公益森林风格：章节标题描金 ---------- */
.page-pact .pg-section-num {
    color: var(--pc-gold-deep, #a8842f);
    letter-spacing: 2px;
}

/* ---------- v6 名单头像描金环 ---------- */
.pc-roster-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 3.5px rgba(201, 163, 78, 0.55);
}

/* ---------- v6 进度环描金 ---------- */
.pc-progress-ring {
    box-shadow: 0 0 0 2px rgba(201, 163, 78, 0.35);
}


/* ========================================
   履约抽签 / 写给2029年的信 / 成就徽章
   ======================================== */

@keyframes pcDrawIn { from { opacity: 0; transform: translateY(14px) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ---------- 写给 2029 年自己的信 ---------- */
.pc-letter-card textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: var(--space-12) var(--space-16);
    border: 1px solid rgba(201, 163, 78, 0.3);
    border-radius: var(--radius-8);
    background: repeating-linear-gradient(180deg, transparent, transparent 29px, rgba(201, 163, 78, 0.12) 30px),
                rgba(255, 253, 246, 0.95);
    color: var(--text-primary, #333);
    font-size: var(--fs-14); line-height: 30px;
    font-family: var(--font-serif-kai);
    transition: border-color var(--transition-fast);
}
.pc-letter-card textarea:focus { outline: none; border-color: rgba(201, 163, 78, 0.65); }
.pc-letter-meta { font-size: var(--fs-12); color: var(--text-muted, #999); margin-right: auto; }
.pc-letter-card .pc-edit-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--space-10); }
.pc-letter-sealed {
    margin-top: var(--space-4);
    background: linear-gradient(150deg, rgba(240, 247, 237, 0.9), rgba(255, 255, 255, 0.9));
    border: 1px dashed rgba(93, 151, 67, 0.5);
    border-radius: var(--radius-8);
    padding: var(--space-12) var(--space-16);
}
.pc-letter-sealed-title { margin: 0 0 8px; font-size: var(--fs-13); font-weight: 700; color: var(--primary-dark, #4a7a35); }
.pc-letter-sealed-body {
    margin: 0; padding: var(--space-12) ;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-8);
    font-family: var(--font-serif-kai);
    font-size: var(--fs-13); line-height: var(--lh-loose); white-space: pre-wrap;
    color: var(--text-secondary, #555);
}
.pc-letter-sealed-body[hidden] { display: none; }


/* ========================================
   v7 增量（Issue #28 第九轮）：
   使命宣言墙 / 顶部 CTA / 事项进度条 / 任务清单进度条
   ======================================== */

/* ---------- 使命宣言墙：自我监督 · 醒目展示 ---------- */
.pc-mission {
    position: relative;
    text-align: center;
    background:
        radial-gradient(700px 260px at 50% -80px, rgba(201, 163, 78, 0.14), transparent 62%),
        linear-gradient(160deg, rgba(240, 247, 237, 0.95), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(201, 163, 78, 0.35);
    border-radius: var(--radius-12);
    box-shadow: 0 10px 30px rgba(28, 58, 38, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8); padding: 34px var(--space-28) var(--space-24) ;
    margin-bottom: var(--space-32);
    overflow: hidden;
}
.pc-mission::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 180px; height: 3px; border-radius: var(--radius-4);
    background: linear-gradient(90deg, transparent, var(--pc-gold, #c9a34e), transparent);
}
.pc-mission-slogan {
    margin: 0 0 12px;
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(120deg, var(--pc-forest, #1c3a26), var(--pc-gold-deep, #a8842f) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pc-mission-sub {
    margin: 0;
    font-size: var(--fs-14);
    line-height: 2;
    color: var(--text-secondary, #555);
}
.pc-mission-sub b { color: var(--primary-dark, #4a7a35); font-weight: 700; }
.pc-mission-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12); margin-top: var(--space-20);
}
.pc-mission-point {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
    padding: var(--space-12) var(--space-10);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(93, 151, 67, 0.16);
    border-radius: var(--radius-8);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pc-mission-point:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(93, 151, 67, 0.14);
}
.pc-mission-point i { font-style: normal; font-size: var(--fs-22); }
.pc-mission-point b { font-size: var(--fs-13); color: var(--primary-dark, #4a7a35); }
.pc-mission-point span { font-size: var(--fs-11); color: var(--text-muted, #888); text-align: center; line-height: var(--lh-ui); }

/* ---------- 履约人身份徽章：验证通过后替换编号输入框 ---------- */
.pc-hero-badge {
    display: flex; align-items: center; gap: var(--space-12);
    max-width: 100%;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(232, 205, 138, 0.40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.18);
    animation: pcBadgeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-hero-badge[hidden] { display: none; }
@keyframes pcBadgeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pc-hero-badge-avatar {
    flex: none;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-20); font-weight: 800; color: #3a2c0d;
    background: linear-gradient(135deg, #e9cf8d, #c9a34e 60%, #a8842f);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.55), 0 4px 12px rgba(201, 163, 78, 0.45);
}
.pc-hero-badge-info { min-width: 0; }
.pc-hero-badge-name {
    display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.pc-hero-badge-name-text {
    font-size: var(--fs-16); font-weight: 800; color: #f7f4ea;
    font-family: var(--font-serif-kai); letter-spacing: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.pc-hero-badge-tag {
    flex: none;
    font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.5px;
    color: #3a2c0d;
    background: linear-gradient(135deg, #e8cd8a, #c9a34e);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-10);
    max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-hero-badge-meta {
    display: flex; align-items: center; gap: var(--space-6) var(--space-12); flex-wrap: wrap;
}
.pc-hero-badge-item {
    display: inline-flex; align-items: center; gap: var(--space-4);
    font-size: var(--fs-12); color: rgba(247, 244, 234, 0.75);
    white-space: nowrap;
}
.pc-hero-badge-item i { font-style: normal; font-size: var(--fs-12); }
.pc-hero-badge-item b { color: #e8cd8a; font-weight: 700; }
.pc-hero-badge-switch {
    flex: none; margin-left: var(--space-4);
    font-size: var(--fs-12); font-weight: 600; letter-spacing: 1px;
    color: rgba(247, 244, 234, 0.85);
    background: transparent;
    border: 1px solid rgba(232, 205, 138, 0.45);
    border-radius: var(--radius-pill);
    padding: var(--space-6) var(--space-12);
    cursor: pointer;
    transition: background var(--transition-fast, 0.2s), color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
}
.pc-hero-badge-switch:hover {
    background: rgba(232, 205, 138, 0.16);
    color: #e8cd8a;
    border-color: rgba(232, 205, 138, 0.7);
}
.pc-hero-enter[hidden] { display: none; }

.pc-hero-enter { display: flex; gap: var(--space-8); align-items: stretch; }
.pc-hero-enter input {
  flex: 1; min-width: 0; padding: var(--space-10) var(--space-12); font-size: var(--fs-14);
  border-radius: var(--pc-radius, 10px); border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92); color: #2c3a26;
}
.pc-hero-enter input::placeholder { color: #7d8a72; }
.pc-hero-enter input:focus { outline: none; border-color: rgba(201, 163, 78, 0.85); box-shadow: 0 0 0 3px rgba(201, 163, 78, 0.18); }
.pc-hero-cta {
    display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-24);
}
.pc-cta-btn {
    display: inline-flex; align-items: center; gap: var(--space-8);
    padding: var(--space-12) var(--space-28);
    border-radius: var(--radius-pill);
    font-size: var(--fs-15);
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff8ea;
    text-decoration: none;
    background: linear-gradient(135deg, #a8742f, #c9953e 55%, #e0b25f);
    box-shadow: 0 8px 22px rgba(201, 163, 78, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    border: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    animation: pcCtaGlow 2.6s ease-in-out infinite;
}
@keyframes pcCtaGlow {
    0%, 100% { box-shadow: 0 8px 22px rgba(201, 163, 78, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
    50% { box-shadow: 0 8px 30px rgba(201, 163, 78, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
.pc-cta-btn:hover { transform: translateY(-2px); }
.pc-cta-btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    animation: none;
    color: #eef5ea;
}
.pc-cta-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- 履约中心事项进度条 ---------- */
.pc-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-12);
}
.pc-item-main { min-width: 0; }
.pc-item-progress {
    display: flex; align-items: center; gap: var(--space-8);
    flex: none;
}
.pc-item-range {
    -webkit-appearance: none;
    appearance: none;
    width: 150px; height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(93, 151, 67, 0.55) var(--fill, 0%), rgba(93, 151, 67, 0.15) var(--fill, 0%));
    outline: none;
    cursor: pointer;
    accent-color: var(--primary-color, #5d9743);
}
.pc-item-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d9743, #4a7a35);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(93, 151, 67, 0.45);
    cursor: grab;
}
.pc-item-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d9743, #4a7a35);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(93, 151, 67, 0.45);
    cursor: grab;
}
.pc-item-progress-num {
    flex: none; width: 44px;
    font-size: var(--fs-12); font-weight: 700;
    color: var(--primary-dark, #4a7a35);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.pc-item.done .pc-item-title { color: var(--primary-dark, #4a7a35); font-weight: 600; }

/* ---------- 任务清单库卡片进度条 ---------- */
.pc-tl-progress {
    display: flex; align-items: center; gap: var(--space-10);
    margin-top: var(--space-12);
}
.pc-tl-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1; min-width: 0; height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.15);
    outline: none;
    cursor: pointer;
    accent-color: var(--primary-color, #5d9743);
}
.pc-tl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d9743, #4a7a35);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(93, 151, 67, 0.45);
    cursor: grab;
}
.pc-tl-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d9743, #4a7a35);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(93, 151, 67, 0.45);
    cursor: grab;
}
.pc-tl-progress-num {
    flex: none; width: 44px;
    font-size: var(--fs-12); font-weight: 700;
    color: var(--primary-dark, #4a7a35);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- 写信未输入契约编号时的锁定提示 ---------- */
.pc-letter-locked {
    text-align: center;
    padding: var(--space-20) var(--space-16);
    border: 1px dashed rgba(201, 163, 78, 0.5);
    border-radius: var(--radius-8);
    background: linear-gradient(150deg, rgba(253, 248, 236, 0.9), rgba(255, 255, 255, 0.85));
}
.pc-letter-lock-tip { margin: 0 0 12px; font-size: var(--fs-13); color: var(--text-secondary, #666); line-height: var(--lh-loose); }
.pc-letter-lock-tip b { color: var(--pc-gold-deep, #a8842f); }

/* ---------- 任务清单库：博客指南卡片 ---------- */
.pc-tl-card--blog {
    border-style: dashed;
    border-color: rgba(201, 163, 78, 0.5);
    background: linear-gradient(150deg, rgba(253, 248, 236, 0.9), rgba(255, 255, 255, 0.9));
}
.pc-tl-card--blog:hover { border-color: rgba(201, 163, 78, 0.8); }
.pc-tl-blog-link { text-decoration: none; display: inline-block; margin-top: var(--space-10); }

/* ---------- 响应式 ---------- */
@media (max-width: 767px) {
    .pc-mission-points { grid-template-columns: repeat(2, 1fr); }
    .pc-mission-br { display: none; }
    .pc-cta-btn { width: 100%; justify-content: center; }
    .pc-hero-enter { width: 100%; }
    .pc-hero-badge { width: 100%; flex-wrap: wrap; padding: var(--space-12) var(--space-12); }
    .pc-hero-badge-switch { margin-left: auto; }
    .pc-hero-enter .pc-cta-btn { width: auto; padding: var(--space-12) var(--space-20); }
    #pcQuickPunch.pc-cta-btn--ghost { width: 100%; }
    .pc-cert-card { flex-direction: column; text-align: center; gap: var(--space-12); }
    .pc-cert-medal { width: 76px; height: 84px; }
    .pc-cert-br { display: none; }
    .pc-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
    .pc-item-progress { grid-column: 1 / -1; }
    .pc-item-range { width: 100%; }
}

/* ========================================
   适合谁 / 不适合谁（自适配评估模块）
   pc-fit 前缀：自我匹配 · 双栏对照
   ======================================== */

.pc-fit {
    margin-bottom: var(--space-32);
}
.pc-fit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); gap: var(--space-20);
    margin-top: var(--space-6);
}

/* ---------- 单栏卡片 ---------- */
.pc-fit-col {
    position: relative;
    border-radius: var(--radius-12);
    padding: var(--space-24) var(--space-24) var(--space-20);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pc-fit-col::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 128px; height: 3px; border-radius: var(--radius-4);
}
.pc-fit-col:hover { transform: translateY(-3px); }

/* 适合：森林绿 + 鎏金（积极） */
.pc-fit-col--fit {
    background:
        radial-gradient(520px 220px at 18% -60px, rgba(93, 151, 67, 0.16), transparent 60%),
        linear-gradient(160deg, rgba(240, 247, 237, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(93, 151, 67, 0.28);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pc-fit-col--fit::before { background: linear-gradient(90deg, transparent, #5d9743, transparent); }

/* 不适合：暖灰 + 土金（提示） */
.pc-fit-col--no {
    background:
        radial-gradient(520px 220px at 82% -60px, rgba(201, 163, 78, 0.16), transparent 60%),
        linear-gradient(160deg, rgba(252, 249, 242, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(201, 163, 78, 0.34);
    box-shadow: 0 10px 26px rgba(168, 132, 47, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pc-fit-col--no::before { background: linear-gradient(90deg, transparent, #a8842f, transparent); }

/* ---------- 头部 ---------- */
.pc-fit-head { text-align: center; margin-bottom: var(--space-16); }
.pc-fit-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    font-size: var(--fs-24);
    margin-bottom: var(--space-10);
    background: rgba(93, 151, 67, 0.12);
    box-shadow: inset 0 0 0 1.5px rgba(93, 151, 67, 0.3);
}
.pc-fit-col--no .pc-fit-icon {
    background: rgba(201, 163, 78, 0.14);
    box-shadow: inset 0 0 0 1.5px rgba(201, 163, 78, 0.35);
}
.pc-fit-title {
    margin: 0 0 6px;
    font-size: var(--fs-18); font-weight: 800;
    letter-spacing: 1px;
    color: var(--pc-forest, #1c3a26);
}
.pc-fit-col--no .pc-fit-title { color: var(--pc-gold-deep, #a8842f); }
.pc-fit-sub { margin: 0; font-size: var(--fs-12); color: var(--text-muted, #888); line-height: var(--lh-ui); }

/* ---------- 列表 ---------- */
.pc-fit-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-10);
}
.pc-fit-list li {
    display: flex; align-items: flex-start; gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-8);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(93, 151, 67, 0.12);
    font-size: var(--fs-13); line-height: 1.7;
    color: var(--text-secondary, #555);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pc-fit-list li:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(93, 151, 67, 0.3); }
.pc-fit-list li i {
    flex: none; font-style: normal;
    width: 18px; height: 18px; margin-top: var(--space-2);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-11); font-weight: 800;
}
.pc-fit-col--fit .pc-fit-list li i {
    color: #fff; background: linear-gradient(135deg, #5d9743, #4a7a35);
}
.pc-fit-col--no .pc-fit-list li i {
    color: #fff; background: linear-gradient(135deg, #b98d40, #a8842f);
}
.pc-fit-col--no .pc-fit-list li {
    border-color: rgba(201, 163, 78, 0.16);
}
.pc-fit-col--no .pc-fit-list li:hover { border-color: rgba(201, 163, 78, 0.4); }

/* ---------- 底部提示 ---------- */
.pc-fit-foot {
    margin: 18px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: var(--fs-12);
    color: var(--text-muted, #888);
    line-height: var(--lh-base);
    padding-top: var(--space-6);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}
.pc-fit-foot b { color: var(--primary-dark, #4a7a35); }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
    .pc-fit-grid { grid-template-columns: 1fr; }
    .pc-fit-br { display: none; }
}