/* Component-specific styles */
.momentum-ring { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto 1rem; }
.momentum-ring__score { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.momentum-ring__label { font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; }
.streak { display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 0.5rem; background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: 999px; font-size: 0.875rem; font-weight: 600; }
.accomplishment-item { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); display: flex; gap: 0.5rem; align-items: flex-start; }
.timeline { position: relative; }
.timeline__item { padding-left: 1.5rem; padding-bottom: 1rem; border-left: 2px solid var(--color-border); position: relative; }
.timeline__item::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; }
.time-block { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.time-block__time { min-width: 80px; font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-secondary); }
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 1rem 1.5rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); z-index: 300; transform: translateY(100px); opacity: 0; transition: all 250ms ease; }
.toast--visible { transform: translateY(0); opacity: 1; }
.toast--success { border-left: 4px solid var(--color-success); }
.toast--error { border-left: 4px solid var(--color-danger); }
.weekly-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.weekly-grid__day { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.5rem; min-height: 100px; }
.weekly-grid__day--today { border-color: var(--color-primary); border-width: 2px; }
@media (max-width: 768px) { .weekly-grid { grid-template-columns: 1fr; } }