/* ============================================================
   FPL Mojo — design system

   Dark terminal + signal amber. Deliberately shares no colour with the
   Premier League / FPL palette (#37003c purple, #00ff87 green): this is an
   independent product and must not read as an official site.
   ============================================================ */

:root {
	/* Brand — deep indigo base, amber as the single signal colour */
	--mj-base:          #131C31;
	--mj-base-deep:     #0B0F1A;
	--mj-base-soft:     #1E2942;
	--mj-amber:         #FFB020;
	--mj-amber-deep:    #E08A00;
	--mj-cyan:          #4CC9E0;

	/* Surfaces */
	--mj-bg:            #0B0F1A;
	--mj-bg-elevated:   #131C31;
	--mj-bg-tint:       #18223A;
	--mj-divider:       #263149;

	/* Text */
	--mj-ink:           #E9EDF7;
	--mj-ink-mid:       #A9B3C9;
	--mj-ink-muted:     #6F7B96;

	/* Data signals — legible on dark, distinct from the amber accent */
	--mj-pos:           #35D07F;
	--mj-neg:           #FF6B6B;

	/* Pitch — floodlit tactics board, not grass */
	--mj-pitch-light:   #17293F;
	--mj-pitch-dark:    #0D1728;
	--mj-pitch-line:    rgba(255,176,32,0.16);

	/* Effects — shadows read as depth against a dark ground */
	--mj-radius:        14px;
	--mj-radius-sm:     10px;
	--mj-radius-lg:     20px;
	--mj-shadow-sm:     0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.24);
	--mj-shadow:        0 4px 14px rgba(0,0,0,0.36), 0 1px 3px rgba(0,0,0,0.28);
	--mj-shadow-lg:     0 18px 48px rgba(0,0,0,0.52), 0 4px 12px rgba(0,0,0,0.36);
	--mj-shadow-brand:  0 8px 24px rgba(255,176,32,0.24);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html, body {
	background: var(--mj-bg);
	color: var(--mj-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100vh;
	background:
		radial-gradient(1200px 600px at 0% -10%, rgba(255,176,32,0.07), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(76,201,224,0.06), transparent 55%),
		var(--mj-bg);
	background-attachment: fixed;
}

a { color: var(--mj-amber); text-decoration: none; }
a:hover { color: var(--mj-amber-deep); text-decoration: underline; }

::selection { background: var(--mj-amber); color: var(--mj-base-deep); }

/* Branded scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(233,237,247,0.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(233,237,247,0.26); }

/* ------------------------------------------------------------
   Branded loader (used before GWT bootstraps)
   ------------------------------------------------------------ */
.mj-boot {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	color: var(--mj-ink);
}
.mj-boot img { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(255,176,32,0.28)); }
.mj-boot .mj-boot-title { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.3px; }
.mj-boot .mj-boot-sub   { font-size: 0.85rem; color: var(--mj-ink-muted); }
.mj-boot .mj-boot-spinner {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(233,237,247,0.14);
	border-top-color: var(--mj-amber);
	animation: mj-spin 0.9s linear infinite;
}
@keyframes mj-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Top app header
   ------------------------------------------------------------ */
.app-header {
	background:
		radial-gradient(800px 200px at 12% 120%, rgba(255,176,32,0.10), transparent 60%),
		linear-gradient(135deg, #1B2540 0%, #131C31 60%, #0B0F1A 100%);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 1030;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	box-shadow: 0 6px 18px rgba(0,0,0,0.42);
}
.app-header .app-brand {
	display: flex; align-items: center; gap: 12px;
	color: #fff; text-decoration: none;
}
.app-header .app-brand:hover { color: #fff; text-decoration: none; }
.app-header .app-brand img { height: 38px; width: auto; display: block; }
.app-header .app-title { font-weight: 800; letter-spacing: -0.3px; }

.app-header .gw-pill {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	white-space: nowrap;
	backdrop-filter: blur(6px);
}
.app-header .gw-pill .gw-pill-label {
	color: rgba(255,255,255,0.6);
	margin-right: 6px;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 1px;
}
.app-header .gw-pill.gw-pill-next .gw-pill-label { color: var(--mj-amber); }

.app-header .user-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 999px;
	padding: 4px 4px 4px 12px;
}
.app-header .user-chip .who {
	color: rgba(255,255,255,0.92);
	font-size: 0.85rem;
	font-weight: 500;
	max-width: 160px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-header .user-chip .avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mj-amber) 0%, var(--mj-amber-deep) 100%);
	color: var(--mj-base-deep);
	font-weight: 800; font-size: 0.78rem;
	display: inline-flex; align-items: center; justify-content: center;
}

.btn-ghost-light {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 10px;
	padding: 5px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background 0.15s ease, transform 0.1s ease;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); color: #fff; }
.btn-ghost-light:active { transform: translateY(1px); }

/* ------------------------------------------------------------
   Buttons (brand)
   ------------------------------------------------------------ */
.btn-mj-primary {
	background: linear-gradient(135deg, var(--mj-amber) 0%, var(--mj-amber-deep) 100%);
	color: #10182A;
	border: none;
	border-radius: 10px;
	font-weight: 600;
	padding: 8px 16px;
	box-shadow: var(--mj-shadow-brand);
	transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-mj-primary:hover { color: #10182A; filter: brightness(1.06); box-shadow: 0 10px 28px rgba(255,176,32,0.32); }
.btn-mj-primary:active { transform: translateY(1px); }
.btn-mj-primary:disabled { opacity: 0.7; filter: none; box-shadow: none; cursor: not-allowed; }

.btn-mj-accent {
	background: var(--mj-base-soft);
	color: var(--mj-amber);
	border: 1px solid rgba(255,176,32,0.42);
	border-radius: 10px;
	font-weight: 700;
	padding: 8px 16px;
	box-shadow: none;
	transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-mj-accent:hover { color: var(--mj-amber); background: #24314F; }
.btn-mj-accent:active { transform: translateY(1px); }

.btn-mj-outline {
	background: transparent;
	color: var(--mj-ink);
	border: 1.5px solid var(--mj-divider);
	border-radius: 10px;
	font-weight: 600;
	padding: 7px 14px;
	transition: background 0.15s, border-color 0.15s;
}
.btn-mj-outline:hover { background: var(--mj-bg-tint); border-color: var(--mj-amber); color: var(--mj-amber); }

/* ------------------------------------------------------------
   Section cards
   ------------------------------------------------------------ */
.card-section {
	border: 1px solid var(--mj-divider);
	border-radius: var(--mj-radius);
	background: var(--mj-bg-elevated);
	box-shadow: var(--mj-shadow);
	overflow: hidden;
}
.card-section .card-header {
	background: transparent;
	font-weight: 700;
	color: var(--mj-ink);
	border-bottom: 1px solid var(--mj-divider);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.card-section .card-header .section-eyebrow {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--mj-amber);
	font-weight: 700;
}
.card-section .card-body { padding: 16px 18px; }

/* Compact eyebrow for small subsections */
.eyebrow {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: 700;
	color: var(--mj-ink-muted);
}

/* ------------------------------------------------------------
   Pitch
   ------------------------------------------------------------ */
.pitch-wrap {
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
		linear-gradient(180deg, var(--mj-pitch-light) 0%, var(--mj-pitch-dark) 100%);
	border-radius: var(--mj-radius);
	padding: 26px 14px 22px;
	color: #fff;
	box-shadow: inset 0 0 80px rgba(0,0,0,0.30), 0 4px 14px rgba(0,0,0,0.10);
	position: relative;
	overflow: hidden;
}
.pitch-wrap::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,0.035) 50%, transparent 50%),
		linear-gradient(0deg,  rgba(255,255,255,0.02) 50%, transparent 50%);
	background-size: 80px 80px;
	pointer-events: none;
}
.pitch-wrap::after {
	/* Centre circle */
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 110px; height: 110px;
	border: 1px solid var(--mj-pitch-line);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.pitch-row {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 18px;
	position: relative;
}
.pitch-row:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Player chip (on pitch)
   ------------------------------------------------------------ */
.player-chip {
	width: 88px;
	text-align: center;
	color: #fff;
	transition: transform 0.15s ease;
}
.player-chip:hover { transform: translateY(-3px); }
.player-chip .shirt {
	position: relative;
	width: 60px; height: 66px;
	margin: 0 auto 5px;
	display: flex; align-items: flex-end; justify-content: center;
	border-radius: 6px;
}
.player-chip .shirt img {
	width: 60px; height: 60px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.40));
}
.player-chip .shirt .shirt-fallback {
	position: absolute; inset: 0;
	background: #fff;
	border-radius: 6px 6px 22px 22px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.25);
	display: flex; align-items: center; justify-content: center;
	color: var(--mj-base-deep);
	font-weight: 800;
	font-size: 0.85rem;
}
.player-chip .shirt.captain::after,
.player-chip .shirt.vice::after {
	position: absolute; top: -6px; right: -6px;
	width: 22px; height: 22px;
	font-weight: 800;
	font-size: 0.75rem;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.40);
	border: 1.5px solid rgba(255,255,255,0.92);
}
.player-chip .shirt.captain::after {
	content: "C";
	background: linear-gradient(135deg, #FFD36B, var(--mj-amber));
	color: var(--mj-base-deep);
}
.player-chip .shirt.vice::after {
	content: "V";
	background: linear-gradient(135deg, #DCE3F0, #A8B3C9);
	color: var(--mj-base-deep);
}
.player-chip .name {
	background: rgba(0,0,0,0.62);
	border-radius: 4px 4px 0 0;
	padding: 3px 6px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.player-chip .meta {
	background: var(--mj-base-soft);
	border-radius: 0 0 4px 4px;
	padding: 3px 5px;
	font-size: 0.72rem;
	font-weight: 600;
	opacity: 0.96;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

/* Same amber badge as .player-row .mojo, sized for the pitch chip. Mojo is the
   model's own number, so it is highlighted identically everywhere it appears. */
.player-chip .meta .mojo {
	color: var(--mj-base-deep);
	background: var(--mj-amber);
	padding: 1px 5px;
	border-radius: 4px;
	font-weight: 800;
	font-size: 0.68rem;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.player-chip .badges {
	margin-top: 4px;
	font-size: 0.8rem;
	letter-spacing: 1px;
	display: flex;
	justify-content: center;
	gap: 3px;
}
.player-chip .badges .badge-item {
	cursor: help;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* ------------------------------------------------------------
   Bench strip
   ------------------------------------------------------------ */
.bench-strip {
	background: linear-gradient(180deg, #16203A 0%, #0D1424 100%);
	border-radius: var(--mj-radius-sm);
	padding: 14px 10px;
	margin-top: 14px;
	display: flex;
	justify-content: space-around;
	gap: 6px;
	border: 1px solid rgba(255,255,255,0.04);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ------------------------------------------------------------
   Best per position list
   ------------------------------------------------------------ */
.player-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 8px;
	border-radius: 8px;
	border-bottom: 1px solid var(--mj-divider);
	font-size: 0.88rem;
	transition: background 0.12s ease;
}
.player-row:hover { background: var(--mj-bg-tint); }
.player-row:last-child { border-bottom: none; }
.player-row .rank {
	width: 22px; flex: 0 0 22px;
	color: var(--mj-ink-muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
}
.player-row .name { flex: 1; font-weight: 600; color: var(--mj-ink); }
.player-row .price { color: var(--mj-ink-mid); font-variant-numeric: tabular-nums; }
.player-row .mojo {
	color: var(--mj-base-deep);
	background: var(--mj-amber);
	padding: 3px 8px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.78rem;
	min-width: 38px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.player-row .team {
	color: var(--mj-ink-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	background: var(--mj-bg-tint);
	border-radius: 4px;
	padding: 2px 6px;
}

/* ------------------------------------------------------------
   Sentiment styling
   ------------------------------------------------------------ */
.sent-up   { color: var(--mj-pos); font-weight: 700; }
.sent-down { color: var(--mj-neg); font-weight: 700; }

/* ------------------------------------------------------------
   Tabs
   ------------------------------------------------------------ */
.nav-tabs {
	border-bottom: 1px solid var(--mj-divider);
	gap: 2px;
}
.nav-tabs .nav-link {
	color: var(--mj-ink-mid);
	font-weight: 600;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 8px 12px;
	border-radius: 0;
}
.nav-tabs .nav-link:hover {
	color: var(--mj-ink);
	border-bottom-color: var(--mj-divider);
	background: transparent;
}
.nav-tabs .nav-link.active {
	color: var(--mj-amber);
	font-weight: 700;
	background: transparent;
	border-bottom: 3px solid var(--mj-amber);
}

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.table { color: var(--mj-ink); }
.table thead th {
	color: var(--mj-ink-muted);
	font-size: 0.72rem;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 1px solid var(--mj-divider);
	background: var(--mj-bg-tint);
}
.table > :not(caption) > * > * {
	padding: 8px 10px;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-bg-type: var(--mj-bg-tint);
}
.table tbody td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Status footer
   ------------------------------------------------------------ */
.status-footer {
	font-size: 0.78rem;
	color: var(--mj-ink-muted);
	padding: 18px 0 6px;
}

/* ------------------------------------------------------------
   Auth (login / signup)
   ------------------------------------------------------------ */
.mj-auth-page {
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	background:
		radial-gradient(900px 400px at 0% 0%, rgba(255,176,32,0.12), transparent 60%),
		radial-gradient(800px 400px at 100% 100%, rgba(76,201,224,0.10), transparent 60%),
		linear-gradient(135deg, #0B0F1A 0%, #16203A 100%);
}
.mj-auth-card {
	max-width: 440px;
	width: 100%;
	background: var(--mj-bg-elevated);
	border-radius: var(--mj-radius-lg);
	box-shadow: var(--mj-shadow-lg);
	overflow: hidden;
}
.mj-auth-card .mj-auth-brand {
	padding: 22px 28px 0;
	display: flex; align-items: center; gap: 12px;
}
.mj-auth-card .mj-auth-brand img { height: 44px; }
.mj-auth-card .mj-auth-brand .name {
	font-weight: 800; font-size: 1.05rem;
	color: var(--mj-ink); letter-spacing: -0.3px;
}
.mj-auth-card .mj-auth-brand .name .fpl {
	color: var(--mj-ink-muted);
	font-size: 0.72em;
	letter-spacing: 2px;
	vertical-align: 1px;
}
.mj-auth-card .mj-auth-body { padding: 20px 28px 28px; }
.mj-auth-card h4 {
	font-weight: 800; color: var(--mj-ink);
	margin: 8px 0 2px; letter-spacing: -0.3px;
}
.mj-auth-card .mj-auth-sub {
	color: var(--mj-ink-muted); font-size: 0.88rem; margin-bottom: 18px;
}

/* Segmented mode toggle (sign in / sign up) */
.mj-segmented {
	display: flex;
	background: var(--mj-bg-tint);
	border: 1px solid var(--mj-divider);
	border-radius: 12px;
	padding: 4px;
	gap: 4px;
	margin-bottom: 18px;
}
.mj-segmented .seg {
	flex: 1;
	text-align: center;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mj-ink-mid);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	border: none; background: transparent;
}
.mj-segmented .seg:hover { color: var(--mj-ink); }
.mj-segmented .seg.active {
	background: var(--mj-base-soft);
	color: var(--mj-amber);
	box-shadow: var(--mj-shadow-sm);
}

/* Form polish */
.form-label { font-weight: 600; color: var(--mj-ink-mid); }
.form-control, .form-select {
	border-radius: 10px;
	border: 1.5px solid var(--mj-divider);
	padding: 10px 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
	border-color: var(--mj-amber);
	box-shadow: 0 0 0 4px rgba(255,176,32,0.16);
}
.form-control-sm { padding: 6px 10px; }

/* Alerts */
.alert {
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 0.88rem;
}
.alert-warning {
	background: rgba(255,176,32,0.10);
	border-color: rgba(255,176,32,0.34);
	color: #FFD27A;
}
.alert-danger {
	background: rgba(255,107,107,0.10);
	border-color: rgba(255,107,107,0.34);
	color: #FFA8A8;
}
.alert-success {
	background: rgba(53,208,127,0.10);
	border-color: rgba(53,208,127,0.32);
	color: #8CE9B8;
}

/* ------------------------------------------------------------
   Settings page
   ------------------------------------------------------------ */
.settings-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 16px 60px;
}
.settings-page .page-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 20px;
}
.settings-page h1.page-title {
	font-size: 1.5rem; font-weight: 800;
	color: var(--mj-ink); margin: 0;
	letter-spacing: -0.3px;
}
.settings-page .settings-card {
	background: var(--mj-bg-elevated);
	border: 1px solid var(--mj-divider);
	border-radius: var(--mj-radius);
	box-shadow: var(--mj-shadow);
	padding: 22px 22px 18px;
	margin-bottom: 16px;
}
.settings-page .settings-card h5 {
	font-weight: 700; color: var(--mj-ink);
	margin: 0 0 6px; letter-spacing: -0.2px;
}
.settings-page .settings-card .help {
	color: var(--mj-ink-muted); font-size: 0.85rem; margin-bottom: 14px;
}

/* ------------------------------------------------------------
   My Team section header (controls)
   ------------------------------------------------------------ */
.myteam-controls {
	display: flex; align-items: center; gap: 12px;
}
.myteam-controls .myteam-status {
	color: var(--mj-ink-mid);
	font-size: 0.84rem;
}
.myteam-controls .myteam-status strong { color: var(--mj-ink); }

.mj-progress {
	height: 10px;
	background: var(--mj-bg-tint);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--mj-divider);
}
.mj-progress .bar {
	height: 100%;
	background: linear-gradient(90deg, var(--mj-amber-deep) 0%, var(--mj-amber) 100%);
	transition: width 0.4s ease;
	background-size: 200% 100%;
	animation: mj-progress-stripe 1.6s linear infinite;
}
@keyframes mj-progress-stripe {
	0% { background-position: 0% 0; }
	100% { background-position: 200% 0; }
}

/* Transfer bundle card */
.transfer-bundle {
	border: 1px solid var(--mj-divider);
	border-radius: var(--mj-radius-sm);
	background: var(--mj-bg-elevated);
	overflow: hidden;
	margin-bottom: 10px;
}
.transfer-bundle .bundle-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 12px;
	background: var(--mj-bg-tint);
	border-bottom: 1px solid var(--mj-divider);
	font-size: 0.85rem;
}
.transfer-bundle .bundle-head .delta {
	color: var(--mj-pos);
	font-weight: 800;
	background: rgba(53,208,127,0.12);
	padding: 2px 8px;
	border-radius: 6px;
}
.transfer-bundle .bundle-body { padding: 10px 12px; font-size: 0.85rem; }

/* Empty / loading state */
.mj-empty {
	display: flex; align-items: center; gap: 12px;
	color: var(--mj-ink-muted);
	padding: 14px 16px;
	background: var(--mj-bg-tint);
	border: 1px dashed var(--mj-divider);
	border-radius: var(--mj-radius-sm);
}
.mj-empty .icon {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--mj-base-soft);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--mj-amber);
	font-weight: 800;
	border: 1px solid var(--mj-divider);
	flex: 0 0 36px;
}

/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	.app-header .app-brand img { height: 34px; }
	.app-header .app-title { font-size: 1.05rem !important; }
	.app-header .user-chip .who { display: none; }
	.player-chip { width: 72px; }
	.player-chip .shirt { width: 48px; height: 54px; }
	.player-chip .shirt img { width: 48px; height: 48px; }
}

/* ------------------------------------------------------------
   Bootstrap overrides for the dark ground

   Bootstrap 5 ships a light theme; these are the utility classes the app
   actually uses whose defaults are illegible on #0B0F1A.
   ------------------------------------------------------------ */
.text-muted   { color: var(--mj-ink-muted) !important; }
.text-success { color: var(--mj-pos) !important; }
.text-danger  { color: var(--mj-neg) !important; }

.card {
	--bs-card-bg: var(--mj-bg-elevated);
	--bs-card-color: var(--mj-ink);
	--bs-card-border-color: var(--mj-divider);
	--bs-card-cap-bg: transparent;
}

.form-control, .form-select {
	background-color: var(--mj-bg-tint);
	color: var(--mj-ink);
	border-color: var(--mj-divider);
}
.form-control:focus, .form-select:focus {
	background-color: var(--mj-bg-tint);
	color: var(--mj-ink);
}
.form-control::placeholder { color: var(--mj-ink-muted); }
/* Chrome paints autofilled inputs a hard blue-white (#e8f0fe) that sits above
   background-color and resists the usual inset-shadow override. Clipping the
   UA background to the text is what actually restores the dark field; the
   inset shadow stays as a fallback for engines that honour it. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:autofill {
	-webkit-text-fill-color: var(--mj-ink);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-shadow: 0 0 0 1000px var(--mj-bg-tint) inset;
	caret-color: var(--mj-ink);
	transition: background-color 5000s ease-in-out 0s;
}

.table {
	--bs-table-color: var(--mj-ink);
	--bs-table-bg: transparent;
	--bs-table-border-color: var(--mj-divider);
	--bs-table-striped-color: var(--mj-ink);
}

.btn-link { color: var(--mj-ink-mid); }
.btn-link:hover { color: var(--mj-amber); }

.spinner-border { color: var(--mj-amber); }

/* Legal footnote under the status footer */
.mj-disclaimer {
	color: var(--mj-ink-muted);
	font-size: 0.72rem;
	opacity: 0.75;
}

/* ------------------------------------------------------------
   Full player detail table (console parity)

   Deliberately dense: this is the whole ranked pool with every stat, so it
   scrolls horizontally rather than dropping columns.
   ------------------------------------------------------------ */
.mj-player-table {
	max-height: 70vh;
	overflow: auto;
}
.mj-player-table table {
	font-size: 0.78rem;
	white-space: nowrap;
}
.mj-player-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--mj-bg-tint);
	font-size: 0.66rem;
	letter-spacing: 0.6px;
	white-space: nowrap;
}
.mj-player-table td,
.mj-player-table th { padding: 5px 8px; }
.mj-player-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Player name stays put while the stat columns scroll under it. */
.mj-player-table td.pname,
.mj-player-table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--mj-bg-elevated);
}
.mj-player-table thead th:first-child { z-index: 3; background: var(--mj-bg-tint); }
.mj-player-table .mojo {
	color: var(--mj-base-deep);
	background: var(--mj-amber);
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
/* Notes is the only free-text column; let it wrap instead of stretching the row. */
.mj-player-table td.notes {
	white-space: normal;
	min-width: 320px;
	max-width: 560px;
	font-size: 0.72rem;
	line-height: 1.35;
}

/* ------------------------------------------------------------
   Trust panel (FPL credentials explainer)
   ------------------------------------------------------------ */
.mj-trust-list {
	margin: 0 0 14px;
	padding-left: 18px;
}
.mj-trust-list li { margin-bottom: 3px; }

.mj-trust {
	background: var(--mj-bg-tint);
	border: 1px solid var(--mj-divider);
	border-left: 3px solid var(--mj-amber);
	border-radius: var(--mj-radius-sm);
	padding: 14px 16px;
	margin-bottom: 18px;
}
.mj-trust .mj-trust-head {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--mj-ink);
	margin-bottom: 8px;
}
.mj-trust ul {
	margin: 0;
	padding-left: 18px;
	font-size: 0.82rem;
	color: var(--mj-ink-mid);
	line-height: 1.5;
}
.mj-trust li { margin-bottom: 5px; }
.mj-trust strong { color: var(--mj-ink); }
.mj-trust .mj-trust-foot {
	margin-top: 10px;
	font-size: 0.78rem;
	color: var(--mj-ink-muted);
}

/* Caveat variant of the trust panel: same shape, cautionary accent. */
.mj-trust.mj-trust-warn { border-left-color: var(--mj-ink-muted); }

/* ------------------------------------------------------------
   Landing page (signed out)
   ------------------------------------------------------------ */
.mj-hero {
	padding: 48px 32px 44px;
	border-radius: var(--mj-radius-lg);
	border: 1px solid var(--mj-divider);
	background:
		radial-gradient(900px 340px at 8% -20%, rgba(255,176,32,0.13), transparent 62%),
		radial-gradient(700px 320px at 100% 0%, rgba(76,201,224,0.08), transparent 60%),
		linear-gradient(140deg, #16203A 0%, var(--mj-bg-elevated) 55%, #0E1524 100%);
}
.mj-hero-copy { max-width: 760px; }
.mj-hero-title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 900;
	letter-spacing: -1.2px;
	line-height: 1.08;
	margin: 0 0 14px;
	color: var(--mj-ink);
}
.mj-hero-sub {
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--mj-ink-mid);
	margin-bottom: 16px;
}
.mj-hero-deadline {
	display: inline-block;
	background: rgba(255,176,32,0.10);
	border: 1px solid rgba(255,176,32,0.32);
	color: var(--mj-ink);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.85rem;
}
.btn-lg { padding: 11px 22px; font-size: 1rem; }

.mj-section-title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.6px;
	color: var(--mj-ink);
	margin: 4px 0 6px;
}

/* Value propositions */
.mj-prop-icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: rgba(255,176,32,0.12);
	border: 1px solid rgba(255,176,32,0.30);
	color: var(--mj-amber);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.05rem;
	margin-bottom: 12px;
}
.mj-prop-title {
	font-weight: 700;
	font-size: 1rem;
	color: var(--mj-ink);
	margin-bottom: 6px;
}

/* Pricing */
.mj-pricing { padding: 26px 0 6px; }
/* .card-section clips overflow for its rounded corners, which would cut the
   badge in half; these cards have nothing that needs clipping. */
.mj-plan { position: relative; overflow: visible; }
.mj-plan-name {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: 700;
	color: var(--mj-ink-muted);
	margin-bottom: 6px;
}
.mj-plan-price {
	font-size: 2.3rem;
	font-weight: 900;
	letter-spacing: -1.4px;
	color: var(--mj-ink);
	line-height: 1.1;
}
.mj-plan-price span {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--mj-ink-muted);
}
.mj-price-loading { color: var(--mj-ink-muted); }
.mj-plan-list {
	list-style: none;
	padding: 0;
	margin: 0 0 4px;
	font-size: 0.86rem;
	color: var(--mj-ink-mid);
	line-height: 1.5;
}
.mj-plan-list li { position: relative; padding-left: 22px; margin-bottom: 7px; }
.mj-plan-list li::before {
	content: "✓";
	position: absolute; left: 0;
	color: var(--mj-amber);
	font-weight: 800;
}
/* The paid plan is the recommended path, so it carries the accent. */
.mj-plan-featured {
	border-color: rgba(255,176,32,0.42);
	box-shadow: 0 10px 34px rgba(255,176,32,0.10), var(--mj-shadow);
}
.mj-plan-badge {
	position: absolute;
	top: -11px; right: 16px;
	background: var(--mj-amber);
	color: var(--mj-base-deep);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}

@media (max-width: 768px) {
	.mj-hero { padding: 30px 18px; }
}

/* Ownership edge (paid squad analysis) */
.mj-edge-summary {
	display: flex; flex-wrap: wrap; gap: 8px 20px;
	font-size: 0.84rem;
	color: var(--mj-ink-mid);
}
.mj-edge-summary strong { color: var(--mj-amber); font-size: 1rem; }
.mj-edge-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 14px;
}
.mj-edge-row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px;
	font-size: 0.85rem;
	padding: 5px 8px;
	border-radius: 6px;
	background: var(--mj-bg-tint);
	border: 1px solid var(--mj-divider);
}
.mj-edge-count { font-variant-numeric: tabular-nums; white-space: nowrap; }