.point-progress { padding: 20px; border: 1px solid var(--wq-border); border-radius: 16px; background: var(--wq-surface); color: var(--wq-text); scroll-margin-top: 80px; }
.point-progress__heading, .point-progress__tiers, .point-progress__details { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.point-progress__heading { margin-bottom: 18px; }
.point-progress__heading h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.point-progress__total { color: var(--wq-text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.point-progress__tiers { margin-bottom: 12px; font-size: .85rem; }
.point-progress__tiers strong { font-size: 1.05rem; }
.point-progress__tiers > span { color: var(--wq-text-muted); }
.point-progress__track { height: 10px; border-radius: 5px; overflow: hidden; background: var(--wq-surface-3); }
.point-progress__fill { height: 100%; border-radius: inherit; }
.point-progress__details { margin-top: 10px; color: var(--wq-text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; }

.point-guide { margin-top: 18px; border-top: 1px solid var(--wq-border); font-size: .78rem; }
.point-guide summary { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; color: var(--wq-text-muted); cursor: pointer; list-style: none; }
.point-guide summary::-webkit-details-marker { display: none; }
.point-guide summary:hover { color: var(--wq-text); }
.point-guide summary:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; border-radius: 4px; }
.point-guide summary svg { transition: transform .16s; }
.point-guide[open] summary svg { transform: rotate(180deg); }
.point-guide__body { padding-top: 14px; }
.point-guide p { color: var(--wq-text-muted); line-height: 1.7; margin: 10px 0; }
.point-guide__tiers { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.point-guide__tiers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--wq-surface-3); }
.point-guide__tiers li > span:last-child { color: var(--wq-text-muted); font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.point-guide__tiers li.is-current { border-color: var(--primary-color); }
.point-guide__tiers small { font-size: .65rem; margin-left: 6px; color: var(--primary-color); }
@media (max-width: 600px) { .point-guide__tiers { grid-template-columns: 1fr; } }