.popup-notify[hidden]{display:none!important}

.popup-notify{
  --popup-theme:var(--accent,#2563eb);
  --popup-theme-ink:var(--accent-ink,#fff);
  --popup-theme-soft:var(--accent-soft,rgba(37,99,235,.12));
  --popup-text:#1f2937;
  --popup-muted:#64748b;
  --popup-line:#eef2f6;
  position:fixed;inset:0;z-index:1250;display:flex;padding:20px;
  pointer-events:none;
}
.popup-notify.is-open{pointer-events:auto}
.popup-notify-mask{
  position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s ease;
}
.popup-notify.is-open .popup-notify-mask{opacity:1}
.popup-notify-card{
  position:relative;z-index:1;pointer-events:auto;
  background:#fff;color:var(--popup-text);
  box-shadow:0 24px 60px rgba(15,23,42,.16);
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .28s ease,transform .32s ease;
  overflow:hidden;
}
.popup-notify.is-open .popup-notify-card{
  opacity:1;transform:none;
}

/* 三种样式共用：主题色透明渐变伪元素 */
.popup-notify-card::before{
  content:"";position:absolute;left:-20%;top:-30%;width:70%;height:70%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--popup-theme-soft) 0%,transparent 70%);
  opacity:.95;
}
.popup-notify-card::after{
  content:"";position:absolute;right:-25%;bottom:-35%;width:65%;height:65%;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--popup-theme-soft) 0%,transparent 72%);
  opacity:.55;
}
.popup-notify-card > *{position:relative;z-index:1}

/* 布局：现代轻奢（居中） */
.popup-mode-luxury{
  align-items:center;justify-content:center;
}
.popup-style-luxury{
  width:min(440px,calc(100vw - 32px));border-radius:20px;
}
.popup-style-luxury::before{
  left:-18%;top:-28%;width:78%;height:78%;
  opacity:1;
}
.popup-style-luxury .popup-notify-head{
  display:flex;align-items:flex-start;gap:10px;
  padding:20px 48px 0 20px;
}
.popup-style-luxury .popup-notify-icon{
  display:grid;place-items:center;flex-shrink:0;
  width:24px;height:24px;border-radius:999px;margin:2px 0 0;
  background:var(--popup-theme-soft);color:var(--popup-theme);font-size:14px;
}
.popup-style-luxury .popup-notify-head h3{
  flex:1;min-width:0;margin:0;
}
.popup-style-luxury .popup-notify-body{
  padding:22px 20px 0;max-height:min(48vh,360px);overflow:auto;
}
.popup-style-luxury .popup-notify-foot{
  padding:16px 20px 20px;
}

/* 布局：底部抽屉 */
.popup-notify-handle{
  display:none;width:40px;height:4px;border-radius:999px;
  background:#d1d5db;margin:10px auto 0;flex-shrink:0;
}
.popup-mode-drawer{
  align-items:flex-end;justify-content:center;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));
}
.popup-mode-drawer .popup-notify-mask{background:rgba(15,23,42,.48)}
.popup-style-drawer{
  width:min(560px,calc(100vw - 32px));max-width:560px;
  max-height:min(78vh,640px);
  border-radius:20px;display:flex;flex-direction:column;
  transform:translateY(calc(100% + 24px));opacity:1;
  margin:0 auto;border:0;
}
.popup-mode-drawer.is-open .popup-style-drawer{transform:translateY(0)}
.popup-style-drawer .popup-notify-handle{display:block}
.popup-style-drawer .popup-notify-x{top:18px;right:16px}
.popup-style-drawer .popup-notify-head{
  padding:14px 48px 0 20px;flex-shrink:0;
}
.popup-style-drawer .popup-notify-head h3{font-size:17px;font-weight:800}
.popup-style-drawer .popup-notify-icon{display:none}
.popup-style-drawer .popup-notify-body{
  padding:22px 20px 0;flex:1 1 auto;min-height:0;
  max-height:none;overflow:auto;-webkit-overflow-scrolling:touch;
}
.popup-style-drawer .popup-notify-foot{
  padding:16px 20px 20px;
  flex-shrink:0;
  justify-content:flex-end;gap:10px 20px;
}

/* 布局：右下浮窗 */
.popup-mode-float{
  align-items:flex-end;justify-content:flex-end;padding:16px;
}
.popup-mode-float .popup-notify-mask{
  background:rgba(15,23,42,.18);backdrop-filter:none;
}
.popup-style-float{
  width:min(380px,calc(100vw - 32px));border-radius:16px;
  transform:translateY(16px);opacity:0;border:0;
}
.popup-mode-float.is-open .popup-style-float{
  transform:translateY(0);opacity:1;
}
.popup-style-float .popup-notify-head{padding:18px 44px 0 18px}
.popup-style-float .popup-notify-icon{display:none}
.popup-style-float .popup-notify-body{
  padding:14px 18px 0;max-height:min(38vh,280px);overflow:auto;font-size:13px;
}
.popup-style-float .popup-notify-foot{padding:14px 18px 18px}
.popup-style-float .popup-notify-x{
  top:10px;right:10px;width:28px;height:28px;font-size:16px;
}

/* 通用结构 */
.popup-notify-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:10px;
  background:transparent;color:var(--popup-muted);cursor:pointer;display:grid;place-items:center;
  font-size:18px;line-height:1;z-index:2;
}
.popup-notify-x:hover{background:var(--popup-theme-soft);color:var(--popup-theme)}
.popup-notify-head h3{
  margin:0;font-size:18px;font-weight:800;line-height:1.45;color:var(--popup-text);
}
.popup-notify-body{
  font-size:14px;line-height:1.7;color:#475569;
}
.popup-notify-body p{margin:0 0 10px}
.popup-notify-body p:last-child{margin-bottom:0}
.popup-notify-foot{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 18px;
}
.popup-notify-btn{
  border:0;background:transparent;cursor:pointer;font-size:14px;font-weight:700;
  min-height:40px;padding:0 4px;color:var(--popup-theme);
}
.popup-notify-btn-ghost{
  color:var(--popup-muted);
}
.popup-notify-btn-ghost:hover{color:var(--popup-theme)}
.popup-notify-btn-primary.is-text{
  color:var(--popup-theme);background:transparent;
}
.popup-notify-btn-primary.is-text:hover{opacity:.82}
.popup-notify-btn-primary.is-theme{
  min-width:112px;padding:0 22px;border-radius:999px;
  background:var(--popup-theme);color:var(--popup-theme-ink);
  box-shadow:0 8px 20px var(--popup-theme-soft);
}
.popup-notify-btn-primary.is-theme:hover{filter:brightness(1.04)}

@media (max-width:640px){
  .popup-mode-luxury{padding:12px}
  .popup-style-luxury .popup-notify-head{padding-top:18px}
  .popup-mode-drawer{padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .popup-style-drawer{width:min(560px,calc(100vw - 24px))}
  .popup-mode-float{padding:12px}
  .popup-style-float{width:min(360px,calc(100vw - 24px))}
}