/* --- Pill group --- */
.ssp-pill-group{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 20px; justify-content: center; }
.utility-btn{ --ssp-teal:#1de1d1; display:inline-flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px; border-radius:999px; border:1px solid rgba(29,225,209,.35);
  background:#0b0f14; color:#e9f9f7; font-weight:600; line-height:1; text-decoration:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:inset 0 0 0 0 rgba(29,225,209,0); }
.utility-btn:hover, .utility-btn:focus-visible{ border-color:var(--ssp-teal); box-shadow:0 0 10px rgba(29,225,209,.45); transform:translateY(-1px); outline:none; }
.utility-btn.is-active{ box-shadow:0 0 14px rgba(29,225,209,.55); }
.utility-btn-icon{ width:34px; height:34px; min-width:34px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(100% 100% at 50% 0%, rgba(29,225,209,.25), rgba(29,225,209,.08));
  outline:2px solid rgba(29,225,209,.45); box-shadow:inset 0 0 8px rgba(29,225,209,.35); font-size:18px; line-height:1; }
.utility-btn-label{ font-size:15px; letter-spacing:.2px; white-space:nowrap; }
.utility-btn + .utility-btn{ margin-left:12px; }
@media (max-width:600px){ .utility-btn + .utility-btn{ margin-left:8px; margin-top:8px; } }
.utility-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;   /* same box for all */
  height: 28px;
}

/* --- Modal shells --- */
.ssp-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:9999; }
.ssp-modal.is-open{ display:flex; }
.ssp-modal__dialog{ width:min(900px, 92vw); max-height:86vh; overflow:auto; background:#0b0f14; border:1px solid rgba(29,225,209,.35);
  border-radius:14px; box-shadow:0 0 24px rgba(29,225,209,.35); padding:20px 20px 24px; position:relative; }
.ssp-modal__close{ position:absolute; top:10px; right:12px; background:transparent; color:#e9f9f7; border:none; font-size:28px; cursor:pointer; line-height:1; }
.ssp-modal__close:focus-visible{ outline:2px solid #1de1d1; outline-offset:2px; }
.ssp-modal__content{ color:#e9f9f7; font-size:15px; line-height:1.5; }
.ssp-modal__content h3, .ssp-modal__content h4{ color:#1de1d1; margin:.4em 0 .2em; }

/* Mobile: icon-only + perfectly even spacing */
@media (max-width: 600px) {
  .ssp-pill-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: self-end;      /* <-- keeps all pills aligned vertically */
    justify-items: center;
    gap: 12px;
  }

  .ssp-pill-group .utility-btn + .utility-btn { margin-left: 0; }

  .utility-btn-label { display: none; }

  .utility-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    display: flex;            /* force flexbox centering inside */
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
  }

  .utility-btn-icon {
    display: flex;            /* normalize icon box */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    line-height: 1;           /* prevent text baseline pushing */
  }
  
}