.notification-center{--nc-purple:#6947c7;--nc-teal:#08a6a6;--nc-coral:#ef6b63;--nc-amber:#e6a42b;max-width:1180px}.notification-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;overflow:hidden;margin-bottom:1.1rem;padding:1.5rem 1.7rem;border:1px solid color-mix(in srgb,var(--nc-purple) 18%,var(--barang-border));border-radius:24px;background:linear-gradient(115deg,color-mix(in srgb,var(--nc-purple) 10%,var(--barang-surface)),color-mix(in srgb,#06b6d4 8%,var(--barang-surface)) 64%,var(--barang-surface));isolation:isolate}.notification-hero:after{position:absolute;inset:auto -5% -60% auto;width:280px;height:180px;border:1px solid color-mix(in srgb,var(--nc-teal) 20%,transparent);border-radius:50%;box-shadow:0 0 0 14px color-mix(in srgb,var(--nc-teal) 5%,transparent),0 0 0 28px color-mix(in srgb,var(--nc-teal) 4%,transparent);content:"";transform:rotate(-15deg);z-index:-1}.notification-hero-copy{max-width:650px}.notification-hero-kicker{display:flex;align-items:center;gap:.45rem;color:var(--nc-purple);font-size:.72rem;font-weight:800;letter-spacing:.03em}.notification-ink-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--nc-coral);box-shadow:10px -3px 0 var(--nc-teal),20px 2px 0 var(--nc-amber)}.notification-hero h1{margin:.45rem 0 .25rem;font-size:clamp(1.35rem,2.5vw,2rem)}.notification-hero p{margin:0;color:var(--barang-muted);font-size:.86rem}.notification-hero-art{position:relative;width:130px;height:92px;color:var(--nc-purple);opacity:.85}.notification-shirt{position:absolute;inset:15px 35px auto;width:60px;height:55px;display:grid;place-items:center;border-radius:18px 18px 25px 25px;background:color-mix(in srgb,var(--nc-purple) 18%,var(--barang-surface));font-size:1.7rem;transform:rotate(-7deg)}.notification-shirt:before,.notification-shirt:after{position:absolute;top:3px;width:23px;height:38px;border-radius:9px;background:inherit;content:""}.notification-shirt:before{inset-inline-start:-14px;transform:rotate(32deg)}.notification-shirt:after{inset-inline-end:-14px;transform:rotate(-32deg)}.notification-hero-art i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--nc-coral)}.notification-hero-art i:nth-child(2){top:6px;right:16px}.notification-hero-art i:nth-child(3){bottom:14px;left:12px;background:var(--nc-teal)}.notification-hero-art i:nth-child(4){top:42px;right:0;background:var(--nc-amber)}.notification-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}.notification-summary-card{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.9rem 1rem;border:1px solid var(--barang-border);border-radius:16px;background:var(--barang-surface);color:var(--barang-text);font:inherit;text-align:start;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.notification-summary-card:hover{border-color:color-mix(in srgb,var(--nc-purple) 45%,var(--barang-border));transform:translateY(-1px);box-shadow:0 8px 22px #44288d12}.notification-summary-card:focus-visible{outline:3px solid color-mix(in srgb,var(--nc-purple) 38%,transparent);outline-offset:2px}.notification-summary-card.is-active{border-color:var(--nc-purple);box-shadow:inset 0 -3px 0 var(--nc-purple)}.notification-summary-card span:last-child{display:grid;gap:.15rem}.notification-summary-card small{color:var(--barang-muted);font-size:.72rem}.notification-summary-card strong{font-size:1.3rem;direction:ltr;text-align:start}.summary-icon{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:12px;color:#fff;font-weight:900}.summary-purple{background:var(--nc-purple)}.summary-coral{background:var(--nc-coral)}.summary-amber{background:var(--nc-amber)}.notification-toolbar{display:grid;grid-template-columns:minmax(15rem,2fr) repeat(4,minmax(8rem,1fr)) auto;align-items:end;gap:.7rem;margin-bottom:1.2rem;padding:1rem}.notification-toolbar label,.notification-search{display:grid;gap:.3rem;min-width:0}.notification-toolbar label span,.notification-search label{color:var(--barang-muted);font-size:.7rem;font-weight:750}.notification-toolbar input,.notification-toolbar select{width:100%;min-height:40px;border:1px solid var(--barang-border-strong);border-radius:9px;background:var(--barang-surface);color:var(--barang-text);padding:.45rem .6rem;font:inherit;font-size:.78rem}.notification-toolbar input:focus-visible,.notification-toolbar select:focus-visible{outline:3px solid color-mix(in srgb,var(--nc-teal) 30%,transparent);outline-offset:1px}.notification-search-row{display:flex;gap:.45rem}.notification-search-row input{min-width:0}.notification-clear{height:40px;white-space:nowrap}.notification-list-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .7rem}.notification-list-head h2{margin:0;font-size:1.05rem}.notification-list-head span{color:var(--barang-muted);font-size:.72rem}.notification-list-actions{display:flex;gap:.45rem}.notification-list{display:grid;gap:.7rem}.notification-card{position:relative;display:flex;gap:.85rem;padding:1rem 1.05rem;border:1px solid var(--barang-border);border-inline-start:4px solid var(--nc-teal);border-radius:16px;background:var(--barang-surface);transition:box-shadow .16s ease,transform .16s ease}.notification-card:hover{box-shadow:0 10px 28px #1b365b0d;transform:translateY(-1px)}.notification-card.is-unread{background:color-mix(in srgb,var(--nc-purple) 3%,var(--barang-surface));border-inline-start-color:var(--nc-purple)}.notification-card.priority-urgent{border-inline-start-color:var(--nc-coral)}.notification-card.priority-attention{border-inline-start-color:var(--nc-amber)}.notification-card-marker{display:grid;place-items:center;flex:0 0 2.35rem;height:2.35rem;border-radius:12px;background:color-mix(in srgb,var(--nc-teal) 12%,var(--barang-surface));color:var(--nc-teal)}.priority-urgent .notification-card-marker{background:color-mix(in srgb,var(--nc-coral) 12%,var(--barang-surface));color:var(--nc-coral)}.priority-attention .notification-card-marker{background:color-mix(in srgb,var(--nc-amber) 14%,var(--barang-surface));color:#b77900}.notification-card-body{min-width:0;flex:1}.notification-card-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--barang-muted);font-size:.7rem}.notification-category{font-weight:800;color:var(--nc-purple)}.notification-priority{padding:.14rem .4rem;border-radius:99px;background:var(--barang-surface-muted);font-size:.64rem}.priority-urgent .notification-priority{color:#b43c43;background:#fff0f0}.priority-attention .notification-priority{color:#966500;background:#fff7dc}.notification-card-top time{margin-inline-start:auto;direction:ltr}.notification-card h3{margin:.35rem 0 .25rem;font-size:.95rem}.notification-description{margin:0;color:var(--barang-muted);font-size:.79rem;line-height:1.7;overflow-wrap:anywhere}.notification-card-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.55rem;color:var(--barang-muted);font-size:.68rem}.notification-card-meta span{display:inline-flex;align-items:center;gap:.25rem}.notification-state-label{font-weight:700}.notification-action-state{font-weight:750;color:var(--nc-coral)}.notification-card-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}.notification-card-actions .btn-link{color:var(--nc-purple);text-decoration:none}.notification-card-actions .btn-link:hover{text-decoration:underline}.notification-state{display:grid;place-items:center;align-content:center;gap:.55rem;min-height:270px;padding:2rem;text-align:center}.notification-state h2,.notification-state p{margin:0}.notification-state h2{font-size:1rem}.notification-state p{max-width:33rem;color:var(--barang-muted);font-size:.8rem}.notification-error{border:1px solid #f1b8bb;background:#fffafa}.notification-error .state-symbol{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:#fde4e5;color:#b43c43;font-weight:900;font-size:1.2rem}.notification-empty{overflow:hidden;position:relative}.empty-motif{position:relative;width:5rem;height:3.8rem;color:var(--nc-purple);font-size:2rem}.empty-motif span{position:absolute;inset:0;z-index:1;display:grid;place-items:center}.empty-motif i{position:absolute;width:1rem;height:1rem;border-radius:50%;background:color-mix(in srgb,var(--nc-teal) 25%,transparent)}.empty-motif i:first-of-type{inset:0 auto auto 0}.empty-motif i:last-of-type{inset:auto 0 0 auto;background:color-mix(in srgb,var(--nc-coral) 25%,transparent)}.notification-spinner{width:1.7rem;height:1.7rem;border:3px solid var(--barang-border);border-top-color:var(--nc-purple);border-radius:50%;animation:notification-spin .8s linear infinite}@keyframes notification-spin{to{transform:rotate(360deg)}}.notification-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem}.notification-pagination span{color:var(--barang-muted);font-size:.75rem}.btn-small{min-height:34px;padding:.35rem .65rem;font-size:.74rem}@media(max-width:1000px){.notification-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.notification-search{grid-column:1/-1}.notification-clear{justify-self:start}}@media(max-width:620px){.notification-hero{padding:1.15rem;border-radius:18px}.notification-hero-art{display:none}.notification-summary{gap:.45rem}.notification-summary-card{padding:.7rem .55rem;gap:.4rem}.summary-icon{width:1.7rem;height:1.7rem;font-size:.75rem}.notification-summary-card small{font-size:.64rem}.notification-summary-card strong{font-size:1rem}.notification-toolbar{grid-template-columns:1fr 1fr;padding:.75rem}.notification-search{grid-column:1/-1}.notification-clear{grid-column:1/-1;width:100%}.notification-list-head{align-items:flex-start;flex-direction:column}.notification-list-actions{width:100%}.notification-list-actions .btn{width:100%}.notification-card{padding:.85rem}.notification-card-top time{width:100%;margin-inline-start:0}.notification-card-actions .btn{flex:1}.notification-card-marker{flex-basis:2rem;height:2rem}.notification-hero h1{font-size:1.35rem}}@media(prefers-reduced-motion:reduce){.notification-summary-card,.notification-card{transition:none;transform:none}.notification-spinner{animation:none}}