/* Overlay: centered, smooth, no flicker */
@keyframes devmaFadeIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:99999;animation:devmaFadeIn .18s ease;}
.modal-content{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:24px;width:92%;max-width:550px;position:relative}
.modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:22px;cursor:pointer}
.devma-hidden{display:none}

.devma-btn{border:none;border-radius:999px;padding:12px 18px;background:#ff4081;color:#fff;cursor:pointer}
.devma-btn:hover{opacity:.95}

.modal-header h3{margin:0 0 8px 0;font-size:1.6rem;background:linear-gradient(45deg, #667eea, #764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.access-tab{flex:1;padding:12px 16px;border:none;background:transparent;color:#666;font-weight:600;border-radius:8px;cursor:pointer;transition:all .25s ease}
.access-tab.active{background:#fff;color:#667eea;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.access-tabs-wrap{display:flex;margin-bottom:24px;background:#f8fafc;border-radius:12px;padding:4px}

.modal-input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;margin-bottom:16px;transition:border-color .25s ease}
.modal-input:focus{outline:none;border-color:#667eea}
.modal-actions{display:flex;gap:12px;margin-bottom:12px}
.modal-primary{flex:1;background:linear-gradient(135deg, #667eea, #764ba2);color:#fff;border:none;padding:14px 24px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .25s ease}
.modal-secondary{flex:1;background:transparent;color:#666;border:2px solid #e2e8f0;padding:14px 24px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .25s ease}
.modal-primary.alt{background:linear-gradient(135deg, #E91E63, #9C27B0)}
.modal-helper{color:#888;font-size:.85rem;text-align:center}
.modal-helper a{color:#667eea;text-decoration:none;font-weight:500}
.modal-error{color:#b00020;font-size:.9rem;margin:6px 0}
.modal-success{color:#0b7a0b;font-size:.9rem;margin:6px 0}

/* Wide CTA variant (first button style from screenshot) */
.devma-btn--wide{
  --devma-start:#FF5BA7;
  --devma-end:#F43F8C;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:18px 28px;
  font-size:1.25rem;
  font-weight:700;
  border-radius:9999px;
  background:linear-gradient(135deg, var(--devma-start), var(--devma-end));
  color:#fff;
  box-shadow:0 8px 20px rgba(244,63,140,.35);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.devma-btn--wide:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(244,63,140,.4); opacity:.98; }
.devma-btn__icon{ display:inline-flex; }
.devma-btn__label{ line-height:1; }