.notifications-page{position:relative;display:flex;min-height:calc(100dvh - 84px);flex-direction:column;overflow:hidden;background:var(--paper,#fffdf9)}
.notifications-page[hidden]{display:none}
.notifications-header{min-height:150px;align-items:center;justify-content:space-between;padding:28px clamp(28px,5vw,48px) 12px}
.notifications-header>img{width:min(300px,48%)}
.notifications-header .notification-close{flex:0 0 auto}
.notifications-page>.detail-content{position:relative;z-index:1;flex:1;padding:14px clamp(28px,5vw,48px) 28px}
.notifications-page h1{margin:0 0 28px;font-size:clamp(2.4rem,6vw,3.5rem);line-height:1;letter-spacing:-.05em}
.notification-tabs{margin-bottom:32px;border-radius:30px;background:#f2f1ee}
.notification-tabs button{min-height:78px;font-size:clamp(1.12rem,2.5vw,1.45rem);font-weight:500}
.notification-tabs button[aria-pressed=true]{border-radius:30px;background:linear-gradient(115deg,#0b3159,#002d59);font-weight:800}
.notification-tabs span{min-width:38px;height:38px;margin-left:10px;padding:0 9px;font-size:1rem}
.notification-tabs span[hidden]{display:none}
.notifications-page:is([data-notification-state="protected"],[data-notification-state="error"]) .notification-tabs{display:none}
.notifications-page[data-notification-state="protected"] h1{display:none}
#notifications-status{margin:0;padding:0 0 16px}
#notifications-status.is-quiet{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.notification-list{gap:20px}
.notification-card{position:relative;grid-template-columns:108px minmax(0,1fr) 42px;gap:22px;padding:28px 22px 24px 28px;border-radius:24px;box-shadow:0 8px 26px #0928450a}
.notification-card.is-read{opacity:.72}
.notification-unread-dot{position:absolute;right:24px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--orange)}
.notification-symbol{width:94px;height:94px;background:#fff0e8;color:var(--orange)}
.notification-symbol svg{width:54px;height:54px;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.notification-kind-event .notification-symbol{background:#eef7e9;color:#196c35}
.notification-kind-commerce .notification-symbol{background:#e8f5ff;color:var(--navy)}
.notification-kind-request .notification-symbol{background:#f0edff;color:#253b82}
.notification-copy{min-width:0;padding-right:8px}
.notification-card h3{margin:0 28px 6px 0;font-size:clamp(1.2rem,2.7vw,1.55rem);line-height:1.16;letter-spacing:-.025em}
.notification-card p{margin:0;color:var(--navy-soft);font-size:clamp(1rem,2.2vw,1.28rem);line-height:1.34}
.notification-card time{display:flex;align-items:center;gap:9px;margin-top:16px;color:#697b90;font-size:clamp(.9rem,2vw,1.08rem)}
.notification-card time svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.notification-card>button{align-self:center;width:38px;height:52px;padding:0;font-size:2.5rem}
.notification-cta{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:8px 18px;border-radius:999px;background:var(--orange);color:#fff;font-weight:800}
.notification-empty{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px 80px;text-align:center}
.notification-empty-symbol{width:170px;height:170px;display:grid;place-items:center;color:var(--navy)}
.notification-empty-symbol svg{width:142px;height:142px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.notification-empty-symbol .notification-sparkle{stroke:var(--orange);stroke-width:3.4}
.notification-empty h2{margin:12px 0 14px;font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.04em}
.notification-empty p{max-width:560px;margin:0;color:var(--navy-soft);font-size:clamp(1.1rem,2.7vw,1.5rem);line-height:1.45}
.notification-empty .button{margin-top:24px}
.notification-protected{min-height:390px}
.notification-protected .notification-empty-symbol{width:130px;height:130px}
.notification-protected .notification-empty-symbol svg{width:110px;height:110px}
.notification-landscape{position:relative;z-index:0;flex:0 0 clamp(130px,20vw,190px);margin-top:-38px;background:url('/assets/v2/notifications-landscape.svg') center bottom/100% 100% no-repeat;pointer-events:none}

@media(max-width:640px){
  .notifications-header{min-height:126px;padding:22px 18px 8px}
  .notifications-header>img{width:184px;max-width:58%}
  .notifications-header .notification-close{width:46px;height:46px;font-size:1.7rem}
  .notifications-page>.detail-content{padding:14px 16px 18px}
  .notifications-page h1{margin-bottom:26px;font-size:2.2rem}
  .notification-tabs{margin-bottom:26px;border-radius:22px}
  .notification-tabs button{min-height:66px;font-size:1.05rem}
  .notification-tabs button[aria-pressed=true]{border-radius:22px}
  .notification-tabs span{min-width:30px;height:30px;margin-left:7px;font-size:.86rem}
  .notification-list{gap:14px}
  .notification-card{grid-template-columns:70px minmax(0,1fr) 26px;gap:12px;padding:18px 12px 18px 14px;border-radius:18px}
  .notification-symbol{width:64px;height:64px}
  .notification-symbol svg{width:40px;height:40px}
  .notification-card h3{margin-right:16px;font-size:1.12rem}
  .notification-card p{font-size:.94rem}
  .notification-card time{gap:6px;margin-top:10px;font-size:.82rem}
  .notification-card time svg{width:19px;height:19px}
  .notification-card>button{width:26px;height:44px;font-size:2rem}
  .notification-unread-dot{right:14px;top:13px;width:10px;height:10px}
  .notification-cta{padding:7px 13px;font-size:.84rem}
  .notification-empty{min-height:360px;padding:30px 16px 66px}
  .notification-empty-symbol{width:132px;height:132px}
  .notification-empty-symbol svg{width:112px;height:112px}
  .notification-empty h2{margin-top:8px;font-size:2rem}
  .notification-empty p{max-width:330px;font-size:1.08rem}
  .notification-protected{min-height:340px}
  .notifications-page:is([data-notification-state="protected"],[data-notification-state="empty"]) .notification-empty{min-height:410px;padding-top:12px}
  .notification-landscape{flex-basis:124px;margin-top:-28px;background-size:auto 100%;min-width:100%}
}

@media(max-width:390px){
  .notifications-header>img{width:170px}
  .notifications-header .notification-close{width:42px;height:42px}
  .notification-card{grid-template-columns:62px minmax(0,1fr) 24px;gap:10px;padding-left:12px}
  .notification-symbol{width:58px;height:58px}
  .notification-symbol svg{width:35px;height:35px}
}