.mgrl-wrap {
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mgrl-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #D8E5DE;
	background: #0E2A22;
	border: 1px solid #3A5F52;
	border-radius: 20px;
	padding: 6px 14px;
	margin-bottom: 18px;
}
.mgrl-updated-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #F2B705;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(242,183,5,0.2);
}

.mgrl-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mgrl-card {
	--mgrl-bg: #12312A;
	--mgrl-border: #3A5F52;
	--mgrl-text: #F5F1E6;
	--mgrl-muted: #C8D8CE;
	--mgrl-pill-bg: rgba(255,255,255,0.08);
	--mgrl-pill-border: rgba(255,255,255,0.1);
	--mgrl-claim-bg: #F2B705;
	--mgrl-claim-text: #12312A;

	position: relative;
	background: var(--mgrl-bg);
	border: 1px solid var(--mgrl-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	transition: border-color .25s ease, opacity .25s ease;
}

.mgrl-card-bar {
	height: 5px;
	background: linear-gradient(90deg, #2ECC71, #F2B705);
}
.mgrl-card.mgrl-live { border-color: #2ECC71; }
.mgrl-card.mgrl-live .mgrl-card-bar { background: #2ECC71; }
.mgrl-card.mgrl-upcoming { border-color: #F1C40F; }
.mgrl-card.mgrl-upcoming .mgrl-card-bar { background: #F1C40F; }
.mgrl-card.mgrl-ended { border-color: #E74C3C; opacity: 0.75; }
.mgrl-card.mgrl-ended .mgrl-card-bar { background: #E74C3C; }

.mgrl-card-status {
	position: absolute;
	top: 15px;
	right: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--mgrl-border);
	color: #fff;
}
.mgrl-card.mgrl-live .mgrl-card-status { background: #2ECC71; color: #08331F; }
.mgrl-card.mgrl-upcoming .mgrl-card-status { background: #F1C40F; color: #4A3B00; }
.mgrl-card.mgrl-ended .mgrl-card-status { background: #E74C3C; color: #fff; }

.mgrl-card-body {
	padding: 22px 24px 24px;
}

.mgrl-card-title {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 700;
	color: var(--mgrl-title-color, var(--mgrl-text));
	line-height: 1.3;
	padding-right: 80px; /* room for the status badge */
}

.mgrl-reward-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.mgrl-reward-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--mgrl-pill-bg);
	border: 1px solid var(--mgrl-pill-border);
	border-radius: 10px;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--mgrl-text);
}
.mgrl-reward-pill img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex-shrink: 0;
}

.mgrl-availability {
	font-size: 13px;
	color: var(--mgrl-muted);
	padding-top: 12px;
	margin-bottom: 18px;
	border-top: 1px dashed var(--mgrl-border);
}

.mgrl-claim-btn {
	display: block;
	text-align: center;
	background: var(--mgrl-claim-bg);
	color: var(--mgrl-claim-text) !important;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 20px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .2s ease;
}
.mgrl-claim-btn:hover {
	filter: brightness(0.92);
}
.mgrl-claim-btn.mgrl-claim-disabled {
	background: var(--mgrl-border);
	color: var(--mgrl-muted) !important;
	pointer-events: none;
}

.mgrl-empty {
	padding: 24px;
	text-align: center;
	color: #9FB6AC;
	background: #0E2A22;
	border: 1px solid #3A5F52;
	border-radius: 12px;
}

/* ===== Template presets (Reward Links → Settings → Card Template) ===== */
.mgrl-theme-midnight .mgrl-card {
	--mgrl-bg: #050B09;
	--mgrl-border: #2A2A2A;
	--mgrl-text: #F5F1E6;
	--mgrl-muted: #9C9C9C;
	--mgrl-pill-bg: rgba(255,255,255,0.06);
	--mgrl-pill-border: rgba(255,255,255,0.08);
	--mgrl-claim-bg: #F2B705;
	--mgrl-claim-text: #050B09;
}

.mgrl-theme-light .mgrl-card {
	--mgrl-bg: #FBF7EE;
	--mgrl-border: #D8CBB0;
	--mgrl-text: #2B2B2B;
	--mgrl-muted: #7A7062;
	--mgrl-pill-bg: #FBF8EF;
	--mgrl-pill-border: #EEE3C8;
	--mgrl-claim-bg: #0F5132;
	--mgrl-claim-text: #FFFFFF;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.mgrl-theme-light.mgrl-updated { background: #FBF7EE; border-color: #D8CBB0; color: #4B4636; }

/* ===== Tile sizes (Reward Links → Settings → Tile Size) ===== */
.mgrl-size-small .mgrl-card-body { padding: 14px 16px 16px; }
.mgrl-size-small .mgrl-card-title { font-size: 15px; margin-bottom: 10px; padding-right: 70px; }
.mgrl-size-small .mgrl-reward-pill { font-size: 12px; padding: 6px 10px; }
.mgrl-size-small .mgrl-reward-pill img { width: 18px; height: 18px; }
.mgrl-size-small .mgrl-availability { font-size: 11.5px; margin-bottom: 12px; }
.mgrl-size-small .mgrl-claim-btn { font-size: 13px; padding: 9px 16px; }

.mgrl-size-large .mgrl-card-body { padding: 30px 32px 32px; }
.mgrl-size-large .mgrl-card-title { font-size: 23px; margin-bottom: 20px; padding-right: 90px; }
.mgrl-size-large .mgrl-reward-pill { font-size: 15.5px; padding: 12px 20px; }
.mgrl-size-large .mgrl-reward-pill img { width: 32px; height: 32px; }
.mgrl-size-large .mgrl-availability { font-size: 14px; margin-bottom: 22px; }
.mgrl-size-large .mgrl-claim-btn { font-size: 16.5px; padding: 16px 22px; }