.notif-page{padding-block:0 var(--spacing-16)}.notif-hero{background:linear-gradient(135deg, var(--color-primary) 0%, #0d4a7a 100%);color:#fff;padding:var(--spacing-10) 0 var(--spacing-8);margin-bottom:var(--spacing-8);position:relative;overflow:hidden}.notif-hero:before{content:"";background:radial-gradient(circle,#e8a8381f 0%,#0000 70%);border-radius:50%;width:300px;height:300px;position:absolute;top:-30%;right:-5%}.notif-hero-content{z-index:1;position:relative}.notif-hero-top{justify-content:space-between;align-items:center;gap:var(--spacing-4);flex-wrap:wrap;display:flex}.notif-hero-left{align-items:center;gap:var(--spacing-4);display:flex}.notif-hero-icon{border-radius:var(--radius-full);color:#fff;background:#ffffff26;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex}.notif-hero-text h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:#fff;margin:0}.notif-hero-text p{font-size:var(--font-size-sm);opacity:.85;color:#fff;margin:var(--spacing-1) 0 0}.hero-link{align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-full);color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--transition-base);background:#ffffff26;border:1px solid #ffffff40;text-decoration:none;display:inline-flex}.hero-link:hover{background:#ffffff40}.notif-auth-gate{align-items:center;gap:var(--spacing-3);padding:var(--spacing-16) var(--spacing-8);text-align:center;background:var(--color-background-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);flex-direction:column;max-width:720px;margin:0 auto;display:flex}.notif-auth-icon{border-radius:var(--radius-full);background:var(--color-primary-light);width:80px;height:80px;color:var(--color-primary);justify-content:center;align-items:center;display:flex}.notif-auth-gate h2{font-size:var(--font-size-xl);margin:var(--spacing-2) 0 0}.notif-auth-gate p{color:var(--color-text-secondary);margin:0}.notif-toolbar{margin-bottom:var(--spacing-5);justify-content:space-between;align-items:center;display:flex}.notif-count{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.notif-card{background:var(--color-background-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);margin-bottom:var(--spacing-3);transition:all var(--transition-base);cursor:pointer;position:relative;overflow:hidden}.notif-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}.notif-card.unread{border-left:4px solid var(--color-primary);background:#f8fafc}.notif-card.unread:before{content:"";background:var(--color-primary);border-radius:50%;width:8px;height:8px;position:absolute;top:18px;left:12px}.notif-card-inner{gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);display:flex}.notif-card.unread .notif-card-inner{padding-left:var(--spacing-7)}.notif-card-icon{border-radius:var(--radius-lg);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.125rem;display:flex}.notif-icon--booking{color:#1e40af;background:#dbeafe}.notif-icon--payment{color:#065f46;background:#d1fae5}.notif-icon--partner{color:#5b21b6;background:#ede9fe}.notif-icon--promo{color:#92400e;background:#fef3c7}.notif-icon--system{color:#6b7280;background:#f3f4f6}.notif-card-body{flex:1;min-width:0}.notif-card-top{justify-content:space-between;align-items:flex-start;gap:var(--spacing-3);margin-bottom:var(--spacing-1);display:flex}.notif-card-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-snug)}.notif-card-time{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap;flex-shrink:0}.notif-card-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-normal);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notif-card-type{margin-top:var(--spacing-2);border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.3px;background:var(--color-primary-light);color:var(--color-primary);align-items:center;gap:4px;padding:2px 8px;display:inline-flex}.notif-card-arrow{color:var(--color-text-muted);flex-shrink:0;align-self:center;align-items:center;display:flex}.notif-empty{text-align:center;padding:var(--spacing-16) var(--spacing-8);background:var(--color-background-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl)}.notif-empty-icon{border-radius:var(--radius-full);background:var(--color-neutral-100);width:80px;height:80px;color:var(--color-text-muted);margin:0 auto var(--spacing-4);justify-content:center;align-items:center;display:flex}.notif-empty h3{font-size:var(--font-size-lg);margin:0 0 var(--spacing-2)}.notif-empty p{color:var(--color-text-secondary);margin:0}.notif-pagination{justify-content:center;align-items:center;gap:var(--spacing-4);margin-top:var(--spacing-8);display:flex}#page-info{font-size:var(--font-size-sm);color:var(--color-text-secondary)}@media (width<=640px){.notif-hero-top{flex-direction:column;align-items:flex-start}.notif-card-top{flex-direction:column;gap:2px}.notif-card-arrow{display:none}}