/* avail-popup.css — limited-time "available now" popup (panel + waitlist).
   Self-contained dark theme; no dependency on page CSS variables so it looks
   identical on both surfaces. */
/* z-index 9500 sits below the What's New popup (9999) so it can never cover it;
   the defer guard in avail-popup.js normally keeps them from coexisting at all. */
.avp-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: avpFade 0.16s ease;
}
@keyframes avpFade { from { opacity: 0; } to { opacity: 1; } }
.avp-modal {
    width: min(460px, 96vw);
    background: #12161d;
    border: 1px solid #262c37;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    padding: 20px 20px 18px;
    color: #e7ebf2;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    animation: avpPop 0.18s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes avpPop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.avp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.avp-eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #ffc24b;
    background: rgba(255, 194, 75, .12); border: 1px solid #6b5320;
    padding: 3px 10px; border-radius: 999px;
}
.avp-x {
    background: none; border: none; color: #7c8494; font-size: 26px; line-height: 1;
    cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.avp-x:hover { color: #e7ebf2; }
.avp-h1 { font-size: 21px; font-weight: 800; margin: 6px 0 14px; letter-spacing: -.01em; }
.avp-list { display: flex; flex-direction: column; gap: 10px; }
.avp-row {
    display: flex; gap: 12px; align-items: flex-start;
    background: #0d1117; border: 1px solid #212734; border-radius: 12px;
    padding: 12px 14px;
}
.avp-ico { font-size: 22px; line-height: 1.1; }
.avp-title { font-size: 15px; font-weight: 700; color: #ffd479; }
.avp-sub { font-size: 12.5px; color: #9aa3b2; margin-top: 3px; line-height: 1.35; }
.avp-actions { display: flex; gap: 10px; margin-top: 18px; }
.avp-btn {
    flex: 1; padding: 12px 14px; border-radius: 11px; font-size: 14px; font-weight: 800;
    letter-spacing: .04em; cursor: pointer; border: 1px solid transparent;
}
.avp-btn.primary { background: linear-gradient(90deg, #ffc24b, #ffb01f); color: #1a1400; }
.avp-btn.primary:hover { filter: brightness(1.06); }
.avp-btn.ghost { background: transparent; border-color: #2d333b; color: #c3cad6; }
.avp-btn.ghost:hover { border-color: #3a414d; color: #fff; }