:root {
  --cvi-purple: #571780;
  --cvi-purple-2: #4d136f;
  --cvi-text: #0f172a;
  --cvi-muted: #475569;
  --cvi-border: #e2e8f0;
  --cvi-bg: #ffffff;
  --cvi-amber-bg: #fffbeb;
  --cvi-amber: #f59e0b;
  --cvi-slate-50: #f8fafc;
}
.cvi-lite-container { color: var(--cvi-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.cvi-lite-header { border-bottom:1px solid var(--cvi-border); background: var(--cvi-bg); padding: 20px 0; }
.cvi-lite-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.cvi-lite-title { font-size: 22px; font-weight: 700; margin: 0; }
.cvi-lite-sub { color: var(--cvi-muted); margin-top: 4px; }
.cvi-lite-note { color: #64748b; font-size: 12px; margin-top: 6px; }
.cvi-lite-main { max-width:1120px; margin:0 auto; padding:20px; display:grid; grid-template-columns: 1fr; gap:20px; }
@media (min-width: 1024px) { .cvi-lite-main { grid-template-columns: 1fr 2fr; } .cvi-lite-sticky { position: sticky; top: 20px; } }
.cvi-lite-card { background:#fff; border:1px solid var(--cvi-border); border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding:16px; }
.cvi-lite-card h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.cvi-lite-label { font-size: 14px; font-weight: 600; display:block; }
.cvi-lite-help { font-size: 12px; color:#64748b; margin-top:4px; }
.cvi-lite-input, .cvi-lite-select { border:1px solid #cbd5e1; border-radius:6px; padding:8px 10px; font-size:14px; background:#fff; color: var(--cvi-text); }
.cvi-lite-input:focus { outline: 2px solid var(--cvi-purple); outline-offset: 1px; }
.cvi-lite-row { margin-top: 10px; }
.cvi-lite-flex { display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.cvi-lite-badge { border:1px solid #cbd5e1; border-radius:999px; padding:4px 10px; font-size:12px; color:#475569; background:#fff; cursor:pointer; }
.cvi-lite-badge--active { border-color: var(--cvi-purple); color: var(--cvi-purple); }
.cvi-lite-btn { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:8px; padding:8px 14px; cursor:pointer; }
.cvi-lite-btn:hover { background:#f8fafc; }
.cvi-lite-btn--primary { background: var(--cvi-purple); border-color: var(--cvi-purple); color:#fff; }
.cvi-lite-btn--primary:hover { background: var(--cvi-purple-2); }
.cvi-lite-notice { border-left:4px solid; padding: 10px; border-radius: 6px; }
.cvi-lite-notice--warn { background: var(--cvi-amber-bg); border-color: var(--cvi-amber); color: #92400e; }
.cvi-lite-notice--info { background: var(--cvi-slate-50); border-color: #64748b; color: #334155; }
.cvi-lite-kpi { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .cvi-lite-kpi { grid-template-columns: repeat(3, 1fr); } }
.cvi-lite-kpi .k { font-size: 20px; font-weight: 700; margin-top: 4px; }
.cvi-lite-muted { font-size: 12px; color: #64748b; }
.cvi-lite-table { width:100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
.cvi-lite-table th { text-align:left; color:#475569; font-weight:500; padding-right:12px; }
.cvi-lite-table td { padding: 6px 12px 6px 0; }
.cvi-lite-switch { display:flex; align-items:center; gap:8px; cursor:pointer; }
.cvi-lite-switch .dot { width: 34px; height: 18px; border-radius: 999px; background: #cbd5e1; position: relative; }
.cvi-lite-switch .dot::after { content:""; width: 14px; height: 14px; position:absolute; top:2px; left:2px; border-radius: 999px; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .2s; }
.cvi-lite-switch.active .dot { background: var(--cvi-purple); }
.cvi-lite-switch.active .dot::after { transform: translateX(16px); }

/* Chart box enforces a sane height; canvas fills it reliably */
.cvi-lite-chartbox { position: relative; width: 100%; height: 360px; }
@media (max-width: 980px) { .cvi-lite-chartbox { height: 300px; } }
@media (max-width: 640px) { .cvi-lite-chartbox { height: 260px; } }
.cvi-lite-chartbox canvas { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }