/* Final Show 185 design system (R7). Mobile first: phone is the base, then >= 768 px and >= 1200 px.
   Colour codes are the ones finalshow already used (R7-PLAN.md §3). Bootstrap 5.3 runs in dark mode underneath. */

@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; font-display: swap; src: url("fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 900; font-display: swap; src: url("fonts/outfit-latin-900-normal.woff2") format("woff2"); }

:root, [data-bs-theme="dark"] {
	--fs-bg: #161616;
	--fs-bg-deep: #121212;
	--fs-surface: #1e1e1e;
	--fs-surface-2: #2a2a2a;
	--fs-line: #3a3a3a;
	--fs-line-soft: rgba(58, 58, 58, .55);
	--fs-text: #ececec;
	--fs-muted: #9a9a9a;
	--fs-brand: #e53935;
	--fs-brand-hi: #ff5a5f; /* red text on black: lighter, never darker */
	--fs-brand-ink: #fff;
	--fs-gold: #ffdc11; /* game figures (pools, odds, winner, closed/settled): red there would read as Meron */
	--fs-meron: #f34141;
	--fs-wala: #1d81f1;
	--fs-draw: #28a745;
	--fs-success: #27ae60;
	--fs-warning: #ffc107;
	--fs-danger: #e7515a;
	--fs-accent: #ff5a5f;

	--fs-radius: 14px;
	--fs-radius-sm: 10px;
	--fs-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	--fs-top-h: 60px;
	--fs-tabs-h: 64px;
	--fs-side-w: 264px;
	--fs-font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--bs-body-font-family: var(--fs-font);
	--bs-body-bg: var(--fs-bg);
	--bs-body-color: var(--fs-text);
	--bs-secondary-color: var(--fs-muted);
	--bs-tertiary-bg: var(--fs-surface-2);
	--bs-secondary-bg: var(--fs-surface);
	--bs-border-color: var(--fs-line);
	--bs-border-radius: var(--fs-radius-sm);
	--bs-border-radius-lg: var(--fs-radius);
	--bs-primary: var(--fs-brand);
	--bs-primary-rgb: 229, 57, 53;
	--bs-link-color: var(--fs-brand-hi);
	--bs-link-color-rgb: 255, 90, 95;
	--bs-link-hover-color: #ff8a8d;
	--bs-link-hover-color-rgb: 255, 138, 141;
	--bs-success-rgb: 39, 174, 96;
	--bs-warning-rgb: 255, 193, 7;
	--bs-danger-rgb: 231, 81, 90;
	--bs-info-rgb: 89, 224, 197;
	--bs-emphasis-color: #fff;
	--bs-heading-color: #fff;
	--bs-focus-ring-color: rgba(229, 57, 53, .35);
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(229, 57, 53, .10), transparent 60%),
		radial-gradient(900px 500px at -10% 0%, rgba(229, 57, 53, .06), transparent 60%),
		var(--fs-bg);
	background-attachment: fixed;
	color: var(--fs-text);
	font-family: var(--fs-font);
	font-size: 15px;
	letter-spacing: .1px;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: .2px; }
a { text-decoration: none; }
::selection { background: rgba(229, 57, 53, .35); color: #fff; }
.num, .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.text-muted { color: var(--fs-muted) !important; }
.text-brand { color: var(--fs-brand-hi) !important; }
.text-meron { color: var(--fs-meron) !important; }
.text-wala { color: var(--fs-wala) !important; }
.text-draw { color: var(--fs-draw) !important; }
.text-accent { color: var(--fs-accent) !important; }

/* ---------- wordmark (no logo, user 2026-10-19) ---------- */
.fs-mark { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; letter-spacing: 1.5px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.fs-mark:hover { color: #fff; }
.fs-mark-text { font-size: 17px; }
.fs-mark-num { background: var(--fs-brand); color: var(--fs-brand-ink); border-radius: 7px; padding: 4px 7px 3px; font-size: 15px; letter-spacing: .5px; box-shadow: 0 0 18px rgba(229, 57, 53, .35); }
.fs-mark-lg .fs-mark-text { font-size: 28px; letter-spacing: 3px; }
.fs-mark-lg .fs-mark-num { font-size: 25px; padding: 6px 10px 5px; border-radius: 10px; }

/* ---------- app shell ---------- */
.fs-top {
	position: sticky; top: 0; z-index: 1030;
	height: calc(var(--fs-top-h) + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) 12px 0;
	display: flex; align-items: center; gap: 10px;
	background: rgba(18, 18, 18, .82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--fs-line-soft);
}
.fs-top .fs-mark { margin-right: auto; }
.fs-iconbtn {
	width: 42px; height: 42px; flex: 0 0 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px; border: 1px solid var(--fs-line-soft);
	background: var(--fs-surface); color: var(--fs-text); font-size: 20px;
}
.fs-iconbtn:hover, .fs-iconbtn:focus-visible { color: var(--fs-brand-hi); border-color: var(--fs-line); }
.fs-balance {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border-radius: 999px;
	background: linear-gradient(135deg, rgba(229, 57, 53, .16), rgba(229, 57, 53, .05));
	border: 1px solid rgba(229, 57, 53, .35);
	color: var(--fs-brand-hi); font-weight: 700; font-size: 15px;
	font-variant-numeric: tabular-nums;
}
.fs-balance i { font-size: 15px; }
.fs-balance .fs-balance-cur { opacity: .75; font-weight: 600; }
/* Player arena top bar: Sign Out in place of the balance (the balance sits in the bet amount row) */
.fs-top-out { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 5px; border: 1px solid rgba(229, 57, 53, .45); background: rgba(229, 57, 53, .1); color: var(--fs-brand-hi); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.fs-top-out:hover, .fs-top-out:focus-visible { background: var(--fs-brand); border-color: var(--fs-brand); color: #fff; }

.fs-shell { display: flex; min-height: calc(100dvh - var(--fs-top-h)); }
.fs-main { flex: 1 1 auto; min-width: 0; padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
.fs-has-tabs .fs-main { padding-bottom: calc(var(--fs-tabs-h) + 24px + env(safe-area-inset-bottom)); }
.fs-wrap { max-width: 1280px; margin: 0 auto; }
.fs-wrap-narrow { max-width: 560px; margin: 0 auto; }

/* side menu: off-canvas on phone and tablet, fixed column on desktop */
.fs-side { --bs-offcanvas-width: 286px; --bs-offcanvas-bg: var(--fs-bg-deep); --bs-offcanvas-border-color: var(--fs-line-soft); }
.fs-side { scrollbar-width: thin; scrollbar-color: var(--fs-line) transparent; }
.fs-side::-webkit-scrollbar { width: 4px; }
.fs-side::-webkit-scrollbar-track { background: transparent; }
.fs-side::-webkit-scrollbar-thumb { background: var(--fs-line); border-radius: 4px; }
.fs-side .offcanvas-header { min-height: var(--fs-top-h); border-bottom: 1px solid var(--fs-line-soft); }
.fs-user { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 12px; border-radius: var(--fs-radius); background: var(--fs-surface); border: 1px solid var(--fs-line-soft); }
.fs-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--fs-brand-ink); background: linear-gradient(135deg, var(--fs-brand), #ff6f61); text-transform: uppercase; }
.fs-user-name { font-weight: 700; color: #fff; line-height: 1.2; word-break: break-all; }
.fs-user-role { font-size: 12px; color: var(--fs-muted); text-transform: uppercase; letter-spacing: .8px; }
.fs-nav { list-style: none; margin: 0; padding: 4px 12px 24px; }
.fs-nav-label { padding: 16px 12px 6px; font-size: 11px; font-weight: 700; color: var(--fs-muted); text-transform: uppercase; letter-spacing: 1.2px; }
.fs-nav a {
	width: 100%; display: flex; align-items: center; gap: 12px;
	padding: 11px 12px; margin: 2px 0; border-radius: 11px; border: 0;
	background: transparent; color: #cfcfcf; font-weight: 500; font-size: 15px; text-align: left;
}
.fs-nav a i { font-size: 18px; width: 22px; text-align: center; color: var(--fs-muted); }
.fs-nav a:hover { background: var(--fs-surface); color: #fff; }
.fs-nav a.active { background: linear-gradient(90deg, rgba(229, 57, 53, .16), rgba(229, 57, 53, .03)); color: #fff; box-shadow: inset 3px 0 0 var(--fs-brand); }
.fs-nav a.active i { color: var(--fs-brand-hi); }
.fs-nav a.fs-nav-out, .fs-nav a.fs-nav-out i { color: #ff8a90; }

/* bottom tab bar: players and agents on a phone */
.fs-tabs {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
	height: calc(var(--fs-tabs-h) + env(safe-area-inset-bottom));
	padding: 6px 6px env(safe-area-inset-bottom);
	display: flex; background: rgba(18, 18, 18, .94);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--fs-line-soft);
}
.fs-tabs a, .fs-tabs button {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	border: 0; background: transparent; border-radius: 12px;
	color: var(--fs-muted); font-size: 11px; font-weight: 600; letter-spacing: .2px;
}
.fs-tabs i { font-size: 21px; line-height: 1; }
.fs-tabs a.active { color: var(--fs-brand-hi); }
.fs-tabs a.active i { filter: drop-shadow(0 0 8px rgba(229, 57, 53, .45)); }
.fs-tabs span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1200px) {
	.fs-top { padding-left: 20px; padding-right: 20px; }
	.fs-top .fs-menu-btn { margin-right: 4px; } /* desktop: hides / shows the sidebar (fs.js, remembered per browser) */
	html.fs-side-off .fs-side.offcanvas-xl { display: none; }
	.fs-side.offcanvas-xl { position: sticky; top: var(--fs-top-h); height: calc(100vh - var(--fs-top-h)); width: var(--fs-side-w); flex: 0 0 var(--fs-side-w); overflow-y: auto; background: var(--fs-bg-deep); border-right: 1px solid var(--fs-line-soft); }
	.fs-side .offcanvas-header { display: none; }
	.fs-side.offcanvas-xl { scrollbar-color: var(--fs-line) transparent; }
	.fs-side.offcanvas-xl::-webkit-scrollbar-thumb { background: var(--fs-line); }
	.fs-main { padding: 26px 30px 40px; }
	.fs-has-tabs .fs-main { padding-bottom: 40px; }
	.fs-tabs { display: none; }
}

/* ---------- page header ---------- */
.fs-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.fs-head-title { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
.fs-head-sub { margin: 2px 0 0; color: var(--fs-muted); font-size: 14px; }
.fs-head-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.fs-head-actions > .btn { flex: 1 1 0; }
@media (min-width: 768px) { .fs-head-title { font-size: 26px; } .fs-head { margin-bottom: 22px; } .fs-head-actions { width: auto; margin-left: auto; } .fs-head-actions > .btn { flex: 0 0 auto; } }

/* ---------- cards ---------- */
.fs-card {
	position: relative; background: linear-gradient(180deg, rgba(42, 42, 42, .55), rgba(30, 30, 30, .9));
	border: 1px solid var(--fs-line-soft); border-radius: var(--fs-radius);
	box-shadow: var(--fs-shadow); padding: 16px; margin-bottom: 16px;
}
.fs-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .8px; }
.fs-card-title i { color: var(--fs-brand-hi); font-size: 17px; }
@media (min-width: 768px) { .fs-card { padding: 20px; margin-bottom: 20px; } }

/* stat tiles */
.fs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) { .fs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } }
@media (min-width: 1200px) { .fs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-stat { position: relative; overflow: hidden; padding: 14px; border-radius: var(--fs-radius); background: var(--fs-surface); border: 1px solid var(--fs-line-soft); }
.fs-stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--fs-stat-c, var(--fs-brand)); opacity: .09; }
.fs-stat-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fs-muted); text-transform: uppercase; letter-spacing: .8px; }
.fs-stat-label i { color: var(--fs-stat-c, var(--fs-brand)); font-size: 15px; }
.fs-stat-value { margin-top: 6px; font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; word-break: break-word; }
@media (min-width: 768px) { .fs-stat { padding: 18px; } .fs-stat-value { font-size: 24px; } }
.fs-stat.is-brand { --fs-stat-c: var(--fs-brand); }
.fs-stat.is-success { --fs-stat-c: var(--fs-success); }
.fs-stat.is-danger { --fs-stat-c: var(--fs-danger); }
.fs-stat.is-wala { --fs-stat-c: var(--fs-wala); }
.fs-stat.is-meron { --fs-stat-c: var(--fs-meron); }
.fs-stat.is-accent { --fs-stat-c: var(--fs-accent); }
.fs-stat.is-warning { --fs-stat-c: var(--fs-warning); }
.fs-stat-hero { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(229, 57, 53, .18), rgba(30, 30, 30, .95) 60%); border-color: rgba(229, 57, 53, .3); }
.fs-stat-hero .fs-stat-value { font-size: 30px; color: #fff; }
/* Four stat cards: 2 x 2 on phone and tablet, one row on desktop (agent dashboard) */
.fs-stats.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .fs-stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-stats.cols-4 .fs-stat-hero { grid-column: auto; }
.fs-stats.cols-4 .fs-stat-value, .fs-stats.cols-4 .fs-stat-hero .fs-stat-value { font-size: 18px; }
@media (min-width: 768px) { .fs-stats.cols-4 .fs-stat-value, .fs-stats.cols-4 .fs-stat-hero .fs-stat-value { font-size: 22px; } }
.fs-stats.cols-4 .fs-stat-label { font-size: 11px; letter-spacing: .5px; }
@media (max-width: 575.98px) { .fs-stat-label .fs-stat-note { font-size: 8px; letter-spacing: .3px; } }

/* list rows (phone-friendly key / value lists) */
.fs-list { list-style: none; margin: 0; padding: 0; }
.fs-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fs-line-soft); }
.fs-list li:last-child { border-bottom: 0; }
.fs-list .k { color: var(--fs-muted); font-size: 14px; }
.fs-list .v { font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }

/* chips */
.fs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; background: rgba(154, 154, 154, .15); color: #cfcfcf; border: 1px solid rgba(154, 154, 154, .25); }
.fs-chip.is-success { background: rgba(39, 174, 96, .15); color: #4fd88a; border-color: rgba(39, 174, 96, .35); }
.fs-chip.is-warning { background: rgba(255, 193, 7, .14); color: var(--fs-warning); border-color: rgba(255, 193, 7, .35); }
.fs-chip.is-danger { background: rgba(231, 81, 90, .15); color: #ff8a90; border-color: rgba(231, 81, 90, .4); }
.fs-chip.is-meron { background: rgba(243, 65, 65, .16); color: #ff7b7b; border-color: rgba(243, 65, 65, .4); }
.fs-chip.is-wala { background: rgba(29, 129, 241, .16); color: #6fb2ff; border-color: rgba(29, 129, 241, .4); }
.fs-chip.is-draw { background: rgba(40, 167, 69, .16); color: #5fd47c; border-color: rgba(40, 167, 69, .4); }
.fs-chip.is-brand { background: rgba(229, 57, 53, .14); color: var(--fs-brand-hi); border-color: rgba(229, 57, 53, .35); }
.fs-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.fs-live .fs-dot { animation: fs-pulse 1.4s ease-in-out infinite; }
@keyframes fs-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .55; box-shadow: 0 0 0 5px transparent; } }

/* ---------- buttons ---------- */
.btn { --bs-btn-font-weight: 700; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.05rem; --bs-btn-border-radius: 11px; letter-spacing: .3px; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: 13px; }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .7rem; --bs-btn-border-radius: 9px; }
.btn i { font-size: 1.05em; }
.btn-brand { --bs-btn-color: var(--fs-brand-ink); --bs-btn-bg: var(--fs-brand); --bs-btn-border-color: var(--fs-brand); --bs-btn-hover-color: var(--fs-brand-ink); --bs-btn-hover-bg: #f05350; --bs-btn-hover-border-color: #f05350; --bs-btn-active-color: var(--fs-brand-ink); --bs-btn-active-bg: #ff5a5f; --bs-btn-active-border-color: #ff5a5f; --bs-btn-disabled-color: var(--fs-brand-ink); --bs-btn-disabled-bg: var(--fs-brand); --bs-btn-disabled-border-color: var(--fs-brand); --bs-btn-focus-shadow-rgb: 229, 57, 53; box-shadow: 0 6px 20px rgba(229, 57, 53, .18); }
.btn-meron { --bs-btn-color: #fff; --bs-btn-bg: var(--fs-meron); --bs-btn-border-color: var(--fs-meron); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ff5757; --bs-btn-hover-border-color: #ff5757; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d63434; --bs-btn-active-border-color: #d63434; --bs-btn-disabled-color: rgba(255, 255, 255, .7); --bs-btn-disabled-bg: #6b2a2f; --bs-btn-disabled-border-color: #6b2a2f; --bs-btn-focus-shadow-rgb: 243, 65, 65; }
.btn-wala { --bs-btn-color: #fff; --bs-btn-bg: var(--fs-wala); --bs-btn-border-color: var(--fs-wala); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3a93f5; --bs-btn-hover-border-color: #3a93f5; --bs-btn-active-color: #fff; --bs-btn-active-bg: #1670d4; --bs-btn-active-border-color: #1670d4; --bs-btn-disabled-color: rgba(255, 255, 255, .7); --bs-btn-disabled-bg: #1f4570; --bs-btn-disabled-border-color: #1f4570; --bs-btn-focus-shadow-rgb: 29, 129, 241; }
.btn-draw { --bs-btn-color: #fff; --bs-btn-bg: var(--fs-draw); --bs-btn-border-color: var(--fs-draw); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #31bd52; --bs-btn-hover-border-color: #31bd52; --bs-btn-active-color: #fff; --bs-btn-active-bg: #218838; --bs-btn-active-border-color: #218838; --bs-btn-disabled-color: rgba(255, 255, 255, .7); --bs-btn-disabled-bg: #24502f; --bs-btn-disabled-border-color: #24502f; --bs-btn-focus-shadow-rgb: 40, 167, 69; }
.btn-ghost { --bs-btn-color: var(--fs-text); --bs-btn-bg: var(--fs-surface); --bs-btn-border-color: var(--fs-line); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fs-surface-2); --bs-btn-hover-border-color: #4a4a4a; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--fs-surface-2); --bs-btn-active-border-color: #4a4a4a; --bs-btn-disabled-bg: var(--fs-surface); --bs-btn-disabled-border-color: var(--fs-line); }
.btn-success { --bs-btn-bg: var(--fs-success); --bs-btn-border-color: var(--fs-success); --bs-btn-hover-bg: #2ec36d; --bs-btn-hover-border-color: #2ec36d; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
/* Destructive actions are outlined red so they never look like the solid red main button */
.btn-danger { --bs-btn-color: #ff8a90; --bs-btn-bg: rgba(231, 81, 90, .12); --bs-btn-border-color: var(--fs-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fs-danger); --bs-btn-hover-border-color: var(--fs-danger); --bs-btn-active-color: #fff; --bs-btn-active-bg: #f0636b; --bs-btn-active-border-color: #f0636b; --bs-btn-disabled-color: #ff8a90; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--fs-danger); }
.btn-outline-danger { --bs-btn-color: var(--fs-brand-hi); --bs-btn-bg: transparent; --bs-btn-border-color: var(--fs-brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fs-brand); --bs-btn-hover-border-color: var(--fs-brand); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--fs-brand-hi); --bs-btn-active-border-color: var(--fs-brand-hi); --bs-btn-disabled-color: var(--fs-brand-hi); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--fs-brand); }
/* Convert Commission: outlined blue (fills blue on hover / press) */
.btn-ctw { --bs-btn-color: #6cb2ff; --bs-btn-bg: rgba(29, 129, 241, .12); --bs-btn-border-color: var(--fs-wala); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fs-wala); --bs-btn-hover-border-color: var(--fs-wala); --bs-btn-active-color: #fff; --bs-btn-active-bg: #3a93f5; --bs-btn-active-border-color: #3a93f5; --bs-btn-disabled-color: #6cb2ff; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--fs-wala); --bs-btn-focus-shadow-rgb: 29, 129, 241; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: fs-spin .7s linear infinite; }
.btn-brand.is-busy::after { border-color: rgba(255, 255, 255, .35); border-top-color: var(--fs-brand-ink); }
@keyframes fs-spin { to { transform: rotate(360deg); } }
/* value just changed: zoom in, then back (1 s) */
.fs-zoom { display: inline-block; animation: fs-zoom 1s ease-in-out; }
@keyframes fs-zoom { 50% { transform: scale(1.6); } }
/* wallet just changed (FS.countTo): zoom in 1 s, back 1 s; green = went up, red = went down. Grows from the left edge
   so a long balance stays inside its card (.fs-stat clips) on phones */
.fs-wallet-zoom { transform-origin: left center; animation: fs-wallet-zoom 2s ease-in-out; }
.fs-wallet-zoom.is-up { color: #4fd68a !important; }
.fs-wallet-zoom.is-down { color: var(--fs-danger) !important; }
@keyframes fs-wallet-zoom { 50% { transform: scale(1.4); } }

/* ---------- forms ---------- */
.form-control, .form-select {
	--bs-border-color: var(--fs-line);
	min-height: 48px; font-size: 16px; /* 16 px: iOS does not zoom on focus */
	background-color: var(--fs-bg-deep); color: #fff; border-radius: 11px;
}
.form-control::placeholder { color: #777777; }
.form-control:focus, .form-select:focus { background-color: var(--fs-bg-deep); color: #fff; border-color: var(--fs-brand); box-shadow: 0 0 0 .2rem rgba(229, 57, 53, .18); }
.form-control:disabled, .form-control[readonly] { background-color: rgba(42, 42, 42, .5); color: #cfcfcf; }
.form-label { font-size: 13px; font-weight: 600; color: #cfcfcf; letter-spacing: .3px; margin-bottom: 6px; }
.form-text { color: var(--fs-muted); }
.input-group-text { background: var(--fs-surface-2); border-color: var(--fs-line); color: var(--fs-muted); border-radius: 11px; }
.fs-field { position: relative; }
.fs-field > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--fs-muted); font-size: 18px; pointer-events: none; }
.fs-field > .form-control { padding-left: 46px; }
.fs-field > .fs-field-end { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.fs-form-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .fs-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* amount chips (bet amounts, deposit amounts) */
.fs-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fs-amounts button { min-height: 44px; border-radius: 11px; border: 1px solid var(--fs-line); background: var(--fs-surface-2); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-amounts button:active, .fs-amounts button.active { background: rgba(229, 57, 53, .16); border-color: var(--fs-brand); color: var(--fs-brand-hi); }

/* ---------- alerts / empty states ---------- */
.alert { border-radius: 12px; border-width: 1px; }
.alert-danger { background: rgba(231, 81, 90, .12); border-color: rgba(231, 81, 90, .4); color: #ffb3b7; }
.alert-success { background: rgba(39, 174, 96, .12); border-color: rgba(39, 174, 96, .4); color: #a6ecc2; }
.alert-warning { background: rgba(255, 193, 7, .1); border-color: rgba(255, 193, 7, .35); color: #ffe08a; }
.alert-info { background: rgba(29, 129, 241, .12); border-color: rgba(29, 129, 241, .4); color: #b5d6ff; }
.fs-empty { text-align: center; padding: 36px 16px; color: var(--fs-muted); }
.fs-empty i { display: block; font-size: 40px; margin-bottom: 10px; color: var(--fs-line); }
.fs-empty strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }

/* ---------- tables (DataTables 2, Responsive, no paging) ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--fs-text); --bs-table-border-color: var(--fs-line-soft); --bs-table-hover-bg: rgba(255, 255, 255, .03); --bs-table-hover-color: #fff; margin-bottom: 0; }
.table > thead th { font-size: 12px; font-weight: 700; color: var(--fs-muted); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; background: rgba(18, 18, 18, .6) !important; border-bottom-color: var(--fs-line) !important; }
.table > tbody td { vertical-align: middle; padding-top: .7rem; padding-bottom: .7rem; }
.table > tfoot th, .table > tfoot td { font-weight: 800; color: #fff; border-top: 1px solid var(--fs-line); }
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-date { text-align: left; }
table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-header { flex-direction: row; }
.table > :not(caption) > * > .money, table.dataTable th.money, table.dataTable td.money { text-align: right; }
table.dataTable th.money div.dt-column-header { flex-direction: row-reverse; }
.fs-table-card { padding: 12px; }
@media (min-width: 768px) { .fs-table-card { padding: 16px 18px; } }
div.dt-container { --dt-row-selected: 229, 57, 53; }
div.dt-container .dt-search { margin-bottom: 10px; }
div.dt-container .dt-search label { display: none; }
div.dt-container .dt-search input { width: 100% !important; margin-left: 0 !important; min-height: 44px; padding-left: 40px; background: var(--fs-bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888ea8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 14px center; }
div.dt-container .dt-buttons .btn { --bs-btn-bg: var(--fs-surface-2); --bs-btn-border-color: var(--fs-line); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--fs-line); --bs-btn-padding-y: .45rem; }
div.dt-container .dt-info { color: var(--fs-muted); font-size: 13px; padding-top: 10px; }
div.dt-container .dt-layout-row { margin: 0 !important; }
div.dt-container .dt-layout-cell { padding: 0 !important; }
@media (min-width: 768px) {
	div.dt-container .dt-layout-row:first-child { display: flex; align-items: center; gap: 10px; margin-bottom: 10px !important; }
	div.dt-container .dt-search { margin: 0 0 0 auto; }
	div.dt-container .dt-search input { width: 280px !important; }
}
table.dataTable > tbody > tr.dtr-expanded > td, table.dataTable > tbody > tr > td.dtr-control { cursor: pointer; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { padding-left: 28px !important; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { margin-right: 0; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before { transform: translateY(-50%) rotate(90deg); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { position: relative; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { border-left-color: var(--fs-brand) !important; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { display: flex; justify-content: space-between; gap: 12px; border-bottom-color: var(--fs-line-soft) !important; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--fs-muted); font-weight: 600; min-width: 0; }
table.dataTable > tbody > tr.child span.dtr-data { color: #fff; text-align: right; }
.fs-cap-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(229, 57, 53, .07); border: 1px dashed rgba(229, 57, 53, .3); color: #ff9a9c; font-size: 13px; font-weight: 500; }

/* ---------- sweetalert2 (dark) ---------- */
div.swal2-container { z-index: 2000; }
div.swal2-container.swal2-backdrop-show:not(.swal2-toast-container) { background: rgba(12, 12, 12, .72); backdrop-filter: blur(3px); }
body.swal2-toast-shown div.swal2-container, div.swal2-container.swal2-toast-container { background: transparent !important; backdrop-filter: none !important; }
div.swal2-popup { background: var(--fs-surface); color: var(--fs-text); border: 1px solid var(--fs-line); border-radius: 18px; box-shadow: 0 25px 60px rgba(0, 0, 0, .55); font-family: var(--fs-font); padding: 1.4em 1.2em 1.3em; width: min(28em, calc(100vw - 32px)); }
div.swal2-popup .swal2-title { color: #fff; font-size: 1.35em; font-weight: 800; }
div.swal2-popup .swal2-html-container { color: #cfcfcf; font-size: 1.02em; }
div.swal2-popup .swal2-actions { gap: 10px; width: 100%; flex-wrap: nowrap; }
div.swal2-popup .swal2-actions .btn { flex: 1 1 0; margin: 0; min-height: 48px; }
div.swal2-popup .swal2-icon { transform: scale(.85); margin-top: .6em; }
div.swal2-popup .swal2-icon.swal2-warning { border-color: var(--fs-brand); color: var(--fs-brand-hi); }
div.swal2-popup .swal2-icon.swal2-question { border-color: var(--fs-wala); color: var(--fs-wala); }
div.swal2-popup .swal2-input, div.swal2-popup .swal2-select { background: var(--fs-bg-deep); color: #fff; border: 1px solid var(--fs-line); border-radius: 11px; }
div.swal2-popup.swal2-toast { background: var(--fs-surface-2); border-color: var(--fs-line); padding: .7em 1em; width: auto; max-width: calc(100vw - 24px); }
div.swal2-popup.swal2-toast .swal2-title { font-size: 15px; font-weight: 600; margin: 0 .5em; }
.fs-swal-amount { display: block; margin: 6px 0 2px; font-size: 32px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.fs-swal-side { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 800; letter-spacing: 1px; }

/* ---------- auth pages (login, register) ---------- */
.fs-auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
body.fs-auth { overflow: visible; } /* the <body> is .fs-auth too: overflow hidden there stops the page scrolling */
.fs-auth::before, .fs-auth::after { content: ""; position: fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .28; z-index: -1; pointer-events: none; }
.fs-auth::before { background: var(--fs-meron); left: -260px; top: -180px; }
.fs-auth::after { background: var(--fs-wala); right: -260px; bottom: -200px; }
.fs-auth-box { width: 100%; max-width: 420px; margin: 0 auto; }
.fs-auth-brand { text-align: center; margin-bottom: 22px; }
.fs-auth-card { background: rgba(30, 30, 30, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--fs-line-soft); border-radius: 20px; padding: 22px 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
@media (min-width: 768px) { .fs-auth-card { padding: 30px 30px 26px; } }
/* Sign-in + register pages: square card edge to edge on a phone (560px on desktop), 8px side padding */
.fs-auth-wide, .fs-auth:has(> .fs-auth-wide) { padding-left: 0; padding-right: 0; } /* the <body> is .fs-auth too */
.fs-auth-wide .fs-auth-card, .fs-auth-wide .fs-field > .form-control { border-radius: 0; }
.fs-auth-wide .fs-auth-box { max-width: 560px; }
.fs-auth-wide .fs-auth-card { padding-left: 8px; padding-right: 8px; }
.fs-auth-flush .fs-auth-card { padding-left: 0; padding-right: 0; } /* sign-in: username, password and Sign In run edge to edge */
/* Logo on top of sign-in + register: centred, stretched full width on a phone, capped at the 560px card width on desktop */
.fs-auth-logo { width: 100%; max-width: 560px; margin: 0 auto; }
.fs-auth-logo img { display: block; width: 100%; height: auto; }
/* Logo flush with the top of the screen, phone and desktop (no top padding, not centred vertically) */
.fs-auth-wide, .fs-auth:has(> .fs-auth-wide) { padding-top: env(safe-area-inset-top); justify-content: flex-start; }
.fs-auth-card h1 { font-size: 21px; margin: 0 0 4px; color: #fff; }
.fs-auth-card .fs-auth-lead { color: var(--fs-muted); margin-bottom: 20px; font-size: 14px; }
.fs-auth-foot { text-align: center; margin-top: 18px; color: var(--fs-muted); font-size: 14px; }
.fs-vs { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.fs-vs span { height: 4px; width: 46px; border-radius: 4px; }
.fs-vs span:first-child { background: var(--fs-meron); }
.fs-vs span:nth-child(2) { background: var(--fs-brand); width: 16px; }
.fs-vs span:last-child { background: var(--fs-wala); }

/* ---------- player event cards ---------- */
.fs-events { display: grid; gap: 14px; }
@media (min-width: 768px) { .fs-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* One live event: one centred card (same idea as the player home), not half a row */
@media (min-width: 768px) { .fs-events.is-single { grid-template-columns: minmax(0, 560px); justify-content: center; } }
.fs-event { position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; background: var(--fs-surface); border: 1px solid var(--fs-line-soft); box-shadow: var(--fs-shadow); color: #fff; }
.fs-event img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s ease; } /* square pictures: keep the title at the top in view */
.fs-event::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 12, .95) 0%, rgba(12, 12, 12, .35) 55%, rgba(12, 12, 12, .1) 100%); }
.fs-event:hover img { transform: scale(1.04); }
.fs-event-live { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(243, 65, 65, .9); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.fs-event-body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.fs-event-name { font-size: 20px; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.fs-event-date { font-size: 13px; color: #cfcfcf; }
.fs-event-go { align-self: flex-start; margin-top: 8px; }

/* ---------- misc ---------- */
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 992px) { .fs-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .fs-grid.side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; } .fs-grid.side-r { grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr); gap: 20px; } }
.modal { --bs-modal-bg: var(--fs-surface); --bs-modal-border-color: var(--fs-line); --bs-modal-border-radius: 18px; --bs-modal-header-border-color: var(--fs-line-soft); --bs-modal-footer-border-color: var(--fs-line-soft); }
.modal-backdrop { --bs-backdrop-opacity: .7; }
.dropdown-menu { --bs-dropdown-bg: var(--fs-surface); --bs-dropdown-border-color: var(--fs-line); --bs-dropdown-link-hover-bg: var(--fs-surface-2); --bs-dropdown-link-active-bg: rgba(229, 57, 53, .2); --bs-dropdown-border-radius: 12px; }
.fs-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fs-scroll-x::-webkit-scrollbar { display: none; }
.flatpickr-calendar { font-family: var(--fs-font); }
.ts-wrapper .ts-control { min-height: 48px; background: var(--fs-bg-deep) !important; border-color: var(--fs-line); border-radius: 11px; color: #fff; font-size: 16px; }
.ts-dropdown { background: var(--fs-surface); border-color: var(--fs-line); color: var(--fs-text); border-radius: 11px; }
.ts-dropdown .active { background: var(--fs-surface-2); color: #fff; }
/* Typed text, the picked account and the dropdown rows: Tom Select's own #343a40 is unreadable on the dark theme */
.ts-wrapper .ts-control input, .ts-wrapper .ts-control .item { color: #fff !important; font-size: 16px; }
.ts-wrapper .ts-control input::placeholder { color: var(--fs-muted); opacity: 1; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { color: #e6e6e6; }
.ts-dropdown .option .text-muted, .ts-dropdown .option small { color: var(--fs-muted) !important; }
.ts-dropdown .active, .ts-dropdown .option:hover { background: var(--fs-surface-2); color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Agent / admin account lists (R7e) */
.fs-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-who strong { color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.fs-who small { color: var(--fs-muted); font-size: 12.5px; }
.fs-act .dropdown-toggle { white-space: nowrap; }
.fs-act .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.fs-act .dropdown-item i { width: 18px; text-align: center; }
.fs-rate { min-width: 128px; }

/* DataTables paging + page length (dark) */
div.dt-container .dt-paging .pagination { --bs-pagination-bg: var(--fs-surface-2); --bs-pagination-color: var(--fs-text); --bs-pagination-border-color: var(--fs-line); --bs-pagination-hover-bg: var(--fs-surface); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--fs-line); --bs-pagination-active-bg: var(--fs-brand); --bs-pagination-active-color: var(--fs-brand-ink); --bs-pagination-active-border-color: var(--fs-brand); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--fs-muted); --bs-pagination-disabled-border-color: var(--fs-line-soft); --bs-pagination-focus-box-shadow: none; flex-wrap: wrap; justify-content: center; margin: 0; }
div.dt-container .dt-length select { width: auto; display: inline-block; }
div.dt-container .dt-length label { color: var(--fs-muted); font-size: 13px; }
@media (max-width: 767.98px) { div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell { justify-content: center; text-align: center; } }

/* Modal on phones (.modal.fs-sheet): card anchored to the top, 100px clear of the top edge; centred dialog from 576px */
.fs-ctw-avail { padding: 16px; margin-bottom: 16px; border-radius: var(--fs-radius); background: linear-gradient(135deg, rgba(229, 57, 53, .16), rgba(30, 30, 30, .9) 65%); border: 1px solid rgba(229, 57, 53, .28); }
.fs-ctw-amount { margin-top: 6px; font-size: 28px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; word-break: break-word; }
.fs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: var(--fs-bg-deep); border: 1px solid var(--fs-line-soft); }
.fs-seg .btn { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; color: var(--fs-muted); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.fs-seg .btn-check:checked + .btn { background: var(--fs-surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--fs-brand); }
.fs-seg .btn-check:checked + .btn i { color: var(--fs-brand-hi); }
.fs-sheet .modal-footer { gap: 10px; flex-wrap: nowrap; }
.fs-sheet .modal-footer > .btn { flex: 1 1 0; min-height: 48px; margin: 0; }
.fs-sheet .modal-footer > .btn-brand { flex-grow: 2; }
@media (max-width: 575.98px) {
	.fs-sheet .modal-dialog { margin: 100px 12px 16px; min-height: 0; align-items: flex-start; }
	.fs-sheet .modal-content { border-radius: 20px; max-height: calc(100dvh - 116px); }
	.fs-sheet .modal-header { border-bottom: 0; padding-bottom: 4px; }
	.fs-sheet .modal-body { overflow-y: auto; }
	.fs-sheet .modal-footer { border-top: 0; padding-top: 4px; padding-bottom: 18px; }
	.fs-sheet.fade .modal-dialog { transform: translateY(-40px); transition: transform .25s ease-out; }
	.fs-sheet.show .modal-dialog { transform: none; }
}

/* Admin (R7f) */
.fs-seg > a.btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; color: var(--fs-muted); font-size: 14.5px; font-weight: 700; }
.fs-seg > a.btn.active { background: var(--fs-surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--fs-brand); }
@media (min-width: 576px) { .fs-seg.fs-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-chip.fs-chip-name { text-transform: none; letter-spacing: 0; }
.fs-filter { display: grid; gap: 12px; }
@media (min-width: 992px) { .fs-filter { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; align-items: end; } .fs-filter-go .btn { min-width: 150px; } }
.fs-filter .form-label { font-size: 13px; color: var(--fs-muted); }
.fs-filter-go .btn { min-height: 46px; }
.fs-owner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
@media (min-width: 992px) { .fs-filter.fs-filter-one { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 992px) { .fs-filter:has(> .fs-filter-go + .fs-filter-go) { grid-template-columns: minmax(0, 1fr) auto auto; } }
.fs-accounts { display: grid; gap: 12px; }
/* Create Transaction results: one account per full-width row on desktop, read left to right: who | wallet | actions */
@media (min-width: 992px) {
	.fs-accounts { gap: 12px; }
	.fs-account { display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(170px, .6fr) minmax(0, 2fr); align-items: center; gap: 20px; padding: 16px 20px; }
	.fs-account-top { flex-direction: column; align-items: flex-start; gap: 6px; }
	.fs-account-top .fs-who strong { font-size: 17px; }
	.fs-account-points { margin: 0; font-size: 24px; }
	.fs-account-points::before { content: 'Wallet'; display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fs-muted); }
	.fs-account-actions { justify-content: flex-end; }
	.fs-account-actions .btn { flex: 0 0 auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
}
.fs-account { margin: 0; }
.fs-account-lock { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(255, 193, 7, .1); border: 1px solid rgba(255, 193, 7, .35); color: #ffe08a; overflow-wrap: anywhere; }
.fs-account-lock + .fs-account-lock { margin-top: 6px; }
.fs-account-lock .fs-unlock { margin-left: auto; flex: 0 0 auto; align-self: center; white-space: nowrap; }
@media (min-width: 992px) { .fs-account-lock, .fs-account-lock + .fs-account-lock { margin-top: 0; } }
.fs-account-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fs-account-top .fs-status { cursor: pointer; flex: none; }
.fs-account-points { margin: 8px 0 12px; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.fs-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-account-actions .btn { flex: 1 1 auto; min-height: 40px; }
.fs-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 992px) { .fs-grid.fs-grid-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
@media (min-width: 1200px) { .fs-row-actions { flex-wrap: nowrap; } .fs-row-actions .btn { white-space: nowrap; } }
.fs-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fs-brand); color: var(--fs-brand-ink); font-size: 13px; font-weight: 900; }
.fs-wrap-narrow > .fs-card + .fs-card { margin-top: 16px; }
/* R8b: archive view banner, solid red and stuck under the top bar so it is always in sight */
.alert.fs-archive-banner { position: sticky; top: calc(var(--fs-top-h) + env(safe-area-inset-top) + 8px); z-index: 1020; background: var(--fs-brand); border: 2px solid #ff6b6b; color: #fff; box-shadow: 0 6px 18px rgba(229, 57, 53, .45); }
.fs-archive-banner .bi { font-size: 1.15em; }
.fs-archive-banner .btn-danger { background: #fff; border-color: #fff; color: var(--fs-brand); font-weight: 700; }
/* Collapsible sidebar groups (SA, CSR, agents): parent row like a menu item, its pages indented under it, one group open at a time */
.fs-nav-group { margin: 2px 0; }
.fs-nav-parent { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 11px; background: transparent; color: #cfcfcf; font-weight: 600; font-size: 15px; text-align: left; }
.fs-nav-parent > i:first-child { font-size: 18px; width: 22px; text-align: center; color: var(--fs-muted); }
.fs-nav-parent:hover { background: var(--fs-surface); color: #fff; }
.fs-nav-parent:not(.collapsed) { color: #fff; }
.fs-nav-parent:not(.collapsed) > i:first-child { color: var(--fs-brand-hi); }
.fs-nav-caret { margin-left: auto; font-size: 13px; color: var(--fs-muted); transition: transform .2s ease; }
.fs-nav-parent:not(.collapsed) .fs-nav-caret { transform: rotate(180deg); }
.fs-nav-sub { list-style: none; margin: 0 0 4px 22px; padding: 0 0 0 10px; border-left: 1px solid var(--fs-line-soft); }
.fs-nav-sub a { padding: 9px 12px; font-size: 14px; }
.fs-nav-sub a i { font-size: 16px; }
/* IP Management: 5 tiles (2 / 3 / 5 per row), filter row, device cell, IP details window */
@media (max-width: 767.98px) { .fs-ipm-stats .fs-stat:last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .fs-ipm-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fs-stat-sub { margin-top: 4px; font-size: 12px; color: var(--fs-muted); }
/* Agent dashboard Agents' / Players' wallet: phones show the short "downline tree" note on one line */
@media (max-width: 575.98px) { .fs-stat-tree .fs-stat-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-stat-tree .fs-chip { font-size: 10px; padding: 2px 8px; } }
.fs-ipm-filter { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.fs-ipm-filter .form-label { font-size: 13px; color: var(--fs-muted); }
@media (min-width: 768px) { .fs-ipm-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fs-ipm-q { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .fs-ipm-filter { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; align-items: end; } .fs-ipm-q { grid-column: auto; } }
.fs-ipm-go { display: flex; gap: 8px; align-items: end; }
.fs-ipm-go .btn { min-height: 46px; white-space: nowrap; }
code.fs-ip { color: var(--fs-brand-hi); background: rgba(229, 57, 53, .08); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.fs-ipm-lookup { padding: 2px 8px; }
.fs-ipm-dev { display: flex; align-items: center; gap: 8px; }
.fs-ipm-dev > i { font-size: 20px; color: var(--fs-muted); }
.fs-ipm-sec + .fs-ipm-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fs-line-soft); }
.fs-ipm-dl { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.fs-ipm-dl dt { font-weight: 600; color: var(--fs-muted); font-size: 13px; }
.fs-ipm-dl dd { margin: 0; word-break: break-word; }
.fs-ipm-dl .fs-chip { margin: 0 4px 4px 0; }
/* On / off switches (System Config) */
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-top: .05em; background-color: var(--fs-surface-2); border-color: var(--fs-line); cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--fs-brand); border-color: var(--fs-brand); }
.form-switch .form-check-input:focus { border-color: var(--fs-brand); box-shadow: 0 0 0 .2rem rgba(229, 57, 53, .2); }
.form-switch .form-check-label { padding-left: .4em; font-weight: 600; color: #fff; cursor: pointer; }
.fs-config > .fs-card { align-content: start; scroll-margin-top: calc(var(--fs-top-h) + 16px); }
/* Red count pill (agents' Pending Approvals): right end of the menu link, on its group while the group is closed, on the phone tab icon */
.fs-nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--fs-danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px rgba(231, 81, 90, .25); }
.fs-nav a .fs-nav-badge, .fs-nav-parent .fs-nav-badge { margin-left: auto; }
.fs-nav-parent .fs-nav-badge + .fs-nav-caret { margin-left: 8px; }
.fs-nav-parent:not(.collapsed) .fs-nav-badge { display: none; }
.fs-nav-parent:not(.collapsed) .fs-nav-badge + .fs-nav-caret { margin-left: auto; }
.fs-tabs a { position: relative; }
.fs-tabs .fs-nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; }
/* Two stats that share the whole row at every width (CSR home: system deposit + withdrawal; the hero stays full width below) */
.fs-stats.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ---- Player home: Live Arenas (layout of sbx777's player home, finalshow colours) ---- */
.fs-lobby-hero { text-align: center; padding: 6px 8px 14px; }
.fs-lobby-hero h1 { margin: 0 0 4px; color: var(--fs-brand-hi); font-weight: 800; font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: .02em; }
.fs-lobby-hero p { margin: 0; color: var(--fs-muted); font-size: .92rem; }
.fs-lobby-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fs-lobby-card { position: relative; flex: 1 1 280px; max-width: 360px; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 12px; border: 1px solid var(--fs-line-soft); background: radial-gradient(circle at center, var(--fs-brand) 0%, var(--fs-surface) 80%); transition: box-shadow .15s ease, background .15s ease; }
.fs-lobby-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--arena-bg) top center / contain no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 100%); transform-origin: 50% 30%; transition: transform 8s ease-in-out; }
.fs-lobby-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .92) 100%); }
.fs-lobby-card:hover { background: radial-gradient(circle at center, var(--fs-brand-hi) 0%, var(--fs-surface-2) 85%); box-shadow: 0 0 20px rgba(255, 90, 95, .55), inset 0 0 26px rgba(255, 90, 95, .4); }
/* Camera drift: the arena picture zooms in slowly for 8 s, then back out (JS toggles .is-drift) */
.fs-lobby-card.is-drift::before { transform: scale(1.08); }
.fs-lobby-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; }
.fs-lobby-title { margin: 0; text-align: center; color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fs-lobby-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: #fff; font-size: .82rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); }
.fs-lobby-fight { font-weight: 700; }
.fs-lobby-fight .num { color: var(--fs-brand-hi); }
.fs-lobby-date { flex: 1; text-align: center; color: #cfcfcf; font-size: .78rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
@media (min-width: 992px) { .fs-lobby-card:hover .fs-lobby-title, .fs-lobby-card:hover .fs-lobby-fight, .fs-lobby-card:hover .fs-lobby-date { color: var(--fs-brand-hi); } }
.fs-lobby-enter { display: block; margin-top: 4px; padding: 9px 12px; text-align: center; border: 1.5px solid var(--fs-success); border-radius: 8px; color: #4fd68a; font-weight: 700; font-size: .92rem; letter-spacing: .03em; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .18s ease, box-shadow .18s ease; }
.fs-lobby-enter:hover, .fs-lobby-enter:focus { background: var(--fs-success); color: #fff; }
/* Heartbeat: border + glow beat twice then rest, the play icon nudges forward on each beat (JS toggles .is-beat) */
.fs-lobby-enter i { display: inline-block; transition: transform .18s ease; }
.fs-lobby-enter.is-beat { border-color: #2ec36d; box-shadow: 0 0 0 3px rgba(39, 174, 96, .3), 0 0 18px rgba(46, 195, 109, .6); }
.fs-lobby-enter.is-beat i { transform: translateX(3px) scale(1.15); }
.fs-lobby-live { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1.5px solid var(--fs-meron); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1; pointer-events: none; }
.fs-lobby-live .fs-dot { color: var(--fs-meron); box-shadow: 0 0 6px var(--fs-meron); transition: opacity .25s ease, box-shadow .25s ease; }
/* Recording light: only the dot blinks (JS toggles .is-blink) */
.fs-lobby-live.is-blink .fs-dot { opacity: .15; box-shadow: none; }
/* VIP ARENA badge (VipGate::isVip, System Config VIP title words): top left, across from LIVE */
.fs-lobby-vip { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: var(--fs-brand); border: 1.5px solid var(--fs-brand-hi); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); pointer-events: none; }
.fs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-shadow: none; border: 1px solid; }
.fs-pill.is-open { color: #a6ecc2; border-color: var(--fs-success); background: rgba(39, 174, 96, .25); animation: fs-pulse 1.4s ease-in-out infinite; }
.fs-pill.is-ongoing { color: #b0b0b0; border-color: rgba(154, 154, 154, .45); background: rgba(154, 154, 154, .18); }
.fs-pill.is-settled { color: var(--fs-gold); border-color: rgba(255, 220, 17, .6); background: rgba(255, 220, 17, .15); }
.fs-pill.is-cancelled { color: #cfcfcf; border-color: var(--fs-line); background: rgba(0, 0, 0, .35); }
.fs-pill.is-standby { color: #b5d6ff; border-color: var(--fs-wala); background: rgba(29, 129, 241, .2); }
/* Off air (no active arena) */
.fs-offair { position: relative; overflow: hidden; max-width: 760px; margin: 6px auto 0; padding: 40px 20px 28px; text-align: center; color: var(--fs-muted); border: 1px solid rgba(229, 57, 53, .25); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(239, 68, 68, .22) 0%, rgba(239, 68, 68, 0) 60%), linear-gradient(180deg, var(--fs-surface-2) 0%, var(--fs-surface) 100%); box-shadow: var(--fs-shadow); }
.fs-radar { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; }
.fs-radar .core { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--fs-brand-hi) 0%, var(--fs-brand) 75%); border: 2px solid rgba(255, 255, 255, .12); box-shadow: 0 0 24px rgba(239, 68, 68, .45); }
.fs-radar .core i { font-size: 2.6rem; color: #fff; line-height: 1; }
.fs-radar .ring { position: absolute; inset: 0; z-index: 1; border-radius: 50%; border: 2px solid rgba(239, 68, 68, .7); opacity: .8; transform: scale(1); }
.fs-radar .ring.is-ping { opacity: 0; transform: scale(1.9); transition: transform 1.6s ease-out, opacity 1.6s ease-out; }
.fs-offair-status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--fs-line); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fs-offair h2 { margin: 0 0 8px; color: #fff; font-weight: 800; font-size: clamp(1.2rem, 4vw, 1.5rem); }
.fs-offair-lead { max-width: 440px; margin: 0 auto 18px; font-size: .92rem; line-height: 1.5; }
.fs-offair-refresh { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 8px; border: 1.5px solid var(--fs-brand); color: var(--fs-brand-hi); font-weight: 700; font-size: .9rem; text-decoration: none; }
.fs-offair-refresh:hover, .fs-offair-refresh:focus { background: var(--fs-brand); color: var(--fs-brand-ink); }
.fs-offair-arenas { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--fs-line-soft); }
.fs-offair-label { margin-bottom: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fs-offair-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.fs-offair-logos img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--fs-line); filter: grayscale(.85) brightness(.7); transition: filter .2s ease; }
.fs-offair-logos img:hover { filter: none; }
.fs-offair-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.fs-offair-links a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fs-line-soft); color: #cfcfcf; font-size: .8rem; font-weight: 600; text-decoration: none; }
.fs-offair-links a i { font-size: 1.3rem; color: var(--fs-brand-hi); }
.fs-offair-links a:hover { border-color: rgba(229, 57, 53, .35); color: #fff; }
/* Promotions & Regulations posters under the arenas (rules, promo): side by side on desktop */
.fs-promo-title { text-align: center; color: var(--fs-brand-hi); font-weight: 800; font-size: clamp(1.1rem, 3.5vw, 1.4rem); letter-spacing: .02em; margin: 32px 0 14px; }
.fs-promo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fs-promo-card { position: relative; overflow: hidden; flex: 1 1 280px; max-width: 420px; border: 1px solid var(--fs-line-soft); border-radius: 12px; background: var(--fs-surface); transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease; }
.fs-promo-card img { display: block; width: 100%; height: auto; }
/* Spotlight: the posters take turns, one lifts with a red glowing edge (JS moves .is-spot) */
.fs-promo-card.is-spot { transform: translateY(-4px); border-color: var(--fs-brand); box-shadow: 0 0 0 1px var(--fs-brand), 0 10px 28px rgba(229, 57, 53, .45); }
/* Phone: arena cards + posters run edge to edge (cancel .fs-main's 14px side padding) */
@media (max-width: 767.98px) {
	.fs-lobby-grid, .fs-promo-grid { margin-left: -14px; margin-right: -14px; }
	.fs-lobby-card, .fs-promo-card { flex-basis: 100%; max-width: none; border-radius: 0; border-left: 0; border-right: 0; }
	.fs-lobby-card { aspect-ratio: 1 / 1; } /* square arena pictures fill the full width: card as tall as it is wide */
	.fs-lobby-card::before { background-size: 100% auto; }
}
@media (max-width: 400px) { .fs-offair { padding: 32px 14px 22px; } .fs-offair-logos img { width: 60px; height: 60px; } }