.moon-cycle { max-width: 480px; margin: 0 auto; padding: 48px 24px; text-align: center; }
.mc-header { margin-bottom: 32px; }
.mc-moon-icon { font-size: 36px; color: #D4B052; margin-bottom: 12px; }
.mc-title { font-size: 24px; font-weight: 700; color: rgba(255,255,255,0.9); margin: 0 0 8px; }
.mc-sub { font-size: 14px; color: rgba(255,255,255,0.4); margin: 0; }
.mc-streak-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 32px; background: rgba(212,176,82,0.08); border: 1px solid rgba(212,176,82,0.18); border-radius: var(--radius-lg); margin-bottom: 28px; }
.mc-streak-num { font-size: 36px; font-weight: 700; color: #D4B052; line-height: 1; }
.mc-streak-label { font-size: 11px; color: rgba(212,176,82,0.6); letter-spacing: 0.1em; text-transform: uppercase; }
.mc-week { display: flex; justify-content: center; gap: 16px; margin-bottom: 36px; }
.mc-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mc-day-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.08); transition: background 0.3s; }
.mc-day.done .mc-day-dot { background: #D4B052; }
.mc-day span { font-size: 10px; color: rgba(255,255,255,0.25); }
.mc-day.done span { color: rgba(212,176,82,0.6); }
.mc-rewards { background: rgba(20,22,30,0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 28px 24px; margin-bottom: 28px; }
.mc-rewards h3 { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.75); margin: 0 0 4px; }
.mc-reward-sub { font-size: 12px; color: rgba(255,255,255,0.3); margin: 0 0 20px; }
.mc-reward-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mc-reward-card { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-md); font-size: 12px; color: rgba(255,255,255,0.55); }
.mc-reward-icon { font-size: 14px; color: #D4B052; }
.mc-btn-claim { padding: 14px 40px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(212,176,82,0.2), rgba(212,176,82,0.08)); border: 1px solid rgba(212,176,82,0.3); color: #D4B052; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.35s var(--ease-standard), transform 0.35s var(--ease-standard); }
.mc-btn-claim:hover { background: linear-gradient(135deg, rgba(212,176,82,0.3), rgba(212,176,82,0.12)); transform: translateY(-2px); }