.notification-demo-page{width:min(1080px,100% - 32px);margin:0 auto;padding:24px 0 72px}.notification-demo-breadcrumb{color:var(--muted-foreground);letter-spacing:.1em;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;font-size:12px;font-weight:700;display:flex}.notification-demo-breadcrumb a{color:var(--foreground);letter-spacing:normal;align-items:center;gap:7px;text-decoration:none;display:inline-flex}.notification-demo-intro{justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:26px;display:flex}.notification-demo-eyebrow{color:var(--primary);letter-spacing:.09em;align-items:center;gap:7px;font-size:12px;font-weight:800;display:inline-flex}.notification-demo-intro h1{letter-spacing:-.04em;margin:8px 0;font-size:clamp(29px,4vw,44px)}.notification-demo-intro p{max-width:620px;color:var(--muted-foreground);margin:0;font-size:14px;line-height:1.65}.notification-demo-permission{border:1px solid color-mix(in srgb, var(--primary) 38%, var(--border));background:color-mix(in srgb, var(--primary) 9%, var(--card));color:var(--primary);border-radius:12px;flex:none;align-items:center;gap:11px;padding:13px 15px;display:flex}.notification-demo-permission span,.notification-demo-permission b,.notification-demo-permission small{display:block}.notification-demo-permission b{color:var(--foreground);font-size:13px}.notification-demo-permission small{color:var(--muted-foreground);margin-top:2px;font-size:11px}.notification-demo-layout{grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px;display:grid}.notification-demo-preview,.notification-demo-events{border:1px solid var(--border);background:var(--card);border-radius:16px;min-width:0;overflow:hidden}.notification-demo-preview{padding:20px}.notification-demo-match-head{color:var(--muted-foreground);justify-content:space-between;align-items:center;font-size:12px;display:flex}.notification-demo-match-head span{color:var(--primary);letter-spacing:.09em;font-weight:800}.notification-demo-match-head b{background:color-mix(in srgb, var(--primary) 13%, transparent);color:var(--primary);border-radius:6px;padding:4px 8px}.notification-demo-score{grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:34px 14px;display:grid}.notification-demo-score>div{align-items:center;gap:12px;min-width:0;display:flex}.notification-demo-score>div:last-child{text-align:right;flex-direction:row-reverse}.notification-demo-score>div>b{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.notification-demo-score>strong{letter-spacing:-.05em;font-size:clamp(26px,5vw,42px)}.notification-demo-crest{color:#fff;border-radius:15px;flex:0 0 52px;place-items:center;width:52px;height:52px;font-size:13px;font-weight:850;display:grid;box-shadow:inset 0 0 0 1px #fff2}.notification-demo-crest.home{background:linear-gradient(145deg, var(--primary), #065f4c)}.notification-demo-crest.away{background:linear-gradient(145deg,#273f51,#152935)}.notification-demo-bell-card{background:color-mix(in srgb, var(--primary) 8%, var(--background));min-height:112px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, var(--border));border-radius:13px;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:14px;padding:18px;display:grid}.notification-demo-bell{background:var(--primary);color:#fff;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.notification-demo-bell-card[data-kind=yellow] .notification-demo-bell{color:#201902;background:#e7b52a}.notification-demo-bell-card[data-kind=red] .notification-demo-bell{background:#e24e5c}.notification-demo-bell-card[data-kind=penalty] .notification-demo-bell{background:#2d9fce}.notification-demo-bell-card[data-kind=var] .notification-demo-bell{background:#8268df}.notification-demo-bell-card[data-kind=fulltime] .notification-demo-bell{background:#405667}.notification-demo-bell-card small,.notification-demo-bell-card b{display:block}.notification-demo-bell-card small{color:var(--muted-foreground);margin-bottom:3px;font-size:11px}.notification-demo-bell-card b{font-size:18px}.notification-demo-bell-card p{color:var(--muted-foreground);margin:5px 0 0;font-size:12px;line-height:1.45}.notification-demo-controls{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.notification-demo-error{color:#ff8994;margin-top:12px;font-size:12px;display:block}.notification-demo-events>div{padding:18px 18px 14px}.notification-demo-events>div span,.notification-demo-events>div b{display:block}.notification-demo-events>div span{color:var(--primary);letter-spacing:.12em;font-size:10px;font-weight:800}.notification-demo-events>div b{margin-top:3px;font-size:15px}.notification-demo-events ol{margin:0;padding:0;list-style:none}.notification-demo-events li{border-top:1px solid var(--border)}.notification-demo-events button{width:100%;color:var(--foreground);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 16px;display:grid}.notification-demo-events button:hover,.notification-demo-events button.active{background:color-mix(in srgb, var(--primary) 10%, transparent)}.notification-demo-event-icon{background:color-mix(in srgb, var(--primary) 14%, transparent);width:32px;height:32px;color:var(--primary);border-radius:9px;place-items:center;display:grid}.notification-demo-events button[data-kind=yellow] .notification-demo-event-icon{color:#e7b52a}.notification-demo-events button[data-kind=var] .notification-demo-event-icon{color:#9b87e7}.notification-demo-events button[data-kind=fulltime] .notification-demo-event-icon{color:#8ca0af}.notification-demo-events button[data-kind=red] .notification-demo-event-icon{color:#e24e5c}.notification-demo-events button>span:nth-child(2),.notification-demo-events button b,.notification-demo-events button small{min-width:0;display:block}.notification-demo-events button b{font-size:13px}.notification-demo-events button small{color:var(--muted-foreground);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:11px;overflow:hidden}.notification-demo-events time{color:var(--muted-foreground);font-size:11px;font-weight:750}.notification-demo-note{background:color-mix(in srgb, var(--primary) 7%, var(--card));color:var(--muted-foreground);border-radius:12px;align-items:flex-start;gap:11px;margin-top:18px;padding:16px 18px;display:flex}.notification-demo-note svg{color:var(--primary);flex:none;margin-top:2px}.notification-demo-note p{margin:0;font-size:12px;line-height:1.6}.notification-demo-note b{color:var(--foreground)}.notification-demo-toast{animation:.22s ease-out notification-demo-toast-in}.notification-demo-toast[data-kind=yellow]{background:#b8860b}.notification-demo-toast[data-kind=red]{background:#c93443}.notification-demo-toast[data-kind=penalty]{background:#217da5}@keyframes notification-demo-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:760px){.notification-demo-page{width:min(100% - 20px,620px);padding-top:18px}.notification-demo-intro{display:block}.notification-demo-permission{margin-top:16px}.notification-demo-layout{grid-template-columns:1fr}.notification-demo-score{gap:10px;padding:28px 0}.notification-demo-score>div,.notification-demo-score>div:last-child{text-align:center;display:block}.notification-demo-score>div>b{margin-top:8px;font-size:12px;display:block}.notification-demo-crest{margin:0 auto}.notification-demo-controls>button{flex:auto}.notification-demo-toast{max-width:none;top:74px;left:10px;right:10px}}