/* Finance-specific color scheme */
.color-income { color: #10b981; }
.color-expense { color: #ef4444; }
.color-saving { color: #3b82f6; }
.color-investment { color: #8b5cf6; }
.color-debt { color: #f59e0b; }

.positive { color: #10b981; font-weight: 600; }
.negative { color: #ef4444; font-weight: 600; }
.neutral { color: #9ca3af; font-weight: 600; }

.money-amount { font-family: 'Courier New', monospace; font-weight: 600; }
.money-positive { color: #10b981; }
.money-negative { color: #ef4444; }

.financial-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.summary-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: 1.5rem; border-radius: 8px; }
.summary-label { font-size: 0.85rem; color: #9ca3af; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; }
.summary-value { font-size: 1.8rem; font-weight: 700; color: #10b981; font-family: 'Courier New', monospace; }

.progress-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin: 1rem 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); transition: width 0.3s ease; border-radius: 4px; }

.timeline { position: relative; padding-left: 2rem; }
.timeline-item { padding-bottom: 1.5rem; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -1.5rem; top: 0; width: 12px; height: 12px; background: #10b981; border-radius: 50%; border: 3px solid white; }
.timeline-item::after { content: ''; position: absolute; left: -1.45rem; top: 12px; width: 2px; height: calc(100% + 0.5rem); background: rgba(255,255,255,0.1); }
.timeline-item:last-child::after { display: none; }

.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.comparison-item { padding: 1.5rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; }
.comparison-item.winner { border: 2px solid #10b981; box-shadow: 0 0 20px rgba(16,185,129,0.3); }

.status-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.status-good { background: rgba(16,185,129,0.2); color: #10b981; }
.status-caution { background: rgba(245,158,11,0.2); color: #f59e0b; }
.status-alert { background: rgba(239,68,68,0.2); color: #ef4444; }