.notification-viewport{position:fixed;top:clamp(68px,8vh,92px);right:clamp(12px,2vw,28px);z-index:5000;width:min(404px,calc(100vw - 24px));max-height:calc(100dvh - clamp(86px,11vh,116px));display:grid;gap:9px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;pointer-events:none}.notification-viewport::-webkit-scrollbar{display:none}.notification-card{--notification-tone: #77dce7;--notification-tone-rgb: 119, 220, 231;position:relative;min-height:68px;display:grid;grid-template-columns:36px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:11px 10px 12px 12px;overflow:hidden;color:#edf9fa;border:1px solid rgba(var(--notification-tone-rgb),.36);border-radius:12px;background:radial-gradient(circle at 10% 0%,rgba(var(--notification-tone-rgb),.14),transparent 38%),linear-gradient(135deg,#111b1ef7,#070d10fb);box-shadow:0 18px 54px #0000007a,inset 3px 0 rgba(var(--notification-tone-rgb),.72),inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(18px) saturate(1.16);backdrop-filter:blur(18px) saturate(1.16);pointer-events:auto;animation:notification-enter .19s cubic-bezier(.2,.8,.2,1) both;transition:opacity .18s ease,transform .18s ease,margin .18s ease}.notification-card:before{content:"";position:absolute;top:0;right:36px;width:54px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--notification-tone-rgb),.72),transparent)}.notification-card.tone-good{--notification-tone: #79dfab;--notification-tone-rgb: 121, 223, 171}.notification-card.tone-warn{--notification-tone: #efbd80;--notification-tone-rgb: 239, 189, 128}.notification-card.tone-danger{--notification-tone: #f09a92;--notification-tone-rgb: 240, 154, 146}.notification-card.is-closing{opacity:0;transform:translate3d(14px,-4px,0) scale(.98)}.notification-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--notification-tone);border:1px solid rgba(var(--notification-tone-rgb),.3);border-radius:50%;background:rgba(var(--notification-tone-rgb),.09);box-shadow:0 0 20px rgba(var(--notification-tone-rgb),.09)}.notification-copy{min-width:0;display:grid;gap:3px}.notification-copy strong{color:#f4fbfb;font-size:12px;font-weight:700;letter-spacing:.015em}.notification-copy>span{color:#deedeec7;font-size:12px;line-height:1.48;overflow-wrap:anywhere}.notification-card .notification-close{width:28px;height:28px;min-height:0;padding:0;display:grid;place-items:center;color:#dcebec94;border:1px solid transparent;border-radius:7px!important;clip-path:none!important;background:transparent;box-shadow:none}.notification-card .notification-close:hover,.notification-card .notification-close:focus-visible{color:#f7ffff;border-color:rgba(var(--notification-tone-rgb),.28);background:rgba(var(--notification-tone-rgb),.1);box-shadow:none}.notification-progress{position:absolute;left:3px;right:0;bottom:0;height:2px;transform-origin:left center;background:linear-gradient(90deg,rgba(var(--notification-tone-rgb),.92),rgba(var(--notification-tone-rgb),.08));animation:notification-progress var(--notification-duration) linear both}.notification-card.is-paused .notification-progress{animation-play-state:paused}@keyframes notification-enter{0%{opacity:0;transform:translate3d(14px,-7px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes notification-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:640px){.notification-viewport{top:max(62px,calc(env(safe-area-inset-top) + 54px));left:10px;right:10px;width:auto;max-height:calc(100dvh - max(78px,calc(env(safe-area-inset-top) + 70px)));gap:7px}.notification-card{min-height:62px;grid-template-columns:32px minmax(0,1fr) 28px;gap:8px;padding:9px 8px 10px 10px}.notification-icon{width:30px;height:30px}}@media(prefers-reduced-motion:reduce){.notification-card,.notification-progress{animation:none;transition:none}}