/* Contribution outcomes, scoped capabilities and real partner fulfillment. */

.locus-shell .header-contribution-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--v63-ink, #13231e);
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--v63-line, #dfe5e1);
  border-radius: var(--v63-radius-control, 12px);
  background: color-mix(in srgb, var(--v63-surface, #fff) 84%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), var(--v63-shadow-contact, 0 2px 8px rgb(24 40 34 / 6%));
}

/* 全局登录入口：未登录高亮（accent 描边）引导登录，登录后弱化为状态展示。 */
.locus-shell .header-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--v63-action-fill, var(--action));
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--v63-action-fill, var(--action)) 42%, transparent);
  border-radius: var(--v63-radius-control, 12px);
  background: color-mix(in srgb, var(--v63-action-fill, var(--action)) 8%, var(--v63-surface, #fff));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), var(--v63-shadow-contact, 0 2px 8px rgb(24 40 34 / 6%));
  cursor: pointer;
  transition: transform var(--dur-fast, 120ms) var(--ease, ease), box-shadow var(--dur-fast, 120ms) var(--ease, ease);
}

.locus-shell .header-auth:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 4px 12px rgb(24 40 34 / 10%);
}

.locus-shell .header-auth .icon {
  width: 15px;
  height: 15px;
}

/* 登录后：状态展示（不可点），弱化边框与背景。 */
.locus-shell .header-auth--on {
  color: var(--v63-ink, #13231e);
  border-color: var(--v63-line, #dfe5e1);
  background: color-mix(in srgb, var(--v63-surface, #fff) 84%, transparent);
  cursor: default;
}

.locus-shell .header-auth--on:hover {
  transform: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), var(--v63-shadow-contact, 0 2px 8px rgb(24 40 34 / 6%));
}

.locus-shell .header-contribution-center[aria-current="page"] {
  color: var(--v63-place, #147d69);
  border-color: color-mix(in srgb, var(--v63-place, #147d69) 42%, var(--v63-line, #dfe5e1));
}

.contribution-center-main {
  display: grid;
  align-content: start;
  width: min(calc(100% - 48px), 1240px);
  max-width: 1240px;
  gap: 16px;
  padding-inline: 0;
  padding-block: 28px 96px;
}

.contribution-center-hero,
.center-ledger,
.center-section,
.center-preview,
.center-public-contract {
  border: 1px solid var(--v63-line, #dfe5e1);
  background: var(--v63-surface, #fff);
  box-shadow: var(--v63-shadow-contact, 0 2px 8px rgb(24 40 34 / 6%));
}

.contribution-center-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 28px 20px;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  border-radius: 22px;
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--v63-place, #14836c) 8%, transparent) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(color-mix(in srgb, var(--v63-place, #14836c) 8%, transparent) 1px, transparent 1px) 0 0 / 34px 34px,
    color-mix(in srgb, var(--v63-surface, #fff) 96%, var(--v63-place, #14836c));
}

.contribution-center-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: var(--v63-place, #14836c);
}

.contribution-center-hero__copy {
  grid-column: 1 / 9;
  max-width: 770px;
}

.contribution-center-hero h1 {
  max-width: 820px;
  margin: 8px 0 12px;
  color: var(--v63-ink, #13231e);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.contribution-center-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--v63-muted, #66716c);
  font-size: 15px;
  line-height: 1.75;
}

.contribution-center-hero__actions {
  display: grid;
  grid-column: 10 / -1;
  justify-items: stretch;
  gap: 6px;
  min-width: 0;
  padding-top: 22px;
}

.contribution-center-hero__actions .button--primary {
  min-height: 48px;
  color: #fff;
  background: var(--v63-place, #147d69);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--v63-place, #147d69) 20%, transparent);
}

.contribution-center-hero__actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--v63-place, #147d69);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.center-task-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.center-task {
  --task-accent: var(--v63-place, #147d69);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 10px;
  min-width: 0;
  min-height: 244px;
  padding: 21px;
  border: 1px solid color-mix(in srgb, var(--task-accent) 26%, var(--v63-line, #dfe5e1));
  border-radius: 16px;
  background: color-mix(in srgb, var(--v63-surface, #fff) 94%, var(--task-accent));
  box-shadow: 0 10px 24px rgb(23 44 36 / 6%);
}

.center-task--note { --task-accent: var(--v63-action-fill, #7b3481); }
.center-task--source { --task-accent: #9b631d; }
.center-task > span { color: var(--task-accent); font: 780 11px/1.5 var(--font-mono, monospace); letter-spacing: .06em; }
.center-task h2 { max-width: 280px; margin: 0; color: var(--v63-ink, #13231e); font-size: 21px; line-height: 1.22; letter-spacing: -.025em; }
.center-task p { margin: 0; color: var(--v63-muted, #66716c); font-size: 13px; line-height: 1.65; }
.center-task small { color: color-mix(in srgb, var(--task-accent) 78%, var(--v63-ink, #13231e)); font-size: 11px; line-height: 1.55; }
.center-task button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0;
  color: var(--v63-ink, #13231e);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--task-accent) 22%, var(--v63-line, #dfe5e1));
  background: transparent;
  cursor: pointer;
}

.center-task button i { color: var(--task-accent); font-style: normal; font-size: 18px; }

.center-process {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 26px;
  padding: 22px 4px;
  border-block: 1px solid var(--v63-line, #dfe5e1);
}

.center-process > header { min-width: 0; }
.center-process h2 { margin: 5px 0 0; color: var(--v63-ink, #13231e); font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }

.center-public-contract {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 18px;
}

.center-public-contract > header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  align-items: end;
  gap: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v63-line, #dfe5e1);
}

.center-public-contract h2 { margin: 5px 0 0; color: var(--v63-ink, #13231e); font-size: clamp(27px, 3vw, 38px); line-height: 1.12; letter-spacing: -.04em; }
.center-public-contract > header p { margin: 0; color: var(--v63-muted, #66716c); font-size: 13px; line-height: 1.7; }
.center-return-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--v63-line, #dfe5e1); border-radius: 14px; background: var(--v63-line, #dfe5e1); }
.center-return-grid article { display: grid; grid-template-rows: auto auto 1fr auto; gap: 9px; min-width: 0; min-height: 190px; padding: 20px; background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 92%, var(--v63-surface, #fff)); }
.center-return-grid article > span { color: var(--v63-place, #147d69); font: 780 11px/1.5 var(--font-mono, monospace); }
.center-return-grid article:nth-child(2) > span { color: var(--v63-action-fill, #7b3481); }
.center-return-grid article:nth-child(3) > span { color: #9b631d; }
.center-return-grid h3 { margin: 0; color: var(--v63-ink, #13231e); font-size: 18px; line-height: 1.3; }
.center-return-grid p { margin: 0; color: var(--v63-muted, #66716c); font-size: 13px; line-height: 1.62; }
.center-return-grid small { padding-top: 10px; color: var(--v63-ink, #13231e); font-size: 11px; line-height: 1.55; border-top: 1px solid var(--v63-line, #dfe5e1); }

.center-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 2px 0 0;
  padding: 1px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--v63-line, #dfe5e1);
  list-style: none;
}

.center-journey li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
  padding: 17px 16px;
  background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 90%, var(--v63-surface, #fff));
}

.center-journey li > span {
  color: var(--v63-place, #147d69);
  font: 780 11px/1.5 var(--font-mono, monospace);
}

.center-journey li > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.center-journey strong {
  color: var(--v63-ink, #13231e);
  font-size: 14px;
}

.center-journey small {
  color: var(--v63-muted, #66716c);
  font-size: 11px;
  line-height: 1.55;
}

.center-account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 18px;
  color: var(--v63-muted, #66716c);
  border: 1px solid var(--v63-line, #dfe5e1);
  border-radius: 14px;
  background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 90%, transparent);
}

.center-account-strip span {
  color: var(--v63-ink, #13231e);
  font-weight: 740;
}

.center-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  border-radius: 16px;
}

.center-preview > header {
  display: grid;
  gap: 5px;
}

.center-preview h2 {
  margin: 0;
  color: var(--v63-ink, #13231e);
  font-size: clamp(23px, 2.5vw, 31px);
  letter-spacing: -.035em;
}

.center-preview > header p {
  margin: 0;
  color: var(--v63-muted, #66716c);
  line-height: 1.65;
}

.center-login-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--v63-place, #147d69) 28%, var(--v63-line, #dfe5e1));
  border-radius: 14px;
  background: color-mix(in srgb, var(--v63-place, #147d69) 5%, var(--v63-surface, #fff));
}

.center-login-dock > div {
  display: grid;
  gap: 4px;
}

.center-login-dock strong {
  color: var(--v63-ink, #13231e);
}

.center-login-dock span {
  color: var(--v63-muted, #66716c);
  font-size: 12px;
  line-height: 1.55;
}

.center-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 16px;
  overflow: hidden;
}

.center-ledger > div {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 22px 24px;
}

.center-ledger > div + div { border-left: 1px solid var(--v63-line, #dfe5e1); }
.center-ledger strong { color: var(--v63-ink, #13231e); font-size: 31px; line-height: 1; }
.center-ledger span { color: var(--v63-ink, #13231e); font-weight: 760; }
.center-ledger small { color: var(--v63-muted, #66716c); }

.center-section {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
}

.center-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--v63-line, #dfe5e1);
}

.center-section > header h2 {
  margin: 5px 0 0;
  color: var(--v63-ink, #13231e);
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.035em;
}

.center-section > header p {
  max-width: 460px;
  margin: 0;
  color: var(--v63-muted, #66716c);
  text-align: right;
  line-height: 1.6;
}

.center-section > header > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--v63-place, #147d69);
  font-weight: 700;
}

.title-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.title-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  min-height: 236px;
  padding: 22px;
  border: 1px solid var(--v63-line, #dfe5e1);
  border-radius: 15px;
  background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 88%, transparent);
}

.title-cards--preview .title-card {
  grid-template-rows: auto auto 1fr;
  min-height: 168px;
  padding: 20px;
}

.title-card > span {
  width: max-content;
  padding: 5px 9px;
  color: var(--v63-muted, #66716c);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--v63-line, #e5e9e6);
}

.title-card.is-unlocked {
  border-color: color-mix(in srgb, var(--v63-place, #147d69) 48%, var(--v63-line, #dfe5e1));
  box-shadow: inset 0 3px 0 var(--v63-place, #147d69);
}

.title-card.is-unlocked > span { color: #fff; background: var(--v63-place, #147d69); }
.title-card h3 { margin: 0; color: var(--v63-ink, #13231e); font-size: 22px; }
.title-card p { margin: 0; color: var(--v63-muted, #66716c); line-height: 1.65; }
.title-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--v63-line, #dfe5e1); }
.title-card footer a,
.title-card footer button { min-height: 44px; color: var(--v63-action-fill, #7b3481); font-weight: 760; text-decoration: none; border: 0; background: transparent; cursor: pointer; }
.title-card footer small { color: var(--v63-muted, #66716c); }

.capability-list,
.benefit-list,
.outcome-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-list article,
.benefit-list article,
.outcome-list li {
  padding: 18px 20px;
  border: 1px solid var(--v63-line, #dfe5e1);
  border-radius: 13px;
  background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 88%, transparent);
}

.capability-list article > div,
.capability-list article footer,
.benefit-list article footer,
.outcome-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.capability-list strong,
.benefit-list h3,
.outcome-list strong { color: var(--v63-ink, #13231e); }
.capability-list p,
.benefit-list p { color: var(--v63-muted, #66716c); line-height: 1.6; }
.capability-list footer,
.benefit-list footer { padding-top: 14px; border-top: 1px solid var(--v63-line, #dfe5e1); color: var(--v63-muted, #66716c); }

.qualification-list {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--v63-line, #dfe5e1);
}

.qualification-list > div {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(180px, 1.3fr) minmax(210px, 1fr);
  align-items: center;
  gap: 18px;
}

.qualification-list progress { width: 100%; height: 8px; accent-color: var(--v63-place, #147d69); }
.qualification-list small { color: var(--v63-muted, #66716c); }

.benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefit-list article { display: grid; gap: 8px; }
.benefit-list article > span { color: var(--v63-place, #147d69); font-size: 12px; font-weight: 800; }
.benefit-list h3 { margin: 0; font-size: 22px; }

.outcome-list li > div { display: grid; gap: 4px; }
.outcome-list li span { color: var(--v63-place, #147d69); font-size: 12px; font-weight: 800; }
.outcome-list li small { color: var(--v63-muted, #66716c); }
.outcome-list li > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--v63-action-fill, #7b3481); font-weight: 760; white-space: nowrap; }

.center-empty {
  padding: 28px;
  border-radius: 15px;
  color: var(--v63-muted, #66716c);
  background: color-mix(in srgb, var(--v63-surface-2, #f7f9f7) 88%, transparent);
}

.center-empty strong { color: var(--v63-ink, #13231e); }
.center-empty p { margin-bottom: 0; line-height: 1.65; }

.contribution-receipt > header > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--v63-place, #147d69);
  font-size: 12px;
  font-weight: 780;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .locus-shell .header-contribution-center { display: none; }
  .contribution-center-hero__copy { grid-column: 1 / 9; }
  .contribution-center-hero__actions { grid-column: 9 / -1; }
  .center-process { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 900px) {
  .locus-shell .header-contribution-center { display: none; }
  .contribution-center-main { width: calc(100% - 24px); max-width: none; gap: 14px; padding: 18px 0 94px; }
  .contribution-center-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 20px 20px; border-radius: 18px; }
  .contribution-center-hero__copy,
  .contribution-center-hero__actions,
  .center-task-grid { grid-column: 1; }
  .contribution-center-hero h1 { font-size: 42px; }
  .contribution-center-hero__actions { min-width: 0; padding-top: 0; }
  .contribution-center-hero__actions .button { width: 100%; }
  .center-task-grid { grid-template-columns: minmax(0, 1fr); }
  .center-task { min-height: 0; padding: 18px; }
  .center-task h2 { max-width: none; }
  .center-process { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 2px; }
  .center-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .center-public-contract { padding: 22px 18px; }
  .center-public-contract > header { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .center-return-grid { grid-template-columns: minmax(0, 1fr); }
  .center-return-grid article { min-height: 0; }
  .center-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .center-ledger > div { min-height: 102px; padding: 18px; }
  .center-ledger > div:nth-child(3) { border-left: 0; }
  .center-ledger > div:nth-child(n + 3) { border-top: 1px solid var(--v63-line, #dfe5e1); }
  .center-section { gap: 18px; padding: 22px 18px; }
  .center-section > header { display: grid; gap: 8px; }
  .center-section > header p { text-align: left; }
  .title-cards,
  .benefit-list { grid-template-columns: minmax(0, 1fr); }
  .title-card { min-height: 0; }
  .center-preview { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .center-login-dock { align-items: stretch; flex-direction: column; gap: 14px; }
  .center-login-dock .button { width: 100%; }
  .qualification-list > div { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .outcome-list li { align-items: start; }
}

@media (max-width: 420px) {
  .contribution-center-hero h1 { font-size: 38px; }
  .contribution-center-hero { padding-inline: 16px; }
  .center-task { padding: 16px; }
  .center-journey { grid-template-columns: minmax(0, 1fr); }
  .center-ledger strong { font-size: 27px; }
  .center-section { padding-inline: 15px; }
  .capability-list article > div,
  .capability-list article footer,
  .benefit-list article footer,
  .outcome-list li { align-items: start; flex-direction: column; gap: 8px; }
  .outcome-list li > a { width: 100%; }
}

@media (hover: hover) and (pointer: fine) {
  .locus-shell .header-contribution-center:hover { transform: translateY(-1px); border-color: var(--v63-line-strong, #bbc9c2); }
}

@media (prefers-reduced-motion: reduce) {
  .locus-shell .header-contribution-center { transition: none !important; }
}

@media (forced-colors: active) {
  .contribution-center-hero,
  .center-ledger,
  .center-section,
  .center-preview,
  .title-card,
  .capability-list article,
  .benefit-list article,
  .outcome-list li { color: CanvasText; border-color: CanvasText; background: Canvas; }
}