/* Support popup after a first completed calculator result. Brand: #12100c / #d96b12 / Segoe UI. The buttons reuse
   the header support buttons as they look today (.dph-btn black X Money, .dph-usdc white USDC). */
.sp-dialog { width:min(420px,calc(100% - 28px)); max-height:calc(100dvh - 28px); overflow:auto; padding:28px 24px 24px; border:1px solid #d96b12; border-radius:18px; background:#12100c; color:var(--ink,#f3eadb); font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; box-shadow:0 0 28px rgba(217,107,18,.35); }
.sp-dialog::backdrop { background:#000c; }
.sp-dialog h2 { margin:0 36px 8px 0; font-size:22px; letter-spacing:-.02em; }
.sp-dialog p { margin:0 0 20px; color:var(--muted,#b9a78c); font-size:14px; line-height:1.55; }
.sp-close { position:absolute; right:8px; top:8px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink,#f3eadb); font:28px/1 Arial,sans-serif; cursor:pointer; }
.sp-close:focus-visible { outline:2px solid var(--ink,#f3eadb); outline-offset:3px; }
.sp-actions { display:flex; flex-wrap:wrap; gap:12px; }
/* Colors, borders, type and hover come from the header classes (.dph-btn / .dph-usdc in index.html and support-usdc.css); only the popup layout is set here. */
.sp-actions .sp-btn { flex:1 1 150px; min-height:44px; }
@media (prefers-reduced-motion: no-preference) {
  .sp-dialog[open] { animation:sp-in .18s ease-out; }
  @keyframes sp-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
}
@media (max-width:420px) { .sp-dialog { padding:24px 18px 18px; } .sp-actions .sp-btn { flex-basis:100%; } }