/**
 * GPLT Glass Design System — shared tokens & components (admin + frontend)
 */
:root {
	--gplt-radius-sm: 12px;
	--gplt-radius-md: 16px;
	--gplt-radius-lg: 22px;
	--gplt-radius-xl: 28px;

	--gplt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
	--gplt-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
	--gplt-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
	--gplt-shadow-glow-blue: 0 0 0 1px rgba(37, 99, 255, 0.15), 0 8px 32px rgba(37, 99, 255, 0.12);

	--gplt-glass-bg: rgba(255, 255, 255, 0.72);
	--gplt-glass-bg-strong: rgba(255, 255, 255, 0.88);
	--gplt-glass-border: rgba(255, 255, 255, 0.85);
	--gplt-glass-border-soft: rgba(148, 163, 184, 0.28);
	--gplt-glass-blur: 18px;

	--gplt-bg-gradient: linear-gradient(145deg, #f8fafc 0%, #eef2ff 38%, #fdf4ff 72%, #f0fdfa 100%);
	--gplt-text: #0f172a;
	--gplt-text-muted: #64748b;
	--gplt-text-soft: #94a3b8;

	--gplt-accent-blue: #2563ff;
	--gplt-accent-cyan: #06b6d4;
	--gplt-accent-violet: #7c3aed;
	--gplt-accent-fuchsia: #d946ef;
	--gplt-accent-lime: #84cc16;
	--gplt-accent-amber: #f59e0b;
	--gplt-accent-red: #ef4444;
	--gplt-accent-emerald: #10b981;

	--gplt-accent-blue-soft: rgba(37, 99, 255, 0.12);
	--gplt-accent-cyan-soft: rgba(6, 182, 212, 0.12);
	--gplt-accent-violet-soft: rgba(124, 58, 237, 0.12);
	--gplt-accent-fuchsia-soft: rgba(217, 70, 239, 0.12);
	--gplt-accent-lime-soft: rgba(132, 204, 22, 0.14);
	--gplt-accent-amber-soft: rgba(245, 158, 11, 0.14);
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.gplt-glass-surface,
.gplt-glass-panel {
	position: relative;
}

.gplt-glass-surface::before,
.gplt-glass-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: var(--gplt-bg-gradient);
	opacity: 0.55;
}

.gplt-glass-card,
.gplt-glass-hero {
	position: relative;
	z-index: 1;
	background: var(--gplt-glass-bg);
	border: 1px solid var(--gplt-glass-border);
	box-shadow: var(--gplt-shadow-md);
	backdrop-filter: blur(var(--gplt-glass-blur));
	-webkit-backdrop-filter: blur(var(--gplt-glass-blur));
	border-radius: var(--gplt-radius-lg);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gplt-glass-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--gplt-shadow-lg);
	border-color: rgba(255, 255, 255, 0.95);
}

.gplt-glass-hero {
	border-radius: var(--gplt-radius-xl);
	box-shadow: var(--gplt-shadow-lg);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 100%);
}

.gplt-glass-grid {
	display: grid;
	gap: 1rem;
}

/* ── Stat / summary cards ─────────────────────────────────────────────────── */
.gplt-stat-card {
	overflow: hidden;
}

.gplt-stat-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--gplt-stat-accent, var(--gplt-accent-blue));
	opacity: 0.85;
}

.gplt-stat-card--coins { --gplt-stat-accent: var(--gplt-accent-amber); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-amber-soft) 100%); }
.gplt-stat-card--missions { --gplt-stat-accent: var(--gplt-accent-blue); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-blue-soft) 100%); }
.gplt-stat-card--achievements { --gplt-stat-accent: var(--gplt-accent-violet); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-violet-soft) 100%); }
.gplt-stat-card--referrals { --gplt-stat-accent: var(--gplt-accent-cyan); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-cyan-soft) 100%); }
.gplt-stat-card--rewards { --gplt-stat-accent: var(--gplt-accent-fuchsia); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-fuchsia-soft) 100%); }
.gplt-stat-card--notifications { --gplt-stat-accent: var(--gplt-accent-lime); background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, var(--gplt-accent-lime-soft) 100%); }

.gplt-hub-card-accent-0 { --gplt-hub-accent: var(--gplt-accent-blue); --gplt-hub-accent-soft: var(--gplt-accent-blue-soft); }
.gplt-hub-card-accent-1 { --gplt-hub-accent: var(--gplt-accent-cyan); --gplt-hub-accent-soft: var(--gplt-accent-cyan-soft); }
.gplt-hub-card-accent-2 { --gplt-hub-accent: var(--gplt-accent-violet); --gplt-hub-accent-soft: var(--gplt-accent-violet-soft); }
.gplt-hub-card-accent-3 { --gplt-hub-accent: var(--gplt-accent-fuchsia); --gplt-hub-accent-soft: var(--gplt-accent-fuchsia-soft); }
.gplt-hub-card-accent-4 { --gplt-hub-accent: var(--gplt-accent-lime); --gplt-hub-accent-soft: var(--gplt-accent-lime-soft); }
.gplt-hub-card-accent-5 { --gplt-hub-accent: var(--gplt-accent-amber); --gplt-hub-accent-soft: var(--gplt-accent-amber-soft); }
.gplt-hub-card-accent-6 { --gplt-hub-accent: var(--gplt-accent-emerald); --gplt-hub-accent-soft: rgba(16, 185, 129, 0.12); }
.gplt-hub-card-accent-7 { --gplt-hub-accent: var(--gplt-accent-red); --gplt-hub-accent-soft: rgba(239, 68, 68, 0.1); }

/* ── Status pills ─────────────────────────────────────────────────────────── */
.gplt-status-pill,
.gplt-hub-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.4;
	border: 1px solid transparent;
	white-space: nowrap;
}

.gplt-status-pill--on,
.gplt-hub-badge.is-on {
	color: #047857;
	background: rgba(16, 185, 129, 0.14);
	border-color: rgba(16, 185, 129, 0.28);
}

.gplt-status-pill--off,
.gplt-hub-badge.is-off {
	color: #64748b;
	background: rgba(148, 163, 184, 0.16);
	border-color: rgba(148, 163, 184, 0.28);
}

.gplt-status-pill--warn {
	color: #b45309;
	background: rgba(245, 158, 11, 0.16);
	border-color: rgba(245, 158, 11, 0.28);
}

.gplt-status-pill--danger {
	color: #b91c1c;
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.24);
}

.gplt-status-pill--info {
	color: #1d4ed8;
	background: rgba(37, 99, 255, 0.12);
	border-color: rgba(37, 99, 255, 0.22);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gplt-accent-button,
.gplt-soft-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 1.1rem;
	border-radius: var(--gplt-radius-sm);
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	cursor: pointer;
	border: 1px solid transparent;
}

.gplt-accent-button {
	background: linear-gradient(135deg, var(--gplt-accent-blue) 0%, var(--gplt-accent-violet) 100%);
	color: #fff;
	box-shadow: var(--gplt-shadow-glow-blue);
}

.gplt-accent-button:hover {
	transform: translateY(-1px);
	color: #fff;
	opacity: 0.95;
}

.gplt-soft-button {
	background: rgba(255, 255, 255, 0.72);
	color: var(--gplt-text);
	border-color: var(--gplt-glass-border-soft);
	backdrop-filter: blur(10px);
}

.gplt-soft-button:hover {
	border-color: var(--gplt-accent-blue);
	color: var(--gplt-accent-blue);
}

/* ── Section titles ───────────────────────────────────────────────────────── */
.gplt-section-title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gplt-text);
	letter-spacing: -0.01em;
}

.gplt-section-subtitle {
	margin: 0;
	color: var(--gplt-text-muted);
	font-size: 0.88rem;
	line-height: 1.65;
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.gplt-empty-card {
	padding: 1.25rem;
	border-radius: var(--gplt-radius-md);
	background: rgba(255, 255, 255, 0.55);
	border: 1px dashed var(--gplt-glass-border-soft);
	text-align: center;
	color: var(--gplt-text-muted);
}

.gplt-empty-card p {
	margin: 0;
	line-height: 1.7;
}