/* SwapDusk status page — Get trade alerts card (Telegram + Vector) */
.notify-card{display:grid;gap:16px}
.notify-card[hidden]{display:none!important}
.notify-head{display:flex;gap:14px;align-items:flex-start}
.notify-head h2{margin:0 0 4px;font-size:1.15rem;font-family:var(--font);letter-spacing:-.02em}
.notify-lede{margin:0;line-height:1.45}
.notify-bell{
  flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  color:var(--orchid);background:linear-gradient(160deg,#8e4cf033,#e29bff18);
  border:1px solid #a86bff55;box-shadow:0 0 24px -10px #8e4cf0aa
}
.notify-bell svg{width:20px;height:20px}

.notify-loading{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r-sm);
  background:#0000003a;border:1px solid var(--line);color:var(--muted);font-size:.9rem;font-weight:600
}
.notify-loading[hidden]{display:none!important}
.notify-spinner{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid #ffffff22;border-top-color:var(--orchid);
  animation:notify-spin .7s linear infinite
}
@keyframes notify-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.notify-spinner{animation:none;border-top-color:var(--mint)}}

.notify-grid{display:grid;gap:12px}
@media (min-width:560px){
  .notify-grid{grid-template-columns:1fr 1fr;align-items:stretch}
}

.notify-opt{
  display:flex;flex-direction:column;gap:12px;padding:14px;
  border-radius:18px;border:1px solid var(--line);background:#0000003a;
  min-width:0
}
.notify-opt[hidden]{display:none!important}
.notify-opt-top{display:flex;gap:12px;align-items:flex-start}
.notify-opt-top h3{margin:0 0 2px;font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.notify-opt-top .hint{margin:0;font-size:.8rem;line-height:1.4}

.notify-mark{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid #ffffff14
}
.notify-mark svg,.notify-mark img{width:28px;height:28px;display:block;border-radius:8px}
.notify-mark-tg{color:#fff;background:linear-gradient(160deg,#2AABEE,#229ED9);border-color:#2AABEE66}
.notify-mark-tg svg{width:22px;height:22px;border-radius:0}
.notify-mark-vec{background:#050505;padding:0;border-color:#5bffb533;overflow:hidden}
.notify-mark-vec img{width:40px;height:40px;border-radius:12px;object-fit:cover}

.notify-btn{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 14px;border-radius:14px;font-weight:800;font-size:.92rem;
  text-decoration:none;color:#fff;border:0;cursor:pointer;
  transition:filter .15s,transform .15s
}
.notify-btn[hidden]{display:none!important}
.notify-btn svg{width:18px;height:18px;flex:none}
.notify-btn:hover{filter:brightness(1.06)}
.notify-btn:active{transform:translateY(1px)}
.notify-btn-tg{
  background:linear-gradient(180deg,#3bbcff,#229ED9 60%,#1a8fc4);
  box-shadow:0 12px 28px -14px #229ED9cc,0 1px 0 #ffffff33 inset
}

.notify-steps{
  margin:0;padding:0 0 0 1.15rem;color:var(--muted);font-size:.8rem;line-height:1.45;
  display:grid;gap:4px
}
.notify-steps li::marker{color:var(--orchid);font-weight:800}

.notify-field{display:grid;gap:6px}
.notify-field .lab{
  font-size:.72rem;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.05em
}
.notify-pill{
  display:flex;align-items:center;gap:8px;min-width:0;
  background:#00000055;border:1px solid var(--line);border-radius:999px;
  padding:6px 6px 6px 14px
}
.notify-pill code{
  flex:1;min-width:0;font-family:var(--mono);font-size:.78rem;line-height:1.35;
  word-break:break-all;color:var(--ink)
}
.notify-pill .copy{
  border:0;background:#ffffff14;border-radius:999px;padding:8px 12px;cursor:pointer;
  font-weight:700;font-size:.78rem;flex:none;color:var(--ink)
}
.notify-pill .copy:hover{background:#ffffff22}
.notify-pill .copy.is-copied{background:#5ef2c222;color:var(--mint)}

.notify-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding-top:4px;border-top:1px solid #ffffff0d
}
.notify-foot .ghost{margin:0}
.notify-foot #nmsg{margin:0;flex:1 1 180px;min-height:1.2em}
.notify-foot #nmsg.ok{color:var(--mint)}
.notify-foot #nmsg.err{color:var(--rose)}

.notify-card[data-state="loading"] .notify-foot{opacity:.55}
.notify-card[data-state="error"]{border-color:#ff7a9a44}
.notify-card[data-state="linked"]{border-color:#5ef2c233}
.notify-card[data-state="linked"] .notify-bell{
  color:var(--mint);border-color:#5ef2c255;background:linear-gradient(160deg,#5ef2c233,#5ef2c212)
}

@media (min-width:900px){
  .page > .notify-card{grid-column:1 / -1}
}