:root{
  --dwpn-bg: #111827;
  --dwpn-fg: #f9fafb;
  --dwpn-bg-light: #ffffff;
  --dwpn-fg-dark: #111827;
  --dwpn-accent: #3b82f6;
  --dwpn-shadow: 0 10px 30px rgba(0,0,0,.25);
  --dwpn-radius: 14px;
}
.dwpn{position:fixed;max-width:360px;width:calc(100vw - 32px);box-shadow:var(--dwpn-shadow);border-radius:var(--dwpn-radius);padding:16px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;line-height:1.5;z-index:9999}
.dwpn .dwpn-inner{outline:none}
.dwpn-theme-system{background:var(--dwpn-bg);color:var(--dwpn-fg)}
.dwpn-theme-light{background:var(--dwpn-bg-light);color:var(--dwpn-fg-dark);border:1px solid #e5e7eb}
.dwpn-theme-dark{background:var(--dwpn-bg);color:var(--dwpn-fg)}
.dwpn .dwpn-title{margin:0 0 6px;font-size:16px;font-weight:700}
.dwpn .dwpn-message{font-size:14px;margin-bottom:10px}
.dwpn .dwpn-cta{display:inline-block;margin-top:2px;padding:8px 12px;border-radius:10px;text-decoration:none;border:1px solid currentColor}
.dwpn .dwpn-cta:hover{background:var(--dwpn-accent);color:#fff;border-color:var(--dwpn-accent)}
.dwpn .dwpn-close{position:absolute;top:6px;right:10px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:inherit}
.dwpn-bottom-right{right:16px;bottom:16px}
.dwpn-bottom-left{left:16px;bottom:16px}
.dwpn-top-right{right:16px;top:16px}
.dwpn-top-left{left:16px;top:16px}
.dwpn-center{left:50%;top:50%;transform:translate(-50%,-40%) scale(.98);max-width:480px;width:calc(100vw - 64px)}
.dwpn-show{opacity:1;transform:translateY(0)}
.dwpn-hidden{pointer-events:none}
@media (max-width:480px){
  .dwpn{border-radius:12px}
}