/* ---------------------------------------------------------------------
   Phantom connect modal
   Trigger: any element with class "connect-button" opens the modal.
   Drop connect-modal.css + connect-modal.js onto any page alongside
   the existing snippet:
     <div class="u-mb-m connect-button">Connect your Phantom wallet to get started.</div>
--------------------------------------------------------------------- */

.pcm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 9, 14, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  
  .pcm-backdrop.pcm-open {
    opacity: 1;
  }
  
  .pcm-modal {
    width: 100%;
    max-width: 380px;
    background: #14151c;
    border: 1px solid #262838;
    border-radius: 20px;
    padding: 28px 26px 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #eef0f6;
    position: relative;
  }
  
  .pcm-backdrop.pcm-open .pcm-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  
  .pcm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6b7089;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  
  .pcm-close:hover {
    background: #1e202c;
    color: #eef0f6;
  }
  
  .pcm-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(160deg, #ab9ff2, #7a6de0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }
  
  .pcm-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .pcm-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  
  .pcm-subtitle {
    font-size: 13.5px;
    line-height: 1.55;
    color: #9498ab;
    margin: 0 0 22px;
  }
  
  .pcm-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.15s, transform 0.08s, background 0.15s;
  }
  
  .pcm-btn:active {
    transform: scale(0.98);
  }
  
  .pcm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .pcm-btn-primary {
    background: linear-gradient(160deg, #ab9ff2, #8b7ce0);
    color: #14101f;
  }
  
  .pcm-btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg, #b7acf4, #9787e6);
  }
  
  .pcm-btn-ghost {
    background: transparent;
    color: #9498ab;
    border: 1px solid #262838;
    margin-top: 10px;
  }
  
  .pcm-btn-ghost:hover {
    background: #1a1c27;
    color: #eef0f6;
  }
  
  .pcm-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pcm-spin 0.7s linear infinite;
    flex-shrink: 0;
  }
  
  @keyframes pcm-spin {
    to { transform: rotate(360deg); }
  }
  
  .pcm-state {
    display: none;
  }
  
  .pcm-state.pcm-active {
    display: block;
  }
  
  .pcm-account {
    background: #0f1017;
    border: 1px solid #262838;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  
  .pcm-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  
  .pcm-account-row + .pcm-account-row {
    margin-top: 8px;
  }
  
  .pcm-label {
    color: #6b7089;
  }
  
  .pcm-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
  }
  
  .pcm-success-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  
  .pcm-error-text {
    font-size: 13px;
    color: #ff8080;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  
  .pcm-error-text a {
    color: #ab9ff2;
  }
  
  .connect-button {
    cursor: pointer;
    transition: opacity 0.15s;
  }
  
  .connect-button:hover {
    opacity: 0.85;
  }