.mgc {
	--mgc-ink: #101a2b;
	--mgc-surface: #17233a;
	--mgc-surface-2: #1f2d48;
	--mgc-paper: #f4f1e9;
	--mgc-gold: #e2a83f;
	--mgc-line: rgba(244, 241, 233, 0.14);
	max-width: 480px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mgc * { box-sizing: border-box; }

.mgc-card-stage {
	display: flex;
	justify-content: center;
	padding: 8px 0 24px;
}

.mgc-gift-card {
	width: 280px;
	aspect-ratio: 1.586;
	border-radius: 16px;
	padding: 22px 24px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(226, 168, 63, 0.35), transparent 55%),
		linear-gradient(155deg, #1c2c4a, #101a2b 70%);
	border: 1px solid rgba(226, 168, 63, 0.35);
	box-shadow: 0 24px 48px -18px rgba(0,0,0,0.5);
	transform: rotate(-3deg);
	color: var(--mgc-paper);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mgc-mark { font-size: 15px; letter-spacing: 0.04em; }
.mgc-amount { font-size: 36px; font-weight: 600; }
.mgc-foot { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.6; }

.mgc-form, .mgc-redeem {
	background: var(--mgc-surface);
	border: 1px solid var(--mgc-line);
	border-radius: 10px;
	padding: 24px;
	color: var(--mgc-paper);
}

.mgc-field { margin-bottom: 16px; }
.mgc-field label { display: block; font-size: 13px; opacity: 0.75; margin-bottom: 6px; }

.mgc-field input,
.mgc-field textarea {
	width: 100%;
	background: var(--mgc-surface-2);
	border: 1px solid var(--mgc-line);
	border-radius: 8px;
	color: var(--mgc-paper);
	padding: 11px 13px;
	font-size: 15px;
}

.mgc-field input:focus,
.mgc-field textarea:focus {
	outline: none;
	border-color: var(--mgc-gold);
}

.mgc-amount-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.mgc-chip {
	flex: 1 1 60px;
	text-align: center;
	padding: 10px 6px;
	border-radius: 8px;
	border: 1px solid var(--mgc-line);
	background: var(--mgc-surface-2);
	cursor: pointer;
	font-size: 14px;
	color: var(--mgc-paper);
}

.mgc-chip.mgc-active {
	border-color: var(--mgc-gold);
	color: var(--mgc-gold);
	background: rgba(226, 168, 63, 0.1);
}

.mgc-btn-primary {
	width: 100%;
	padding: 13px 16px;
	border-radius: 8px;
	border: none;
	background: var(--mgc-gold);
	color: #1a1305;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 4px;
}
.mgc-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.mgc-note { font-size: 12.5px; opacity: 0.6; margin-top: 12px; }

.mgc-status {
	margin-top: 14px;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 14px;
	display: none;
}
.mgc-status.mgc-show { display: block; }
.mgc-status.mgc-ok { background: rgba(95, 163, 154, 0.16); border: 1px solid rgba(95,163,154,0.4); color: #cfe8e3; }
.mgc-status.mgc-err { background: rgba(214, 90, 70, 0.16); border: 1px solid rgba(214,90,70,0.4); color: #f2c9c1; }

.mgc-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	background: var(--mgc-surface-2);
	border-radius: 8px;
	padding: 4px;
}
.mgc-tab { flex: 1; text-align: center; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 14px; opacity: 0.65; color: var(--mgc-paper); }
.mgc-tab.mgc-active { background: var(--mgc-ink); opacity: 1; color: var(--mgc-gold); }

.mgc-balance-display { text-align: center; padding: 18px 0 6px; }
.mgc-num { font-size: 44px; color: var(--mgc-gold); font-weight: 600; }
.mgc-label { font-size: 12px; opacity: 0.65; letter-spacing: 0.04em; }