/* Glass card */
.card, .widget {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  padding: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
  contain: layout style;
}
.card:hover, .widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass-hover);
}

/* Callout */
.callout {
  background: var(--accent-bg);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.callout-red { background: var(--red-bg); border-color: rgba(239,68,68,.25); }
.callout h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.callout p { font-size: 13px; color: var(--text-secondary); }
.callout .big-num { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Reco card */
.reco-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.reco-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.reco-card p { font-size: 12px; color: var(--text-muted); }

/* AB test card */
.test-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-glass);
}
.test-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }