/* SSPv2.1 modern popup styles */
#sspv21-popup { position: fixed; top: 50%; transform: translateY(-50%); z-index: 99999; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
#sspv21-popup.ssp-right { right: 16px; }
#sspv21-popup.ssp-left { left: 16px; }

.sspv21-toggle { display: flex; align-items: center; gap: 8px; border: none; padding: 10px 12px; border-radius: 9999px; background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); cursor: pointer; white-space: nowrap; }

.sspv21-card { width: 340px; max-width: 90vw; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 12px; margin-top: 10px; display: none; border: 1px solid rgba(0,0,0,0.06); }

.sspv21-card-header { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; }
.sspv21-title { font-weight:700; font-size:16px; }
.sspv21-close { background:transparent; border:none; font-size:18px; cursor:pointer; }

.sspv21-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
.sspv21-metric { background: linear-gradient(180deg, #ffffff, #f8fafc); border-radius:8px; padding:10px; text-align:center; }
.sspv21-label { font-size:12px; color:#6b7280; margin-bottom:6px; }
.sspv21-value { font-size:20px; font-weight:800; color:#111827; }

.sspv21-footer { text-align:right; padding:8px 12px; font-size:12px; color:#6b7280; }

/* open state */
#sspv21-popup.ssp-open .sspv21-card { display:block; }