.ap-fortnite-dashboard-page .jeg_content,
.ap-fortnite-dashboard-page .jeg_main {
	padding-top: 0;
}

.apfd-page-shell {
	min-height: 70vh;
	padding: 34px 0 70px;
	background: #f4f5f7;
}

.apfd-dashboard,
.apfd-dashboard * {
	box-sizing: border-box;
}

.apfd-dashboard {
	--apfd-ink: #29292f;
	--apfd-body: #3e3e44;
	--apfd-muted: #74747d;
	--apfd-line: #e4e5e9;
	--apfd-soft: #f7f7f9;
	--apfd-dark: #14141b;
	--apfd-accent: #ff5641;
	--apfd-alt: #ff6e35;
	--apfd-yellow: #ffcf40;
	--apfd-green: #159c68;
	--apfd-twitch: #9146ff;
	width: min( 1180px, calc( 100% - 32px ) );
	margin: 0 auto;
	color: var( --apfd-body );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
}

.apfd-dashboard h1,
.apfd-dashboard h2,
.apfd-dashboard p,
.apfd-dashboard ul {
	margin-top: 0;
}

.apfd-dashboard h1,
.apfd-dashboard h2 {
	font-family: Poppins, Helvetica, Arial, sans-serif;
}

.apfd-dashboard h1 {
	max-width: 690px;
	margin-bottom: 14px;
	color: #fff;
	font-size: clamp( 2.45rem, 5.5vw, 4.55rem );
	font-weight: 700;
	letter-spacing: -0.052em;
	line-height: 1.01;
}

.apfd-dashboard h2 {
	margin-bottom: 0;
	color: var( --apfd-ink );
	font-size: clamp( 1.35rem, 2.2vw, 1.85rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.22;
}

.apfd-breadcrumb {
	display: flex;
	margin: 0 0 17px;
	align-items: center;
	color: #85858d;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
}

.apfd-breadcrumb a {
	color: var( --apfd-accent );
	text-decoration: none;
}

.apfd-breadcrumb a:hover {
	color: var( --apfd-alt );
}

.apfd-hero {
	position: relative;
	min-height: 520px;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: 5px;
	background-color: var( --apfd-dark );
	background-image:
		linear-gradient( 90deg, rgba( 20, 20, 27, 0.99 ) 0%, rgba( 20, 20, 27, 0.91 ) 47%, rgba( 20, 20, 27, 0.22 ) 100% ),
		var( --apfd-hero-image );
	background-position: center, center;
	background-size: cover;
	box-shadow: 0 14px 34px rgba( 20, 20, 27, 0.17 );
}

.apfd-hero::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient( 90deg, var( --apfd-accent ), var( --apfd-alt ) 64%, var( --apfd-yellow ) );
	content: "";
}

.apfd-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 520px;
	max-width: 780px;
	padding: clamp( 38px, 6vw, 74px );
	flex-direction: column;
	justify-content: center;
}

.apfd-eyebrow,
.apfd-kicker {
	margin-bottom: 7px;
	color: var( --apfd-accent );
	font-family: Kanit, Poppins, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.105em;
	line-height: 1.3;
	text-transform: uppercase;
}

.apfd-eyebrow {
	color: var( --apfd-yellow );
}

.apfd-hero__lead {
	max-width: 690px;
	margin-bottom: 27px;
	color: #d8d8dc;
	font-size: clamp( 15px, 1.8vw, 19px );
	line-height: 1.65;
}

.apfd-live-grid {
	display: grid;
	max-width: 650px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
}

.apfd-live-count {
	display: flex;
	padding: 17px 20px;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-left: 4px solid var( --apfd-accent );
	background: rgba( 0, 0, 0, 0.34 );
	backdrop-filter: blur( 9px );
	gap: 8px;
}

.apfd-live-label {
	display: flex;
	align-items: center;
	color: #f0f0f2;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.apfd-live-label i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #41d489;
	box-shadow: 0 0 0 5px rgba( 65, 212, 137, 0.14 );
	animation: apfd-pulse 2.2s ease-out infinite;
}

.apfd-live-count strong {
	display: block;
	color: #fff;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.05em;
	line-height: 1;
}

.apfd-live-updated {
	margin: 10px 0 0;
	color: #a9a9b0;
	font-size: 11px;
	line-height: 1.45;
}

@keyframes apfd-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 65, 212, 137, 0.4 ); }
	70% { box-shadow: 0 0 0 8px rgba( 65, 212, 137, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 65, 212, 137, 0 ); }
}

.apfd-stat-grid {
	display: grid;
	margin-bottom: 14px;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
}

.apfd-stat-card {
	position: relative;
	min-width: 0;
	padding: 19px 20px 17px;
	border: 1px solid var( --apfd-line );
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 5px 18px rgba( 24, 25, 29, 0.045 );
}

.apfd-stat-card::before {
	position: absolute;
	top: -1px;
	left: 19px;
	width: 37px;
	height: 3px;
	background: var( --apfd-accent );
	content: "";
}

.apfd-stat-card > span,
.apfd-stat-card > small {
	display: block;
}

.apfd-stat-card > span {
	min-height: 21px;
	color: #85858d;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.apfd-stat-card strong {
	display: block;
	margin: 7px 0 4px;
	overflow: hidden;
	color: var( --apfd-ink );
	font-size: clamp( 1.35rem, 2.4vw, 1.9rem );
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.045em;
	line-height: 1.15;
	text-overflow: ellipsis;
}

.apfd-stat-card strong.is-positive { color: var( --apfd-green ); }
.apfd-stat-card strong.is-negative { color: #cf3f49; }

.apfd-stat-card small {
	color: #9a9aa1;
	font-size: 11px;
	line-height: 1.4;
}

.apfd-disclosure {
	display: flex;
	margin-bottom: 18px;
	padding: 12px 16px;
	align-items: flex-start;
	border: 1px solid #f0d7a2;
	border-radius: 4px;
	background: #fff9e9;
	gap: 14px;
	font-size: 12px;
	line-height: 1.55;
}

.apfd-disclosure strong {
	flex: 0 0 auto;
	color: #72540a;
	font-size: 11px;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.apfd-disclosure span { color: #715f35; }

.apfd-disclosure a {
	flex: 0 0 auto;
	margin-left: auto;
	color: #8b382c;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.apfd-disclosure a:hover { color: var( --apfd-accent ); }

.apfd-panel {
	margin-bottom: 18px;
	padding: clamp( 21px, 3.2vw, 34px );
	border: 1px solid var( --apfd-line );
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 7px 24px rgba( 24, 25, 29, 0.05 );
}

.apfd-panel--activity {
	border-top: 4px solid var( --apfd-accent );
}

.apfd-panel__heading {
	display: flex;
	margin-bottom: 9px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.apfd-panel__intro {
	max-width: 820px;
	margin-bottom: 22px;
	color: var( --apfd-muted );
	font-size: 13px;
	line-height: 1.7;
}

.apfd-chart-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.apfd-chart-meta .apfd-panel__intro { margin-bottom: 22px; }

.apfd-range-controls {
	display: inline-flex;
	flex: 0 0 auto;
	padding: 3px;
	border: 1px solid var( --apfd-line );
	border-radius: 4px;
	background: #f6f6f8;
}

.apfd-range-controls button {
	min-height: 32px;
	padding: 6px 12px;
	color: #6f6f77;
	border: 0;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.apfd-range-controls button:hover,
.apfd-range-controls button:focus-visible { color: var( --apfd-accent ); outline: none; }
.apfd-range-controls button.is-active { color: #fff; background: var( --apfd-accent ); box-shadow: 0 2px 7px rgba( 255, 86, 65, 0.22 ); }
.apfd-range-controls button.is-loading { cursor: progress; opacity: 0.65; }

.apfd-twitch-controls { flex-wrap: wrap; justify-content: flex-end; }

.apfd-twitch-controls button.is-active {
	background: var( --apfd-twitch );
	box-shadow: 0 2px 7px rgba( 145, 70, 255, 0.24 );
}

.apfd-twitch-controls button:hover,
.apfd-twitch-controls button:focus-visible { color: var( --apfd-twitch ); }
.apfd-twitch-controls button.is-active:hover,
.apfd-twitch-controls button.is-active:focus-visible { color: #fff; }

.apfd-twitch-controls a {
	display: inline-flex;
	min-height: 32px;
	padding: 6px 12px;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 3px;
	background: #29292f;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.apfd-twitch-controls a:hover,
.apfd-twitch-controls a:focus-visible { color: #fff; background: var( --apfd-twitch ); outline: none; }

.apfd-source-pill {
	flex: 0 0 auto;
	padding: 4px 9px;
	color: #8b382c;
	border: 1px solid #ffd0ca;
	border-radius: 999px;
	background: #fff3f1;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.apfd-source-pill--twitch {
	color: #6330aa;
	border-color: #dfcdfa;
	background: #f7f1ff;
}

.apfd-source-pill--trend {
	color: #23689e;
	border-color: #cce7fb;
	background: #f0f8ff;
}

.apfd-kicker--twitch { color: var( --apfd-twitch ); }
.apfd-kicker--trend { color: #2683c6; }

.apfd-chart-legend {
	display: flex;
	align-items: center;
	color: var( --apfd-muted );
	gap: 7px;
	font-size: 11px;
	white-space: nowrap;
}

.apfd-chart-legend i {
	width: 18px;
	height: 3px;
	background: var( --apfd-accent );
}

.apfd-chart-legend .apfd-legend-peak {
	background: var( --apfd-yellow );
}

.apfd-chart {
	position: relative;
	width: 100%;
	min-height: 330px;
	overflow: hidden;
	border: 1px solid #ececf0;
	border-radius: 3px;
	background: #fcfcfd;
}

.apfd-chart--monthly { min-height: 350px; }
.apfd-chart--compact { min-height: 250px; }
.apfd-chart--finance { min-height: 300px; }

.apfd-finance-bar {
	fill: var( --apfd-accent );
	opacity: 0.82;
	transition: opacity 0.15s ease;
}

.apfd-finance-bar:hover,
.apfd-finance-bar:focus {
	opacity: 1;
	fill: var( --apfd-alt );
}

.apfd-finance-bar.is-best { fill: var( --apfd-yellow ); }
.apfd-finance-bar.is-projected { fill: #c4c4cc; }

.apfd-chart svg {
	display: block;
	width: 100%;
	height: auto;
	min-height: inherit;
}

.apfd-chart .apfd-grid-line {
	stroke: #e9e9ed;
	stroke-width: 1;
}

.apfd-chart .apfd-axis-label {
	fill: #888890;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 10px;
}

.apfd-chart .apfd-line {
	fill: none;
	stroke: var( --apfd-accent );
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}

.apfd-chart .apfd-area { fill: url( #apfd-area-gradient ); }
.apfd-chart .apfd-point { fill: #fff; stroke: var( --apfd-accent ); stroke-width: 2; }
.apfd-chart [data-apfd-tooltip] { cursor: help; outline: none; }
.apfd-chart .apfd-point:focus,
.apfd-chart .apfd-point:hover { fill: var( --apfd-accent ); stroke-width: 3; }
.apfd-chart .apfd-line--peak {
	fill: none;
	stroke: var( --apfd-yellow );
	stroke-dasharray: 5 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}
.apfd-chart .apfd-point--peak { stroke: var( --apfd-yellow ); }
.apfd-chart .apfd-point--peak:focus,
.apfd-chart .apfd-point--peak:hover { fill: var( --apfd-yellow ); }
.apfd-chart .apfd-bar-average { fill: var( --apfd-accent ); }
.apfd-chart .apfd-bar-peak { fill: #ffc7bd; }
.apfd-chart .apfd-twitch-line { stroke: var( --apfd-twitch ); }
.apfd-chart .apfd-twitch-point { stroke: var( --apfd-twitch ); }
.apfd-chart .apfd-trend-line { stroke: #2683c6; }
.apfd-chart .apfd-trend-point { stroke: #2683c6; }
.apfd-chart .apfd-twitch-bar { fill: var( --apfd-twitch ); transition: opacity 0.15s ease; }
.apfd-chart .apfd-twitch-bar:hover,
.apfd-chart .apfd-twitch-bar:focus { opacity: 0.76; }
.apfd-chart .apfd-twitch-value { fill: #5b327f; font-family: Poppins, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; }

.apfd-tooltip {
	position: absolute;
	z-index: 5;
	max-width: min( 280px, calc( 100% - 16px ) );
	padding: 7px 10px;
	transform: translateY( 3px );
	color: #fff;
	border-radius: 3px;
	background: rgba( 20, 20, 27, 0.94 );
	box-shadow: 0 5px 16px rgba( 20, 20, 27, 0.2 );
	opacity: 0;
	pointer-events: none;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.apfd-tooltip.is-visible { transform: translateY( 0 ); opacity: 1; }

.apfd-chart-empty {
	display: grid;
	min-height: inherit;
	padding: 24px;
	place-items: center;
	color: #85858d;
	font-size: 13px;
	text-align: center;
}

.apfd-chart-status {
	min-height: 17px;
	margin: 8px 0 0;
	color: #94949b;
	font-size: 10px;
	text-align: right;
}

.apfd-chart-status.is-error { color: #b6474f; }
.apfd-chart-status.is-fallback { color: #9a6905; }

.apfd-insight-grid {
	display: grid;
	margin-top: 11px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
}

.apfd-insight-grid > div {
	display: flex;
	padding: 10px 12px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #ececf0;
	background: #fafafb;
	gap: 12px;
}

.apfd-insight-grid span {
	color: #7f7f87;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.apfd-insight-grid strong {
	color: var( --apfd-ink );
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.apfd-insight-grid strong.is-positive { color: var( --apfd-green ); }
.apfd-insight-grid strong.is-negative { color: #c83e48; }

.apfd-comment-grid {
	display: grid;
	margin-top: 11px;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
}

.apfd-comment-grid--three { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.apfd-comment-grid--two { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }

.apfd-comment-cards--compact .apfd-comment-card {
	aspect-ratio: auto;
	padding: 14px 16px;
}

.apfd-comment-cards--compact .apfd-comment-card h3 {
	margin-bottom: 5px;
	font-size: 10px;
}

.apfd-comment-cards--compact .apfd-comment-card p { font-size: 13px; }

.apfd-source-note {
	margin: 12px 0 0;
	color: #9a9aa2;
	font-size: 11px;
	line-height: 1.5;
}

.apfd-comment-card {
	display: flex;
	aspect-ratio: 1.9 / 1;
	padding: 10px 14px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border: 1px solid var( --apfd-line );
	border-radius: 6px;
	background:
		radial-gradient( 120% 90% at 100% 0%, rgba( 255, 86, 65, 0.05 ), rgba( 255, 255, 255, 0 ) 55% ),
		#fff;
	box-shadow: 0 4px 14px rgba( 24, 25, 29, 0.05 );
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.apfd-comment-card::before {
	content: '';
	width: 26px;
	height: 3px;
	margin-bottom: 8px;
	border-radius: 2px;
	background: var( --apfd-accent );
}

.apfd-comment-card h3 {
	margin: 0 0 5px;
	color: var( --apfd-accent );
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
}

.apfd-comment-card p {
	margin: 0;
	color: var( --apfd-ink );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
}

.apfd-comment-card:hover {
	border-color: rgba( 255, 86, 65, 0.35 );
	box-shadow: 0 8px 22px rgba( 24, 25, 29, 0.09 );
	transform: translateY( -2px );
}

.apfd-weekday-summary {
	margin: -5px 0 18px;
	padding: 11px 14px;
	border-left: 3px solid var( --apfd-accent );
	background: #fff5f3;
	color: #713c35;
	font-size: 12px;
	font-weight: 600;
}

.apfd-weekday-grid {
	display: grid;
	min-height: 245px;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 12px;
}

.apfd-weekday-grid > .apfd-skeleton { grid-column: 1 / -1; }

.apfd-weekday {
	display: grid;
	min-width: 0;
	grid-template-rows: 185px auto auto;
	text-align: center;
}

.apfd-weekday__plot {
	display: flex;
	padding: 0 8px;
	align-items: flex-end;
	justify-content: center;
	border-bottom: 1px solid var( --apfd-line );
	background: linear-gradient( to top, #f8f8fa 1px, transparent 1px );
	background-size: 100% 25%;
}

.apfd-weekday__plot span {
	display: block;
	width: min( 52px, 75% );
	min-height: 8px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient( 180deg, #ff806f, var( --apfd-accent ) );
}

.apfd-weekday strong { margin-top: 8px; color: var( --apfd-ink ); font-size: 11px; text-transform: uppercase; }
.apfd-weekday small { overflow: hidden; color: var( --apfd-muted ); font-size: 10px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.apfd-weekday.is-best .apfd-weekday__plot span { background: linear-gradient( 180deg, #ffd85f, #f5ad24 ); box-shadow: 0 0 0 3px rgba( 255, 207, 64, 0.16 ); }
.apfd-weekday.is-best strong { color: #9a6905; }

.apfd-monthly-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1.02fr ) minmax( 440px, 0.98fr );
	gap: 25px;
}

.apfd-table-wrap {
	max-height: 430px;
	overflow: auto;
	border: 1px solid var( --apfd-line );
	border-radius: 3px;
}

.apfd-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 12px;
}

.apfd-table th,
.apfd-table td {
	padding: 11px 12px;
	border: 0;
	border-bottom: 1px solid #ededf0;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.apfd-table th:first-child,
.apfd-table td:first-child { text-align: left; }

.apfd-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	color: #55555c;
	background: #f3f3f5;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.apfd-table tbody tr:nth-child( even ) { background: #fafafa; }
.apfd-table tbody tr:hover { background: #fff6f4; }
.apfd-table tbody tr:last-child td { border-bottom: 0; }
.apfd-table--notes th:last-child,
.apfd-table--notes td:last-child { white-space: normal; }
.apfd-table tbody tr.is-projected td { color: #9a9aa2; }
.apfd-change-up { color: var( --apfd-green ); font-weight: 700; }
.apfd-change-down { color: #c83e48; font-weight: 700; }

.apfd-two-column {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
}

.apfd-two-column--signals { grid-template-columns: 1fr; }

.apfd-two-column > .apfd-panel { min-width: 0; }

.apfd-mini-stats {
	display: grid;
	margin-bottom: 16px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
}

.apfd-mini-stats > div {
	padding: 12px;
	border: 1px solid #ece8f2;
	background: #fbf9fe;
}

.apfd-mini-stats span,
.apfd-mini-stats strong { display: block; }

.apfd-mini-stats span {
	margin-bottom: 4px;
	color: #7d7786;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.apfd-mini-stats strong {
	color: #352944;
	font-size: clamp( 1.05rem, 2vw, 1.45rem );
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.apfd-panel--twitch .apfd-mini-stats > div {
	border-color: #ddd0f0;
	background: #f8f4fd;
}

.apfd-twitch-visual {
	position: relative;
	min-height: 245px;
	padding: 20px;
	overflow: hidden;
	color: #f6f3fc;
	border: 1px solid #292833;
	border-radius: 4px;
	background: #19181f;
}

.apfd-twitch-visual .apfd-skeleton { min-height: 203px; background: #292833; }
.apfd-twitch-visual .apfd-skeleton::after { background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.08 ), transparent ); }
.apfd-twitch-visual .apfd-chart-empty { min-height: 203px; color: #b8b1c5; }

.apfd-twitch-heatmap__heading {
	display: flex;
	margin-bottom: 14px;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.apfd-twitch-heatmap__heading strong { color: #fff; font-size: 13px; }
.apfd-twitch-heatmap__heading span { color: #aaa3b6; font-size: 10px; text-align: right; }

.apfd-twitch-heatmap__scroller {
	padding-bottom: 8px;
	overflow-x: auto;
	scrollbar-color: #5b5268 #24232b;
	scrollbar-width: thin;
}

.apfd-twitch-heatmap {
	display: grid;
	grid-template-columns: 48px repeat( var( --apfd-twitch-columns ), minmax( 30px, 1fr ) );
	grid-auto-rows: 31px;
	align-items: center;
	gap: 4px;
}

.apfd-twitch-corner,
.apfd-twitch-axis-label,
.apfd-twitch-row-label {
	display: flex;
	align-items: center;
	justify-content: center;
}

.apfd-twitch-axis-label {
	align-self: end;
	color: #c7bfd3;
	font-size: 9px;
	font-weight: 500;
	white-space: nowrap;
}

.apfd-twitch-row-label {
	justify-content: flex-start;
	color: #d9d2e4;
	font-size: 10px;
	font-weight: 600;
}

.apfd-twitch-cell {
	display: block;
	width: 100%;
	height: 27px;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: help;
	outline: none;
	transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.apfd-twitch-cell:hover,
.apfd-twitch-cell:focus-visible { z-index: 1; transform: scale( 1.08 ); border-color: #fff4c7; filter: brightness( 1.12 ); }
.apfd-twitch-cell.is-empty { cursor: default; border-color: #2f2d37; background: #25242c; opacity: 0.55; }
.apfd-twitch-cell--1 { background: #665420; }
.apfd-twitch-cell--2 { background: #9a791d; }
.apfd-twitch-cell--3 { background: #d4a817; }
.apfd-twitch-cell--4 { background: #ffca28; }

.apfd-twitch-legend {
	display: flex;
	margin-top: 15px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	color: #c7bfd3;
	gap: 8px 14px;
	font-size: 10px;
}

.apfd-twitch-legend > strong { color: #e8e3ef; font-size: 11px; }
.apfd-twitch-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.apfd-twitch-legend i { display: inline-block; width: 15px; height: 15px; border-radius: 3px; }

.apfd-twitch-summary {
	min-height: 18px;
	margin-top: 10px;
	color: #766f80;
	font-size: 10px;
	font-weight: 600;
}

.apfd-trend-overview {
	display: grid;
	margin-bottom: 20px;
	grid-template-columns: 125px minmax( 0, 1fr );
	align-items: stretch;
	gap: 10px;
}

.apfd-trend-overview > div:first-child {
	display: flex;
	padding: 15px 12px;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #dcecf7;
	background: #f5faff;
}

.apfd-trend-overview span,
.apfd-trend-overview small { color: #617d91; font-size: 9px; font-weight: 700; line-height: 1.45; text-transform: uppercase; }
.apfd-trend-overview strong { margin: 7px 0 3px; color: #267fc0; font-size: 2rem; line-height: 1; }
.apfd-chart--trend { min-height: 210px; }

.apfd-region-list {
	display: grid;
	min-height: 280px;
	align-content: start;
	gap: 13px;
}

.apfd-region-row {
	display: grid;
	grid-template-columns: minmax( 90px, 0.9fr ) minmax( 130px, 2fr ) 32px;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}

.apfd-region-name {
	overflow: hidden;
	color: #4f4f56;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apfd-region-track {
	height: 8px;
	overflow: hidden;
	border-radius: 99px;
	background: #eef0f2;
}

.apfd-region-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient( 90deg, #50aee9, #267fc0 );
}

.apfd-region-value {
	color: #2676b0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.apfd-two-column--info { grid-template-columns: minmax( 0, 1.08fr ) minmax( 0, 0.92fr ); }

.apfd-method-list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.apfd-method-list li {
	display: grid;
	padding: 14px 0;
	border-bottom: 1px solid var( --apfd-line );
	grid-template-columns: 145px 1fr;
	gap: 16px;
}

.apfd-method-list li:last-child { border-bottom: 0; }

.apfd-method-list strong {
	color: var( --apfd-ink );
	font-size: 12px;
}

.apfd-method-list span {
	color: var( --apfd-muted );
	font-size: 12px;
	line-height: 1.6;
}

.apfd-faq details {
	padding: 14px 0;
	border-bottom: 1px solid var( --apfd-line );
}

.apfd-faq details:last-child { border-bottom: 0; }

.apfd-faq summary {
	position: relative;
	padding-right: 24px;
	color: var( --apfd-ink );
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	list-style: none;
}

.apfd-faq summary::-webkit-details-marker { display: none; }
.apfd-faq summary::after { position: absolute; top: -3px; right: 3px; color: var( --apfd-accent ); content: "+"; font-size: 20px; font-weight: 400; }
.apfd-faq details[open] summary::after { content: "−"; }

.apfd-faq details p {
	margin: 9px 0 0;
	color: var( --apfd-muted );
	font-size: 12px;
	line-height: 1.65;
}

.apfd-skeleton {
	position: relative;
	overflow: hidden;
	background: #ececef;
}

.apfd-skeleton::after {
	position: absolute;
	inset: 0;
	transform: translateX( -100% );
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.75 ), transparent );
	content: "";
	animation: apfd-shimmer 1.4s infinite;
}

.apfd-skeleton--chart { min-height: inherit; }
.apfd-skeleton--row { height: 170px; }
.apfd-skeleton--bars { min-height: 250px; }

@keyframes apfd-shimmer { 100% { transform: translateX( 100% ); } }

@media ( max-width: 980px ) {
	.apfd-stat-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.apfd-monthly-layout { grid-template-columns: 1fr; }
	.apfd-table-wrap { max-height: 390px; }
	.apfd-two-column { grid-template-columns: 1fr; }
	.apfd-comment-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 680px ) {
	.apfd-page-shell { padding: 20px 0 45px; }
	.apfd-dashboard { width: min( 100% - 20px, 1180px ); }
	.apfd-hero,
	.apfd-hero__content { min-height: 480px; }
	.apfd-hero { background-image: linear-gradient( rgba( 20, 20, 27, 0.86 ), rgba( 20, 20, 27, 0.95 ) ), var( --apfd-hero-image ); }
	.apfd-hero__content { padding: 34px 21px; }
	.apfd-hero__lead { font-size: 14px; }
	.apfd-stat-grid { gap: 9px; }
	.apfd-stat-card { padding: 16px 14px 14px; }
	.apfd-stat-card strong { font-size: 1.25rem; }
	.apfd-disclosure { flex-direction: column; gap: 5px; }
	.apfd-disclosure a { margin-left: 0; }
	.apfd-panel { padding: 20px 15px; }
	.apfd-panel__heading { flex-direction: column; gap: 10px; }
	.apfd-chart-meta { flex-direction: column; gap: 0; }
	.apfd-range-controls { align-self: stretch; }
	.apfd-range-controls button { flex: 1; }
	.apfd-twitch-controls a { flex: 1; }
	.apfd-twitch-visual { padding: 15px 12px; }
	.apfd-twitch-heatmap__heading { align-items: flex-start; flex-direction: column; gap: 2px; }
	.apfd-twitch-heatmap__heading span { text-align: left; }
	.apfd-chart-legend { align-self: flex-start; }
	.apfd-chart { min-height: 270px; }
	.apfd-chart--monthly { min-height: 310px; }
	.apfd-chart--compact { min-height: 230px; }
	.apfd-mini-stats { grid-template-columns: 1fr; }
	.apfd-insight-grid { grid-template-columns: 1fr; }
	.apfd-comment-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.apfd-comment-card { aspect-ratio: auto; min-height: 150px; }
	.apfd-mini-stats > div { display: flex; align-items: center; justify-content: space-between; }
	.apfd-mini-stats span { margin: 0; }
	.apfd-method-list li { grid-template-columns: 1fr; gap: 4px; }
	.apfd-weekday-grid { gap: 8px; }
	.apfd-trend-overview { grid-template-columns: 1fr; }
}

@media ( max-width: 420px ) {
	.apfd-live-grid { grid-template-columns: 1fr; }
	.apfd-stat-grid { grid-template-columns: 1fr; }
	.apfd-stat-card > span { min-height: 0; }
	.apfd-comment-grid { grid-template-columns: 1fr; }
	.apfd-region-row { grid-template-columns: minmax( 82px, 1fr ) minmax( 90px, 1.5fr ) 28px; gap: 7px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.apfd-live-label i,
	.apfd-skeleton::after,
	.apfd-comment-card { animation: none; transition: none; }
}