/* Header market pulse — GLOBAL view (base.html), every page.
   Row 1: a Fear/Greed strength gauge next to the page title.
   Row 2 (.mkt-pulse-strip): a centred ribbon under the top-bar with today's
   per-exchange totals + top-3 pairs. Subtle & professional: colour carries
   meaning ONLY (green = win / PnL+, red = loss, medal tints); everything else is
   a grayscale hairline scale. */

/* ── Row 1: Fear / Greed gauge (in .top-bar-left, next to the title) ── */
.mkt-pulse { display: flex; align-items: center; min-width: 0; }
.mp-fg { display: flex; align-items: center; gap: 11px; }
.mp-fg-cap {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); white-space: nowrap;
}
.mp-track {
    position: relative;
    width: 200px; height: 7px; border-radius: 4px; flex: 0 0 auto;
    background: linear-gradient(90deg, #e5484d 0%, #e2b340 50%, #30a46c 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.mp-cursor {
    position: absolute; top: 50%; left: 50%;
    width: 3px; height: 16px; border-radius: 2px;
    background: var(--text-primary);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
    transition: left 0.4s ease;
}
.mp-fg-read { display: flex; align-items: baseline; gap: 6px; }
.mp-fg-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.mp-fg-label.fear  { color: #e5736f; }
.mp-fg-label.greed { color: #4fb583; }
.mp-fg-label.neu   { color: var(--text-secondary); }
.mp-fg-val { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Row 2: centred ribbon (.mkt-pulse-strip, injected after .top-bar) ── */
.mkt-pulse-strip {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px 18px;
    padding: 5px 1.75rem;
    background: var(--panel, #14141c);
    border-bottom: 1px solid var(--border, #1a1a28);
}
.mps-div { width: 1px; height: 16px; background: var(--border, #262638); flex: 0 0 auto; }

.mp-ex-totals, .mp-tops { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-tot-cap, .mp-tops-cap {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); white-space: nowrap;
}

/* Totals — icon + label + value, tabular numerics. */
.mp-tot { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mp-ico {
    width: 14px; height: 14px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-muted);
}
.mp-tot-lab { font-size: 11px; color: var(--text-muted); }
.mp-tot-val { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mp-tot.pos .mp-ico, .mp-tot.pos .mp-tot-val { color: var(--green, #30a46c); }
.mp-tot.neg .mp-ico, .mp-tot.neg .mp-tot-val { color: var(--red, #e5484d); }
.mp-tot.muted .mp-tot-val { color: var(--text-muted); }
.mp-tot.flat .mp-tot-val  { color: var(--text-secondary); }

/* Top pairs — medal · symbol · W/L · PnL. */
.mp-top { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.mp-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    font-size: 9px; font-weight: 700; color: #0e0e14; flex: 0 0 auto;
}
.mp-medal-1 { background: #e2b340; }   /* gold   */
.mp-medal-2 { background: #c7ccd6; }   /* silver */
.mp-medal-3 { background: #cd8a52; }   /* bronze */
.mp-top-sym { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mp-top:hover .mp-top-sym { color: var(--text-primary); }
.mp-top-wl { display: inline-flex; gap: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mp-top-wl .pos { color: var(--green, #30a46c); font-weight: 600; }
.mp-top-wl .neg { color: var(--red, #e5484d); font-weight: 600; }
.mp-top-pnl { font-size: 11px; font-variant-numeric: tabular-nums; }
.mp-top-pnl.pos  { color: var(--green, #30a46c); }
.mp-top-pnl.neg  { color: var(--red, #e5484d); }
.mp-top-pnl.flat { color: var(--text-muted); }
.mp-tops-empty { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* Responsive — shed captions, then tighten gaps; the ribbon wraps before it
   ever collides with the right-hand controls. */
@media (max-width: 1280px) { .mp-fg-cap { display: none; } }
@media (max-width: 1100px) { .mkt-pulse-strip { gap: 6px 12px; } .mp-ex-totals, .mp-tops { gap: 10px; } }
@media (max-width: 760px)  { .mp-tot-lab { display: none; } }
@media (max-width: 560px)  { .mp-fg-read { display: none; } }