.notifications-page{padding:var(--spacing-lg);max-width:100%;background:var(--background);width:100%;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;min-height:0}.notifications-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.notifications-header-left{display:flex;align-items:center;gap:var(--spacing-md)}.notifications-header-icon{width:2.5rem;height:2.5rem;color:var(--primary)}.notifications-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--text);margin:0}.notifications-subtitle{font-size:var(--font-size-sm);color:var(--textSecondary);margin:var(--spacing-xs) 0 0 0}.notifications-header-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.notifications-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none}.notifications-btn:disabled{opacity:.5;cursor:not-allowed}.notifications-btn-icon{width:1rem;height:1rem}.notifications-btn-primary{background-color:var(--primary);color:white}.notifications-btn-primary:hover:not(:disabled){background-color:var(--primary-dark)}.notifications-btn-secondary{background-color:var(--surface);color:var(--text);border:1px solid var(--border)}.notifications-btn-secondary:hover:not(:disabled){background-color:var(--background)}.notifications-btn-danger{background-color:var(--error-transparent);color:var(--error);border:1px solid var(--error)}.notifications-btn-danger:hover:not(:disabled){background-color:var(--error);color:white}.notifications-filters{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md);flex-wrap:wrap;align-items:center;padding:var(--spacing-md);background-color:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border)}.notifications-search{position:relative;flex:1 1;min-width:200px}.notifications-search-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--textSecondary)}.notifications-search-input{width:100%;padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) calc(var(--spacing-sm) + 1.5rem);font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-md);background-color:var(--background);color:var(--text);transition:border-color var(--transition-fast)}.notifications-search-input::placeholder{color:var(--textSecondary)}.notifications-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-transparent)}.notifications-filter-group{display:flex;align-items:center;gap:var(--spacing-xs)}.notifications-filter-label{font-size:var(--font-size-xs);font-weight:500;color:var(--textSecondary);white-space:nowrap}.notifications-filter-select{padding:var(--spacing-sm) calc(var(--spacing-lg) + var(--spacing-sm)) var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-sm);border:1px solid var(--border);border-radius:var(--radius-md);background-color:var(--background);color:var(--text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--spacing-xs) center;background-repeat:no-repeat;background-size:1.25rem}.notifications-filter-select:focus{outline:none;border-color:var(--primary)}.notifications-clear-filters{padding:var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:500;color:var(--primary);background:none;border:none;cursor:pointer;text-decoration:underline}.notifications-clear-filters:hover{color:var(--primary-dark)}.notifications-batch-actions{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);background-color:var(--primary-transparent);border:1px solid var(--primary);border-radius:var(--radius-md)}.notifications-batch-count{font-size:var(--font-size-sm);font-weight:500;color:var(--primary)}.notifications-batch-buttons{display:flex;gap:var(--spacing-xs)}.notifications-list-container{background-color:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm)}.notifications-list-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--background);border-bottom:1px solid var(--border)}.notifications-checkbox-container{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer}.notifications-checkbox{width:1rem;height:1rem;cursor:pointer;accent-color:var(--primary)}.notifications-checkbox-label{font-size:var(--font-size-sm);color:var(--textSecondary)}.notifications-list-count{font-size:var(--font-size-xs);color:var(--textSecondary)}.notifications-list{min-height:200px}.notifications-item-wrapper{display:flex;align-items:flex-start;border-bottom:1px solid var(--border)}.notifications-item-wrapper:last-child{border-bottom:none}.notifications-item-checkbox{padding:var(--spacing-md) var(--spacing-sm) var(--spacing-md) var(--spacing-md);display:flex;align-items:flex-start;padding-top:calc(var(--spacing-md) + .25rem)}.notifications-item-content{flex:1 1}.notifications-item-content .topbar-notification-item{border-bottom:none}.notifications-empty,.notifications-error,.notifications-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-md);text-align:center;color:var(--textSecondary)}.notifications-empty-icon,.notifications-error-icon,.notifications-loading-icon{width:3rem;height:3rem;margin-bottom:var(--spacing-md);opacity:.5}.notifications-error,.notifications-error-icon{color:var(--error)}.notifications-retry-btn{margin-top:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:500;color:var(--primary);background:none;border:1px solid var(--primary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.notifications-retry-btn:hover{background-color:var(--primary);color:white}.notifications-empty-title{font-size:var(--font-size-md);font-weight:500;color:var(--text);margin-bottom:var(--spacing-xs)}.notifications-empty-subtitle{font-size:var(--font-size-sm);color:var(--textSecondary);margin-bottom:var(--spacing-md)}.notifications-pagination{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--border)}.notifications-pagination-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-sm);font-weight:500;color:var(--textSecondary);background:none;border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.notifications-pagination-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.notifications-pagination-btn:disabled{opacity:.5;cursor:not-allowed}.notifications-pagination-icon{width:1rem;height:1rem}.notifications-pagination-info{font-size:var(--font-size-sm);color:var(--textSecondary)}@media (max-width:768px){.notifications-page{padding:var(--spacing-sm)}.notifications-header{flex-direction:column;align-items:flex-start}.notifications-header-actions{width:100%}.notifications-btn{flex:1 1;justify-content:center}.notifications-filters{flex-direction:column;align-items:stretch}.notifications-filter-group{width:100%}.notifications-filter-select{flex:1 1}.notifications-batch-actions{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}.notifications-batch-buttons{width:100%}.notifications-batch-buttons .notifications-btn{flex:1 1;justify-content:center}.notifications-list-header{flex-direction:column;gap:var(--spacing-xs);align-items:flex-start}.notifications-pagination{flex-direction:column;gap:var(--spacing-sm)}.notifications-pagination-btn{width:100%;justify-content:center}}@media (max-width:480px){.notifications-page{padding:var(--spacing-xs)}.notifications-title{font-size:var(--font-size-2xl)}.notifications-header-icon{width:2rem;height:2rem}}