.cycle-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 22px 28px; }
.cycle-home-nav { display: flex; }
.cycle-home-nav.top { justify-content: flex-start; margin-bottom: 15px; }
.cycle-home-nav.bottom { justify-content: center; margin-top: 14px; padding: 2px 0 4px; }
.cycle-home-link { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.92); color: #475467; font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow); transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.cycle-home-link:hover, .cycle-home-link:focus-visible { border-color: #aeb7df; background: var(--brand-soft); color: var(--brand); }
.cycle-home-link:hover { transform: translateY(-1px); }
.cycle-home-link .arrow { color: var(--brand); font-size: 14px; line-height: 1; }
.cycle-page-head { display: block; margin-bottom: 18px; }
.cycle-eyebrow { margin-bottom: 4px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cycle-title { color: #101828; font-size: 28px; font-weight: 820; line-height: 1.2; letter-spacing: -.025em; }
.cycle-subtitle { max-width: 720px; margin-top: 6px; color: #667085; font-size: 12px; line-height: 1.65; }
.cycle-progress, .chart-card, .etf-section { margin-bottom: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.035); }
.cycle-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cycle-section-title { padding-left: 10px; border-left: 3px solid var(--brand); color: #25324a; font-size: 15px; font-weight: 800; line-height: 1.35; letter-spacing: .015em; }
.cycle-section-title small { display: block; margin-top: 3px; color: #667085; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.cycle-period { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #e1e4fb; border-radius: 999px; background: #f4f5ff; color: #5261bc; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.cycle-stages { counter-reset: stage; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.cycle-stage { counter-increment: stage; position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 78px; padding: 9px 12px 10px; border: 1px solid #e5e9f0; border-radius: 9px; background: #f8fafc; box-shadow: inset 3px 0 0 #d0d5dd; color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.cycle-stage:hover, .cycle-stage:focus-visible { border-color: #b8c0ea; background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); transform: translateY(-1px); }
.cycle-stage::before { content: '0' counter(stage); margin-bottom: 5px; color: #98a2b3; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .09em; }
.cycle-stage.active { border-color: #fedf89; background: #fff9eb; box-shadow: inset 3px 0 0 #d97706; }
.cycle-stage.active:hover, .cycle-stage.active:focus-visible { border-color: #fdb022; background: #fff6db; box-shadow: inset 3px 0 0 #d97706; }
.cycle-stage.active::after { content: '领先'; position: absolute; top: 8px; right: 8px; color: #b54708; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.stage-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cycle-stage .icon { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.cycle-stage .name { overflow: hidden; color: #25324a; font-size: 13px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.cycle-stage .change { margin-top: 3px; padding-left: 23px; color: #667085; font-size: 10px; font-variant-numeric: tabular-nums; }
.cycle-stage.active .change { color: #b54708; font-weight: 750; }
.cycle-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); align-items: center; gap: 16px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.cycle-status { color: #344054; font-size: 12px; font-weight: 700; line-height: 1.55; }
.cycle-note { padding-left: 14px; border-left: 1px solid var(--line); color: #7a8496; font-size: 10px; line-height: 1.55; }
.commodity-table-head { display: grid; grid-template-columns: 28px 64px 76px 160px minmax(160px, 1fr) 14px; align-items: center; gap: 10px; min-height: 26px; padding: 0 4px 5px; border-bottom: 1px solid var(--line); color: #667085; font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.commodity-table-head span:nth-child(3), .commodity-table-head span:nth-child(4) { text-align: right; }
.commodity-row { display: grid; grid-template-columns: 28px 64px 76px 160px minmax(160px, 1fr) 14px; align-items: center; gap: 10px; min-height: 52px; padding: 3px 4px; border-bottom: 1px solid var(--line); border-radius: 6px; color: inherit; text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.commodity-row:last-child { border-bottom: none; }
.commodity-row:hover, .commodity-row:focus-visible { background: var(--brand-soft); box-shadow: inset 0 0 0 1px #d9def8; }
.commodity-row:hover .commodity-name { color: var(--brand); }
.commodity-go { color: #b5bdca; font-size: 18px; text-align: center; transition: color .16s ease, transform .16s ease; }
.commodity-row:hover .commodity-go { color: var(--brand); }
.commodity-row:hover .commodity-go { transform: translateX(2px); }
.commodity-icon { font-size: 17px; text-align: center; }
.commodity-name { color: #344054; font-size: 12px; font-weight: 760; }
.commodity-price { color: #475467; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.commodity-changes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.commodity-change { min-width: 0; padding: 3px 6px; border-radius: 5px; font-size: 9.5px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.commodity-change.up { background: var(--positive-soft); color: #b42318; }
.commodity-change.down { background: var(--negative-soft); color: #067647; }
.commodity-chart { width: 100%; height: 30px; min-width: 0; overflow: hidden; }
.etf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.etf-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-width: 0; min-height: 54px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.etf-card:hover, .etf-card:focus-visible { border-color: #b8c0ea; background: var(--brand-soft); transform: translateY(-1px); }
.etf-card .name { overflow: hidden; color: #344054; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.etf-card .code { grid-column: 1; color: #7b8495; font-size: 9px; font-variant-numeric: tabular-nums; }
.etf-card .change { grid-column: 2; grid-row: 1 / 3; color: var(--subtle); font-size: 12px; font-weight: 780; font-variant-numeric: tabular-nums; }
.etf-card .change.up { color: #b42318; }
.etf-card .change.down { color: #067647; }
.etf-card .change.flat { color: #667085; }
@media (max-width: 820px) {
  .cycle-container { padding: 18px 16px 24px; }
  .cycle-summary { grid-template-columns: 1fr; gap: 7px; }
  .cycle-note { padding-left: 0; border-left: 0; }
  .commodity-table-head, .commodity-row { grid-template-columns: 28px 58px 70px 144px minmax(130px, 1fr) 14px; gap: 7px; }
  .etf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cycle-container { padding: 12px 10px 20px; }
  .cycle-home-nav.top { margin-bottom: 13px; }
  .cycle-home-nav.bottom { margin-top: 12px; padding-bottom: 2px; }
  .cycle-home-link { min-height: 32px; padding: 4px 11px; font-size: 11px; }
  .cycle-page-head { margin-bottom: 14px; padding: 0 2px; }
  .cycle-eyebrow { font-size: 9px; }
  .cycle-title { font-size: 22px; }
  .cycle-subtitle { margin-top: 5px; font-size: 10.5px; line-height: 1.55; }
  .cycle-progress, .chart-card, .etf-section { margin-bottom: 9px; padding: 12px 10px; border-radius: 10px; }
  .cycle-section-head { align-items: center; margin-bottom: 11px; }
  .cycle-section-title { padding-left: 8px; font-size: 13px; }
  .cycle-section-title small { margin-top: 2px; font-size: 9px; line-height: 1.4; }
  .cycle-period { padding: 3px 6px; font-size: 8px; }
  .cycle-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .cycle-stage { align-items: center; min-height: 76px; padding: 7px 2px 8px; border-radius: 7px; box-shadow: inset 0 2px 0 #d0d5dd; text-align: center; }
  .cycle-stage:hover, .cycle-stage:focus-visible { box-shadow: inset 0 2px 0 var(--brand); }
  .cycle-stage.active { box-shadow: inset 0 2px 0 #d97706; }
  .cycle-stage.active:hover, .cycle-stage.active:focus-visible { box-shadow: inset 0 2px 0 #d97706; }
  .cycle-stage::before { margin-bottom: 6px; font-size: 8px; }
  .cycle-stage.active::after { display: none; }
  .stage-label { justify-content: center; gap: 2px; width: 100%; }
  .cycle-stage .icon { font-size: 14px; }
  .cycle-stage .name { font-size: 10.5px; }
  .cycle-stage .change { margin-top: 5px; padding-left: 0; font-size: 8.5px; }
  .cycle-summary { margin-top: 10px; padding-top: 10px; }
  .cycle-status { font-size: 10.5px; line-height: 1.55; }
  .cycle-note { font-size: 10px; line-height: 1.5; }
  .commodity-table-head { display: none; }
  .commodity-row { grid-template-columns: 25px minmax(0, 1fr) auto 12px; grid-template-rows: auto auto 27px; gap: 5px 7px; min-height: 90px; padding: 8px 4px; border-radius: 7px; }
  .commodity-icon { grid-column: 1; grid-row: 1; font-size: 16px; }
  .commodity-name { grid-column: 2; grid-row: 1; font-size: 11.5px; }
  .commodity-price { grid-column: 3; grid-row: 1; font-size: 10px; }
  .commodity-go { grid-column: 4; grid-row: 1; font-size: 15px; }
  .commodity-changes { grid-column: 2 / 5; grid-row: 2; min-width: 0; }
  .commodity-change { padding: 3px 4px; font-size: 9px; }
  .commodity-chart { grid-column: 2 / 5; grid-row: 3; width: 100%; height: 27px; }
  .etf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .etf-card { min-height: 50px; padding: 8px; }
  .etf-card .name { font-size: 10px; }
  .etf-card .change { font-size: 10.5px; }
}
@media (max-width: 350px) {
  .cycle-stage .icon { display: none; }
  .cycle-stage .name { font-size: 10px; }
  .etf-grid { grid-template-columns: 1fr; }
}