/* /derivatives-fear-greed-index (templates/fear_greed.html, main.asi.dfg). Loaded after seo.css and altseason.css,
   whose stat grid, gauge and inline-SVG chart it reuses; colours follow the site tokens (app.css). */
.dfg { --dfg-fear: var(--down, #e5484d); --dfg-greed: var(--up, #30a46c); --asi-alt: var(--dfg-greed); --asi-btc: var(--dfg-fear); }
.dfg-gauge i { opacity: .55; }
.dfg-g-xfear { width: 25%; background: var(--dfg-fear); border-radius: 4px 0 0 4px; }
.dfg-g-fear { width: 20%; background: var(--dfg-fear); opacity: .3 !important; }
.dfg-g-neutral { width: 11%; background: var(--line2); }
.dfg-g-greed { width: 20%; background: var(--dfg-greed); opacity: .3 !important; }
.dfg-g-xgreed { width: 24%; background: var(--dfg-greed); border-radius: 0 4px 4px 0; }
.dfg-xfear .stat-value small, .dfg-fear .stat-value small, .dfg-t-xfear, .dfg-t-fear { color: var(--dfg-fear); }
.dfg-xgreed .stat-value small, .dfg-greed .stat-value small, .dfg-t-xgreed, .dfg-t-greed { color: var(--dfg-greed); }
.dfg-t-neutral, .dfg-t-na { color: var(--muted); }
.dfg-prev small { font-size: 13px; font-weight: 600; margin-left: 4px; color: var(--muted); }

.dfg-parts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dfg-part-h { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.dfg-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.dfg-bar i { display: block; height: 100%; background: currentColor; }
.dfg-bar i.dfg-t-neutral, .dfg-bar i.dfg-t-na { background: var(--muted); }

.dfg-table td:nth-child(3) { font-family: Inter, sans-serif; white-space: nowrap; }
.dfg-method { font-size: 14px; line-height: 1.55; }
.dfg-method ol { padding-left: 20px; margin: 8px 0; }
.dfg-method li { margin: 6px 0; }