/* Custom utilities layered on Tailwind */
:root { --glass: rgba(15, 23, 42, 0.6); --glass-strong: rgba(15, 23, 42, 0.75); --ring: rgba(139,92,246,0.45); }
.card { @apply rounded-2xl bg-[var(--glass)] border border-white/10 shadow-soft backdrop-blur p-4; }
.card-header { @apply flex items-center justify-between pb-4 mb-4 border-b border-white/5; }
.card-title { @apply text-sm font-semibold tracking-wide text-white; }
.btn { @apply inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-fusion-600 to-indigo-600 px-4 py-2 text-sm font-medium text-white shadow hover:opacity-90 transition focus:outline-none focus:ring-2; box-shadow: 0 8px 20px rgba(99,102,241,0.35); }
.btn-secondary { @apply inline-flex items-center justify-center rounded-2xl bg-slate-800/70 px-4 py-2 text-sm font-medium text-slate-200 hover:bg-slate-800 transition border border-white/10; }
.btn-ghost { @apply inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm text-slate-300 hover:bg-white/5 transition border border-white/10; }
.input { @apply w-full rounded-xl bg-slate-900/60 border border-white/10 px-3 py-2 text-sm outline-none focus:ring-2; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); caret-color: white; }
.kpi { @apply rounded-2xl bg-slate-900/60 border border-white/10 p-3; }
.kpi-label { @apply text-[11px] uppercase tracking-wide text-slate-400; }
.kpi-value { @apply text-xl font-semibold; }
.kpi-badge { @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold bg-slate-800; }
.note { @apply text-sm text-slate-300; }
.row { @apply flex items-center justify-between gap-3 py-3; }
.ticker { @apply text-sm font-semibold; }
.pct-up { @apply text-emerald-400; }
.pct-down { @apply text-rose-400; }
.tooltip { position: relative; }
.tooltip:hover::after { content: attr(data-tip); position: absolute; top: -36px; left: 50%; transform: translateX(-50%); background: var(--glass-strong); color: white; padding: 6px 10px; font-size: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }