.admin-coins { padding-bottom: 10em; }

.admin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.admin-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	text-decoration: none;
	color: var(--textColor);
	transition: all 0.3s ease;
	cursor: pointer;
}

.admin-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(68, 138, 255, 0.2);
}

.admin-card-icon {
	margin-bottom: 16px;
	color: var(--geniBlue);
}

.admin-card-icon .icon {
	width: 48px;
	height: 48px;
}

.admin-card-content {
	text-align: center;
}

.admin-card-content h3 {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--textColor);
}

.admin-card-content p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.admin-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.admin-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.filters-container {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	flex-wrap: wrap;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 12px;

	& label {
		color: var(--textColor);
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
	}
}

.filter-select {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #FFFFFF !important;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 140px;
	max-width: 200px;

	&:hover:not(:disabled) {
		border-color: rgba(68, 138, 255, 0.4);
		background: rgba(68, 138, 255, 0.1);
	}

	&:focus {
		outline: none;
		border-color: var(--geniBlue);
		background: rgba(68, 138, 255, 0.15);
		box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
	}

	&:disabled {
		opacity: 0.4;
		cursor: not-allowed;
		background: rgba(255, 255, 255, 0.03);
	}

	& option {
		background: #0D1B2A;
		color: #FFFFFF;
		padding: 8px;
	}
}

.btn-filter-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
	width: auto;
	min-width: fit-content;

	&:hover:not(:disabled) {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.25);
		transform: translateY(-1px);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&[data-action="resetFilters"] {
		background: rgba(239, 68, 68, 0.15);
		border-color: rgba(239, 68, 68, 0.3);
		color: #EF4444;

		&:hover:not(:disabled) {
			background: rgba(239, 68, 68, 0.25);
			border-color: rgba(239, 68, 68, 0.5);
		}
	}

	&[data-action="recalculateFilters"] {
		background: rgba(68, 138, 255, 0.15);
		border-color: rgba(68, 138, 255, 0.3);
		color: var(--geniBlue);

		&:hover:not(:disabled) {
			background: rgba(68, 138, 255, 0.25);
			border-color: rgba(68, 138, 255, 0.5);
		}
	}
}

.spinner-small {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(68, 138, 255, 0.2);
	border-top-color: var(--geniBlue);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

.filter-results {
	margin-left: auto;
}

.results-count {
	color: var(--textColor);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	background: rgba(68, 138, 255, 0.1);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	white-space: nowrap;
}

.search-container {
	position: relative;
	width: 100%;
	max-width: 500px;
}

.search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	z-index: 1;
}

.search-input {
	width: 100%;
	padding: 12px 16px 12px 48px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--textColor);
	font-size: 14px;
	transition: all 0.2s ease;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.search-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
}

.search-input:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

.btn-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: var(--textColor);
	text-decoration: none;
	transition: all 0.2s ease;
	width: fit-content;
	font-size: 14px;
}

.btn-back:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--geniBlue);
	color: var(--geniBlue);
}

.btn-back .icon {
	width: 20px;
	height: 20px;
}

.table-container {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 0;
	overflow: auto;
	max-height: calc(100vh - 280px);
}

.admin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 800px;
}

.admin-table thead {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.admin-table thead tr th {
	padding: 12px 16px;
	text-align: left;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 3px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	color: #FFFFFF;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	user-select: none;
}

.admin-table thead tr th:last-child {
	border-right: none;
}

.admin-table thead tr th:first-child {
	padding-left: 40px;
}

.admin-table thead tr th:last-child {
	padding-right: 40px;
}

.admin-table thead tr th[data-sortable] {
	cursor: pointer;
}

.admin-table thead tr th[data-sortable]:hover {
	background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
}

.admin-table thead tr th[data-sortable]::after {
	content: '';
	display: inline-block;
	margin-left: 8px;
	opacity: 0.3;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid currentColor;
}

.admin-table thead tr th[data-sortable][data-order="asc"]::after {
	opacity: 1;
	border-bottom: 6px solid currentColor;
	border-top: none;
}

.admin-table thead tr th[data-sortable][data-order="desc"]::after {
	opacity: 1;
	border-bottom: none;
	border-top: 6px solid currentColor;
}

.admin-table tbody tr {
	transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.05);
}

.admin-table tbody tr td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--textColor);
	font-size: 14px;
	vertical-align: middle;
}

.admin-table tbody tr td:first-child {
	padding-left: 40px;
	font-weight: 700;
	color: #3B82F6;
}

.admin-table tbody tr td:last-child {
	padding-right: 40px;
}

.admin-table tbody tr td label {
	cursor: pointer;
	display: block;
	padding: 4px;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.admin-table tbody tr td label:hover {
	background: rgba(68, 138, 255, 0.1);
}

.admin-table input[type="checkbox"],
.order-checkbox {
	width: auto;
}

.coins-dialog {
	width: 95vw;
	max-width: 1800px;
	height: 90vh;
	max-height: 900px;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 20px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.coins-dialog:not([open]) {
	display: none !important;
}

.coins-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.dialog-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	background: rgba(255, 59, 48, 0.1);
	border: 2px solid rgba(255, 59, 48, 0.3);
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	color: #ff6b6b;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 59, 48, 0.15);
	flex-shrink: 0;
}

.dialog-close:hover {
	background: rgba(255, 59, 48, 0.25);
	border-color: rgba(255, 59, 48, 0.6);
	color: #ff3b30;
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(255, 59, 48, 0.3);
}

.dialog-close .icon {
	width: 24px;
	height: 24px;
}

.dialog-header {
	padding: 32px 40px 24px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: rgba(13, 27, 42, 0.8);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;

	& h2 {
		margin: 0;
		color: #FFFFFF;
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -0.5px;
	}

	& .search-container {
		margin: 0;
	}
}

.dialog-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.dialog-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.dialog-controls label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.dialog-controls input[type="number"] {
	width: 90px;
	padding: 10px 14px;
	background: rgba(68, 138, 255, 0.1);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	color: var(--textColor);
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.dialog-controls input[type="number"]:focus {
	outline: none;
	border-color: var(--geniBlue);
	background: rgba(68, 138, 255, 0.15);
	box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
}

.dialog-controls input[type="number"]:hover {
	border-color: rgba(68, 138, 255, 0.5);
}

.dialog-content {
	flex: 1;
	overflow: auto;
	padding: 0;
	position: relative;
}

.dialog-content::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.dialog-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
}

.dialog-content::-webkit-scrollbar-thumb {
	background: rgba(68, 138, 255, 0.3);
	border-radius: 5px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
	background: rgba(68, 138, 255, 0.5);
}

.dialog-footer {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	padding: 16px 24px;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
	border: 2px solid rgba(68, 138, 255, 0.8);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(68, 138, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	z-index: 1000;
	display: none;
	justify-content: center;
	gap: 12px;
	max-width: 500px;
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-footer.show {
	display: flex;
}

.coins-table {
	margin: 0;
}

.coins-table thead {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.coins-table thead tr th {
	padding: 12px 16px;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 3px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	text-align: left;
	color: #FFFFFF;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.coins-table thead tr th:last-child {
	border-right: none;
}

.coins-table thead tr th:first-child {
	padding-left: 40px;
}

.coins-table thead tr th:last-child {
	padding-right: 40px;
}

.coins-table thead tr th[data-sortable]::after {
	content: '';
	display: inline-block;
	margin-left: 8px;
	opacity: 0.3;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid currentColor;
}

.coins-table thead tr th[data-sortable][data-order="asc"]::after {
	opacity: 1;
	border-bottom: 6px solid currentColor;
	border-top: none;
}

.coins-table thead tr th[data-sortable][data-order="desc"]::after {
	opacity: 1;
	border-bottom: none;
	border-top: 6px solid currentColor;
}

.coins-table tbody tr {
	transition: all 0.15s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.coins-table tbody tr:hover {
	background: rgba(68, 138, 255, 0.08);
	transform: scale(1.002);
}

.coins-table tbody tr td {
	padding: 14px 16px;
	font-size: 14px;
	vertical-align: middle;
}

.coins-table tbody tr td:first-child {
	padding-left: 40px;
	font-weight: 700;
	color: #3B82F6;
}

.coins-table tbody tr td:last-child {
	padding-right: 40px;
}

.coins-table tbody tr td label {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.coins-table tbody tr td label:hover {
	background: rgba(68, 138, 255, 0.12);
	color: var(--geniBlue);
}

.coins-table tbody tr td input[type="checkbox"] {
	width: auto;
	height: 18px;
	cursor: pointer;
	accent-color: var(--geniBlue);
}

.btn-primary {
	background: var(--geniBlue);
	color: white;
	border: 1px solid var(--geniBlue);
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
}

.btn-primary:hover {
	background: #5a9fff;
	border-color: #5a9fff;
	box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
}

.btn-view-coins {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.15) 0%, rgba(68, 138, 255, 0.25) 100%);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-view-coins:hover {
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.25) 0%, rgba(68, 138, 255, 0.35) 100%);
	border-color: var(--geniBlue);
	box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
	transform: translateY(-2px);
}

.btn-view-coins .emoji {
	font-size: 16px;
	line-height: 1;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.btn-pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	padding: 12px 20px;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.15) 0%, rgba(68, 138, 255, 0.25) 100%);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;

	&:hover:not(:disabled) {
		background: linear-gradient(135deg, rgba(68, 138, 255, 0.25) 0%, rgba(68, 138, 255, 0.35) 100%);
		border-color: var(--geniBlue);
		box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
		transform: translateY(-1px);
	}

	&:active:not(:disabled) {
		transform: translateY(0);
	}

	&:disabled {
		opacity: 0.25;
		cursor: not-allowed;
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.3);
	}
}

.pagination-info {
	color: var(--textColor);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 20px;
	background: rgba(68, 138, 255, 0.1);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	white-space: nowrap;
	min-width: 240px;
	text-align: center;
}

.order-details-dialog {
	width: 90vw;
	max-width: 1200px;
	max-height: 85vh;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 16px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.order-details-dialog:not([open]) {
	display: none !important;
}

.order-details-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

.order-details-dialog .dialog-header {
	padding: 24px 32px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	position: relative;
}

.order-details-dialog .dialog-header h3 {
	margin: 0;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.order-details-dialog .dialog-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	background: rgba(255, 59, 48, 0.1);
	border: 2px solid rgba(255, 59, 48, 0.3);
	border-radius: 10px;
	padding: 0;
	cursor: pointer;
	color: #ff6b6b;
	font-size: 28px;
	line-height: 1;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.order-details-dialog .dialog-close:hover {
	background: rgba(255, 59, 48, 0.25);
	border-color: rgba(255, 59, 48, 0.6);
	color: #ff3b30;
	transform: scale(1.05);
}

.order-details-dialog .dialog-content {
	padding: 32px;
	overflow-y: auto;
	max-height: calc(85vh - 100px);
}

.order-details-dialog .dialog-content::-webkit-scrollbar {
	width: 8px;
}

.order-details-dialog .dialog-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
}

.order-details-dialog .dialog-content::-webkit-scrollbar-thumb {
	background: rgba(68, 138, 255, 0.3);
	border-radius: 4px;
}

.order-details-dialog .dialog-content::-webkit-scrollbar-thumb:hover {
	background: rgba(68, 138, 255, 0.5);
}

.admin-table tbody tr {
	cursor: pointer;
}

@media (max-width: 768px) {
	.admin-cards {
		grid-template-columns: 1fr;
	}

	.filters-container {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px;
	}

	.filter-select {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}

	.table-container {
		padding: 8px;
	}

	.admin-table thead tr th,
	.admin-table tbody tr td {
		padding: 8px;
		font-size: 14px;
	}

	.coins-dialog {
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}

	.order-details-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.order-details-dialog .dialog-content {
		padding: 20px;
		max-height: calc(100vh - 80px);
	}
}

.bulk-actions-bar {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
	border: 2px solid rgba(68, 138, 255, 0.8);
	border-radius: 16px;
	padding: 16px 24px;
	box-shadow: 0 12px 40px rgba(68, 138, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
	z-index: 1000;
	backdrop-filter: blur(12px);
	animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.bulk-actions-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.bulk-actions-count {
	color: white;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	padding-right: 24px;
	border-right: 2px solid rgba(255, 255, 255, 0.3);
}

.bulk-actions-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bulk-status-select {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 150px;
}

.bulk-status-select:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
}

.bulk-status-select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.bulk-status-select option {
	background: #1E40AF;
	color: white;
}

.bulk-delete-btn {
	padding: 8px 16px;
	background: rgba(239, 68, 68, 0.9);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.bulk-delete-btn:hover {
	background: #dc2626;
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
	transform: translateY(-2px);
}

.bulk-delete-btn:active {
	transform: translateY(0);
}

.order-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.order-info-card {
	background: rgba(255, 255, 255, 0.05);
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);

	& h4 {
		margin: 0 0 16px 0;
		color: var(--geniBlue);
		font-size: 18px;
	}

	& .info-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	& .info-row {
		display: flex;
		align-items: center;
		gap: 12px;

		& strong {
			min-width: 120px;
		}
	}

	& .status-select {
		padding: 6px 12px;
		background: rgba(68, 138, 255, 0.2);
		border: 1px solid rgba(68, 138, 255, 0.4);
		border-radius: 6px;
		color: white;
		text-transform: capitalize;
		cursor: pointer;
	}

	& .paid-checkbox-label {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;

		& input[type="checkbox"] {
			width: 18px;
			height: 18px;
			cursor: pointer;
			accent-color: var(--geniBlue);
		}

		& .paid-label {
			font-weight: 600;

			&.paid {
				color: #10b981;
			}

			&.unpaid {
				color: #ef4444;
			}
		}
	}

	& .action-buttons {
		margin-top: 12px;
		display: flex;
		gap: 12px;

		& button {
			padding: 10px 24px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			font-weight: 600;
			transition: all 0.2s ease;

			&.save-btn {
				background: var(--geniBlue);
				color: white;

				&:hover {
					background: #5a9fff;
				}
			}

			&.delete-btn {
				background: #ef4444;
				color: white;

				&:hover {
					background: #dc2626;
				}
			}

			&.download-btn {
				background: rgba(68, 138, 255, 0.2);
				border: 1px solid rgba(68, 138, 255, 0.4);
				color: white;
				width: 100%;

				&:hover {
					background: rgba(68, 138, 255, 0.3);
				}
			}
		}
	}
}

.order-items-section {
	background: rgba(255, 255, 255, 0.05);
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);

	& h4 {
		margin: 0 0 16px 0;
		color: var(--geniBlue);
		font-size: 18px;
	}

	& .items-table-container {
		overflow-x: auto;

		& table {
			width: 100%;
			border-collapse: collapse;

			& thead tr {
				border-bottom: 2px solid rgba(255, 255, 255, 0.1);

				& th {
					text-align: left;
					padding: 12px 8px;
					font-size: 12px;
					text-transform: uppercase;
					color: rgba(255, 255, 255, 0.6);

					&.center {
						text-align: center;
					}

					&.right {
						text-align: right;
					}
				}
			}

			& tbody tr {
				border-bottom: 1px solid rgba(255, 255, 255, 0.05);

				& td {
					padding: 12px 8px;

					&.center {
						text-align: center;
					}

					&.right {
						text-align: right;
						font-weight: 600;
					}
				}
			}
		}
	}

	& .totals-section {
		margin-top: 24px;
		padding-top: 16px;
		border-top: 2px solid rgba(255, 255, 255, 0.2);

		& .total-row {
			display: flex;
			justify-content: flex-end;
			gap: 48px;
			padding: 8px 0;

			& .total-label {
				min-width: 120px;
				text-align: right;
			}

			& .total-value {
				min-width: 100px;
				text-align: right;
			}

			&.final {
				font-size: 20px;
				font-weight: 700;
				color: var(--geniBlue);
				margin-top: 8px;
				padding-top: 16px;
				border-top: 2px solid var(--geniBlue);
			}
		}
	}

	& .no-items {
		text-align: center;
		padding: 20px;
		color: rgba(255, 255, 255, 0.5);
	}
}

.image-upload-cell {
	& .upload-btn {
		padding: 6px 12px;
		background: rgba(68, 138, 255, 0.2);
		border: 1px solid rgba(68, 138, 255, 0.4);
		border-radius: 6px;
		color: white;
		cursor: pointer;
		font-size: 11px;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(68, 138, 255, 0.3);
		}
	}

	& .image-preview {
		& .image-container {
			position: relative;
			display: inline-block;

			& img {
				max-width: 60px;
				max-height: 60px;
				border-radius: 4px;
				cursor: pointer;
				display: block;
				transition: transform 0.2s ease;
			}

			& .image-hover-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.7);
				border-radius: 4px;
				display: none;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			&:hover .image-hover-overlay {
				display: flex;
			}
		}

		& .image-actions {
			display: flex;
			gap: 4px;
			margin-top: 6px;
			opacity: 0;
			transition: opacity 0.2s ease;

			& button {
				padding: 4px 8px;
				border-radius: 4px;
				color: white;
				cursor: pointer;
				font-size: 10px;
				transition: all 0.2s ease;
				border: 1px solid;

				&[data-view-img] {
					background: rgba(68, 138, 255, 0.2);
					border-color: rgba(68, 138, 255, 0.4);

					&:hover {
						background: rgba(68, 138, 255, 0.3);
					}
				}

				&[data-replace-img] {
					background: rgba(251, 191, 36, 0.2);
					border-color: rgba(251, 191, 36, 0.4);

					&:hover {
						background: rgba(251, 191, 36, 0.3);
					}
				}

				&[data-delete-img] {
					background: rgba(239, 68, 68, 0.2);
					border-color: rgba(239, 68, 68, 0.4);

					&:hover {
						background: rgba(239, 68, 68, 0.3);
					}
				}
			}
		}

		&:hover .image-actions {
			opacity: 1;
		}
	}
}

.assign-select {
	padding: 6px 12px;
	background: rgba(68, 138, 255, 0.2);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 6px;
	color: white;
	cursor: pointer;
	font-size: 11px;
}

.validation-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid;

	&.validated {
		background: rgba(16, 185, 129, 0.2);
		color: #10b981;
		border-color: rgba(16, 185, 129, 0.4);
	}

	&.not-validated {
		background: rgba(239, 68, 68, 0.2);
		color: #ef4444;
		border-color: rgba(239, 68, 68, 0.4);
	}
}

.image-viewer-dialog {
	background: rgba(0, 0, 0, 0.95);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 0;
	max-width: 90vw;
	max-height: 90vh;

	& img {
		max-width: 100%;
		max-height: 85vh;
		display: block;
	}

	& .close-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		background: rgba(239, 68, 68, 0.9);
		color: white;
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		cursor: pointer;
		font-size: 24px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: #dc2626;
		}
	}
}

.empty-state {
	text-align: center;
	padding: 40px;
	color: rgba(255, 255, 255, 0.5);
}

.loading-state {
	text-align: center;
	padding: 40px;
}

.error-state {
	text-align: center;
	padding: 40px;
	color: #ef4444;
}

.paid-status {
	font-weight: 600;
	white-space: nowrap;

	&.paid {
		color: #10b981;
	}

	&.unpaid {
		color: #ef4444;
	}
}

.shipping-address-info {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);

	& strong {
		display: block;
		margin-bottom: 8px;
	}

	& .address-details {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-left: 12px;
	}
}

.bulk-paid-select,
.bulk-download-select {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 150px;

	&:hover {
		background: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.5);
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
	}
}

.bulk-paid-select option,
.bulk-download-select option {
	background: #1E40AF;
	color: white;
}

.order-info-card .action-buttons button.success {
	background: #10b981 !important;
}

.order-items-section .total-row {
	border-top: 2px solid rgba(255, 255, 255, 0.2);

	& td {
		padding: 12px 8px;
		font-weight: 600;
	}

	&.final {
		& td {
			font-weight: 700;
			font-size: 16px;
			color: var(--geniBlue);
		}
	}
}

.admin-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	justify-content: flex-end;
}

.btn-view-mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(68, 138, 255, 0.15);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.2s ease;
	white-space: nowrap;

	&:hover {
		background: rgba(68, 138, 255, 0.25);
		border-color: var(--geniBlue);
		box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
		transform: translateY(-1px);
	}

	& .icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
}

.coin-type-antique {
	color: #dc3545 !important;
	font-weight: 600;
}

.coin-image-cell {
	text-align: center;
	padding: 8px !important;
}

.coin-thumbnail {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;

	&:hover {
		transform: scale(1.5);
		z-index: 10;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		border-color: var(--geniBlue);
	}

	&:active {
		transform: scale(1.4);
	}
}

.table-container.grid-view {
	.admin-table {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 20px;
		padding: 20px;
		border-spacing: 0;
		min-width: auto;

		& thead {
			display: none;
		}

		& tbody {
			display: contents;
		}

		& tr {
			display: flex;
			flex-direction: column;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			padding: 16px;
			transition: all 0.2s ease;
			position: relative;

			&:hover {
				background: rgba(255, 255, 255, 0.08);
				border-color: rgba(68, 138, 255, 0.3);
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(68, 138, 255, 0.2);
			}
		}

		& td {
			padding: 6px 0 !important;
			border: none;
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 13px;

			&:first-child {
				position: absolute;
				top: 12px;
				right: 12px;
				padding: 0 !important;
			}

			&:nth-child(2),
			&:nth-child(3) {
				order: 1;
			}

			&.coin-image-cell {
				order: 2;
				justify-content: center;
				margin: 12px 0;
				padding: 12px 0 !important;

				& img {
					width: 120px;
					height: 120px;
					border-radius: 8px;
					cursor: pointer;
					transition: transform 0.2s ease, border-color 0.2s ease;
					border: 2px solid rgba(255, 255, 255, 0.1);

					&:hover {
						transform: scale(2);
						border-color: var(--geniBlue);
					}

					&:active {
						transform: scale(1.9);
					}
				}
			}

			&:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(.coin-image-cell) {
				order: 3;
			}

			&:not(:first-child):not(.coin-image-cell)::before {
				content: attr(data-label);
				font-weight: 600;
				color: rgba(255, 255, 255, 0.6);
				min-width: 80px;
				font-size: 11px;
				text-transform: uppercase;
			}
		}
	}
}

.translations-container {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.translations-categories {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.translation-category {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	transition: all 0.2s ease;

	&.expanded {
		background: rgba(255, 255, 255, 0.04);
		border-color: rgba(68, 138, 255, 0.2);
	}
}

.category-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.05);
	}

	& .expand-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
		color: rgba(255, 255, 255, 0.6);
	}

	& .category-name {
		font-weight: 600;
		font-size: 16px;
		color: var(--textColor);
		text-transform: capitalize;
		flex: 1;
	}

	& .category-count {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(68, 138, 255, 0.15);
		padding: 4px 12px;
		border-radius: 12px;
		font-weight: 500;
	}
}

.translation-category.expanded .category-header .expand-icon {
	transform: rotate(90deg);
	color: var(--geniBlue);
}

.category-body {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.category-body .translations-header {
	display: grid;
	grid-template-columns: 250px repeat(5, 1fr);
	gap: 16px;
	padding: 12px 16px;
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	border-bottom: 2px solid #1E3A8A;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FFFFFF;
	position: sticky;
	top: 75px;
	z-index: 10;
}

.translation-key-col,
.translation-lang-col {
	padding: 8px;
}

.category-body .translations-body {
}

.translation-row {
	display: grid;
	grid-template-columns: 250px repeat(5, 1fr);
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.03);
	}
}

.translation-key {
	padding: 8px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: #3B82F6;
	font-weight: 600;
	word-break: break-word;
	display: flex;
	align-items: flex-start;
}

.translation-lang {
	padding: 8px;

	& textarea {
		width: 100%;
		min-height: 48px;
		padding: 10px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		color: var(--textColor);
		font-size: 14px;
		font-family: inherit;
		resize: vertical;
		transition: all 0.2s ease;
		line-height: 1.5;

		&:focus {
			outline: none;
			background: rgba(255, 255, 255, 0.08);
			border-color: var(--geniBlue);
			box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
		}

		&:hover {
			border-color: rgba(255, 255, 255, 0.2);
		}
	}
}

@media (max-width: 1400px) {
	.category-body .translations-header,
	.translation-row {
		grid-template-columns: 200px repeat(5, 1fr);
		gap: 12px;
	}
}

@media (max-width: 1200px) {
	.category-body .translations-header,
	.translation-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.translation-lang-col {
		display: none;
	}

	.translation-lang::before {
		content: attr(data-lang);
		display: block;
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
		margin-bottom: 4px;
		text-transform: uppercase;
	}

	.category-header .category-count {
		display: none;
	}
}

.pricing-rule-dialog {
	width: 90vw;
	max-width: 600px;
	max-height: 85vh;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 16px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.pricing-rule-dialog:not([open]) {
	display: none !important;
}

.pricing-rule-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

.pricing-rule-dialog .dialog-header {
	padding: 24px 32px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
	position: relative;
}

.pricing-rule-dialog .dialog-header h3 {
	margin: 0;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.pricing-rule-dialog .dialog-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	background: rgba(255, 59, 48, 0.1);
	border: 2px solid rgba(255, 59, 48, 0.3);
	border-radius: 10px;
	padding: 0;
	cursor: pointer;
	color: #ff6b6b;
	font-size: 28px;
	line-height: 1;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pricing-rule-dialog .dialog-close:hover {
	background: rgba(255, 59, 48, 0.25);
	border-color: rgba(255, 59, 48, 0.6);
	color: #ff3b30;
	transform: scale(1.05);
}

.pricing-rule-dialog .dialog-content {
	padding: 32px;
	overflow-y: auto;
	max-height: calc(85vh - 100px);
}

.pricing-rule-form {
	& .form-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		margin-bottom: 24px;
	}

	& .form-group {
		display: flex;
		flex-direction: column;
		gap: 8px;

		& label {
			font-size: 14px;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.9);
		}

		& input,
		& select {
			padding: 10px 14px;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			color: var(--textColor);
			font-size: 14px;
			transition: all 0.2s ease;

			&:focus {
				outline: none;
				background: rgba(255, 255, 255, 0.08);
				border-color: var(--geniBlue);
				box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.1);
			}

			&:hover {
				border-color: rgba(255, 255, 255, 0.2);
			}
		}

		& select {
			cursor: pointer;
		}
	}

	& .form-group-full {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 24px;

		& > label {
			font-size: 14px;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.9);
		}
	}

	& .timezone-search,
	& .country-search {
		width: 100%;
		padding: 10px 16px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		color: var(--textColor);
		font-size: 14px;
		margin-bottom: 12px;

		&:focus {
			outline: none;
			border-color: var(--geniBlue);
			box-shadow: 0 0 0 2px rgba(68, 138, 255, 0.2);
		}

		&::placeholder {
			color: rgba(255, 255, 255, 0.4);
		}
	}

	& .checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-height: 300px;
		overflow-y: auto;
		padding: 4px;

		& .no-timezones {
			text-align: center;
			color: rgba(255, 255, 255, 0.5);
			font-size: 14px;
			padding: 20px;
		}
	}

	& .checkbox-label {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(255, 255, 255, 0.08);
			border-color: rgba(255, 255, 255, 0.2);
		}

		&.checkbox-label-selected {
			background: rgba(68, 138, 255, 0.15);
			border-color: rgba(68, 138, 255, 0.4);

			&:hover {
				background: rgba(68, 138, 255, 0.2);
				border-color: rgba(68, 138, 255, 0.5);
			}
		}

		&.checkbox-label-all {
			border: 2px solid rgba(255, 255, 255, 0.2);
			margin-bottom: 8px;

			& span {
				font-weight: 600;
			}

			&.checkbox-label-selected {
				border: 2px solid rgba(68, 138, 255, 0.5);
			}
		}

		& input[type="checkbox"] {
			width: 18px;
			height: 18px;
			cursor: pointer;
			accent-color: var(--geniBlue);
		}

		& span {
			font-size: 14px;
			color: var(--textColor);
			font-weight: 500;
		}
	}

	& .dialog-actions {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);

		& button {
			padding: 10px 24px;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			font-weight: 600;
			transition: all 0.2s ease;

			&.btn-secondary {
				background: rgba(255, 255, 255, 0.1);
				color: white;

				&:hover {
					background: rgba(255, 255, 255, 0.15);
				}
			}

			&.btn-primary {
				background: var(--geniBlue);
				color: white;

				&:hover {
					background: #5a9fff;
					box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
				}
			}
		}
	}
}

.badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid;
	white-space: nowrap;

	&.badge-yes {
		background: rgba(16, 185, 129, 0.2);
		color: #10b981;
		border-color: rgba(16, 185, 129, 0.4);
	}

	&.badge-no {
		background: rgba(239, 68, 68, 0.2);
		color: #ef4444;
		border-color: rgba(239, 68, 68, 0.4);
	}

	&.badge-any {
		background: rgba(156, 163, 175, 0.2);
		color: #9ca3af;
		border-color: rgba(156, 163, 175, 0.4);
	}
}

.actions-cell {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--textColor);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	&.btn-edit {
		&:hover {
			background: rgba(68, 138, 255, 0.2);
			border-color: rgba(68, 138, 255, 0.4);
			color: var(--geniBlue);
		}
	}

	&.btn-delete {
		&:hover {
			background: rgba(239, 68, 68, 0.2);
			border-color: rgba(239, 68, 68, 0.4);
			color: #ef4444;
		}
	}

	& svg {
		width: 16px;
		height: 16px;
	}
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	& .icon {
		width: 20px;
		height: 20px;
	}
}

.pricing-sections {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pricing-section {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	overflow: hidden;
	padding: 24px;
}

.section-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 0;
	cursor: pointer;
}

.section-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;

	& .icon-chevron {
		transition: transform 0.3s ease;
	}

	&:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.2);
		color: var(--textColor);
	}
}

.pricing-section.expanded .section-toggle .icon-chevron {
	transform: rotate(180deg);
}

.section-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;

	& h3 {
		margin: 0;
		font-size: 20px;
		font-weight: 700;
		color: var(--textColor);
		letter-spacing: -0.5px;
	}
}

.section-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.section-badge {
	background: rgba(68, 138, 255, 0.15);
	color: var(--geniBlue);
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgba(68, 138, 255, 0.3);
}

.badge-mode {
	display: inline-block;
	background: rgba(52, 199, 89, 0.15);
	color: rgb(52, 199, 89);
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid rgba(52, 199, 89, 0.3);
	margin-right: 4px;
}

.badge-timezone {
	display: inline-block;
	background: rgba(255, 159, 10, 0.15);
	color: rgb(255, 159, 10);
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid rgba(255, 159, 10, 0.3);
	margin-right: 4px;
}

.badge-country {
	display: inline-block;
	background: rgba(94, 92, 230, 0.15);
	color: rgb(94, 92, 230);
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid rgba(94, 92, 230, 0.3);
	margin-right: 4px;
}

.section-filters {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 8px;
	flex-wrap: wrap;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;

	& label {
		color: rgba(255, 255, 255, 0.6);
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}
}

.btn-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: linear-gradient(135deg, rgba(68, 138, 255, 0.15) 0%, rgba(68, 138, 255, 0.25) 100%);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 8px;
	color: var(--geniBlue);
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover {
		background: linear-gradient(135deg, rgba(68, 138, 255, 0.25) 0%, rgba(68, 138, 255, 0.35) 100%);
		border-color: var(--geniBlue);
		box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
		transform: translateY(-2px);
	}

	& .icon {
		width: 20px;
		height: 20px;
	}
}

.btn-export {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	background: linear-gradient(135deg, rgba(52, 199, 89, 0.15) 0%, rgba(52, 199, 89, 0.25) 100%);
	border: 1px solid rgba(52, 199, 89, 0.4);
	border-radius: 8px;
	color: rgb(52, 199, 89);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	font-weight: 600;

	&:hover {
		background: linear-gradient(135deg, rgba(52, 199, 89, 0.25) 0%, rgba(52, 199, 89, 0.35) 100%);
		border-color: rgb(52, 199, 89);
		box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
		transform: translateY(-2px);
	}

	& .icon {
		width: 18px;
		height: 18px;
	}
}

.section-content {
	max-height: 2000px;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
	opacity: 1;
	margin-top: 20px;
}

.section-content.collapsed {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.floating-toolbar {
	position: fixed;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(17, 24, 39, 0.98);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	padding: 16px 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	z-index: 1000;
	transition: bottom 0.3s ease, opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;

	&.show {
		bottom: 32px;
		opacity: 1;
		pointer-events: all;
	}
}

.toolbar-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.toolbar-info {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 24px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;

	.basket-count {
		font-size: 20px;
		font-weight: 700;
		color: var(--geniBlue);
	}
}

.toolbar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.btn-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover:not(:disabled) {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.25);
		transform: translateY(-1px);
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&.btn-primary {
		background: var(--geniBlue);
		border-color: var(--geniBlue);

		&:hover:not(:disabled) {
			background: #3B82F6;
			border-color: #3B82F6;
			box-shadow: 0 4px 12px rgba(68, 138, 255, 0.3);
		}
	}

	.icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}
}

.modal-basket {
	min-width: 500px;
	max-width: 90vw;
	max-height: 80vh;
	padding: 0;
	background: #0D1B2A;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	color: #FFFFFF;

	&::backdrop {
		background: rgba(0, 0, 0, 0.75);
		backdrop-filter: blur(8px);
	}

	& h3 {
		margin: 0;
		color: #FFFFFF;
		font-size: 24px;
		font-weight: 600;
	}

	& .dialog-header {
		padding: 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		background: transparent;
	}

	& .dialog-content {
		padding: 24px;
	}

	.basket-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.basket-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		color: #FFFFFF;
		font-family: monospace;
		font-size: 14px;

		.btn-remove {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			padding: 0;
			background: rgba(239, 68, 68, 0.1);
			border: 1px solid rgba(239, 68, 68, 0.3);
			border-radius: 6px;
			color: #EF4444;
			cursor: pointer;
			transition: all 0.2s ease;

			&:hover {
				background: rgba(239, 68, 68, 0.2);
				border-color: #EF4444;
			}

			.icon {
				width: 16px;
				height: 16px;
			}
		}
	}
}

.table-container {
	position: relative;
	min-height: 400px;
}

.loading-spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 60px;
	gap: 20px;
	z-index: 1000;
	background: rgba(13, 27, 42, 0.98);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

	& p {
		margin: 0;
		color: rgba(255, 255, 255, 0.9);
		font-size: 15px;
		font-weight: 500;
	}
}

.spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(68, 138, 255, 0.2);
	border-top-color: var(--geniBlue);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
	.floating-toolbar {
		left: 16px;
		right: 16px;
		transform: none;
		padding: 12px 16px;

		&.show {
			bottom: 16px;
		}
	}

	.toolbar-content {
		flex-direction: column;
		gap: 12px;
	}

	.toolbar-info {
		padding-right: 0;
		padding-bottom: 12px;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		width: 100%;
		justify-content: center;
	}

	.toolbar-actions {
		width: 100%;
		flex-direction: column;

		.btn-toolbar {
			width: 100%;
			justify-content: center;
		}
	}

	.modal-basket {
		min-width: 95vw;
		max-height: 85vh;

		& .dialog-header {
			padding: 16px;
		}

		& .dialog-content {
			padding: 16px;
		}
	}
}

.coins-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
}

.coins-count {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);

	&.partial {
		color: #fbbf24;
	}

	&.complete {
		color: #10b981;
	}
}

.coins-btn {
	padding: 4px 10px;
	background: rgba(68, 138, 255, 0.2);
	border: 1px solid rgba(68, 138, 255, 0.4);
	border-radius: 4px;
	color: white;
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(68, 138, 255, 0.3);
		border-color: var(--geniBlue);
	}
}

.coin-assign-dialog {
	width: 90vw;
	max-width: 900px;
	height: 80vh;
	max-height: 700px;
	padding: 0;
	margin: auto;
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 16px;
	background: #0D1B2A;
	color: var(--textColor);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.coin-assign-dialog[open] {
	display: flex;
	flex-direction: column;
}

.coin-assign-dialog:not([open]) {
	display: none !important;
}

.coin-assign-dialog::backdrop {
	backdrop-filter: blur(12px);
	background: rgba(0, 0, 0, 0.75);
	animation: fadeIn 0.3s ease;
}

.coin-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	border-bottom: 2px solid rgba(68, 138, 255, 0.3);
	background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);

	& h3 {
		margin: 0;
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 700;
		height: auto;
	}

	& .close-btn {
		width: 36px;
		height: 36px;
		background: rgba(255, 59, 48, 0.1);
		border: 2px solid rgba(255, 59, 48, 0.3);
		border-radius: 8px;
		padding: 0;
		cursor: pointer;
		color: #ff6b6b;
		font-size: 24px;
		line-height: 1;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: rgba(255, 59, 48, 0.25);
			border-color: rgba(255, 59, 48, 0.6);
			color: #ff3b30;
		}
	}
}

.coin-dialog-body {
	display: flex;
	gap: 20px;
	padding: 20px 24px;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.coin-dialog-filters {
	width: 240px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;

	& h4 {
		margin: 0 0 8px 0;
		font-size: 14px;
		color: var(--geniBlue);
	}

	& .filter-group {
		display: flex;
		flex-direction: column;
		gap: 4px;

		& label {
			font-size: 11px;
			color: rgba(255, 255, 255, 0.6);
			text-transform: uppercase;
		}

		& .filter-input-wrapper {
			position: relative;
			display: flex;
			align-items: center;
		}

		& input {
			flex: 1;
			padding: 8px 28px 8px 10px;
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-radius: 6px;
			color: var(--textColor);
			font-size: 13px;
			transition: all 0.2s ease;

			&:focus {
				outline: none;
				border-color: var(--geniBlue);
				background: rgba(255, 255, 255, 0.08);
			}

			&::placeholder {
				color: rgba(255, 255, 255, 0.3);
			}

			&:not(:placeholder-shown) {
				border-color: rgba(68, 138, 255, 0.5);
				background: rgba(68, 138, 255, 0.1);
			}
		}

		& .clear-input-btn {
			position: absolute;
			right: 6px;
			width: 18px;
			height: 18px;
			padding: 0;
			background: rgba(255, 255, 255, 0.1);
			border: none;
			border-radius: 50%;
			color: rgba(255, 255, 255, 0.5);
			font-size: 14px;
			line-height: 1;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transition: all 0.15s ease;
		}

		& .filter-input-wrapper:hover .clear-input-btn,
		& input:not(:placeholder-shown) + .clear-input-btn {
			opacity: 1;
		}

		& .clear-input-btn:hover {
			background: rgba(255, 255, 255, 0.2);
			color: white;
		}
	}

	& .filter-buttons {
		display: flex;
		gap: 8px;
		margin-top: 8px;
	}

	& .clear-filters-btn {
		flex: 1;
		padding: 10px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 6px;
		color: white;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(255, 255, 255, 0.15);
			border-color: rgba(255, 255, 255, 0.3);
		}
	}

	& .search-variations-btn {
		flex: 2;
		padding: 10px;
		background: var(--geniBlue);
		border: none;
		border-radius: 6px;
		color: white;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover:not(:disabled) {
			background: #5a9fff;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
}

.coin-dialog-results {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	& h4 {
		margin: 0 0 12px 0;
		font-size: 14px;
		color: var(--geniBlue);
		display: flex;
		align-items: center;
		gap: 8px;
	}

	& .results-badge {
		font-size: 12px;
		padding: 2px 8px;
		background: rgba(68, 138, 255, 0.2);
		border-radius: 10px;
		color: var(--geniBlue);
		font-weight: 600;

		&:empty {
			display: none;
		}
	}

	& .variations-grid {
		flex: 1;
		overflow-y: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 12px;
		align-content: start;

		& .empty-results,
		& .loading,
		& .error {
			grid-column: 1 / -1;
			text-align: center;
			padding: 40px 20px;
			color: rgba(255, 255, 255, 0.5);
		}

		& .error {
			color: #ef4444;
		}
	}
}

.variation-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: all 0.2s ease;

	&:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(68, 138, 255, 0.3);
	}

	& .variation-image {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 6px;
		background: rgba(0, 0, 0, 0.2);
	}

	& .variation-no-image {
		width: 100%;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.03);
		border: 1px dashed rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		color: rgba(255, 255, 255, 0.3);
		font-size: 11px;
	}

	& .variation-name {
		font-weight: 600;
		font-size: 13px;
		color: var(--textColor);
		line-height: 1.3;
	}

	& .variation-details {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;

		& span {
			font-size: 10px;
			padding: 2px 6px;
			background: rgba(68, 138, 255, 0.15);
			border-radius: 4px;
			color: rgba(255, 255, 255, 0.7);
		}

		& .clickable-tag {
			cursor: pointer;
			transition: all 0.15s ease;

			&:hover {
				background: rgba(68, 138, 255, 0.35);
				color: white;
			}
		}
	}

	& .choose-variation-btn {
		margin-top: auto;
		padding: 6px 10px;
		background: rgba(16, 185, 129, 0.2);
		border: 1px solid rgba(16, 185, 129, 0.4);
		border-radius: 4px;
		color: #10b981;
		font-size: 11px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;

		&:hover:not(:disabled) {
			background: rgba(16, 185, 129, 0.3);
			border-color: #10b981;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
}

.coin-dialog-assigned {
	padding: 16px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.02);

	& h4 {
		margin: 0 0 12px 0;
		font-size: 14px;
		color: var(--geniBlue);
	}

	& .assigned-coins-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		& .empty-assigned {
			color: rgba(255, 255, 255, 0.4);
			font-size: 13px;
		}
	}
}

.assigned-coin-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(68, 138, 255, 0.15);
	border: 1px solid rgba(68, 138, 255, 0.3);
	border-radius: 6px;

	& .coin-numgeni {
		font-family: monospace;
		font-size: 12px;
		color: var(--textColor);
	}

	& .remove-coin-btn {
		width: 20px;
		height: 20px;
		padding: 0;
		background: rgba(239, 68, 68, 0.2);
		border: 1px solid rgba(239, 68, 68, 0.4);
		border-radius: 4px;
		color: #ef4444;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(239, 68, 68, 0.3);
			border-color: #ef4444;
		}
	}
}

.coin-dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);

	& button {
		padding: 10px 20px;
		border: none;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;

		&.cancel-btn {
			background: rgba(255, 255, 255, 0.1);
			color: white;

			&:hover {
				background: rgba(255, 255, 255, 0.15);
			}
		}

		&.save-btn {
			background: var(--geniBlue);
			color: white;

			&:hover:not(:disabled) {
				background: #5a9fff;
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}
}