@import url('/static/fonts/urbanist.css');
:root {
  --bg:        #0a0e15;
  --bg-card:   #11161f;
  --bg-card-2: #161c27;
  --bg-elev-2: #161c27;
  --border:    #1d2434;
  --border-2:  #2a3247;
  --border-strong: #2a3247;
  --text:      #d6dde9;
  --text-2:    #aab1c0;
  --text-faint:#6b7589;
  --text-muted:#aab1c0;
  --muted:     #6b7589;
  --muted-2:   #4f5870;
  --accent:    #8EA2FF;
  --accent-bg: rgba(142,162,255,0.08);
  --en:        #f0a955;
  --mt:        #b8b8c8;
  --ag:        #7fc25c;
  --eq:        #c084fc;
  --cr:        #f97316;
  --radius:    8px;
}
* { box-sizing: border-box; }
html, body { background:var(--bg); color:var(--text); margin:0; padding:0;
  font-family:'Urbanist','Segoe UI',sans-serif; font-size:14px; line-height:1.5; }
.page { max-width:1480px; margin:0 auto; padding:36px 28px 56px; }

/* ── topbar (canonical shell; final styling is applied by views_blueprint) ── */
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar-left { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.01em; color:var(--text); }
.brand .edge { color:var(--accent); }
.timestamp { font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:11px;
  color:var(--text-faint); letter-spacing:0.06em; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--bg-elev-2);
  border:1px solid var(--border-strong); display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:500; color:var(--text-muted); }

/* ── section label ─────────────────────────────── */
.section-label { font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.15em; color:var(--text-faint); text-transform:uppercase;
  margin-bottom:14px; }

/* ── view grid ─────────────────────────────────── */
.view-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (max-width:880px) { .view-grid { grid-template-columns:1fr; } }

.vc { display:flex; flex-direction:column; gap:14px; padding:20px 22px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  text-decoration:none; color:inherit; cursor:pointer; min-height:288px;
  transition:border-color .15s, background .15s, transform .15s; }
.vc:hover { border-color:var(--accent); background:var(--bg-card-2);
  transform:translateY(-1px); }
.vc:active { transform:translateY(0); }
.vc-head { display:flex; align-items:center; justify-content:space-between; }
.vc-meta { display:flex; align-items:center; gap:8px; }
.vc-num { font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:10px; font-weight:600;
  color:var(--text-faint); letter-spacing:0.15em; text-transform:uppercase; }
.vc-bundles { display:flex; gap:4px; flex-wrap:wrap; }
.vc-bundle-chip { font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1px; padding:2px 7px; border-radius:8px;
  color:var(--text-muted); border:1px solid var(--border-2); background:var(--bg-elev-2); }
.vc-bundle-chip[data-bundle="all"]         { color:var(--text-2); }
.vc-bundle-chip[data-bundle="energy"]      { color:var(--en); border-color:rgba(240,169,85,0.4); background:rgba(240,169,85,0.08); }
.vc-bundle-chip[data-bundle="metals"]      { color:var(--mt); border-color:rgba(184,184,200,0.4); background:rgba(184,184,200,0.08); }
.vc-bundle-chip[data-bundle="agriculture"] { color:var(--ag); border-color:rgba(127,194,92,0.4); background:rgba(127,194,92,0.08); }
.vc-bundle-chip[data-bundle="equities"]    { color:var(--eq); border-color:rgba(192,132,252,0.4); background:rgba(192,132,252,0.08); }
.vc-bundle-chip[data-bundle="crypto"]      { color:var(--cr); border-color:rgba(249,115,22,0.4); background:rgba(249,115,22,0.08); }

.vc-body { display:flex; flex-direction:column; gap:6px; }
.vc-name { font-size:22px; font-weight:600; letter-spacing:-0.01em; color:var(--text);
  line-height:1.2; }
.vc-question { font-size:13px; color:var(--text-muted); line-height:1.45; max-width:560px; }
.vc-data { font-size:13px; color:var(--text-2); line-height:1.55;
  padding:10px 12px; background:var(--bg-card-2); border-radius:6px;
  border-left:3px solid var(--accent); }
/* Emphasis spans for data-text values */
.vc-data .pos  { color:#3fc28e; font-weight:600; }   /* green — positive states / favorable counts */
.vc-data .neg  { color:#ef6e6e; font-weight:600; }   /* red — negative numbers / unfavorable */
.vc-data .warn { color:#f0b455; font-weight:700; }   /* amber — mid-severity */
.vc-data .crit { color:#ff5577; font-weight:700; }   /* hard red — TIGHT/CRITICAL/HIGH/HEAVY */
.vc-data .info { color:#8EA2FF; font-weight:600; }   /* logo blue — neutral counts */
.vc-foot { display:flex; justify-content:flex-end; align-items:flex-end; margin-top:auto; padding-top:12px; }
.vc-foot-link { font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:10px; font-weight:600;
  color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; }

/* Inline emphasis used by the per-card preview renderers — same palette
   as the existing .vc-data span rules above. */
.vc-accent { color: var(--accent); font-weight: 600; }   /* logo blue */
.vc-warn   { color: #f0b455;       font-weight: 600; }   /* amber */
.vc-crit   { color: #ff5577;       font-weight: 600; }   /* hard red */
.vc-pos    { color: #3fc28e;       font-weight: 600; }   /* green */

/* ── footer ───────────────────────────────────── */
.page-footer { margin-top:48px; padding-top:18px; border-top:1px solid var(--border);
  font-family:'Urbanist',ui-sans-serif,sans-serif; font-size:11px; color:var(--text-faint);
  letter-spacing:0.05em; display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:10px; }