/* =======================
   HashPack Modal — Light, modern
   ======================= */

:root {
  --hp-bg: #ffffff;
  --hp-fg: #0f172a;            /* slate-900 */
  --hp-muted: #64748b;         /* slate-500 */
  --hp-line: rgba(15,23,42,.08);
  --hp-elev: 0 24px 60px rgba(2,6,23,.12), 0 12px 24px rgba(2,6,23,.08);
  --hp-radius: 16px;
  --hp-radius-sm: 12px;
  --hp-primary: #0ea5e9;       /* sky-500 */
  --hp-primary-press: #0284c7; /* sky-600 */
  --hp-soft: #0ea5e9;          /* slate-50 */
}

.hp-sc-overlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  display:none; align-items:center; justify-content:center;
  z-index:999999;
  backdrop-filter: blur(4px);
}

.hp-sc-modal{
  background: var(--hp-bg);
  color: var(--hp-fg);
  width: 420px; max-width: min(92vw, 520px);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-elev);
  overflow:hidden;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  border:1px solid var(--hp-line);
}

.hp-sc-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background: var(--hp-bg);
  border-bottom:1px solid var(--hp-line);
  font-weight:700; letter-spacing:.2px; font-size:15px;
}

.hp-sc-close{
  background:transparent; border:none; color:var(--hp-muted);
  font-size:20px; line-height:1; cursor:pointer; border-radius:10px;
  width:32px; height:32px; display:grid; place-items:center;
  transition: background .2s ease, color .2s ease, transform .08s ease;
}
.hp-sc-close:hover{ background: var(--hp-soft); color: var(--hp-fg); }
.hp-sc-close:active{ transform: scale(.96); }

.hp-sc-body{ padding:18px; background: var(--hp-bg); }

.hp-sc-qr{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius: var(--hp-radius-sm);
  height:260px; border:1px solid var(--hp-line);
  /* ensure background QR drawn via JS is always visible */
  background-position:center; background-repeat:no-repeat; background-size:contain; min-height:260px;
}
.hp-sc-qr canvas,.hp-sc-qr img{ width:260px; height:260px; display:block; }

.hp-sc-row{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }

.hp-sc-btn2{
  flex:1 1 auto; padding:12px 14px; border-radius:12px;
  border:1px solid var(--hp-line); background: var(--hp-soft);
  color: var(--hp-fg); cursor:pointer; font-weight:600; font-size:14px;
  transition: background .2s ease, border-color .2s ease, transform .08s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 0 rgba(14,165,233,0);
}
.hp-sc-btn2:hover{ background:#eef2f7; }
.hp-sc-btn2:active{ transform: translateY(1px); }
.hp-sc-btn2:focus-visible{
  outline:none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);
}

/* Evidenzia l’azione primaria "Open HashPack App" */
.hp-sc-btn2[data-app]{
  background: var(--hp-primary);
  color:#fff;
  border-color: var(--hp-primary);
}
.hp-sc-btn2[data-app]:hover{ background: var(--hp-primary-press); border-color: var(--hp-primary-press); }
.hp-sc-btn2[data-app]:focus-visible{ box-shadow: 0 0 0 4px rgba(14,165,233,.35); }

.hp-sc-note{
  color: var(--hp-muted); font-size:12.5px; margin-top:12px;
}

/* Small screens */
@media (max-width: 420px){
  .hp-sc-modal{ width: 94vw; }
  .hp-sc-body{ padding:14px; }
  .hp-sc-row{ gap:10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-sc-close, .hp-sc-btn2{ transition:none; }
}
 
@media (prefers-color-scheme: dark){
  :root{
    --hp-bg:#0b1220;
    --hp-fg:#e5e7eb;
    --hp-muted:#9aa4b2;
    --hp-line:rgba(148,163,184,.16);
    --hp-soft:#0f172a;
    --hp-elev: 0 24px 60px rgba(0,0,0,.45), 0 12px 24px rgba(0,0,0,.35);
  }
  .hp-sc-qr{ background:#0b1220; }
  .hp-sc-btn2:hover{ background:#111827; }
}