*{ box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body{ background: #f6f7fb; color: #1a1a1a; }
.container{ max-width: 1100px; margin: auto; padding: 30px; }
button{ cursor: pointer; }

.pageHeader{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.pageHeader p{ color: #666; margin-top: 4px; }
.toolbar{ display: flex; gap: 14px; margin-bottom: 24px; }
.toolbar input, .toolbar select{ padding: 12px 14px; border-radius: 10px; border: 1px solid #ddd;
background: white; }

.toolbar input{ flex: 1; }
.topBar{ display:flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 20px; }
.notificationBell{ position: relative; font-size: 24px; cursor: pointer; user-select: none; }
.notificationBell span{ position: absolute; top: -8px; right: -10px; background: #dc2626; color: white;
font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: flex; justify-content: center;
align-items: center; padding: 0 5px; font-weight: 700; }

.unreadOrder{ background: rgba(255, 221, 87, 0.25); }
.unreadOrder:hover{ background: rgba(255, 221, 87, 0.4); }
.tableWrapper{ background: white; border-radius: 14px; overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; }
.clickableRow{ cursor: pointer; transition: background 0.2s ease; }
.clickableRow:hover{ background: #f9fafb; }
.badge{ padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.badge.pending{ background: rgba(245, 158, 11, 0.15); color: #b45309; }
.badge.awaiting_manual_confirmation{ background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.badge.paid{ background: rgba(22, 163, 74, 0.15); color: #166534; }
.badge.failed{ background: rgba(220, 38, 38, 0.15); color: #991b1b; }
.badge.refunded{ background: rgba(107, 114, 128, 0.15); color: #374151; }
.backBtn{ text-decoration: none; background: #111; color: white; padding: 10px 14px; border-radius: 10px; }