.notification-container{z-index:9999;width:min(392px, 100vw - var(--notification-offset) * 2);pointer-events:none;flex-direction:column;gap:12px;display:flex;position:fixed}.notification-container.is-bottom-flow{flex-direction:column-reverse}.notification-container.is-top-left{top:var(--notification-offset);left:var(--notification-offset);align-items:flex-start}.notification-container.is-top-center{top:var(--notification-offset);align-items:center;left:50%;transform:translate(-50%)}.notification-container.is-top-right{top:var(--notification-offset);right:var(--notification-offset);align-items:flex-end}.notification-container.is-bottom-left{bottom:var(--notification-offset);left:var(--notification-offset);align-items:flex-start}.notification-container.is-bottom-center{bottom:var(--notification-offset);align-items:center;left:50%;transform:translate(-50%)}.notification-container.is-bottom-right{right:var(--notification-offset);bottom:var(--notification-offset);align-items:flex-end}.notification-container.is-center{align-items:center;top:50%;left:50%;transform:translate(-50%,-50%)}.notification-card{--notification-accent:var(--color_accent_secondary);--notification-border:color-mix(in srgb, var(--notification-accent) 22%, transparent);border:1px solid var(--notification-border);background:radial-gradient(circle at top left, color-mix(in srgb, var(--notification-accent) 18%, transparent), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--color_dark) 92%, var(--color_white) 8%), color-mix(in srgb, var(--color_dark) 97%, var(--notification-accent) 3%));width:100%;color:var(--color_white);pointer-events:auto;border-radius:22px;flex-direction:column;gap:12px;padding:16px 16px 18px;transition:transform .25s,border-color .25s;display:flex;position:relative;overflow:hidden}.notification-card:before{content:"";pointer-events:none;height:1px;position:absolute;inset:0 0 auto}.notification-card.clickable{cursor:pointer}.notification-card.clickable:hover,.notification-card.clickable:focus-visible{border-color:color-mix(in srgb, var(--notification-accent) 32%, transparent);transform:translateY(-1px)}.notification-card.notification-success{--notification-accent:#59d69b}.notification-card.notification-info{--notification-accent:#76bbff}.notification-card.notification-warning{--notification-accent:#f0bf63}.notification-card.notification-alert{--notification-accent:#ff7d97}.notification-card .notification-head{z-index:1;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.notification-card .notification-type{align-items:center;gap:10px;min-width:0;display:flex}.notification-card .notification-orb{border-radius:var(--radius_full);background:linear-gradient(180deg, color-mix(in srgb, var(--color_white) 22%, var(--notification-accent)), var(--notification-accent));width:10px;min-width:10px;height:10px}.notification-card .notification-badge{border:1px solid color-mix(in srgb, var(--notification-accent) 24%, transparent);border-radius:var(--radius_full);background:color-mix(in srgb, var(--notification-accent) 10%, transparent);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb, var(--color_white) 88%, var(--notification-accent) 12%);justify-content:center;align-items:center;padding:7px 13px;font-size:12px;font-weight:700;display:inline-flex}.notification-card .notification-close{z-index:1;border:1px solid color-mix(in srgb, var(--notification-accent) 18%, transparent);background:color-mix(in srgb, var(--notification-accent) 8%, transparent);width:32px;height:32px;color:color-mix(in srgb, var(--color_white) 80%, var(--notification-accent) 20%);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:transform .2s,background-color .2s,border-color .2s;display:inline-flex;position:relative}.notification-card .notification-close:hover{background:color-mix(in srgb, var(--notification-accent) 14%, transparent);border-color:color-mix(in srgb, var(--notification-accent) 28%, transparent);transform:scale(.96)}.notification-card .notification-body{z-index:1;position:relative}.notification-card .notification-message{color:color-mix(in srgb, var(--color_white) 84%, var(--color_grey) 16%);margin:0;font-size:15px;line-height:1.55}.notification-card .notification-message-html{color:color-mix(in srgb, var(--color_white) 84%, var(--color_grey) 16%);font-size:15px;line-height:1.55}.notification-card .notification-message-html p{margin:0}.notification-card .notification-message-html p+p{margin-top:8px}.notification-card .notification-message-html strong{color:var(--color_white)}.notification-card .notification-message-html a{color:color-mix(in srgb, var(--notification-accent) 72%, var(--color_white) 28%)}.notification-card .notification-progress{border-radius:var(--radius_full);background:linear-gradient(90deg, color-mix(in srgb, var(--notification-accent) 86%, var(--color_white) 14%), color-mix(in srgb, var(--notification-accent) 56%, transparent));transform-origin:0;height:3px;animation:linear forwards notification-progress;animation-duration:var(--notification-duration);opacity:.92;position:absolute;bottom:10px;left:16px;right:16px}@keyframes notification-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media screen and (width<=768px){.notification-container{width:calc(100vw - 16px)}.notification-container.is-top-left,.notification-container.is-top-center,.notification-container.is-top-right,.notification-container.is-bottom-left,.notification-container.is-bottom-center,.notification-container.is-bottom-right,.notification-container.is-center{align-items:stretch;width:auto;left:8px;right:8px;transform:none}.notification-container.is-center{top:8px;bottom:auto}.notification-card{border-radius:18px;padding:15px 15px 18px}.notification-card .notification-head{align-items:flex-start}.notification-card .notification-badge{padding-inline:12px}}
