/* ===== FINANCE TRACKER TILE ===== */
.tile-finance .tile-header h2 { color: var(--green); }
.tile-finance .tile-badge { background: var(--green-bg); color: var(--green); }
.tile-finance .tile-header { cursor: pointer; user-select: none; transition: background 0.15s; }
.tile-finance .tile-header:hover { background: var(--surface2); }
.tile-finance .tile-content { padding: 1rem 1.2rem; }
.fin-detail { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.fin-detail.open { display: block; }
.fin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.fin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; }
.fin-card .label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.fin-card .value { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-bar { height: 6px; border-radius: 3px; background: var(--surface2); margin-top: 0.4rem; overflow: hidden; }
.fin-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.fin-section { margin-top: 1rem; }
.fin-section-title { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; font-weight: 600; }
.fin-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; font-size: 0.78rem; border-bottom: 1px solid var(--border); }
.fin-row:last-child { border-bottom: none; }
.fin-input { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.78rem; padding: 0.3rem 0.5rem; width: 6rem; text-align: right; outline: none; font-variant-numeric: tabular-nums; }
.fin-input:focus { border-color: var(--green); }
.fin-add-row { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.fin-add-row input { flex: 1; }
.fin-btn { background: var(--green-bg); border: 1px solid var(--green); color: var(--green); border-radius: 6px; cursor: pointer; font-size: 0.7rem; padding: 0.25rem 0.6rem; font-weight: 600; }
.fin-btn:hover { background: var(--green); color: var(--bg); }
.fin-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 0.75rem; padding: 0; line-height: 1; opacity: 0.6; }
.fin-del:hover { opacity: 1; }
.fin-suggestions { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-bottom: 0.6rem; }
.fin-suggestions-title { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.fin-suggestions-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.fin-suggestion-chip { background: transparent; border: 1px solid; padding: 0.2rem 0.55rem; border-radius: 12px; cursor: pointer; font-size: 0.65rem; font-weight: 600; transition: all 0.15s; }
.fin-suggestion-chip:hover { background: var(--surface); filter: brightness(1.2); }