.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;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif;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:not(:disabled):not([aria-disabled=true]),.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:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;max-height:calc(100dvh - max(78px,calc(env(safe-area-inset-top) + 70px)) - max(10px,env(safe-area-inset-bottom)));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}}:root{--font-family-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;--font-size-micro: .6875rem;--font-size-caption: .75rem;--font-size-label: .8125rem;--font-size-body: .875rem;--font-size-subtitle: 1rem;--font-size-title: clamp(1.85rem, 4vw, 2.35rem);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 650;--font-weight-bold: 760;--font-weight-heavy: 800;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.7}