:root {
    --bf-ink: #020617;
    --bf-muted: #64748b;
    --bf-card: #ffffff;
    --bf-green: #16a34a;
    --bf-red: #dc2626;
}

* { box-sizing: border-box; }
body { min-width: 320px; }
.chart-card canvas { max-height: 320px; }
.soft-card { border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(255,255,255,0.94); box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08); }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { content: ''; position: absolute; inset: auto -20% -55% auto; width: 120px; height: 120px; border-radius: 999px; background: currentColor; opacity: 0.06; }
.form-input, .form-select, .form-textarea { width: 100%; border-radius: 1rem; border: 1px solid #e2e8f0; background: #f8fafc; padding: 0.75rem 0.9rem; outline: none; transition: all .18s ease; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #10b981; background: white; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.form-label { display: block; margin-bottom: .4rem; font-size: .78rem; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .08em; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0 .55rem; }
.data-table th { padding: .35rem .9rem; text-align: left; font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .08em; }
.data-table td { background: white; padding: .85rem .9rem; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.data-table td:first-child { border-left: 1px solid #e2e8f0; border-radius: 1rem 0 0 1rem; }
.data-table td:last-child { border-right: 1px solid #e2e8f0; border-radius: 0 1rem 1rem 0; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .65rem; font-size: .75rem; font-weight: 800; }
.skeleton { background: linear-gradient(90deg,#e2e8f0,#f8fafc,#e2e8f0); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 768px) { .chart-card canvas { max-height: 260px; } }
