/* =========================================================================
   PlayRox premium dashboard — dark themed, reference-matched
   ========================================================================= */

.playrox-dash--premium {
	--plxd-bg: #071310;
	--plxd-panel: #0e1a16;
	--plxd-panel2: #13221c;
	--plxd-line: rgba(255, 255, 255, 0.07);
	--plxd-line-strong: rgba(255, 255, 255, 0.11);
	--plxd-green: #22b455;
	--plxd-green2: #178048;
	--plxd-green-bright: #34c96a;
	--plxd-gold: #e8b53a;
	--plxd-text: #eaf1ed;
	--plxd-muted: #8a9d93;
	--plxd-radius: 14px;
	--plxd-radius-sm: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--plxd-text);
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.01em;
}

/* Full-bleed dark canvas: remove the theme's white card + padding entirely. */
.playrox-page-canvas:has(.playrox-dash--premium),
.playrox-page-canvas.has-premium-dash {
	background: #04120e !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 100vh !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Also relax the theme's constraining wrappers, in case they clip. */
.container-inner:has(.playrox-dash--premium),
.container-inner.has-premium-dash,
body#layout .container-inner:has(.playrox-dash--premium),
body#layout .container-inner.has-premium-dash,
body.container-outer .container-inner.has-premium-dash {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

/* Bulletproof full-viewport breakout applied to the dashboard root itself, so
   it fills the whole screen no matter what parent wrapper constrains it. The
   100vw + centering margin escapes any centered max-width ancestor. */
.playrox-dash--premium {
	position: relative !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	background: #04120e !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	min-height: 100vh;
	box-sizing: border-box;
}

.plxd {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 22px;
	width: 100%;
	margin: 0;
	padding: 24px 32px;
	background: #04120e;
	box-sizing: border-box;
}

/* ---- Sidebar ------------------------------------------------------------ */
.plxd__side {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.plxd__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--plxd-panel);
	border: 1px solid var(--plxd-line);
	border-radius: 16px;
	padding: 10px;
}

.plxd__navitem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: var(--plxd-muted);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: background 0.15s ease, color 0.15s ease;
}

.plxd__navitem i { width: 20px; text-align: center; font-size: 15px; }
.plxd__navitem span { flex: 1; }

.plxd__navitem:hover { background: var(--plxbtn-bg-hover, rgba(255,255,255,0.04)); color: var(--plxbtn-text-hover, var(--plxd-text)); }
.plxd__navitem:hover i { color: var(--plxbtn-text-hover, var(--plxd-text)); }

.plxd__navitem.is-active {
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #1F6E35 0%, #1D6A34 20%, #195B2E 60%, #154E28 100%));
	color: var(--plxbtn-text-active, #fff);
	box-shadow: none;
}
.plxd__navitem.is-active i { color: var(--plxbtn-text-active, #fff); }

.plxd__navlock { color: var(--plxd-gold); font-size: 11px; }

/* Premium promo card */
.plxd__promo {
	background: linear-gradient(160deg, #12281d, #0d1d16);
	border: 1px solid rgba(255, 202, 60, 0.18);
	border-radius: 16px;
	padding: 20px 18px;
	text-align: center;
}
.plxd__promo-emblem {
	width: 54px; height: 54px;
	margin: 0 auto 12px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ffe08a, #f6b93b);
	color: #6b4a00; font-size: 22px;
	box-shadow: 0 6px 18px rgba(246, 185, 59, 0.35);
}
.plxd__promo h4 { margin: 0 0 6px; font-size: 15px; color: #fff; }
.plxd__promo p { margin: 0 0 14px; font-size: 12.5px; color: var(--plxd-muted); line-height: 1.5; }
.plxd__promo-btn {
	width: 100%; padding: 11px; border: 0; border-radius: 10px;
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%));
	color: var(--plxbtn-text-active, #fff); font-weight: 700; font-size: 14px; cursor: pointer;
}

/* ---- Main --------------------------------------------------------------- */
.plxd__main { min-width: 0; }

.plxd__panel { display: none; }
.plxd__panel.is-active { display: block; }

.plxd__row { display: grid; gap: 20px; margin-bottom: 20px; }
.plxd__row--hero { grid-template-columns: 1.35fr 1fr; }
.plxd__row--mid { grid-template-columns: 1fr 1fr 1fr; }

/* ---- Hero card ---------------------------------------------------------- */
.plxd__hero {
	background: linear-gradient(145deg, #0d3325 0%, #0a2118 55%, #0b1d16 100%);
	border: 1px solid var(--plxd-line);
	border-radius: 20px;
	padding: 24px;
	position: relative;
	overflow: hidden;
}

.plxd__hero-id { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }

.plxd__hero-av {
	position: relative; flex: 0 0 auto;
	width: 92px; height: 92px; border-radius: 50%;
	padding: 4px;
	background: radial-gradient(circle at 50% 35%, #34d36b, #16a34a 70%);
	box-shadow: 0 0 0 1px rgba(34,197,94,0.4), 0 0 24px rgba(34,197,94,0.35);
}
.plxd__hero-av img, .plxd__hero-av .avatar {
	width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
	border: 3px solid #0b1d16;
	background: #16241d;
	box-sizing: border-box;
}
.plxd__hero-online {
	position: absolute; right: 6px; bottom: 6px;
	width: 15px; height: 15px; border-radius: 50%;
	background: #37e07a; border: 3px solid #0b1d16;
	box-shadow: 0 0 6px rgba(55,224,122,0.6);
}

.plxd__hero-meta { flex: 1; min-width: 0; }
.plxd__hero-name { margin: 0; font-size: 26px; font-weight: 800; color: #fff; }
.plxd__hero-sub { color: var(--plxd-muted); font-size: 14px; margin: 2px 0 8px; }
.plxd__hero-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 202, 60, 0.14); color: var(--plxd-gold);
	font-size: 12.5px; font-weight: 700;
}

.plxd__hero-emblem {
	position: relative; flex: 0 0 auto;
	width: 82px; height: 82px;
	display: flex; align-items: center; justify-content: center;
}
.plxd__hero-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plxd__hero-emblem polygon {
	fill: #0f3325;
	stroke: url(#plxd-gold-stroke);
	stroke: #f6b93b;
	stroke-width: 4;
	filter: drop-shadow(0 0 14px rgba(246, 185, 59, 0.55));
}
.plxd__hero-emblem i {
	position: relative; color: #ffca3c; font-size: 30px;
	text-shadow: 0 0 14px rgba(255, 202, 60, 0.7);
}

.plxd__xp { margin-bottom: 20px; }
.plxd__xp-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--plxd-muted); margin-bottom: 8px; }
.plxd__xp-head span:last-child { color: var(--plxd-text); font-weight: 700; }
.plxd__xp-bar { height: 9px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; }
.plxd__xp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--plxd-green), #6bd968); }

.plxd__hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plxd__hstat {
	background: rgba(0,0,0,0.22); border-radius: 14px; padding: 16px 12px; text-align: center;
}
.plxd__hstat-ic { font-size: 20px; display: block; margin-bottom: 8px; }
.plxd__hstat b { display: block; font-size: 20px; color: #fff; font-weight: 800; }
.plxd__hstat em { display: none; }

/* ---- Continue playing --------------------------------------------------- */
.plxd__continue {
	background: var(--plxd-panel); border: 1px solid var(--plxd-line);
	border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
	position: relative;
}
.plxd__continue-head {
	position: absolute; top: 0; left: 0; right: 0; z-index: 2;
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 18px;
}
.plxd__continue-head span { color: var(--plxd-green); font-weight: 700; font-size: 14px; }
.plxd__heart { border: 0; background: rgba(0,0,0,0.3); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }

.plxd__continue-art {
	height: 210px; background-size: cover; background-position: center;
	background-color: #12283a; position: relative;
}
.plxd__continue-art::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,32,26,0.35) 0%, rgba(16,32,26,0) 40%, rgba(16,32,26,0.9) 100%);
}
.plxd__continue-body { padding: 18px; }
.plxd__continue-body h3 { margin: 0 0 12px; font-size: 22px; color: #fff; font-weight: 800; }
.plxd__continue-prog { height: 7px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; margin-bottom: 8px; }
.plxd__continue-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--plxd-green), #6bd968); border-radius: 999px; }
.plxd__continue-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--plxd-muted); margin-bottom: 16px; }

.plxd__resume {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px; border: 0; border-radius: 11px;
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #1F6E35 0%, #1D6A34 20%, #195B2E 60%, #154E28 100%));
	color: var(--plxbtn-text-active, #fff); font-weight: 700; font-size: 15px; cursor: pointer;
	box-shadow: none;
}
.plxd__continue-empty { padding: 50px 20px; text-align: center; color: var(--plxd-muted); }
.plxd__continue-empty i { font-size: 34px; margin-bottom: 12px; opacity: 0.5; }
.plxd__continue-empty p { margin: 0 0 16px; }

/* ---- Cards (shared) ----------------------------------------------------- */
.plxd__card {
	background: var(--plxd-panel); border: 1px solid var(--plxd-line);
	border-radius: 18px; padding: 20px; position: relative;
}
.plxd__card-head {
	display: flex; align-items: center; gap: 9px;
	font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px;
}
.plxd__card-head i { color: var(--plxd-green); }
.plxd__inline-lock { margin-left: auto; font-size: 12px; color: var(--plxd-gold); font-weight: 600; }

/* Daily rewards */
.plxd__daily-streak {
	background: rgba(255, 202, 60, 0.12); color: var(--plxd-gold);
	border-radius: 10px; padding: 10px; text-align: center; font-weight: 700; font-size: 13.5px;
	margin-bottom: 16px;
}
.plxd__daily-reward { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 16px; }
.plxd__daily-coins {
	width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 30% 30%, #ffe08a, #f6b93b); color: #6b4a00; font-size: 18px;
}
.plxd__daily-reward em { font-style: normal; font-size: 12px; color: var(--plxd-muted); display: block; }
.plxd__daily-reward b { font-size: 20px; color: #fff; }
.plxd__daily-next { margin-top: 12px; text-align: center; font-size: 12px; color: var(--plxd-muted); }

.plxd__btn {
	width: 100%; padding: 12px; border: 0; border-radius: 10px; font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.plxd__btn--green { background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%)); color: var(--plxbtn-text-active, #fff); }
.plxd__btn.is-disabled { opacity: 0.6; cursor: not-allowed; }

/* Top-up coins */
.plxd__topup-sub { margin: -8px 0 14px; font-size: 12.5px; color: var(--plxd-muted); }
.plxd__topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plxd__pack {
	position: relative; border: 1px solid var(--plxd-line); border-radius: 13px;
	background: rgba(0,0,0,0.22); padding: 16px 8px 12px; cursor: pointer; text-align: center;
	color: var(--plxd-text); transition: border-color 0.15s ease, transform 0.15s ease;
}
.plxd__pack:hover { border-color: var(--plxd-green); transform: translateY(-2px); }
.plxd__pack i { font-size: 20px; color: var(--plxd-gold); }
.plxd__pack b { display: block; font-size: 18px; color: #fff; margin: 6px 0 2px; }
.plxd__pack em { font-style: normal; font-size: 11px; color: var(--plxd-muted); }
.plxd__pack.is-featured { border-color: var(--plxd-green); background: rgba(55, 178, 77, 0.1); }
.plxd__pack-tag {
	position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
	background: var(--plxd-green); color: #fff; font-size: 10px; font-weight: 700;
	padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* Locked overlay (topup / shop) */
.plxd__topup.is-locked .plxd__topup-grid { filter: blur(2px); opacity: 0.7; pointer-events: none; }
.plxd__topup-overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	border-radius: 18px;
}
.plxd__topup-overlay-badge {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: rgba(6, 16, 12, 0.8); border: 1px solid var(--plxd-line);
	padding: 14px 22px; border-radius: 14px; color: var(--plxd-gold); font-weight: 700;
	backdrop-filter: blur(4px);
}
.plxd__topup-overlay-badge i { font-size: 20px; }

/* Stat tiles (2x2) */
.plxd__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.plxd__tile {
	background: var(--plxd-panel); border: 1px solid var(--plxd-line); border-radius: 16px;
	padding: 18px; display: flex; flex-direction: column; gap: 4px;
}
.plxd__tile-ic { font-size: 20px; }
.plxd__tile b { font-size: 22px; color: #fff; font-weight: 800; }
.plxd__tile em { font-style: normal; font-size: 12px; color: var(--plxd-muted); }

/* ---- Blocks (achievements / recent) ------------------------------------- */
.plxd__block {
	background: var(--plxd-panel); border: 1px solid var(--plxd-line);
	border-radius: 18px; padding: 20px; margin-bottom: 20px;
}
.plxd__block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.plxd__block-head span { font-size: 16px; font-weight: 700; color: #fff; }
.plxd__viewall { border: 0; background: transparent; color: var(--plxd-green); font-weight: 700; font-size: 13px; cursor: pointer; }

/* Achievements */
.plxd__ach { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.plxd__achitem { text-align: center; }
.plxd__hex {
	width: 66px; height: 74px; margin: 0 auto 8px;
	display: flex; align-items: center; justify-content: center;
	background: var(--hex, #444);
	-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	color: #fff; font-size: 24px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.plxd__achitem.is-locked .plxd__hex { background: #26332c; color: #4a5c50; }
.plxd__achitem em { font-style: normal; font-size: 12px; color: var(--plxd-muted); }

/* Recently played */
.plxd__recent { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.plxd__recentcard { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.plxd__recentcard-thumb {
	display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px;
	background-size: cover; background-position: center; background-color: #14283a;
	position: relative; margin-bottom: 8px;
}
.plxd__recentcard-fav {
	position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
	background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.plxd__recentcard-name { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.plxd__recentcard-meta { display: block; font-size: 11.5px; color: var(--plxd-muted); margin-top: 2px; }

/* Missions panel */
.plxd__missions { display: flex; flex-direction: column; gap: 12px; }
.plxd__mission {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px; border-radius: 14px;
	background: linear-gradient(120deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02));
	border: 1px solid rgba(34,197,94,0.18);
}
.plxd__mission-ic {
	width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
	background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.4);
	display: flex; align-items: center; justify-content: center;
	color: #3ce675; font-size: 17px;
}
.plxd__mission-body { flex: 1; min-width: 0; }
.plxd__mission-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.plxd__mission-top span:last-child { color: var(--plxd-muted); font-weight: 600; }
.plxd__mission-bar { height: 7px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden; }
.plxd__mission-bar span { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #3ce675); border-radius: 999px; transition: width 0.4s ease; }
.plxd__mission-reward {
	flex: 0 0 auto; color: #ffd94a; font-weight: 800; font-size: 13px;
	background: rgba(255,217,74,0.12); border: 1px solid rgba(255,217,74,0.35);
	padding: 6px 12px; border-radius: 999px;
}
.plxd__mission-reward i { margin-right: 4px; }
.plxd__missions-all {
	margin-top: 16px; padding: 14px; border-radius: 12px;
	background: rgba(55, 178, 77, 0.1); border: 1px solid rgba(55,178,77,0.2);
	display: flex; justify-content: space-between; align-items: center;
}
.plxd__missions-all span { color: var(--plxd-muted); font-size: 13px; }
.plxd__missions-all b { color: var(--plxd-gold); font-size: 15px; }

.plxd__simple { text-align: center; padding: 60px 20px; }
.plxd__simple h3 { color: #fff; margin: 0 0 8px; }
.plxd__simple p { color: var(--plxd-muted); margin: 0; }

/* ---- Mobile bottom nav bar ---------------------------------------------- */
.plxd__mobilebar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 900;
	background: rgba(7, 22, 16, 0.96);
	border-top: 1px solid var(--plxd-line);
	backdrop-filter: blur(10px);
	padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
	justify-content: space-around;
}
.plxd__mbitem {
	flex: 1;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	border: 0; background: transparent; cursor: pointer;
	color: var(--plxd-muted); font-size: 10.5px; font-weight: 600;
	padding: 4px 2px;
}
.plxd__mbitem i { font-size: 18px; }
.plxd__mbitem.is-active { color: var(--plxd-green); }

/* ---- Responsive (basic; polish later) ----------------------------------- */
@media (max-width: 1080px) {
	.plxd { grid-template-columns: 1fr; }
	.plxd__side { flex-direction: row; flex-wrap: wrap; }
	.plxd__nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
	.plxd__navitem { width: auto; }
	.plxd__promo { flex: 1; min-width: 220px; }
	.plxd__row--hero, .plxd__row--mid { grid-template-columns: 1fr; }
	.plxd__ach, .plxd__recent { grid-template-columns: repeat(3, 1fr); }
	.plxd__main { min-width: 0; width: 100%; }
}
@media (max-width: 720px) {
	/* Hide the desktop sidebar; use the bottom bar instead. */
	.plxd__side { display: none; }
	.plxd__mobilebar { display: flex; }
	.plxd { padding: 14px 14px 84px; grid-template-columns: 1fr; width: 100%; }
	/* Every row + block spans the full width, single column. */
	.plxd__row, .plxd__row--hero, .plxd__row--mid { grid-template-columns: 1fr !important; gap: 14px; }
	.plxd__hero, .plxd__continue, .plxd__card, .plxd__block, .plxd__tiles { width: 100%; box-sizing: border-box; }
	.plxd__block { margin-bottom: 14px; }
}
@media (max-width: 560px) {
	.plxd__hero-stats { grid-template-columns: repeat(2, 1fr); }
	.plxd__topup-grid { grid-template-columns: repeat(3, 1fr); }
	.plxd__tiles { grid-template-columns: 1fr 1fr; }
	.plxd__ach, .plxd__recent { grid-template-columns: repeat(2, 1fr); }
	.plxd__hero-id { flex-wrap: nowrap; gap: 12px; }
	.plxd__hero-name { font-size: 20px !important; }
	.plxd__hero-emblem { width: 60px; height: 60px; }
}

/* ---- Watch-ad modal ----------------------------------------------------- */
.plxd-ad {
	position: fixed; inset: 0; z-index: 3000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(3, 10, 7, 0.82); backdrop-filter: blur(6px);
	padding: 20px;
}
.plxd-ad__box {
	width: 100%; max-width: 380px;
	background: #0b1d16; border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px; overflow: hidden;
}
.plxd-ad__screen {
	min-height: 220px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 14px;
	background: radial-gradient(120% 90% at 50% 0%, #123528, #0b1d16);
	color: #e7f2ec; padding: 30px;
}
.plxd-ad__spin {
	width: 46px; height: 46px; border-radius: 50%;
	border: 4px solid rgba(255,255,255,0.15); border-top-color: #1cbf55;
	animation: plxd-spin 0.9s linear infinite;
}
@keyframes plxd-spin { to { transform: rotate(360deg); } }
.plxd-ad__label { font-size: 15px; font-weight: 600; text-align: center; }
.plxd-ad__count { font-size: 30px; font-weight: 800; color: #1cbf55; }
.plxd-ad__done i { font-size: 54px; color: #1cbf55; }
.plxd-ad__foot { padding: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.plxd-ad__skip {
	width: 100%; padding: 12px; border: 0; border-radius: 10px;
	background: linear-gradient(135deg, #1cbf55, #12a548); color: #fff;
	font-weight: 700; font-size: 15px; cursor: pointer;
}
.plxd-ad__skip:disabled { opacity: 0.5; cursor: default; background: #26332c; }

/* ---- Profile top bar (reference header) --------------------------------- */
.plxd__topbar {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 16px 32px;
	background: #04120e;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	box-sizing: border-box;
}

/* Brand */
.plxd__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.plxd__brand-mark,
.plxd__brand-logo {
	width: 44px; height: 44px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #17bf52, #12a548);
	color: #fff; font-weight: 900; font-size: 24px;
	box-shadow: 0 6px 16px rgba(23, 191, 82, 0.3);
	overflow: hidden;
}
.plxd__brand-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Logo-only variant: show the site logo at natural height, no green box. */
.plxd__brand-logo--only {
	width: auto; height: 48px;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0;
	display: flex; align-items: center;
}
.plxd__brand-logo--only img { width: auto; max-width: 220px; object-fit: contain; }
.plxd__brand-text b { display: block; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; }
.plxd__brand-text em { font-style: normal; font-size: 11px; color: var(--plxd-muted); }

/* Centered nav */
.plxd__topnav { flex: 1; display: flex; justify-content: center; }
.plxd__topnav-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.plxd__topnav-menu a { color: #cfe0d6; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; transition: color 0.15s ease; }
.plxd__topnav-menu a:hover { color: var(--plxd-green); }
.plxd__topnav-menu .current-menu-item > a { color: var(--plxd-green); }

/* Tools */
.plxd__toptools { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
/* Centered search (nav removed) */
.plxd__topsearch--center {
	flex: 1;
	max-width: 560px;
	margin: 0 auto;
}
.plxd__topsearch {
	display: flex; align-items: center; gap: 8px;
	background: #0b1d16; border: 1px solid rgba(255,255,255,0.07);
	border-radius: 999px; padding: 11px 18px; min-width: 240px;
}
.plxd__topsearch i { color: var(--plxd-muted); font-size: 13px; }
.plxd__topsearch input { border: 0; outline: 0; background: transparent; color: var(--plxd-text); font-size: 14px; width: 100%; }
.plxd__topsearch input::placeholder { color: var(--plxd-muted); }

.plxd__bell {
	position: relative; width: 42px; height: 42px; border-radius: 50%;
	border: 0; background: #0f2319; color: #cfe0d6; cursor: pointer; font-size: 16px;
}
.plxd__bell-badge {
	position: absolute; top: -2px; right: -2px;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
	background: #e03131; color: #fff; font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #04120e;
}

.plxd__topuser {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--plxd-line); background: #0b1d16; cursor: pointer; padding: 5px 12px 5px 6px;
	border-radius: 999px; transition: border-color 0.15s ease, background 0.15s ease;
}
.plxd__topuser:hover { border-color: var(--plxd-green); background: #10281e; }
.plxd__topuser-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--plxd-green); }
.plxd__topuser-av img, .plxd__topuser-av .avatar { width: 100%; height: 100%; object-fit: cover; }
.plxd__topuser-meta { text-align: left; }
.plxd__topuser-meta b { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.1; }
.plxd__topuser-meta em { font-style: normal; font-size: 11.5px; color: var(--plxd-green); }
.plxd__topuser i { color: var(--plxd-muted); font-size: 12px; }

@media (max-width: 1080px) {
	.plxd__topnav { display: none; }
}
@media (max-width: 720px) {
	.plxd__topbar { gap: 10px; padding: 12px 14px; }
	/* Hide the header search on mobile per design. */
	.plxd__topsearch--center { display: none; }
	.plxd__brand { margin-right: auto; }
	.plxd__brand-text em { display: none; }
	.plxd__topuser-meta { display: none; }
	.plxd { padding: 14px 14px 84px; }
	.plxd__hero { padding: 18px; }
	.plxd__hero-name { font-size: 22px !important; }
	.plxd__continue-art { height: 170px; }
}
@media (max-width: 560px) {
	.plxd__hero-id { flex-wrap: wrap; }
	.plxd__hero-emblem { display: none; }
	.plxd__topbar { gap: 8px; padding: 10px 12px; }
}

/* ---- User dropdown menu ------------------------------------------------- */
.plxd__userwrap { position: relative; }

.plxd__topuser i { transition: transform 0.18s ease; }
.plxd__userwrap.is-open .plxd__topuser i.fa-chevron-down { transform: rotate(180deg); }

.plxd__usermenu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 210px;
	background: #0b1d16;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	z-index: 1000;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease;
	pointer-events: none;
}
.plxd__userwrap.is-open .plxd__usermenu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.plxd__usermenu-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 13px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--plxd-text);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}
.plxd__usermenu-item i { width: 18px; text-align: center; color: var(--plxd-muted); }
.plxd__usermenu-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.plxd__usermenu-item:hover i { color: var(--plxd-green); }

.plxd__usermenu-item--danger { color: #fff; }
.plxd__usermenu-item--danger i { color: #ff5c5c; }
.plxd__usermenu-item--danger:hover { background: rgba(255, 92, 92, 0.14); color: #fff; }
.plxd__usermenu-item--danger:hover i { color: #ff8080; }
.plxd__usermenu-item--danger:hover i { color: #ff8080; }

.plxd__usermenu-sep { height: 1px; background: rgba(255, 255, 255, 0.07); margin: 6px 4px; }

/* =========================================================================
   Dark-theme overrides for the REUSED legacy panels (Play / Achievements /
   Missions / Rewards / Leaderboard / Account) so they match the premium look
   instead of showing the old light theme's white backgrounds.
   ========================================================================= */
.playrox-dash--premium .plxd__panel {
	color: var(--plxd-text);
}

/* Any legacy card/box/panel surface -> dark card. */
.playrox-dash--premium .plxd__panel .playrox-resume,
.playrox-dash--premium .plxd__panel .playrox-card,
.playrox-dash--premium .plxd__panel .playrox-cards > *,
.playrox-dash--premium .plxd__panel .playrox-account__block,
.playrox-dash--premium .plxd__panel .playrox-jumpback,
.playrox-dash--premium .plxd__panel .playrox-earn,
.playrox-dash--premium .plxd__panel .playrox-invite,
.playrox-dash--premium .plxd__panel .playrox-invite__box,
.playrox-dash--premium .plxd__panel .playrox-ledger,
.playrox-dash--premium .plxd__panel .playrox-dash-leaders,
.playrox-dash--premium .plxd__panel .playrox-dash-leaders__me,
.playrox-dash--premium .plxd__panel .playrox-blank,
.playrox-dash--premium .plxd__panel .playrox-shop,
.playrox-dash--premium .plxd__panel .playrox-trophies__item,
.playrox-dash--premium .plxd__panel .playrox-reward-card {
	background: var(--plxd-panel) !important;
	border: 1px solid var(--plxd-line) !important;
	color: var(--plxd-text) !important;
	box-shadow: none !important;
}

/* Headings + text inside legacy panels. */
.playrox-dash--premium .plxd__panel h1,
.playrox-dash--premium .plxd__panel h2,
.playrox-dash--premium .plxd__panel h3,
.playrox-dash--premium .plxd__panel h4,
.playrox-dash--premium .plxd__panel .playrox-dash__h3,
.playrox-dash--premium .plxd__panel .playrox-card__title,
.playrox-dash--premium .plxd__panel .playrox-resume__title {
	color: #fff !important;
}
.playrox-dash--premium .plxd__panel .playrox-dash__muted,
.playrox-dash--premium .plxd__panel .playrox-resume__meta,
.playrox-dash--premium .plxd__panel .playrox-card__stat,
.playrox-dash--premium .plxd__panel .playrox-resume__eyebrow,
.playrox-dash--premium .plxd__panel p {
	color: var(--plxd-muted) !important;
}

/* Inputs inside legacy panels. */
.playrox-dash--premium .plxd__panel .playrox-input {
	background: rgba(0,0,0,0.3) !important;
	border: 1px solid var(--plxd-line) !important;
	color: var(--plxd-text) !important;
}

/* Legacy primary buttons -> premium green. */
.playrox-dash--premium .plxd__panel .playrox-dash__btn--primary,
.playrox-dash--premium .plxd__panel .playrox-dash__btn--light {
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%)) !important;
	color: var(--plxbtn-text-active, #fff) !important;
	border: 0 !important;
}

/* Section/tab wrappers should never impose a light background. */
.playrox-dash--premium .plxd__panel .playrox-dash__body,
.playrox-dash--premium .plxd__panel .playrox-dash__split,
.playrox-dash--premium .plxd__panel .playrox-account,
.playrox-dash--premium .plxd__panel .playrox-tabs__panel {
	background: transparent !important;
}

/* ---- Notification dropdown ---------------------------------------------- */
.plxd__bellwrap { position: relative; }
.plxd__bellmenu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 300px;
	background: #0b1d16;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	z-index: 1000;
	opacity: 0; transform: translateY(-6px); pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.plxd__bellwrap.is-open .plxd__bellmenu { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Mobile: never let the dropdown spill off-screen. Pin it to the viewport
   with safe margins instead of a fixed 300px anchored to the bell. */
@media (max-width: 560px) {
	.plxd__bellmenu {
		position: fixed;
		top: 64px;
		right: 12px;
		left: 12px;
		width: auto;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}
.plxd__bellmenu-head { padding: 8px 10px; font-weight: 700; color: #fff; font-size: 14px; }
.plxd__notif { display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: 10px; }
.plxd__notif:hover { background: rgba(255,255,255,0.04); }
.plxd__notif-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 15px; }
.plxd__notif-body b { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.plxd__notif-body em { font-style: normal; font-size: 12px; color: var(--plxd-muted); }
.plxd__bellmenu-all { width: 100%; margin-top: 6px; padding: 10px; border: 0; border-radius: 10px; background: rgba(28,191,85,0.12); color: var(--plxd-green); font-weight: 700; font-size: 13px; cursor: pointer; }

/* ---- Game library (Play Games tab) -------------------------------------- */
.plxd-lib { margin-top: 28px; }
.plxd-lib__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.plxd-lib__head h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.plxd-lib__head h3 i { color: var(--plxd-green); }
.plxd-lib__filters { display: flex; gap: 8px; }
.plxd-lib__filter {
	border: 1px solid var(--plxd-line); background: transparent; color: var(--plxd-muted);
	padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer;
	transition: all 0.15s ease;
}
.plxd-lib__filter:hover { color: var(--plxd-text); border-color: var(--plxd-green); }
.plxd-lib__filter.is-active { background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%)); color: var(--plxbtn-text-active, #fff); border-color: transparent; }

.plxd-lib__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
}
.plxd-lib__card {
	border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
	transition: transform 0.15s ease;
}
.plxd-lib__card:hover { transform: translateY(-4px); }
.plxd-lib__card[hidden] { display: none; }
.plxd-lib__thumb {
	display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px;
	background-size: cover; background-position: center; background-color: #14283a;
	position: relative; margin-bottom: 10px; overflow: hidden;
	border: 1px solid var(--plxd-line);
}
.plxd-lib__play {
	position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(34, 197, 94, 0.92); color: #fff; border-radius: 50%; font-size: 18px;
	opacity: 0; transform: scale(0.8); transition: all 0.18s ease;
}
.plxd-lib__card:hover .plxd-lib__play { opacity: 1; transform: scale(1); }
.plxd-lib__badge {
	position: absolute; top: 10px; right: 10px;
	background: rgba(0,0,0,0.6); color: var(--plxd-gold); font-size: 12px; font-weight: 700;
	padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; gap: 5px;
}
.plxd-lib__badge--free { color: var(--plxd-green-bright, #3ce675); }
.plxd-lib__name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }

@media (max-width: 560px) {
	.plxd-lib__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =========================================================================
   Account Settings page
   ========================================================================= */
.plxs__head { margin-bottom: 22px; }
.plxs__head h2 { margin: 0 0 4px; color: #fff; font-size: 28px; font-weight: 800; }
.plxs__head p { margin: 0; color: var(--plxd-muted); font-size: 14px; }

.plxs__grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }

/* Profile card */
.plxs__profile {
	background: linear-gradient(150deg, #0d3325 0%, #0b1d16 60%);
	border: 1px solid var(--plxd-line); border-radius: 18px; padding: 22px; margin-bottom: 20px;
}
.plxs__profile-top { display: flex; align-items: center; gap: 18px; }
.plxs__avatar { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--plxd-green), var(--plxd-gold)); }
.plxs__avatar img, .plxs__avatar .avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0f2318; }
.plxs__avatar-edit { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--plxd-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 2px solid #0b1d16; }
.plxs__profile-meta { flex: 1; min-width: 0; }
.plxs__profile-meta h3 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; }
.plxs__profile-meta p { margin: 2px 0 8px; color: var(--plxd-muted); font-size: 13.5px; }
.plxs__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,202,60,.14); color: var(--plxd-gold); font-size: 12.5px; font-weight: 700; }
.plxs__edit { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1px solid var(--plxd-green); border-radius: 10px; background: rgba(34,197,94,.1); color: var(--plxd-green-bright, #3ce675); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.plxs__edit:hover { background: rgba(34,197,94,.18); }
.plxs__profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--plxd-line); }
.plxs__pstat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.plxs__pstat i { font-size: 18px; margin-bottom: 4px; }
.plxs__pstat b { color: #fff; font-size: 18px; font-weight: 800; }
.plxs__pstat em { font-style: normal; font-size: 11px; color: var(--plxd-muted); }

/* Sections */
.plxs__section { background: var(--plxd-panel); border: 1px solid var(--plxd-line); border-radius: 18px; padding: 8px 20px; margin-bottom: 20px; }
.plxs__section-head { display: flex; align-items: center; gap: 9px; padding: 16px 0 12px; color: var(--plxd-green-bright, #3ce675); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; }
.plxs__row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--plxd-line); }
.plxs__row-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; color: var(--plxd-muted); flex: 0 0 auto; }
.plxs__row-label { color: #fff; font-size: 14.5px; font-weight: 600; flex: 0 0 auto; min-width: 160px; }
.plxs__row-value { color: var(--plxd-muted); font-size: 14px; flex: 1; }
.plxs__verified { color: var(--plxd-green-bright, #3ce675); font-size: 12px; font-weight: 700; border: 1px solid rgba(60,230,117,.4); border-radius: 999px; padding: 3px 10px; }
.plxs__row-chev, .plxs__row-ext { color: var(--plxd-muted); font-size: 13px; }
.plxs__row:hover { background: rgba(255,255,255,0.015); }
.plxs__row:hover .plxs__row-ic { color: var(--plxd-green); }

/* Toggle switch */
.plxs__toggle { width: 42px; height: 24px; border-radius: 999px; background: #26332c; position: relative; cursor: pointer; flex: 0 0 auto; transition: background 0.16s ease; }
.plxs__toggle span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.16s ease; }
.plxs__toggle.is-on { background: var(--plxd-green); }
.plxs__toggle.is-on span { transform: translateX(18px); }

/* Right rail */
.plxs__rail { display: flex; flex-direction: column; gap: 20px; }
.plxs__railcard { background: var(--plxd-panel); border: 1px solid var(--plxd-line); border-radius: 18px; padding: 20px; }
.plxs__railhead { color: var(--plxd-green-bright, #3ce675); font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 16px; }
.plxs__overview { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.plxs__overview-emblem { position: relative; width: 72px; height: 72px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.plxs__overview-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plxs__overview-emblem polygon { fill: #0f3325; stroke: #f6b93b; stroke-width: 4; filter: drop-shadow(0 0 12px rgba(246,185,59,.5)); }
.plxs__overview-emblem i { position: relative; color: #ffca3c; font-size: 26px; }
.plxs__overview-text b { display: block; color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.plxs__overview-text p { margin: 0; color: var(--plxd-muted); font-size: 12.5px; line-height: 1.5; }
.plxs__overview-xplabel { color: var(--plxd-text); font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.plxs__overview-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; }
.plxs__overview-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--plxd-green), #6bd968); border-radius: 999px; }

.plxs__quickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plxs__quick { background: rgba(0,0,0,0.22); border-radius: 14px; padding: 16px; }
.plxs__quick i { font-size: 18px; display: block; margin-bottom: 8px; }
.plxs__quick b { display: block; color: #fff; font-size: 20px; font-weight: 800; }
.plxs__quick em { font-style: normal; font-size: 11.5px; color: var(--plxd-muted); }

.plxs__signout-text { color: var(--plxd-muted); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.playrox-dash--premium a.plxs__signout,
.plxs__signout { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 1px solid rgba(230,69,69,.6); border-radius: 12px; background: rgba(230,69,69,.16); color: #fff !important; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background 0.15s ease; }
.plxs__signout i { color: #fff !important; }
.playrox-dash--premium a.plxs__signout:hover,
.plxs__signout:hover { background: #e64545; color: #fff !important; border-color: #e64545; }
.plxs__signout:hover i { color: #fff !important; }

@media (max-width: 1080px) {
	.plxs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.plxs__head h2 { font-size: 22px; }
	.plxs__profile { padding: 18px; }
	.plxs__profile-top { flex-wrap: wrap; gap: 14px; }
	.plxs__profile-meta { flex: 1 1 auto; min-width: 0; }
	.plxs__profile-meta h3 { font-size: 19px; }
	.plxs__profile-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
	.plxs__section { padding: 6px 16px; }
	.plxs__row { flex-wrap: wrap; gap: 10px 12px; padding: 14px 0; }
	.plxs__row-label { min-width: 0; flex: 1 1 auto; }
	.plxs__row-value { flex: 1 1 100%; order: 5; padding-left: 48px; font-size: 13px; }
	.plxs__country, .plxs__nameinput { max-width: 100%; width: 100%; }
	.plxs__verified { order: 3; }
	.plxs__quickgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.plxs__profile-stats { grid-template-columns: 1fr 1fr; }
	.plxs__pstat b { font-size: 16px; }
	.plxs__head h2 { font-size: 20px; }
	.plxs__row-value { padding-left: 0; }
	.plxs__row-ic { width: 30px; height: 30px; }
}

/* Settings — editable name + country dropdown */
.plxs__row--interactive { cursor: pointer; }
.plxs__country {
	background: rgba(0,0,0,0.3); border: 1px solid var(--plxd-line); color: var(--plxd-text);
	border-radius: 8px; padding: 7px 12px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.plxs__country:focus { outline: none; border-color: var(--plxd-green); }
.plxs__nameinput {
	background: rgba(0,0,0,0.3); border: 1px solid var(--plxd-green); color: var(--plxd-text);
	border-radius: 8px; padding: 7px 12px; font-size: 14px; font-family: inherit; flex: 1; max-width: 260px;
}
.plxs__nameinput:focus { outline: none; }
.plxs__nameedit { border: 0; background: transparent; cursor: pointer; padding: 6px; }
.plxs__nameedit .fa-check { color: var(--plxd-green); }
a.plxs__row { text-decoration: none; }

/* ---- Avatar picker modal ------------------------------------------------ */
.plxs__avatar-edit { border: 0; cursor: pointer; }
.plxs-avatarmodal {
	position: fixed; inset: 0; z-index: 4000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(3,10,7,0.82); backdrop-filter: blur(6px); padding: 20px;
}
.plxs-avatarmodal[hidden] { display: none; }
.plxs-avatarmodal__box {
	width: 100%; max-width: 440px; background: #0b1d16;
	border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 22px;
}
.plxs-avatarmodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.plxs-avatarmodal__head h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 800; }
.plxs-avatarmodal__close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #10281e; color: #cfe0d6; cursor: pointer; font-size: 15px; }
.plxs-avatarmodal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plxs-avatarmodal__item { position: relative; border: 2px solid transparent; border-radius: 50%; background: #10281e; padding: 0; cursor: pointer; aspect-ratio: 1/1; overflow: hidden; }
.plxs-avatarmodal__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.plxs-avatarmodal__item:hover { border-color: var(--plxd-green); }
.plxs-avatarmodal__item.is-selected { border-color: var(--plxd-green); }
.plxs-avatarmodal__check { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--plxd-green); color: #fff; display: none; align-items: center; justify-content: center; font-size: 11px; }
.plxs-avatarmodal__item.is-selected .plxs-avatarmodal__check { display: flex; }
.plxs-avatarmodal__empty { color: var(--plxd-muted); text-align: center; margin: 20px 0; }
@media (max-width: 560px) {
	.plxs-avatarmodal__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Controllable button hover states (driven by admin colour controls) - */
.playrox-dash--premium .plxd__promo-btn:hover,
.playrox-dash--premium .plxd__resume:hover,
.playrox-dash--premium .plxd__btn--green:hover,
.playrox-dash--premium .plxd__panel .playrox-dash__btn--primary:hover,
.playrox-dash--premium .plxd__panel .playrox-dash__btn--light:hover {
	background: var(--plxbtn-bg-hover, #1b3a2b) !important;
	color: var(--plxbtn-text-hover, #fff) !important;
	filter: brightness(1.02);
}
.playrox-dash--premium .plxd-lib__filter.is-active:hover {
	background: var(--plxbtn-bg-hover, #1b3a2b);
	color: var(--plxbtn-text-hover, #fff);
}

/* ==== Avatar Shop — reference look ====================================== */
.playrox-dash--premium .plxacct-card { padding: 0; background: transparent !important; border: 0 !important; }
.plxacct-signin {
	display: flex; align-items: center; gap: 14px;
	padding: 0; border-radius: 0;
	background: transparent; border: 0;
}
.plxacct-signin__ic {
	width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.4);
	color: #3ce675; font-size: 18px;
}
.plxacct-signin__title { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: #fff; }
.plxacct-signin__value { font-size: 14px; font-weight: 700; color: #3ce675; }

.playrox-dash--premium .playrox-shop { position: relative; }
.playrox-shop__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.playrox-shop__headleft { display: flex; align-items: center; gap: 14px; }
.playrox-shop__headic {
	width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, #23c55e, #16a34a); color: #fff; font-size: 18px;
}
.playrox-shop__title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; }
.playrox-shop__subtitle { margin: 3px 0 0; font-size: 13px; color: var(--plxd-muted); }
.playrox-shop__balwrap { display: flex; align-items: center; gap: 8px; }
.playrox-shop__balance {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 15px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #ffd94a;
	background: rgba(255,217,74,0.1); border: 1px solid rgba(255,217,74,0.32);
}
.playrox-shop__topup {
	width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--plxd-line);
	background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.playrox-shop__topup:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.5); color: #3ce675; }

/* Category tabs */
.playrox-shop__tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.playrox-shop__tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: 11px; cursor: pointer;
	background: rgba(255,255,255,0.03); border: 1px solid var(--plxd-line);
	color: var(--plxd-muted); font-weight: 700; font-size: 14px;
	transition: all 0.15s ease;
}
.playrox-shop__tab i { font-size: 13px; }
.playrox-shop__tab:hover { color: #fff; border-color: rgba(34,197,94,0.4); }
.playrox-shop__tab.is-active {
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%));
	color: var(--plxbtn-text-active, #fff); border-color: transparent;
}
.playrox-shop__tab.is-active i { color: var(--plxbtn-text-active, #fff); }

/* Section label */
.playrox-shop__grouplabel { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--plxd-muted); }
.playrox-shop__groupdot { width: 10px; height: 10px; border-radius: 3px; background: #22c55e; }

/* Grid + cards */
.playrox-shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 26px; }
.playrox-shop__item {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 22px 16px 16px; border-radius: 16px;
	background: var(--plxd-panel2); border: 1px solid var(--plxd-line);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.playrox-shop__item:hover { transform: translateY(-2px); border-color: rgba(34,197,94,0.35); }
.playrox-shop__item.is-equipped { border-color: rgba(34,197,94,0.7); box-shadow: 0 0 0 1px rgba(34,197,94,0.4), 0 0 26px rgba(34,197,94,0.12); }
.playrox-shop__ribbon {
	position: absolute; top: 0; right: 0; width: 46px; height: 46px;
	background: linear-gradient(135deg, transparent 50%, #16a34a 50%);
	color: #fff; font-size: 12px;
}
.playrox-shop__ribbon i { position: absolute; top: 7px; right: 6px; }
.playrox-shop__preview {
	width: 92px; height: 92px; border-radius: 50%; margin-bottom: 14px;
	display: flex; align-items: center; justify-content: center;
	font-size: 34px; color: #fff; background: rgba(0,0,0,0.25);
}
.playrox-shop__name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.playrox-shop__price { font-size: 14px; font-weight: 800; color: #ffd94a; margin-bottom: 10px; }
.playrox-shop__price i { margin-right: 4px; }
.playrox-shop__state { font-size: 13px; font-weight: 700; color: #3ce675; margin-bottom: 10px; }
.playrox-shop__state i { margin-right: 4px; }
.playrox-shop__btn {
	width: 100%; padding: 10px; border-radius: 10px; cursor: pointer;
	font-weight: 800; font-size: 14px;
	background: transparent; border: 1px solid rgba(34,197,94,0.5); color: #3ce675;
	transition: all 0.15s ease;
}
.playrox-shop__btn--buy:hover, .playrox-shop__btn--equip:hover {
	background: var(--plxbtn-bg-active, linear-gradient(180deg, #23c55e 0%, #16a34a 100%));
	color: var(--plxbtn-text-active, #fff); border-color: transparent;
}
.playrox-shop__btn.is-equipped { border-color: var(--plxd-line); color: var(--plxd-muted); background: rgba(255,255,255,0.03); cursor: default; }

/* ---- Dashboard "Top Up Coins" block (total + stepper + purchase) ------- */
.plxd__topup-total {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-radius: 13px; margin-bottom: 16px;
	background: rgba(255,217,74,0.08); border: 1px solid rgba(255,217,74,0.28);
}
.plxd__topup-total-label { font-size: 13px; color: var(--plxd-muted); font-weight: 600; }
.plxd__topup-total-val { font-size: 20px; font-weight: 800; color: #ffd94a; }
.plxd__topup-total-val i { margin-right: 6px; }
.plxd__topup-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--plxd-muted); margin: 0 0 8px; }
.plxd__topup-qty { display: flex; align-items: stretch; gap: 8px; }
.plxd__topup-step {
	width: 46px; border: 1px solid var(--plxd-line); border-radius: 11px;
	background: rgba(255,255,255,0.05); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer;
}
.plxd__topup-step:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); }
.plxd__topup-input {
	flex: 1; text-align: center; border: 1px solid var(--plxd-line); border-radius: 11px;
	background: rgba(0,0,0,0.3); color: #fff; font-size: 18px; font-weight: 800; padding: 12px;
	-moz-appearance: textfield;
}
.plxd__topup-input::-webkit-outer-spin-button, .plxd__topup-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plxd__topup-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.plxd__topup-chip {
	padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13px;
	background: rgba(255,255,255,0.04); border: 1px solid var(--plxd-line); color: rgba(255,255,255,0.75);
}
.plxd__topup-chip:hover { border-color: rgba(34,197,94,0.5); color: #fff; }
.plxd__topup-summary {
	display: flex; align-items: center; justify-content: space-between;
	margin: 16px 0; padding: 13px 16px; border-radius: 12px; background: rgba(255,255,255,0.04);
}
.plxd__topup-summary span { color: var(--plxd-muted); font-size: 14px; }
.plxd__topup-summary b { color: #ffd94a; font-size: 18px; font-weight: 800; }
.plxd__topup-purchase { width: 100%; padding: 13px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; }
.plxd__topup-purchase i { margin-right: 8px; }
.plxd__topup.is-locked { position: relative; }
.plxd__topup.is-locked .plxd__topup-total { filter: none; }

/* ---- Account: Display name block — refined padding + look ------------- */
.playrox-dash--premium .plxd__panel .playrox-account__block {
	padding: 22px 24px !important;
	border-radius: 16px !important;
	margin-bottom: 16px;
}
.playrox-dash--premium .playrox-account__block .playrox-dash__h3 {
	font-size: 17px !important; font-weight: 800; margin: 0 0 14px;
}
.playrox-dash--premium .playrox-account__row {
	display: flex; align-items: stretch; gap: 12px; margin-bottom: 10px;
}
.playrox-dash--premium .plxd__panel .playrox-account__row .playrox-input {
	flex: 1; padding: 13px 16px !important; border-radius: 12px !important;
	font-size: 15px; font-weight: 600;
	background: rgba(0,0,0,0.32) !important; border: 1px solid var(--plxd-line) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.playrox-dash--premium .plxd__panel .playrox-account__row .playrox-input:focus {
	border-color: rgba(34,197,94,0.6) !important;
	box-shadow: 0 0 0 3px rgba(34,197,94,0.15) !important; outline: none;
}
.playrox-dash--premium .playrox-account__row .playrox-dash__btn {
	flex: 0 0 auto; padding: 0 26px; border-radius: 12px !important;
	font-weight: 800; font-size: 14px; white-space: nowrap;
}
.playrox-dash--premium .playrox-account__block .playrox-dash__muted {
	font-size: 13px; margin: 0;
}

/* ---- Account blocks: consistent single container ---------------------- */
.playrox-dash--premium .plxd__panel .playrox-account__block {
	margin-bottom: 16px;
}
/* Avatar shop sits inside the account container — no second box. */
.playrox-dash--premium .plxd__panel .playrox-account__block .playrox-shop {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---- Sign out text always white (button + dropdown item) -------------- */
.playrox-dash--premium .playrox-dash__btn--danger,
.playrox-dash--premium .playrox-dash__btn--danger:hover,
.playrox-dash--premium .plxd__panel .playrox-dash__btn--danger {
	color: #fff !important;
	background: rgba(255, 92, 92, 0.12) !important;
	border: 1px solid rgba(255, 92, 92, 0.35) !important;
}
.playrox-dash--premium .playrox-dash__btn--danger i { color: #ff6b6b !important; }

/* Mobile: solid dark-red sign-out button with white text/icon. */
@media (max-width: 768px) {
	.playrox-dash--premium .playrox-dash__btn--danger,
	.playrox-dash--premium .playrox-dash__btn--danger:hover,
	.playrox-dash--premium .plxd__panel .playrox-dash__btn--danger {
		color: #ffffff !important;
		background: #7f1d1d !important;
		border: 1px solid #991b1b !important;
	}
	.playrox-dash--premium .playrox-dash__btn--danger i { color: #ffffff !important; }
}

.plxd__usermenu-item--danger,
.plxd__usermenu-item--danger:hover,
.plxd__usermenu-item--danger span { color: #fff !important; }
.plxd__usermenu-item--danger i { color: #ff5c5c !important; }

/* ==== Custom button defaults (user-provided) =========================== */
.plxr[data-img-overlay="0"] .plxr__hero__head:not(.plxr__hero__head--flat) .plxr__hero__title,
.plxd__btn {
	text-shadow: none;
}
/* Default active/resume background = the shared dark-green gradient, but the
   admin colour control (--plxbtn-bg-active) overrides it when set. No emboss. */
.plxd__resume,
.plxd__navitem.is-active {
	background: var(--plxbtn-bg-active, linear-gradient(
		180deg,
		#1F6E35 0%,
		#1D6A34 20%,
		#195B2E 60%,
		#154E28 100%
	));
	border: 0;
	box-shadow: none;
	overflow: hidden;
}
.plxd__navitem.is-active { color: var(--plxbtn-text-active, #fff); }
.plxd__navitem.is-active i { color: var(--plxbtn-text-active, #fff); }

/* ==== Mobile UI polish (reference-inspired, keeps existing nav) ========= */
@media (max-width: 560px) {
	/* Tighter page padding, more breathing room between sections. */
	.plxd { padding: 12px 12px 88px; }
	.plxd__row, .plxd__row--hero, .plxd__row--mid { gap: 16px !important; }

	/* Hero card: rounder, richer, name/level stack cleanly. */
	.plxd__hero { border-radius: 20px; padding: 18px; }
	.plxd__hero-id { gap: 14px; margin-bottom: 16px; }
	.plxd__hero-av { width: 74px; height: 74px; }
	.plxd__hero-av img, .plxd__hero-av .avatar { width: 74px; height: 74px; }
	.plxd__hero-name { font-size: 22px !important; line-height: 1.1; }
	.plxd__hero-sub { font-size: 13px; margin: 3px 0 8px; }
	.plxd__hero-emblem { width: 66px; height: 66px; }

	/* Stat strip: keep all 4 in one compact row like the reference. */
	.plxd__hero-stats { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
	.plxd__hero-stat { padding: 8px 4px !important; text-align: center; }
	.plxd__hero-stat b { font-size: 15px !important; }
	.plxd__hero-stat em, .plxd__hero-stat span:last-child { font-size: 10px !important; }
	.plxd__hero-stat-ic, .plxd__hero-stat i { font-size: 15px !important; }

	/* Continue-playing banner: taller, rounded, readable. */
	.plxd__continue { border-radius: 20px; min-height: 200px; }

	/* Cards: rounder corners, consistent inner padding. */
	.plxd__card, .plxd__block { border-radius: 18px; }

	/* 2x2 stat tiles stay 2-up but tighter. */
	.plxd__tiles { grid-template-columns: 1fr 1fr !important; gap: 12px; }

	/* Achievements + Recently Played become horizontal scrollers (like ref),
	   instead of a cramped 2-column grid. */
	.plxd__ach, .plxd__recent {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
		margin: 0 -12px; padding-left: 12px; padding-right: 12px; /* edge bleed */
	}
	.plxd__ach::-webkit-scrollbar, .plxd__recent::-webkit-scrollbar { height: 0; }
	.plxd__ach > *, .plxd__recent > * {
		flex: 0 0 auto; scroll-snap-align: start;
	}
	.plxd__ach > * { width: 86px; }
	.plxd__recent > * { width: 160px; }

	/* Section headers: consistent size + spacing. */
	.plxd__section-head, .plxd__block-head { margin-bottom: 12px; }
}

/* Very small phones: keep the 4-stat strip legible. */
@media (max-width: 380px) {
	.plxd__hero-stats { gap: 4px; }
	.plxd__hero-stat b { font-size: 14px !important; }
	.plxd__hero-stat em, .plxd__hero-stat span:last-child { font-size: 9px !important; }
}

/* ==== Premium refinement pass — reduce cartoonish feel ================== */
/* Tighter, more consistent corner radii across the dashboard. */
.playrox-dash--premium .plxd__hero { border-radius: 16px; }
.playrox-dash--premium .plxd__continue { border-radius: 16px; }
.playrox-dash--premium .plxd__card,
.playrox-dash--premium .plxd__block { border-radius: 14px; }

/* Hero: calmer gradient, refined border + subtle depth (no glow). */
.playrox-dash--premium .plxd__hero {
	background: linear-gradient(160deg, #12241c 0%, #0d1b16 60%, #0b1712 100%);
	border: 1px solid var(--plxd-line-strong);
	box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.playrox-dash--premium .plxd__hero-name { font-weight: 750; letter-spacing: -0.02em; }

/* Cards + blocks: flat panel, hairline border, no heavy shadow. */
.playrox-dash--premium .plxd__card,
.playrox-dash--premium .plxd__block {
	background: var(--plxd-panel);
	border: 1px solid var(--plxd-line);
	box-shadow: none;
}
.playrox-dash--premium .plxd__card-head,
.playrox-dash--premium .plxd__block-head,
.playrox-dash--premium .plxd__section-head { font-weight: 700; letter-spacing: -0.01em; }

/* Stat blocks: subtler surface, thin border instead of flat black fill. */
.playrox-dash--premium .plxd__hstat {
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--plxd-line);
	border-radius: 12px;
}
.playrox-dash--premium .plxd__hstat b { font-weight: 750; letter-spacing: -0.01em; }

/* Stat tiles: consistent hairline cards. */
.playrox-dash--premium .plxd__tile {
	background: var(--plxd-panel);
	border: 1px solid var(--plxd-line);
	box-shadow: none;
	border-radius: 12px;
}

/* Avatar ring: quieter, more refined (less neon glow). */
.playrox-dash--premium .plxd__hero-av {
	background: linear-gradient(160deg, #2ba85a, #157a43);
	box-shadow: 0 0 0 1px rgba(34,180,85,0.35);
}

/* Nav: refined active state weight, calmer inactive. */
.playrox-dash--premium .plxd__navitem { font-weight: 600; }
.playrox-dash--premium .plxd__navitem.is-active { font-weight: 700; }

/* Progress bars: thinner, refined. */
.playrox-dash--premium .plxd__xp-bar,
.playrox-dash--premium .plxd__continue-prog,
.playrox-dash--premium .plxd__mission-bar { height: 6px; }

/* Soften bright accent text to the refined green. */
.playrox-dash--premium .plxd__continue-head span { color: var(--plxd-green-bright); font-weight: 650; }

/* Reduce the "pill everywhere" look on small chips — moderate radius. */
.playrox-dash--premium .plxd__hero-badge { border-radius: 8px; }

/* Mobile bottom bar: cleaner, flatter. */
.playrox-dash--premium .plxd__mobilebar {
	background: rgba(9,18,15,0.92);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--plxd-line);
	box-shadow: none;
}

/* ==== Migrated from Customizer "Additional CSS" ======================= */
button, input[type="button"] {
	outline: 0px;
}
.plxd__resume,
.plxd__navitem.is-active {
	background: linear-gradient(
		180deg,
		#1F6E35 0%,
		#1D6A34 20%,
		#195B2E 60%,
		#154E28 100%
	);
	border: 1px solid rgba(120, 255, 150, 0.25);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.35),
		0 0 18px rgba(63, 255, 118, 0.18),
		0 8px 18px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}
.playrox-shop__tab.is-active {
	background: #23c45d75;
}

/* -------------------------------------------------------------------------
   Settings page — shared section surface
   ---------------------------------------------------------------------- */

.plxs__section,
.plxs__railcard,
.plxs__profile,
.plxs__overview,
.plxs__quick,
.plxs__pstat,
.plxs-avatarmodal__box {
	background: #032124;
}

/* The profile header ran a green gradient; flatten it to match. */
.plxs__profile { background-image: none; }

/* -------------------------------------------------------------------------
   Settings rows on mobile
   -------------------------------------------------------------------------
   The ≤768px block wraps the row and gives the value `flex: 1 1 100%`, which
   pushed the icon onto a line of its own where it stretched the full width
   and shunted the label below it. Pinning the icon and keeping it on the
   label's line restores a normal two-line row.
   ---------------------------------------------------------------------- */

@media (max-width: 768px) {

	.plxs__row {
		display: grid;
		grid-template-columns: 34px 1fr auto;
		grid-template-areas:
			"icon label action"
			"icon value value";
		align-items: center;
		column-gap: 12px;
		row-gap: 4px;
		padding: 14px 0;
	}

	.plxs__row-ic {
		grid-area: icon;
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		align-self: start;
		margin-top: 2px;
	}

	.plxs__row-label {
		grid-area: label;
		min-width: 0;
		font-size: 14px;
	}

	.plxs__row-value {
		grid-area: value;
		order: 0;
		padding-left: 0;
		font-size: 13px;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Chevrons, toggles, selects and the verified pill share the right cell. */
	.plxs__row-chev,
	.plxs__row-ext,
	.plxs__toggle,
	.plxs__verified,
	.plxs__country,
	.plxs__nameinput {
		grid-area: action;
		justify-self: end;
		order: 0;
	}

	.plxs__country,
	.plxs__nameinput { max-width: 100%; width: auto; min-width: 0; }

	/* Rows that carry both a pill and a control need a second line. */
	.plxs__row:has(.plxs__verified) {
		grid-template-areas:
			"icon label action"
			"icon value value";
	}
}

@media (max-width: 560px) {
	.plxs__row { grid-template-columns: 30px 1fr auto; column-gap: 10px; }
	.plxs__row-ic { width: 30px; height: 30px; flex: 0 0 30px; }
	.plxs__country, .plxs__nameinput { width: 100%; grid-area: value; justify-self: stretch; }
}