@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   DESIGN TOKENS — Jay-Like.com CSS Rewrite
   Primary: #1A3BCC | Accent: #C8FF00 neon lime
   ============================================ */

body {
	/* --- Legacy variables (mapped to new palette) --- */
	--color-1: #FFFFFF;
	--color-2: #F0F2F5;
	--color-3: #1A1A2E;
	--color-4: rgba(0,0,0,0.08);
	--color-5: #1A1A2E;
	--color-6: #1A3BCC;
	--color-7: #C8FF00;
	--color-8: rgba(26,59,204,0.1);

	/* --- New Design Tokens --- */
	--primary: #1A3BCC;
	--primary-light: rgba(26,59,204,0.1);
	--primary-dark: #0F2A8A;
	--accent: #C8FF00;
	--accent-hover: #B0E000;
	--accent-text: #000000;

	--bg-main: #F0F2F5;
	--bg-card: #FFFFFF;
	--bg-elevated: #FFFFFF;

	--text-primary: #1A1A2E;
	--text-secondary: #5C6371;
	--text-muted: #656D7C;

	--border: rgba(0,0,0,0.08);
	--border-light: rgba(0,0,0,0.04);

	/* --- Glass --- */
	--glass-bg: rgba(255,255,255,0.6);
	--glass-blur: blur(16px);
	--glass-border: rgba(255,255,255,0.3);
	--glass-shadow: 0 8px 32px rgba(0,0,0,0.08);

	/* --- Radius --- */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 50px;

	/* --- Shadows --- */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
	--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 32px rgba(0,0,0,0.15);

	/* --- RGB (for rgba() usage) --- */
	--primary-rgb: 26,59,204;

	/* --- Status --- */
	--success: #10B981;
	--success-bg: rgba(16,185,129,0.12);
	--danger: #EF4444;
	--danger-bg: rgba(239,68,68,0.12);
	--warning: #F59E0B;
	--warning-bg: rgba(245,158,11,0.12);
	--info: #3B82F6;
	--info-bg: rgba(59,130,246,0.12);

	/* --- Brand Colors --- */
	--youtube-brand: #FF0000;
	--youtube-brand-dark: #CC0000;
	--tiktok-brand: #ff0050;
	--tiktok-brand-dark: #ff0080;
	--tiktok-cyan: #00f2ea;
	--instagram-brand: #E4405F;
	--instagram-brand-dark: #F56040;
	--twitter-brand: #1DA1F2;
	--spotify-brand: #1DB954;

	/* --- Glass Utilities --- */
	--glass-10: rgba(255,255,255,0.1);
	--glass-15: rgba(255,255,255,0.15);
	--glass-20: rgba(255,255,255,0.2);
	--glass-80: rgba(255,255,255,0.8);
}

body.dark {
	/* --- Legacy variables (mapped to new dark palette) --- */
	--color-1: #16161F;
	--color-2: #0D0D14;
	--color-3: #FFFFFF;
	--color-4: rgba(255,255,255,0.04);
	--color-5: #FFFFFF;
	--color-6: #1A3BCC;
	--color-7: #C8FF00;
	--color-8: rgba(26,59,204,0.2);

	/* --- New Design Tokens (dark) --- */
	--primary: #1A3BCC;
	--primary-light: rgba(26,59,204,0.2);
	--primary-dark: #0F2A8A;
	--accent: #C8FF00;
	--accent-hover: #D4FF33;
	--accent-text: #000000;

	/* CoinFusion/Salesforce-inspired: เกือบดำ, seamless */
	--bg-main: #0D0D14;
	--bg-card: #16161F;
	--bg-elevated: #1E1E2A;

	--text-primary: #FFFFFF;
	--text-secondary: #8B8B9A;
	--text-muted: #85859A;

	/* Borders แทบมองไม่เห็น — ใช้ shadow แทน */
	--border: rgba(255,255,255,0.04);
	--border-light: rgba(255,255,255,0.02);

	/* Glass: subtle มาก */
	--glass-bg: rgba(255,255,255,0.03);
	--glass-border: rgba(255,255,255,0.06);
	--glass-shadow: 0 8px 32px rgba(0,0,0,0.5);

	/* Shadows เข้มขึ้นเพราะ bg เข้ม */
	--shadow-sm: 0 2px 12px rgba(0,0,0,0.4);
	--shadow-md: 0 4px 24px rgba(0,0,0,0.5);
	--shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
}

body[data-color="purple"] {
	--color-6: #1A3BCC;
	--color-7: #0F2A8A;
	--color-8: rgba(26,59,204,0.15);
	--primary: #1A3BCC;
	--primary-light: rgba(26,59,204,0.1);
	--primary-dark: #0F2A8A;
	--primary-rgb: 26,59,204;
}

body[data-color="blue"] {
	--color-6: #1A3BCC;
	--color-7: #0F2A8A;
	--color-8: rgba(26,59,204,0.15);
	--primary: #1A3BCC;
	--primary-light: rgba(26,59,204,0.1);
	--primary-dark: #0F2A8A;
	--primary-rgb: 26,59,204;
}

body {
	font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	letter-spacing: -.015em;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	min-width: 375px;
	color: var(--text-primary);
	background-color: var(--bg-main);
}

a {
	text-decoration: none !important;
	/* no !important on colour: it was beating every inline link colour on the
	   marketing pages (dark card labels, the LINE CTA, …). style.css loads after
	   bootstrap.css, so this still wins over bootstrap's default link colour. */
	color: var(--text-primary)
}

a,
[type="checkbox"] {
	cursor: pointer;
}


a:hover {
	color: var(--primary) !important;
}

button,
input {
	background-color: transparent;
	line-height: 0;
	border: 0;
	padding: 0;
}

button:focus,
input:focus {
	outline: 0 !important;
	border: none !important
}

b,
strong {
	letter-spacing: -.01em;
	font-weight: 600;
	line-height: 1.6;
	transition: all 0.15s ease;
}

.hidden {
	display: none!important
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-track {
	background: var(--bg-main);
}

.primary-color {
	color: var(--primary) !important;
	font-weight: 600
}

.alert {
	border-radius: var(--radius-md);
	border: none !important;
	font-weight: 500;
}

.alert.alert-success {
	color: var(--success) !important;
	background: var(--success-bg) !important;
}

.alert.alert-danger {
	color: var(--danger) !important;
	background: var(--danger-bg) !important;
}

body:not(.dark) .alert.alert-success { color: #0B6B4F !important; }
body:not(.dark) .alert.alert-danger { color: #B32020 !important; }
body:not(.dark) .alert.alert-warning { color: #8A5300 !important; }

.badge {
	background: var(--primary) !important;
	color: #fff !important;
	border-radius: var(--radius-pill);
	font-weight: 600;
	padding: 4px 12px;
}

.homeSection {
	padding: 100px 0
}

.logo {
	width: 48px;
	height: 48px;
}

.logo img {
	width: 100%;
}

.sidebar.active .main-logo {
	display: none
}

body.dark .main-logo {
	display: block;
}

.sidebar.active .logo {
	width: 200px
}

.icon-small {
	-webkit-transform: scale(0.834);
	transform: scale(0.834);
}

.c-pointer {
	cursor: pointer;
}

.transition {
	transition: all 0.15s ease;
}

main {
	margin-left: 80px;
	padding-top: 85px;
	transition: all 0.15s ease;
}

body.sidebar-expanded main {
	margin-left: 300px;
}

#outside main {
	margin-left: auto;
	/* the 85px above clears the fixed dashboard header; guest/marketing pages have a sticky nav in flow, so it only showed as a white strip above every hero */
	padding-top: 0
}

.overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: all 0.2s ease;
}

body.dark .overlay {
	background-color: rgba(0, 0, 0, 0.6);
}

.overlay.active {
	visibility: visible;
	opacity: 1;
}

/* Hide overlay on desktop - sidebar toggle without blur */
@media (min-width: 768px) {
	.overlay {
		display: none !important;
	}
}

header {
	background-color: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--border);
	position: fixed;
	min-width: 375px;
	top: 0;
	left: 80px;
	right: 0;
	z-index: 1000;
	transition: all 0.2s ease;
}

body.sidebar-expanded header {
	left: 300px;
}

.navbar .nav-item:not(:last-child) {
	margin-right: 15px;
}

.navbar .menu-item {
	display: none;
}


.navbar .toggle-item .toggle-head {
	transition: all 0.15s ease;
}

.navbar .changeColor .toggle-head i {
	font-size: 24px;
	line-height: 24px;
	background-image: linear-gradient(to right, #ffbf02, #ed0082);
	color: rgba(0, 0, 0, 0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.navbar .currencyItem .toggle-head {
	color: #fff;
	border-radius: 100%;
}

.navbar .currencyItem .toggle-head i {
	font-size: 24px;
	line-height: 24px;
	color: var(--text-primary);
}


.navbar .currencyItem .toggle-body::after {
	right: 24px;
}


.navbar .currencyItem .currencyList .content .name {
	color: var(--text-primary)
}

.navbar .currencyItem .currencyList .item:hover {
	background: var(--border);
	border-radius: 10px
}

.navbar .currencyItem .currencyList .item:hover .name {
	color: var(--text-primary)
}

.navbar .currencyItem .currencyList .content .name .cSymbol {
	background: rgb(255, 255, 255, .25);
	padding: 3px 10px;
	border-radius: 5px;
	margin-right: 10px
}

.navbar .user-item .toggle-body::after {
	right: 24px;
}

.navbar .user-item .onlineDot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgb(114, 225, 40);
	bottom: 3px;
	right: -5px;
	border: 3px solid var(--bg-card);
	position: absolute
}


.navbar .nav-item {
	position: relative;
}


.navbar .nav-item .nav-link {
	position: relative;
	height: 40px;
	width: 40px;
	padding: 0;
	cursor: pointer;
}

.navbar .nav-item .toggle-head.active::before {
	transition: all 0.15s ease;
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: 14px;
	height: 14px;
	border-radius: 14px;
	border: 2px solid var(--bg-card);
	background: #FF6A55;
	z-index: 5;
}

.navbar .nav-item .toggle-body {
	right: -12px;
	width: 200px;
	position: absolute;
	z-index: 100;
	border-radius: var(--radius-md);
	top: calc(100% + 14px);
	padding: 12px;
	border: 1px solid var(--glass-border);
	background-color: var(--bg-card);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-lg);
}

.navbar .nav-item .toggle-body a {
	border-bottom: 1px solid var(--border)
}

.navbar .nav-item .toggle-body a:last-child {
	border-bottom: none
}

.navbar .nav-item .toggle-body .top .toggle-title {
	letter-spacing: -.02em;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.6;
}

.navbar .user-item .toggle-head {
	height: 40px;
	width: 40px;
	border-radius: 100%;
	background-color: var(--primary-light);
	color: var(--text-primary) !important;
	text-align: center;
	position: relative;
	border: 2px solid var(--primary);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.navbar .user-item .toggle-head span {
	font-size: 24px;
	color: var(--primary);
}

.navbar .user-item .toggle-body {
	padding: 16px !important;
	max-width: 280px;
}


.navbar .user-item .toggle-body .nav:not(:last-child) {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.navbar .user-item .toggle-body .nav a {
	color: var(--text-primary);
	width: 100%;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 12px;
	letter-spacing: -.01em;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
}

.navbar .user-item .toggle-body .nav a:hover {
	color: var(--text-primary);
}

.navbar .user-item .toggle-body .nav a.logout {
	color: #C81E1E !important; /* rgba(255,38,38,.75) was 3.0:1 on white and 2.9:1 on the dark menu */
}
body.dark .navbar .user-item .toggle-body .nav a.logout {
	color: #FF8A8A !important;
}


.navbar .user-item .toggle-body .nav a.logout:hover {
	color: rgba(255, 38, 38, 1) !important;
}

.close-sidebar {
	height: 48px;
	width: 48px;
	border-radius: var(--radius-sm);
	background-color: var(--primary-light);
	color: var(--primary);
	outline: none;
	border: none;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.close-sidebar:hover {
	background-color: var(--primary);
	color: #fff;
}

.sidebar .main-logo-lg.light, .sidebar .main-logo-lg.dark {
	display: none
}

.sidebar.active .main-logo-lg.dark {
    display: block!important;
}

.dark .sidebar.active .main-logo-lg.dark {
    display: none!important;
}

.dark .sidebar.active .main-logo-lg.light {
	display: block!important
}

.sidebar {
	overflow: hidden;
	max-width: 300px;
	height: 100vh;
	width: 100%;
	background-color: var(--bg-card);
	border-right: 1px solid var(--border);
	-webkit-overflow-scrolling: touch;
	z-index: 1010;
	transition: all 0.2s ease;
	align-items: center;
	padding: 16px 8px;
}

/* Passive sidebar - collapsed state (icons only) */
.sidebar.passive {
	max-width: 80px;
	width: 80px;
	padding: 12px 8px;
}

.sidebar.passive .menu-text {
	display: none;
}

.sidebar.passive .menu {
	margin-top: 12px !important;
}

.sidebar.passive .menu .nav-link {
	justify-content: center;
	padding: 10px;
	margin-bottom: 2px;
}

.sidebar.passive .bottom {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Arrow rotation for sidebar toggle button */
header .close-sidebar i {
	display: inline-block;
	transition: transform 0.3s ease;
}

body.sidebar-expanded header .close-sidebar i {
	transform: rotate(180deg);
}

.sidebar.passive .bottom .theme-text {
	display: none;
}

.sidebar.passive .bottom label.switch-theme {
	width: 48px;
	min-width: 48px;
	padding: 4px;
}

.sidebar.passive .bottom label.switch-theme::before {
	width: calc(100% - 8px);
	height: calc(100% - 8px);
}

.sidebar.passive .bottom label.switch-theme .mode-light,
.sidebar.passive .bottom label.switch-theme .mode-dark {
	width: 100%;
	padding: 8px;
	justify-content: center;
}

.sidebar.passive .bottom label.switch-theme .mode-dark .theme-icon,
.sidebar.passive .bottom label.switch-theme .mode-light .theme-icon {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Passive: แสดงเฉพาะ icon ที่ active + reset transform */
.sidebar.passive input#switch-theme-input:not(:checked) + label .mode-dark {
	display: none !important;
}
.sidebar.passive input#switch-theme-input:checked + label .mode-light {
	display: none !important;
}

/* Passive: reset transform ที่ media query (max-width:2000px) ทำหาย */
.sidebar.passive input#switch-theme-input:checked + label .mode-dark {
	transform: none !important;
	-webkit-transform: none !important;
	opacity: 1 !important;
}

.sidebar.passive input#switch-theme-input:checked + label .mode-light {
	transform: none !important;
	-webkit-transform: none !important;
}

/* Passive: icon margin reset */
.sidebar.passive label.switch-theme .mode-dark .theme-icon,
.sidebar.passive label.switch-theme .mode-light .theme-icon {
	margin: 0 !important;
}

/* Passive dark mode: icon สีขาว */
.dark .sidebar.passive .bottom label.switch-theme .mode-dark .theme-icon i {
	color: #FFFFFF !important;
}

.sidebar.active {
	align-items: start;
	max-width: 300px;
	width: 100%;
	box-shadow: var(--shadow-lg);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	padding: 16px 14px;
}

.sidebar.active .menu-text {
	display: inline;
}


.sidebar .border-top {
	border-color: var(--border) !important;
	width: 100%
}

.close-sidebar i {
	font-size: 24px;
}

.sidebar .menu .nav-link i {
	font-size: 24px;
	width: 24px;
	height: 24px;
	line-height: 20px;
	font-weight: 400;
}

.sidebar .menu .nav-item {
	position: relative;
}

.sidebar .menu {
	overflow-x: hidden;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.sidebar .menu::-webkit-scrollbar {
	width: 3px;
}

.sidebar .menu::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.15);
	border-radius: 10px;
}

.sidebar .nav {
	display: block;
	width: 100%
}

.sidebar .menu .nav-link {
	transition: all 0.2s ease;
	color: var(--text-secondary) !important;
	justify-content: center;
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
	font-weight: 500;
	position: relative;
	padding: 12px !important;
}

.sidebar.active .menu .nav-link {
	justify-content: start;
	padding: 12px 16px !important;
}

.sidebar.active .menu .nav-link i {
	margin-right: 10px
}

.sidebar .menu .nav-link:hover {
	color: var(--text-primary) !important;
	background: rgba(255,255,255,0.06);
}

/* Dark mode sidebar active */
.sidebar .menu .nav-link.active {
	background-color: rgba(255,255,255,0.1) !important;
	background: rgba(255,255,255,0.1) !important;
	color: #FFFFFF !important;
	font-weight: 600;
	border-left: 3px solid var(--accent) !important;
	box-shadow: none !important;
}

.sidebar .menu .nav-link.active i {
	color: var(--accent) !important;
}

.dark .sidebar .menu .nav-link.active {
	color: #FFFFFF !important;
	background-color: rgba(255,255,255,0.1) !important;
	background: rgba(255,255,255,0.1) !important;
}

.sidebar .menu .nav-link.active:hover {
	color: #FFFFFF !important;
	background-color: rgba(255,255,255,0.14) !important;
}

.dark .sidebar .menu .nav-link.active:hover {
	color: #FFFFFF !important;
}

.sidebar .menu .nav-link .icon-item {
	margin-right: 12px;
}

.sidebar.active .nav-link {
	font-size: 15px !important;
}

.sidebar.active .nav-link .icon-item {
	margin-right: 12px !important;
}

.sidebar.active .nav-link .arrow,
.sidebar.active .nav-link .badge {
	display: block !important;
}

.sidebar.active .nav-link.active-category {
	box-shadow: none !important;
	background: transparent !important;
}

.sidebar.active .arrow-show {
	display: none !important;
}

.sidebar.active .bottom label.switch-theme {
	max-width: inherit;
	height: inherit;
	margin: 10px 0;
}

.sidebar.active .bottom label.switch-theme::before {
	width: calc(50% - 4px);
	height: 32px;
}

.sidebar.active .bottom label.switch-theme .mode-dark,
.sidebar.active .bottom label.switch-theme .mode-light {
	display: flex !important;
	justify-content: center !important;
}

.sidebar.active .bottom label.switch-theme .mode-dark .theme-text,
.sidebar.active .bottom label.switch-theme .mode-light .theme-text {
	display: block;
}

.sidebar.active .bottom label.switch-theme .mode-dark .theme-icon,
.sidebar.active .bottom label.switch-theme .mode-light .theme-icon {
	margin: 0 8px 0 -10px;
	width: 24px;
}

.sidebar.active .bottom input#switch-theme-input:checked+label::before {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.sidebar.active .bottom input#switch-theme-input:checked+label .mode-dark,
.sidebar.active .bottom input#switch-theme-input:checked+label .mode-light {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.sidebar .bottom {
	flex-shrink: 0;
	padding: 10px 4px;
	width: 100%;
}

.sidebar .bottom label.switch-theme {
	margin-top: 0px;
}

.sidebar .close-sidebar {
	display: none
}

.sidebar.active .close-sidebar {
	display: block
}

.sidebar .close-sidebar i {
	color: var(--primary) !important;
	border-radius: 100%;
	padding: 2px;
}

.sidebar .sidebar-top {
	justify-content: center
}

.sidebar.active .sidebar-top {
	justify-content: space-between
}


.toggle-item .toggle-head {
	cursor: pointer;
}

.toggle-item.active .toggle-body {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.toggle-item .toggle-body {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	transition: all 0.15s ease;
}

select.select {
	display: none !important;
}

label.switch-theme {
	position: relative;
	padding: 4px;
	border-radius: var(--radius-pill);
	background-color: var(--bg-main);
	border: 1px solid var(--border);
	cursor: pointer;
	overflow: hidden;
	transition: all 0.2s ease;
}

label.switch-theme::before {
	position: absolute;
	box-sizing: content-box;
	width: calc(50% - 4px);
	height: 32px;
	border-radius: 32px;
	content: '';
	transition: background-color .15s ease, -webkit-transform .30s ease;
	transition: transform .30s ease, background-color .15s ease;
	transition: transform .30s ease, background-color .15s ease, -webkit-transform .30s ease;
	box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
	background-color: var(--bg-card);
}


label.switch-theme::before {
	box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
	background-color: var(--border);
}

label.switch-theme .mode-dark,
label.switch-theme .mode-light {
	z-index: 10;
	padding: 4px;
	width: 100%;
	border-radius: 32px;
	transition: all 0.15s ease;
}

label.switch-theme .mode-dark .theme-text,
label.switch-theme .mode-light .theme-text {
	letter-spacing: -.01em;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.6;
}


label.switch-theme .mode-dark .theme-icon,
label.switch-theme .mode-light .theme-icon {
	margin: 0 8px 0 -10px;
	line-height: 0;
}


label.switch-theme .mode-dark .theme-icon i,
label.switch-theme .mode-light .theme-icon i {
	font-size: 20px;

}

input#switch-theme-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

input#switch-theme-input:checked+label::before {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}


input#switch-theme-input:checked+label .mode-dark .theme-text {
	color: var(--text-primary);
}


input#switch-theme-input+label .mode-light .theme-text {
	color: var(--bg-main);
}

input#switch-theme-input+label .mode-light .theme-text {
	color: var(--text-primary);
}

.card {
	transition: all 0.2s ease;
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}

.card.card-bg {
	background: var(--bg-card) url(https://storage.perfectcdn.com/3d2d0d/2yb6an5i5g6c3nfa.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.card.bg-primary {
	background: var(--primary) !important;
	color: #fff !important;
	border: none;
}

.card.bg-primary h4,
.card.bg-primary p {
	color: #fff !important;
}

.card.bg-primary .btn-light {
	color: var(--text-primary) !important;
}

.card.bg-primary .btn-light:hover {
	color: var(--text-primary) !important;
}

.card-head {
	border-radius: 8px 8px 0 0;
	background: url(https://storage.perfectcdn.com/a3vltc/1yhpppjrt5yfqf5h.png);
	padding: 0 20px 0 25px
}

.dark .card-head {
	background: url(https://storage.perfectcdn.com/a3vltc/j69e28mcbcxja0ry.png);
	border-bottom: 1px solid var(--border)
}

.card-head h4 {
	color: var(--text-primary);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 32px;
}

h4.acc-head {
	color: var(--text-primary);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 32px;
}

.card-head-icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-size: 20px;
	background-color: var(--primary-light);
	color: var(--primary);
}

.card-head-title {
	padding: 30px 0;
	position: relative;
	display: inline-block;
}

.card-head-title::after {
	content: "";
	position: absolute;
	background-color: var(--primary);
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 3px;
}

.desc-list {
	height: 47px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--border);
	border-radius: 15px;
	margin-top: 5px;
	font-weight: 500;
}

.desc-list .icon {
	width: 32px;
	height: 32px;
	color: var(--primary);
	background-color: var(--primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.btn {
	position: relative;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	padding: 15px 30px;
	border: none;
	color: #fff;
}

#outside .btn {
	border-radius: 25px
}

.btn:hover,
btn:focus {
	color: #fff !important
}

.btn-sm {
	font-size: 14px !important;
	padding: 6px 12px;
}

.btn-rounded {
	border-radius: var(--radius-pill);
}

.btn-border {
	border: 1px solid var(--primary) !important;
}

.btn-100 {
	display: block;
	width: 100%;
}

.btn-100.btn-icon {
	display: flex;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
	background: #ffd7d7!important
}

.dark .btn-dark,
.btn-dark:hover,
.btn-dark:focus {
	background: var(--bg-main)!important
}

/* light mode paints .btn-dark pink (#ffd7d7) but bootstrap keeps its label white
   -> 1.32:1. Give it a readable label instead of changing the brand colour. */
body:not(.dark) .btn-dark,
body:not(.dark) .btn-dark:hover,
body:not(.dark) .btn-dark:focus {
	color: #7A1B1B !important;
}

.btn-primary {
	background: var(--primary);
	font-size: 16px;
	color: #fff !important;
	border-radius: var(--radius-pill);
	border: none;
	padding: 12px 28px;
	transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--primary-dark) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-secondary {
	background: var(--accent);
	font-size: 16px;
	color: var(--accent-text) !important;
	border-radius: var(--radius-pill);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-secondary a,
.btn-secondary a:hover,
.btn-secondary a:focus {
	color: var(--accent-text) !important;
}

.btn-rounded {
	color: #fff !important
}

.btn-danger {
	background: var(--danger);
	color: #fff;
	font-size: 16px;
	border-radius: var(--radius-pill);
	border: none;
	padding: 12px 28px;
	transition: all 0.2s ease;
}

.btn-danger:hover,
.btn-danger:focus {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.form-control {
	letter-spacing: -.01em;
	padding: 12px 24px;
	font-size: 14px;
	border-radius: var(--radius-sm) !important;
	background: var(--bg-main);
	color: var(--text-primary);
	border: 1px solid var(--border);
	height: 50px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.form-control:focus {
	box-shadow: 0 0 0 3px var(--primary-light) !important;
	background: var(--bg-card);
	color: var(--text-primary);
	border-color: var(--primary);
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--border);
}

select.form-control {
	border: none
}

.form-group label {
	padding-bottom: 5px
}

.search-input {
	z-index: 15;
	transition: all 0.15s ease;
}

.search-input.input-group {
	width: 35%;
}

.search-input .input-group-text {
	background-color: transparent !important;
}

.search-input input.form-control {
	letter-spacing: -.01em;
	padding: 12px 24px;
	border-radius: 8px !important;
	background: var(--bg-main)
}

.search-input input.form-control:focus {
	box-shadow: none !important;
}

.search-input .btn-command {
	position: absolute;
	transition: all 0.15s ease;
}

.search-input .btn-command {
	box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
	background-color: var(--border);
	border-radius: 8px;
	width: 56px;
	height: 32px;
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
	line-height: 1.5;
	right: 8px;
	z-index: 5;
	transition: all 0.15s ease;
}

.search-input .btn-command .symbol {
	font-size: 20px;
	font-weight: 400;
	padding-right: 4px;
}


.input-group {
	position: relative;
}

.input-group .input-group-text {
	position: absolute;
	z-index: 10;
	padding: 0 8px;
	top: 2px;
	bottom: 2px;
	fill: var(--text-secondary);
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-main);
	transition: all 0.15s ease;
	border: none
}

.input-group .input-group-text:not(:last-child) {
	left: 2px;
}

.input-group .input-group-text:not(:first-child) {
	right: 2px;
}

.input-group .input-group-text.transparent {
	background-color: transparent !important;
}

.card.userCard {
	position: relative
}

.userCard .ud-row {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	width: calc(100% + 1.5rem);
}

.userCard .ud-card {
	padding: 25px 40px 25px 40px
}

.userCard .ud-card h5 {
	position: relative;
	width: max-content
}

.userCard .ud-card h5 img {
	position: absolute;
	top: 2px;
	right: -23px;
	width: 20px
}

.userCard .userDetails {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin-right: 30px
}

.userCard .userDetails .ud-icon {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	font-size: 1.25rem;
	line-height: 1;
	overflow: hidden;
	user-select: none;
	border-radius: 8px;
	color: var(--primary);
	background-color: var(--primary-light);
	margin-right: 1rem;
}

.userCard .userDetails .ud-text {
	display: flex;
	flex-direction: column;
}

.userCard .userDetails .ud-text h6 {
	line-height: 1.6;
	letter-spacing: 0.15px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 0
}

.userCard .userDetails .ud-text span {
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1.25;
	letter-spacing: 0.4px;
	color: var(--text-primary);
}

.userCard .ud-img {
	right: 0px;
	bottom: 0px;
	width: 275px;
	position: absolute;
}

.userCard .ud-img-3 {
	right: 10px;
	bottom: 0px;
	width: 125px;
	position: absolute;
}

.rankCard {
	position: relative
}

.rankCard .rc-img {
	right: 15px;
	top: 0px;
	width: 85px;
	position: absolute;
}

.rankCard .rc-img-2 {
	right: 10px;
	bottom: -10px;
	width: 110px;
	position: absolute;
}

.rankCard .rc-card {
	min-width: 550px;
	padding: 15px 40px 15px 40px
}

.rankCard .progress {
	background-color: var(--primary-light);
	border-radius: 10px;
	height: 1.2rem;
	width: 80%;
	position: relative
}

.rankCard .progress-bar {
	background-color: var(--primary);
}

.rankCard .rc-card #placePercent {
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 9px;
	left: 15px
}

.form-select {
	background-color: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-primary);
	height: 58px;
	padding: 0 26px;
	max-width: 100%;
	width: 100%;
	transition: all 0.2s ease;
}

.form-select:focus {
	outline: none;
	border-color: var(--primary);
	background-color: var(--bg-card);
	color: var(--text-primary);
	box-shadow: 0 0 0 3px var(--primary-light);
}

.form-select:disabled {
	background-color: var(--bg-main);
	border: 1px solid var(--border);
}

.dd-btn.dropdown-toggle {
	height: 58px;
	border-radius: 15px
}


.dd-btn.dropdown-toggle::after {
	display: none !important
}

.pagination .page-item.active .page-link {
	background-color: var(--primary);
	color: #fff;
	border-radius: var(--radius-sm);
}

.pagination .page-item:first-child {
	border-right: 1px solid var(--bg-main);
}

.pagination .page-item:first-child .page-link {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	font-weight: 400;
}

.pagination .page-item:last-child {
	border-left: 1px solid var(--bg-main);
}

.pagination .page-item:last-child .page-link {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-weight: 400;
}

.pagination .page-item .page-link {
	background: var(--bg-card);
	border: none;
	margin: 0;
	height: 50px;
	padding: 0px;
	min-width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	color: var(--text-primary);
	position: relative;
	transition: all 0.2s ease;
}

.pagination .page-item .page-link:hover {
	color: var(--text-primary);
}

.pagination .page-item .page-link:focus {
	z-index: 20;
}

.search-services {
	height: 40px;
	position: relative;
}

.search-services:focus-within .icon {
	color: var(--text-primary);
}

.search-services .icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	color: var(--text-muted);
	transition: 0.14s ease;
}

.search-services .textbox {
	width: calc(100% - 40px);
	margin-left: 40px;
	height: 40px;
	background-color: transparent;
	outline: none;
	border: none;
	color: var(--text-primary);
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
}

.search-services .textbox::placeholder {
	color: var(--text-muted);
}

.s-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.s-row.s-title {
	font-weight: 600;
	display: none;
}


.services-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.si-wrapper {
	flex: 0 0 auto;
	width: 100%;
	position: relative;
}

.s-col {
	flex: 0 0 auto;
}

.service-item {
	padding: 12px 30px;
	margin-bottom: 10px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	box-sizing: border-box;
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
}

.service-item:hover {
	border-color: var(--primary-light);
	box-shadow: var(--shadow-sm);
}


.service-item .s-col-id i {
	cursor: pointer
}

.services-head-row .service-item {
	background-color: transparent;
	border: none;
}

.sp-serv-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
}

.sp-services .card {
	margin-bottom: 30px;
}


.si-header {
	padding: 15px 30px;
	background: var(--primary);
	border-radius: var(--radius-sm);
	border: none;
	margin-bottom: 14px;
}

.si-header .si-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 23px;
	color: #fff;
	margin-bottom: 0;
}

.modal-wrapper {
	margin: auto;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
}

.modal-wrapper.active {
	display: flex;
}

.mbo-wrapper {
	height: 100%;
	width: 100%;
	padding: 40px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-y: auto;
}

.modal-box {
	margin: auto 0;
	width: 80%;
	border-radius: var(--radius-lg);
	background: var(--bg-card);
	border: 1px solid var(--glass-border);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-lg);
	text-align: left;
	position: relative;
}

.modal-box .m-body .form-control {
	background: var(--bg-card);
	border: 1px solid var(--border)
}

.m-header {
	padding: 30px 30px 60px;
	background-color: var(--bg-main);
	border-radius: 25px 25px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.m-header>* {
	text-align: center;
}

.m-body {
	padding: 30px;
	overflow: hidden;
	max-width: 100%;
}

.m-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: -0.005em;
	color: var(--text-primary);
	margin-bottom: 0;
	word-break: break-word;
	word-wrap: break-word;
	white-space: normal;
	max-width: 100%;
	min-width: 40%;
}

.m-close {
	border: none;
	outline: none;
	background-color: transparent;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary); /* was #fff: invisible on the light modal header */
	font-size: 20px;
	border-radius: 15px;
	position: absolute;
	z-index: 3001;
	top: 15px;
	right: 15px;
}

.m-close:focus {
	box-shadow: 0 0 0 0.25rem rgba(1, 57, 255, 0.2);
}

.m-sub-title {
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
	line-height: 26px;
	letter-spacing: -0.005em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0;
}

#serviceModalText {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 15px;
	padding: 30px;
	margin-top: -60px;
	white-space: break-spaces;
}

/* Parsed service modal fields */
.svc-modal-raw.d-none { display: none !important; }

.svc-parsed-fields .desc-list {
	min-height: 44px;
	height: auto;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--radius-sm);
	background: var(--bg-main);
	font-weight: 500;
	font-size: 14px;
	overflow: hidden;
}

.svc-parsed-fields .desc-list .text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.svc-parsed-fields .desc-list .icon {
	width: 28px;
	height: 28px;
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: var(--primary-light);
	border-radius: 8px;
}

.svc-parsed-fields .form-label {
	font-size: 12px;
	color: var(--text-secondary);
	margin-bottom: 6px;
	font-weight: 600;
}

.svc-parsed-desc {
	background: var(--bg-main);
	border-radius: var(--radius-sm);
	padding: 16px;
	border: none;
	font-size: 13px;
	line-height: 1.8;
	color: var(--text-secondary);
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	max-height: 350px;
	overflow-y: scroll;
}

.header-msg {
	margin-left: 25px
}

.service-modal-id {
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	color: #ffffff;
	background: var(--primary);
	border-radius: 15px;
	padding: 14px 23px;
	margin-bottom: 16px;
}


.order-modal .m-header {
	padding: 15px
}

.order-modal .m-body {
	padding: 30px 15px
}

.dropdown-menu {
	background: var(--bg-card);
	border-color: var(--border);
	border-radius: 15px;
	top: 4px !important;
	min-width: 100%;
}

.dropdown-menu .dropdown-item {
	color: var(--text-primary)
}

.dropdown-menu .dropdown-item:hover {
	background: var(--primary-light);
	color: var(--primary);
}

.op-stats {
	display: block;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	border: 1px solid var(--border);
	background-color: var(--bg-card);
	border-radius: var(--radius-pill);
	padding: 5px 16px;
}

.op-stats.completed {
	background-color: var(--success-bg);
	border: 1px solid var(--success);
	color: var(--success);
}

.op-stats.processing {
	background-color: rgba(246, 86, 25, .15);
	border: 1px solid #f65619;
	color: #f65619;
}

.op-stats.inprogress {
	background-color: var(--info-bg);
	border: 1px solid var(--info);
	color: var(--info);
}

.op-stats.pending {
	background-color: var(--warning-bg);
	border: 1px solid var(--warning);
	color: var(--warning);
}

.op-stats.partial {
	background-color: rgba(129, 129, 129, .15);
	border: 1px solid #818181;
	color: #818181;
}

.op-stats.cancelled {
	background-color: rgb(255, 62, 124, .25);
	border: 1px solid #ff3e7c;
	color: #ff3e7c;
}

/* Status hues are tuned for the dark shell; on the light surface they land at
   2.5-3.4:1. Keep the tint, darken the label + border for light mode only. */
body:not(.dark) .op-stats.completed { color:#0B6B4F; border-color:#0B6B4F; }
body:not(.dark) .op-stats.processing { color:#B23C08; border-color:#B23C08; }
body:not(.dark) .op-stats.inprogress { color:#1D4ED8; border-color:#1D4ED8; }
body:not(.dark) .op-stats.pending { color:#8A5300; border-color:#8A5300; }
body:not(.dark) .op-stats.partial { color:#5C5C5C; border-color:#5C5C5C; }
body:not(.dark) .op-stats.cancelled { color:#C21D53; border-color:#C21D53; }

.tooltip-inner {
	background-color: var(--primary) !important;
	color: #fff;
	font-size: 11px
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: var(--primary) !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: var(--primary) !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: transparent !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: var(--primary) !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: transparent !important;
}

.bs-toast {
	background: var(--primary);
	border: 1px solid var(--primary-dark) !important;
	color: #fff;
	padding: 10px 24px;
	border-radius: var(--radius-md);
	position: fixed;
	bottom: 30px;
	left: 40px;
	width: 100%;
	width: max-content;
	max-width: 350px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: none;
	z-index: 3000;
	text-align: center
}

.bs-toast .bs-toast-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.bs-toast .toast-text {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	font-size: 14px;
	font-weight: 500
}

.bs-toast .toast-times {
	cursor: pointer;
	border: none;
	outline: 0;
	color: #fff;
	background: 0 0
}

.svg-icon.verified {
	color: #009ef7
}

.me-0 {
	margin-right: 0 !important
}

.me-1 {
	margin-right: .25rem !important
}

.me-2 {
	margin-right: .5rem !important
}

.me-3 {
	margin-right: 1rem !important
}

.me-4 {
	margin-right: 1.5rem !important
}

.me-5 {
	margin-right: 3rem !important
}

.me-auto {
	margin-right: auto !important
}

.ms-0 {
	margin-left: 0 !important
}

.ms-1 {
	margin-left: .25rem !important
}

.ms-2 {
	margin-left: .5rem !important
}

.ms-3 {
	margin-left: 1rem !important
}

.ms-4 {
	margin-left: 1.5rem !important
}

.ms-5 {
	margin-left: 3rem !important
}

.ms-auto {
	margin-left: auto !important
}

.pe-0 {
	padding-right: 0 !important
}

.pe-1 {
	padding-right: .25rem !important
}

.pe-2 {
	padding-right: .5rem !important
}

.pe-3 {
	padding-right: 1rem !important
}

.pe-4 {
	padding-right: 1.5rem !important
}

.pe-5 {
	padding-right: 3rem !important
}

.ps-0 {
	padding-left: 0 !important
}

.ps-1 {
	padding-left: .25rem !important
}

.ps-2 {
	padding-left: .5rem !important
}

.ps-3 {
	padding-left: 1rem !important
}

.ps-4 {
	padding-left: 1.5rem !important
}

.ps-5 {
	padding-left: 3rem !important
}

.select2-results__option a {
	color: var(--text-primary) !important;
	font-size: 14px !important
}


.select2-results__option a:hover {
	background: var(--border);
	color: var(--primary) !important
}

.select2-container--default .select2-results>.select2-results__options,
.select2-container--open .select2-dropdown--below,
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option:hover {
	background-color: var(--bg-main) !important;
}

.select2-container--default .select2-selection--single {
	height: 45px;
	line-height: 24px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	white-space: normal !important;
}

.help-block.min-max {
	display: none
}

.header-msg .header-title {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--text-primary);
}


.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	color: #fff;
	background-color: var(--primary);
	border-radius: var(--radius-pill);
}

pre.code {
	background: var(--bg-main);
	color: var(--text-primary);
}

.api-section .card-header {
	background-color: var(--border);
	;
	border-radius: 15px 15px 0 0 !important
}

.addBalance {
	margin-bottom: 9px;
	margin-top: 0;
	display: flex;
	border-radius: 10px;
	justify-content: space-between;
}

.addBalanceBtn {
	width: 24%;
	background: var(--bg-main);
	padding: 20px 16px;
	border-radius: 10px;
	text-align: center;
	border: 1px solid var(--border);
	color: var(--text-primary);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.addBalanceBtn:hover {
	border-color: var(--primary);
	color: var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(26,59,204,0.15);
}

.addBalanceBtn.active,
.addBalanceBtn:active {
	background: var(--primary);
	border-color: var(--primary);
	color: #FFFFFF;
}

.sc-sup-item {
	background: var(--bg-card);
	border: 1px solid var(--border);
	box-sizing: border-box;
	border-radius: 15px;
	padding: 18px 30px;
	display: block;
	width: 100%;
	transition: 0.14s ease;
}

.sc-sup-item:hover {
	border: 1px solid var(--primary);
}

.sc-sup-item .title {
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.sc-sup-item .text {
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	color: var(--text-primary);
	margin-bottom: 10px;
}

.sc-sup-item .text.primary-color {
	color: var(--accent) !important;
	font-size: 16px;
}

.sc-sup-item+.sc-sup-item {
	margin-top: 13px;
}

/* Transaction history — mobile: compact card layout */
@media (max-width: 768px) {
	.sc-sup-item {
		padding: 14px 16px;
	}
	.sc-sup-item .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.sc-sup-item .title {
		font-size: 11px;
		color: var(--text-muted);
		margin-bottom: 2px;
	}
	.sc-sup-item .text {
		font-size: 13px;
		margin-bottom: 0;
	}
}

.badge-secondary {
	background: var(--primary)
}

.nav-custom-pills li {
	margin-bottom: 10px
}

.nav-custom-pills li button {
	width: 100%;
	background: var(--bg-main);
	padding: 20px 16px;
	border-radius: 10px;
	text-align: center;
	border: 1px solid var(--border);
	color: var(--text-primary);
	font-weight: 600;
}

.nav-custom-pills .nav-link {
	border-radius: 10px
}

.pm-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 18px;
	color: var(--text-primary);
}

.pm-about {
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
	color: var(--text-primary);
	margin-bottom: 0px;
}

.pm-text-container {
	color: var(--text-primary);
	margin-top: 20px
}

.basket-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	z-index: 2000;
	display: none;
}

.basket-drawer {
	display: none;
	transform: translateX(100%);
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	z-index: 2003;
	background: var(--bg-card);
	border-left: 1px solid var(--glass-border);
	box-shadow: var(--shadow-lg);
	width: 350px;
	display: flex;
	flex-direction: column;
	transition: 0.2s ease;
}


.basket-drawer .drawer-header {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 80px;
	padding: 0 20px;
	background-color: var(--primary);
}

.basket-drawer .drawer-header-title {
	font-weight: 600;
	font-size: 19px;
	line-height: 22px;
	color: #ffffff;
	margin-bottom: 0;
}

.basket-drawer .basket-header-close {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	font-size: 20px;
	cursor: pointer;
	color: #fff
}

.basket-drawer .drawer-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	overflow-y: scroll;
	max-height: 90%
}

.sepetbos {
	text-align: center;
	padding-top: 50px
}

.sepetbos i {
	font-size: 46px;
	color: var(--primary)
}

#sepetListe {
	display:
		flex;
	align-items: center;
	padding: 10px 0 100px 0;
	flex-direction: column;
	overflow-y: scroll;
	height: 90%;
	width: 100%;
}

#sepetAlt {
	border-top: 1px solid var(--border);
	z-index: 999;
	height: 10%;
	align-items: center;
	bottom: 0;
	position: absolute;
	width: 100%;
	background: var(--bg-card);
	padding: 10px
}

.sptorder {
	display:
		flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.sptsol {
	width: 50%;
	text-align: left;
}

.sptfiyat {
	font-weight: 600;
	font-size: 18px;
	margin-left: 20px;
	color: var(--text-primary);
}

.sptsayi {
	font-weight: 600;
	font-size: 14px;
	margin-left: 20px;
}

.sptsag {
	width: 50%;
}

.sptsag .btn {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 10px 20px;
	font-size: 14px
}

.sepetbox {
	background: var(--bg-main);
	padding: 5px;
	color: var(--text-primary);
	border-radius: 10px;
	margin-bottom: 10px;
	border: 1px solid var(--border);
	flex-direction: row;
	justify-content: space-between;
	width: 95%;
	align-items: center;
	position: relative
}

.sepettop {
	padding: 2px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}


.sepetdetails {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sptalt {
	font-size: 12px;
	text-align: left;
	background: var(--bg-card);
	border-radius: 10px;
	padding: 5px 10px;
	width: 100%;
	margin-top: 5px;
}

.sptalt strong {
	font-size: 12px;
	color: var(--primary)
}

.sptalt span {
	color: var(--text-primary);
}

.sepetbottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sepetbottom i {
	color: #dc3545;
	font-size: 20px;
}

.sepetname {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

.sepetfiyat {
	font-weight: 600;
	font-size: 16px;
	padding-right: 15px;
}

.sepetservis {
	font-size: 12px;
	text-align: left;
	background: var(--bg-card);
	border-radius: 10px;
	padding: 10px;
}

.sepetservis strong {
	font-size: 12px;
	color: var(--primary)
}

.sepetid {
	background: var(--primary);
	padding: 3px 5px;
	border-radius: 7px;
}

#sepetsayi {
	position: absolute;
	background: var(--primary);
	border-radius: 100%;
	width: 14px;
	height: 14px;
	font-size: 11px;
	line-height: 14px;
	top: 5px;
	right: 5px;
	padding-left: 4px;
	font-weight: 600
}

body.stop-body {
	overflow: hidden;
}


body#outside {
	background-color: var(--bg-main);
	width: 100%;
	overflow-x: hidden;
}

.b-menu-wrapper {
	display: block;
	position: fixed;
	bottom: -1px;
	left: -1px;
	width: calc(100% + 2px);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: 24px 10px;
	max-height: calc(100vh - 90px);
	transition: 0.2s ease;
	transform: translateY(101%);
	opacity: 0;
	visibility: hidden;
	background: var(--bg-card);
}

.b-menu-wrapper.active {
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
	max-height: 40vh;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	transform: none;
	opacity: 1;
	visibility: visible;
	z-index: 9999;
	overflow-y: auto;
	padding: 24px 20px;
}

.sm-header {
	display: block;
	padding: 14px 0;
	transition: 0.14s ease;
}

.menu-btn {
	height: 48px;
	width: 48px;
	border-radius: 10px;
	background-color: var(--primary-light);
	color: var(--primary);
	outline: none;
	border: none;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.b-menu-close {
	height: 48px;
	width: 48px;
	border-radius: 24px;
	background-color: var(--primary-light);
	color: var(--primary);
	outline: none;
	border: none;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20px;
	z-index: 2000;
}



.head-right-btns {
	width: 100%;
	display: block;
	margin-bottom: 20px;
}


.header-btn {
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 9px 9px 30px;
	overflow: hidden;
	background-color: var(--accent);
	color: var(--accent-text) !important;
	text-decoration: none;
	transition: 0.14s ease;
}

.header-btn:hover {
	color: #fff !important;
}

.header-btn:hover .icon::after {
	transform: scale(8);
}

.header-btn .text {
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: -0.03em;
	position: relative;
	z-index: 1004;
}

.header-btn .icon {
	display: flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	position: relative;
}

.header-btn .icon .icon-ri {
	z-index: 1003;
}

.header-btn .icon::after {
	content: "";
	z-index: 1002;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: 0.4s ease;
}


.nmenu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	gap: 10px;
	padding: 10px 0 20px 0;
}


.nmenu .nmenu-item {
	position: relative;
	display: flex;
	justify-content: flex-start;
}

.nmenu .nmenu-item .nmenu-link {
	font-weight: 600;
	font-size: 23px;
	line-height: 125%;
	color: #fff !important;
	opacity: 0.8;
	padding: 7px 20px;
	transition: 0.14s ease;
	text-decoration: none;
	display: inline-block;
	text-align: left;
}


.nmenu .nmenu-item .nmenu-link::before {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 20px;
	right: 20px;
	height: 3px;
	opacity: 0;
	background-color: transparent;
}

.nmenu .nmenu-item .nmenu-link:hover {
	opacity: 0.7;
}

.nmenu .nmenu-item .nmenu-link.active {
	opacity: 1;
}

.nmenu .nmenu-item .nmenu-link.active::before {
	opacity: 1;
}

.home-logo img {
	height: 60px
}

.homeHeader {
	margin-top: -86px;
	padding-top: 86px;
	position: relative;
}

.homeHeader .homeBg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	display: inline-block;
	z-index: -1;
}

.homeHeader .homeBg img {
	width: 100%;
	height: auto;
}

.homeHeader .hhSide {
	position: relative;
	z-index: 5;
	padding: 60px 0;
}


.homeHeader .hhSide .hhTitle {
	font-size: 46px;
	font-weight: 800;
	background: linear-gradient(89.31deg, rgba(200, 255, 0, 0.4) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 64px;
}

.rotate {
	font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI';
	font-size: 52px;
	font-weight: 400;
	background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59));
	background: -webkit-linear-gradient(left, #12c2e9, #c471ed, #f64f59);
	background: -o-linear-gradient(left, #12c2e9, #c471ed, #f64f59);
	background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative
}

.homeSection .rotate {
	font-size: 48px
}

.hhBanner {
	top: -75px
}

.hhBanner .hhLine {
	position: absolute;
	top: 57%;
	left: 50%;
	display: inline-block;
	height: 600px;
	width: 600px;
}

.hhBanner {
	position: relative
}

.hhBanner .hhLine::before {
	animation-delay: 1s;
}

.hhBanner .hhLine::after,
.hhBanner .hhLine::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	z-index: -1;
	height: 100%;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.1);
	background-color: rgba(255, 255, 255, 0.02);
	animation: borderanimate 4s linear infinite;
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.homeRateItem {
	display: flex;
	align-items: center;
	gap: 17px;
}

.homeRateItem:nth-child(1) .icon {
	background: var(--primary-light);
	color: var(--primary);
}

.homeRateItem:nth-child(2) .icon {
	background: rgba(251, 188, 5, 0.15);
	color: #fbbc05;
}

.homeRateItem .icon {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.homeRateItem .text {
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #e2deff;
}

.homeRateItem .text strong {
	font-weight: 600;
	color: #fff;
}

.homeRate {
	display: flex;
	align-items: center;
	gap: 30px;
}

.homeLogin {
	padding-bottom: 75px
}

.homeLogin .btn {
	border-radius: var(--radius-pill) !important;
}

.homeLogin .card {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-lg);
	z-index: 10;
}

.homeLogin .card .hlTitle {
	background: linear-gradient(89.31deg, rgba(200, 255, 0, 0.4) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 14px;
}

.homeLogin .card .form-control,
.homeLogin .card .form-control:focus {
	background: var(--bg-main);
	color: var(--text-primary);
}

.homeLogin .card .form-control::placeholder {
	color: var(--text-muted);
}

.homeLogin .card .form-check-label,
.homeLogin .card .hlText {
	color: var(--primary);
}

.homeLogin .card .hlText a {
	color: var(--primary);
}


@-webkit-keyframes borderanimate {
	0% {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 1;
		border-width: 3px;
	}

	40% {
		opacity: 0.5;
		border-width: 2px;
	}

	65% {
		border-width: 1px;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
		border-width: 1px;
	}
}

@-moz-keyframes borderanimate {
	0% {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 1;
		border-width: 3px;
	}

	40% {
		opacity: 0.5;
		border-width: 2px;
	}

	65% {
		border-width: 1px;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
		border-width: 1px;
	}
}

@-ms-keyframes borderanimate {
	0% {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 1;
		border-width: 3px;
	}

	40% {
		opacity: 0.5;
		border-width: 2px;
	}

	65% {
		border-width: 1px;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
		border-width: 1px;
	}
}

@keyframes borderanimate {
	0% {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 1;
		border-width: 3px;
	}

	40% {
		opacity: 0.5;
		border-width: 2px;
	}

	65% {
		border-width: 1px;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
		border-width: 1px;
	}
}

.acc-avatar {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
}

.acc-username {
	font-size: 19px;
	line-height: 19px;
	letter-spacing: 0.01em;
	color: #8b98b8;
	display: flex;
	align-items: center;
}

.acc-username .txt {
	font-weight: 600;
}

.acc-username i {
	color: #0dcaf0;
}

.acc-email {
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	margin-top: 8px;
	color: #4e5d7c;
}

.acc-switch {
	display: flex;
	background: var(--primary-light);
	border-radius: 29px;
	border: 1px solid var(--primary);
	height: 58px;
	padding: 8px;
	outline: none;
	min-width: 122px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	transition: 0.14s ease;
}

.acc-switch:focus {
	box-shadow: none;
}

.acc-switch.gs-female .acc-switch-bg {
	left: 50%;
}

.acc-switch .acc-switch-bg {
	position: absolute;
	z-index: 3;
	border-radius: 40px;
	background-color: var(--primary);
	left: 8px;
	width: calc(50% - 8px);
	top: 8px;
	bottom: 8px;
	transition: 0.2s ease;
}

.acc-switch .btn-gender {
	position: relative;
	z-index: 5;
	outline: none;
	border: none;
	background-color: transparent;
	width: calc(50% - 8px);
	font-size: 18px;
	line-height: 16px;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acc-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba(2, 88, 255, 0.25);
	color: #0258FF;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acc-icon.i-1 {
	background: rgba(246, 86, 25, 0.15);
	color: #f65619;
}

.acc-icon.i-2 {
	background: rgba(0, 182, 122, 0.15);
	color: #00B67A;
}

.acc-item {
	padding: 10px 0;
	flex-wrap: nowrap;
	overflow: hidden;
}

.acc-item-title {
	font-weight: 600;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.01em;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.acc-item-text {
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: var(--text-primary);
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
}

.brandSlider {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 400px;
}

.brandSlider .bShadow {
	overflow: hidden;
	position: relative;
}

@-webkit-keyframes translateinfinite {
	100% {
		transform: translateY(calc(-60px * 6));
	}
}

@keyframes translateinfinite {
	100% {
		transform: translateY(calc(-60px * 6));
	}
}

#infinite .bShadow {
	box-shadow: var(--shadow-sm);
	background: var(--bg-main);
}

#infinite .bShadow::before,
#infinite .bShadow::after {
	content: " ";
	position: absolute;
	z-index: 9;
	width: 100%;
	height: 100px;
}

#infinite .bShadow::before {
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(21, 27, 38, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#infinite .bShadow::after {
	top: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(21, 27, 38, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#infinite .bShadow div {
	width: 100%;
	-webkit-animation: translateinfinite 25s linear infinite;
	animation: translateinfinite 25s linear infinite;
}

.productBox {
	background: var(--bg-card);
	border-radius: 10px;
	height: 60px;
	padding: 0 25px;
	margin-bottom: 10px
}

.productBox .pbLeft {
	color: #fff
}

.productBox .pbLeft i {
	width: 35px;
	text-align: center
}

.productBox .pbRight {
	background: var(--bg-main);
	border-radius: 7px;
	padding: 3px 15px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.hsTitle {
	font-size: 42px;
	font-weight: 600;
	background: linear-gradient(89.31deg, rgba(170, 86, 255, 0.38) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 48px;
}

.hsText {
	color: #e2deff
}

.sUpd.priceDown {
	color: rgba(133, 131, 251, 1)
}

.sUpd.newServ {
	color: rgba(59, 255, 211, 1)
}

.sUpd.priceUp {
	color: rgba(255, 38, 38, 1)
}

.sUpd.priceActive {
	color: rgba(255, 193, 7, 1)
}

.sUpd.priceCare {
	color: rgba(214, 97, 238, 1)
}

.chfa-box {
  background-image: url(https://storage.perfectcdn.com/3d2d0d/02feoljzhyjwggfl.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 55px 55px 0px 0px;
  padding: 105px 20px 234px 20px;
  position: relative;
  z-index: 2;
}

.chfa-box .title {
  margin-bottom: 0;
  font-weight: 700;
  color: #fff
}

.chfa-view {
  margin-top: -172px;
  z-index: 3;
  position: relative;
  text-align: center;
}

.chfa-view img {
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}

footer {
	z-index: 1;
	margin: 100px 0 0 0
}

.footer {
	position: relative;
	background: var(--bg-card);
	border-top: 1px solid var(--border);
}

.footerTop {
	padding: 100px 0 30px;
	border-bottom: 1px solid rgba(34, 46, 67, 1);
}

.footerLogo {
	background: var(--primary);
	border: 4px solid #ffffff;
	box-sizing: border-box;
	width: 102px;
	height: 102px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.footerLinks {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 10%;
}

.footerLinks li a {
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.03em;
	color: #fff !important;
	padding: 10px;
	display: block;
}

.footerCopy {
	padding: 25px 0;
	text-align: center
}

.footerCopyTx {
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.03em;
	color: rgb(234 239 255);
}

/* --- Ticket List Items --- */
.ticket-item-link {
	text-decoration: none !important;
	display: block;
	margin-bottom: 8px;
}

.tickets {
	cursor: pointer;
	position: relative;
	background: var(--bg-main);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	border: 1px solid var(--border);
	transition: all 0.2s ease;
}

.tickets:hover {
	background: var(--bg-elevated);
	border-color: var(--primary);
	box-shadow: var(--shadow-sm);
}

.tickets .avatar.me-3 {
	margin-right: 12px !important;
}

.tickets .avatar .tickets-img {
	height: 38px;
	width: 38px;
	border-radius: 50%;
	background-color: var(--primary-light);
	color: var(--primary) !important;
	text-align: center;
	position: relative;
	border: none;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tickets .avatar .tickets-img span {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary);
}

.tickets h6 {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
}

.tickets span {
	color: var(--text-muted);
	font-size: 11px;
}

.tickets .date {
	position: static;
	font-size: 11px;
	color: var(--text-secondary);
}

/* Ticket list container — scrollable */
/* Ticket list — scroll within card */
#ticketListWrap {
	max-height: 660px;
	overflow-y: auto;
	padding-right: 4px;
}

#ticketListWrap::-webkit-scrollbar {
	width: 4px;
}

#ticketListWrap::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
}

#ticketListWrap::-webkit-scrollbar-track {
	background: transparent;
}

/* Status badges — pill style with bg */
.ticketstatus {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 600;
}

.ticketstatus.completed {
	color: var(--success);
	background: var(--success-bg);
}

.ticketstatus.pending {
	color: var(--warning);
	background: var(--warning-bg);
}

.ticketstatus.closed {
	color: var(--text-muted);
	background: var(--bg-elevated);
}

/* light mode: the pill background is near-transparent, so the status text sits
   on --bg-main and the stock success/warning hues only reach 2.3:1 */
body:not(.dark) .ticketstatus.completed { color: #0B6B4F; }
body:not(.dark) .ticketstatus.pending { color: #8A5300; }
body:not(.dark) .ticketstatus.closed { color: var(--text-secondary); }

/* New ticket indicator dot */
.tickets h6 strong {
	position: relative;
}

.tickets h6 strong::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--accent);
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

/* Spacing between ticket items */
.ticket-item-link,
.card-body > a:has(.tickets) {
	display: block;
	margin-bottom: 8px;
	text-decoration: none !important;
}


/* Gap utility for status + date inline */
.tickets .gap-2 {
	gap: 8px;
}


.ticket-message-block {
	display: flex;
}

.ticket-message-block.ticket-message-left+.ticket-message-left {
	margin-top: -50px;
}

.ticket-message-block.ticket-message-right+.ticket-message-right {
	margin-top: -50px;
}

.ticket-message-block.ticket-message-right {
	justify-content: flex-end;
}

.ticket-message-block.ticket-message-right .ticket-msg-container {
	text-align: right;
}

.ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
	background: var(--primary);
	color: #fff;
	border-radius: 20px 20px 0 20px;
}

.ticket-message-block.ticket-message-left .ticket-msg-container .ticket-msg {
	border-radius: 20px 20px 20px 0px;
}

.ticket-message-block .ticket-msg-container {
	width: 100%;
	max-width: 400px;
}

.ticket-message-block .ticket-msg-container .ticket-msg {
	background: var(--bg-main);
	border-radius: var(--radius-md);
	padding: 14px 26px;
	display: inline-flex;
	margin-bottom: 12px;
	font-weight: 500;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: 0.3px;
	color: var(--text-primary);
}

.ticket-message-block .ticket-msg-container .date-time {
	font-size: 12px;
	line-height: 15px;
	color: var(--text-muted);
	margin-bottom: 30px;
	padding: 0 10px;
	display: block;
}

.schat-body .schat-chat-body {
	max-height: 553px;
	overflow-y: auto;
	margin: 0 -24px;
	padding: 0 24px;
}

.schat-body .schat-chat-body::-webkit-scrollbar {
	width: 6px;
	border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.4);
}

.schat-body .schat-input {
	padding-top: 10px;
}

.schat-msg-input {
	position: relative;
	display: flex;
	background: var(--bg-main);
	border-radius: var(--radius-sm);
	min-height: 56px;
	align-items: center;
	border: 1px solid var(--border);
}

.schat-msg-input input {
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 17px;
	color: var(--text-primary);
}

.schat-msg-input input::placeholder {
	color: var(--text-muted);
}

.scd-item {
	background: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.scd-item+.scd-item {
	margin-top: 10px;
}

.scd-item .title {
	flex: 1;
	color: var(--text-secondary);
}

.scd-item .text {
	color: var(--accent);
	font-weight: 700;
	font-size: 14px;
}

.cp-sns-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-primary);
  margin-bottom: 25px;
}

.cp-sns-dns {
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--primary);
  background-color: var(--primary-light);
  padding: 14px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.cp-right-box {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cp-right-box .cp-r-img {
  position: absolute;
  z-index: 1;
  right: 0px;
  bottom: 0px;
  top: 0px;
  width: 100%;
  background-image: url(https://storage.perfectcdn.com/a3vltc/j7sdqm0ssogw5he5.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 80%;
}

.cp-right-box .card-body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cp-right-box .cp-r-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 31px;
}

.cp-right-box .cp-r-text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  width: 100%;
}

@media (min-width: 992px) {
  .cp-right-box .cp-r-text {
    max-width: 70%;
  }
}

.cp-top {
  margin-bottom: 30px;
}

.blog-head {
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.blog-head .blog-avatar {
	width: 50px;
    height: 50px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px 3px rgb(0 0 0 / 5%);
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    font-size: 24px;
    padding-top: 3px;
    background: var(--primary-light);
}

.blog-head .blog-avatar span {
  width: 100%;
  height: 100%;
  text-align: center
}

.blog-head .blog-head--username {
  font-weight: 600;
  font-size: 19px;
  line-height: 22px;
  color: #ffffff;
  margin-bottom: 4px;
}

.blog-head .blog-head--site {
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: var(--text-muted);
}

.card-blog {
  margin-bottom: 30px;
}

.card-blog .blog-img-wrapper {
  overflow: hidden;
  position: relative;
  padding-top: 48%;
}

.card-blog .blog-img-wrapper img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-blog .blog-title {
  padding: 30px;
}

.card-blog .blog-title h2 {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.card-blog .blog-content {
  padding: 30px;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-muted);
}

.card-blog .blog-footer {
  padding: 30px;
}

.card-blog .blog-read-more {
  font-size: 16px;
  line-height: 14px;
  letter-spacing: -0.02em;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.card-blog .blog-read-more:hover {
  color: #2dfad5;
}

.card-blog .blog-read-more i {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-blog .blog-read-more span {
  font-weight: 600;
}
.blog-border {
  position: relative;
}

.blog-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background: #2a3f4e;
}

.blog-share-wrapper {
  display: flex;
  gap: 10px;
}

.blog-share-btn {
  display: inline-block;
  background: var(--bg-main);
  border: 1px solid var(--bg-card);
  box-sizing: border-box;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.14s ease;
}

.blog-share-btn i {
  transition: 0.14s ease;
}

.blog-share-btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.blog-share-btn:hover {
  color: #fff;
}

.blog-share-btn:hover i {
  transform: scale(1.2);
}

.bi-head-wrapper {
  padding: 30px 0;
}

.bi-head-box {
  background: var(--primary-light);
  border: 1px solid var(--bg-main);
  box-sizing: border-box;
  border-radius: 35px;
  position: relative;
}

.bi-head-box .bi-head-bg {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 35px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.15;
}

.bi-head-box .bi-head-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bi-head-box .bi-head-content {
  position: relative;
  z-index: 5;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .bi-head-box .bi-head-content {
    padding: 90px 30px;
  }
}

.bi-head-box .bi-head-content .bi-cat-wrapper {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

.bi-head-box .bi-head-content .bi-cat-wrapper .bi-cat {
  display: inline-block;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  box-sizing: border-box;
  color: var(--primary);
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.04em;
  padding: 15px 45px;
}

.bi-head-box .bi-head-content .bi-title h1 {
  font-weight: 600;
  font-size: 35px;
  line-height: 40px;
}

.bi-head-box .bi-head-content .user-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bi-head-box .bi-head-content .user-wrapper .blog-head {
  padding: 24px 0 0 0;
}

.bi-service-category {
  padding: 0 0 30px 0;
}

.bi-service-category .bi-s-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 22px;
  color: #ffffff;
}

.bi-service-category .bi-s-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-muted);
  margin: 0;
}

.blog-content {
  padding-bottom: 30px;
}

.bi-content {
  font-size: 16px;
  line-height: 20px;
  color: var(--text-primary);
}

.bi-content img,
.bi-content table {
  max-width: 100%;
}

.bi-share-section {
  padding-bottom: 30px;
}

.bi-share-section .blog-share-wrapper {
  justify-content: space-between;
}

ul.platforms {
	display: flex;
	align-content: center;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

ul.platforms li {
	flex-grow: 1;
}

ul.platforms li button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-main);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

ul.platforms li button:hover {
	transform: scale(1.1);
}

ul.platforms li button.all {
	background: var(--primary);
	border: 1px solid var(--primary);
}

ul.platforms li button.instagram {
	background: #ff0099;
	border: 1px solid #ff0099;
}

ul.platforms li button.twitter {
	background: #1da1f2;
	border: 1px solid #1da1f2;
}

ul.platforms li button.facebook {
	background: #3b5998;
	border: 1px solid #3b5998;
}

ul.platforms li button.youtube {
	background: #ff0000;
	border: 1px solid #ff0000;
}

ul.platforms li button.tiktok {
	background: #000000;
	border: 1px solid #000000;
}

ul.platforms li button.telegram {
	background: #0088cc;
	border: 1px solid #0088cc;
}

ul.platforms li button.steam {
	background: #000000;
	border: 1px solid #000000;
}

ul.platforms li button.discord {
	background: #7289da;
	border: 1px solid #7289da;
}

ul.platforms li button.reddit {
	background: #ff4500;
	border: 1px solid #ff4500;
}

ul.platforms li button.twitch {
	background: #6441a5;
	border: 1px solid #6441a5;
}

ul.platforms li button.snapchat {
	background: #fffc00;
	border: 1px solid #fffc00;
}

ul.platforms li button.snapchat i {
	color: #000;
}

ul.platforms li button.linkedin {
	background: #0077b5;
	border: 1px solid #0077b5;
}

ul.platforms li button.pinterest {
	background: #bd081c;
	border: 1px solid #bd081c;
}

ul.platforms li button.tumblr {
	background: #35465c;
	border: 1px solid #35465c;
}

ul.platforms li button.soundcloud {
	background: #ff5500;
	border: 1px solid #ff5500;
}

ul.platforms li button.likee {
	background: #964bff;
	border: 1px solid #964bff;
}

ul.platforms li button.website {
	background: #ff0000;
	border: 1px solid #ff0000;
}

ul.platforms li button.trendyol {
	background: #f27a1a;
	border: 1px solid #f27a1a;
}

ul.platforms li button i {
	font-size: 18px;
	color: #fff;
}

ul.platforms li button.active {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.scrollt {
		display: flex;
		overflow-x: scroll;
		overflow-y: auto;
		max-width: 100%;
	}

	.scrollt > * {
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		max-width: 100%;
		width: 100%;
		flex-wrap: nowrap;
		white-space: nowrap;
		justify-content: flex-start !important;
	}

	.scrollt ul.platforms {
		padding-bottom: 20px;
	}

	.scrollt .app-ord-nav {
		padding-top: 10px;
		padding-bottom: 20px;
	}
}

.btn-dark.active {
    background: #ff0099!important;
    border: 1px solid #ff0099!important;
}

ul.cstmnav {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-content: center;
}

ul.cstmnav li {
	flex-grow: 1;
	width: 31%;
}

ul.cstmnav li a {
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 15px;
	background: var(--bg-main);
	border: 1px solid var(--bg-card);
	line-height: 1;
  	height: 50px
}

ul.cstmnav li a i {
	margin-right: 10px;
}

ul.cstmnav li a.active {
	background: var(--primary-light);
	border: 1px solid var(--primary);
}

@media (max-width: 576px) {
	ul.cstmnav li a i {
		margin-right: 4px;
	}

	ul.cstmnav li a {
		padding: 10px 8px;
		font-size: 11px;
	}
}

.s-col-id .sp-serv-sm {
	background: var(--primary);
    padding: 5px 15px;
    border-radius: 10px;
    color: #fff;
  	font-weight: 600;
}

@media (min-width: 768px) {
  .bi-share-section .blog-share-wrapper {
    justify-content: flex-start;
    gap: 30px;
  }

  .bi-share-section .blog-share-wrapper .blog-share-btn {
    position: relative;
  }

  .bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
    content: "";
    position: absolute;
    left: -15px;
    height: calc(100% + 48px);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    background-color: var(--border);
  }
}

@media (min-width: 992px) {
  .bi-share-section .blog-share-wrapper {
    gap: 50px;
  }

  .bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
    left: -25px;
  }
}

@media (min-width: 1400px) {
  .bi-share-section .blog-share-wrapper {
    gap: 80px;
  }

  .bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
    left: -40px;
  }
}
.faq-ss-tabs .home-ss-tab {
  position: relative;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  padding: 13px 20px;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bg-main)
}

.faq-ss-tabs .home-ss-tab .fa-minus {
  display: none;
}

.faq-ss-tabs .home-ss-tab.active {
  background: var(--primary-light);
  color: var(--text-primary);
  border-radius: var(--radius-md);
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head {
  color: var(--text-primary);
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
  color: var(--text-primary);
}

.faq-ss-tabs .home-ss-tab.active .fa-minus {
  display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-plus {
  display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
  color: var(--primary);
  font-size: 16px;
  height: 30px;
  line-height: 30px;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
  display: none;
  padding-top: 12px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 170%;
  padding-bottom: 8px;
}

.nav-custom-3 {
  background: var(--bg-card);
  border-radius: 15px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 9px 12px;
}

.nav-custom-3 .nav-item .nav-link {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  padding: 16px 24px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  display: block;
  background: transparent;
  border-radius: 15px;
  border: none;
}

.nav-custom-3 .nav-item .nav-link.active {
  background: var(--primary);
}

.nav-custom-3 .nav-item .nav-link i {
  margin-right: 8px;
}

.login-section .row>* {
	flex-shrink: 0;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-top: var(--bs-gutter-y);
}
  
.login-section .card {
	border-radius: 15px !important;
    background: var(--bg-card);
    box-shadow: 1px 1px 65px 0 rgb(135 86 255 / 10%), -3px 1px 50px 0 rgb(170 86 255 / 15%), 3px 3px 15px 5px rgb(0 0 0 / 0%);
    -webkit-box-shadow: 1px 1px 65px 2px rgb(135 86 255 / 15%), -3px 1px 60px 1px rgb(170 86 255 / 25%), 3px 3px 15px 5px rgb(0 0 0 / 0%);
    -moz-box-shadow: 1px 1px 65px 2px rgba(135, 86, 255, .15), -3px 1px 60px 1px rgba(170, 86, 255, .25), 3px 3px 15px 5px rgba(0, 0, 0, 0);
    z-index: 10;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-clip: border-box;
	padding: 20px 0
}
  
.login-section .btn-primary {
  	height: 66px
}

.login-remember-me input {
	display: none;
}

.login-remember-me input:checked+.lgn-btn {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.login-remember-me .lgn-btn {
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: 15px;
	color: var(--text-secondary);
	font-size: 24px;
	transition: 0.2s ease;
	cursor: pointer;
}

.login-remember-me .lgn-btn::before {
	content: "\eae5";
	font-family: remixicon !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.log-remember-pass {
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: 15px;
	color: var(--text-secondary);
	font-size: 24px;
	transition: 0.2s ease;
	cursor: pointer;
	text-decoration: none;
}

.log-remember-pass::before {
	content: "\eed2";
	font-family: remixicon !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lg-icon {
	display: flex;
	width: 34px;
	height: 34px;
	background: rgba(33, 82, 255, 0.15);
	border: 1px solid #2152ff;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	color: var(--text-secondary);
	font-size: 17px;
}

@media (min-width: 992px) {
	.login-row>.col-start {
		flex: 0 0 auto;
		width: 64%;
	}

	.login-row>.col-end {
		flex: 0 0 auto;
		width: 36%;
	}
}

.login-input {
	border: none;
	outline: none;
	width: 100%;
	background: var(--bg-main);
    color: var(--text-secondary);
	border-radius: 15px;
	height: 66px;
	padding: 0 24px;
	font-weight: 600;
}

.login-input:focus {
	outline: none;
	background: var(--bg-main);
    color: var(--text-secondary);
}

.login-input::placeholder {
	font-weight: 600;
	color: #757fac;
}

.login-section {
	padding: 0 0 50px 0;
}

@media (min-width: 768px) {
	.login-section {
		padding: 50px 0;
	}
}

@media (max-width: 991.98px) {
	.login-row .btn-primary {
		padding: 23px 16px;
		font-size: 13px;
	}
}

.login-section .row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x));
}

.rank-features {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0
}


.modal-rank #serviceModalText {
	overflow: hidden;
    white-space: unset;
  	background: none;
  	border: none;
    padding: 0 30px;
    text-align: center
}

.modal-rank #serviceModalText .alert {
	padding: .25rem 1.25rem
}

.modal-rank #serviceModalText .alert:last-child {
	margin-bottom: 0
}

.nPlatform, .slistOne .nPlatform {
   display: none
}

.slistTwo .nPlatform  {
   display: block
}

.devServices, .ri-checkbox-circle-fill {
	display: none!important
}

.slistTwo .devServices, .slistTwo .ri-checkbox-circle-fill {
	display: block!important;
    color: #09b797!important;
	text-align: center;
    line-height: 28px;
}

.slistTwo .norServices, .slistTwo .ri-checkbox-circle-line {
	display: none!important
}

  .op-card--bottom {
	border-top: 1px solid var(--border);
    padding-top: 15px;
  }
  .op-card--top {
  	padding-bottom: 15px
  }
  .orders-nav-link {
	background: var(--bg-main);
    border: 1px solid var(--border);
    box-sizing: border-box;
    border-radius: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    transition: 0.14s ease;
}
.op-search-box {
  transition: 0.14s ease;
}
.op-search-box:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(2, 88, 255, 0.25);
}
.op-search-box .icon {
  color: var(--text-muted);
}
.op-search-box input {
  transition: 0.14s ease;
  background-color: transparent;
  border: none;
  outline: none;
  flex: 1;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
}
.op-search-box input::placeholder {
  color: var(--text-muted);
}
.op-card {
  margin-bottom: 30px;
}
.op-card .op-card--top {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.op-card .op-card--bottom {
  padding-top: 30px;
}

.op-stats {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  border: 1px solid var(--border);
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 34px;
}
.op-stats.op-stats-sm {
  padding: 10px 30px;
  border-radius: 10px;
  min-width: 100px;
  text-align: center;
}
.op-stats.op-stats-btn {
  padding: 20px 20px;
  display: inline-block;
  background: var(--primary);
  border: none;
  transition: 0.14s ease;
  color: #fff;
}
.op-stats.op-stats-btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(2, 88, 255, 0.25);
}
.op-stats.op-stats-btn.cs-btn {
  font-size: 24px;
  margin-bottom: 0;
}

.op-stats.danger-btn {
  border: 1px solid var(--primary);
  background: var(--primary-light);
  color:  var(--primary);
}

.op-service-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: var(--text-primary);
  margin-bottom: 0px;
}

.op-search-box.op-order-link {
  display: flex;
  width: 100%;
}
.op-search-box.op-order-link .link {
  display: block;
  width: 100%;
  flex: 1 0 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.op-date {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  color: var(--text-secondary);
}
.op-date::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--text-muted);
  display: inline-block;
  border-radius: 50%;
  margin-right: 14px;
  margin-left: 0px;
}

.op-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: column;
}
@media (min-width: 992px) {
  .op-item {
    flex-direction: row;
  }
}
.op-item .title {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-secondary);
}

.op-item .text {
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 27px;
}

.panel-body {
    letter-spacing: -.01em;
    padding: 12px 24px;
    font-size: 13px;
    border-radius: 15px !important;
    background: var(--bg-main);
    color: var(--text-primary);
    border: none;
}


@media (max-width: 991.98px) {
  .op-stats {
    width: max-content;
    margin: auto;
  }
  .op-stats.op-stats-sm {
      padding: 5px 25px;
      border-radius: 10px;
  }  
  .sidebar.active .sidebar-top {
      justify-content: space-between!important;
  }
}

@media (max-width: 766.98px) {
	main {
		margin-left: 0!important;
	}

	header {
		left: 0!important;
	}

	.navbar {
		width: 100%;
	}

	.navbar .nav-item:not(:last-child) {
		margin-right: 12px;
	}

	.navbar .menu-item {
		display: block;
	}

	.navbar .currencyItem .toggle-body::after {
		right: calc(50% - 10px);
	}

	.navbar .nav-item {
		position: unset;
	}

	.navbar .nav-item .toggle-body {
		width: 200px;
		right: 10px;
	}

	.navbar .user-item .toggle-body {
		max-width: unset;
	}

	.menu-toggle {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		max-width: 100%;
		top: -100%;
		left: 0;
		padding: 24px 16px;
		background-color: var(--bg-card);
		z-index: 10;
	}

	.sidebar {
		position: absolute;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		transition: background-color .15s ease, max-width .35s ease, -webkit-transform .35s ease;
		transition: background-color .15s ease, max-width .35s ease, transform .35s ease;
		transition: background-color .15s ease, max-width .35s ease, transform .35s ease, -webkit-transform .35s ease;
	}

	.sidebar.active {
		max-width: 100%;
		min-width: 375px;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.sidebar.active .close-sidebar {
		display: block;
	}

	.sidebar.active .logo {
		margin-left: 10px;
	}

}

@media only screen and (max-width: 991.98px) {
	.userCard .ud-img {
		display: none
	}

	.userCard .ud-row {
		flex-direction: column;
		width: 100%;
	}

	.userCard .userDetails {
		margin-right: 0;
		margin-bottom: 15px;
		justify-content: flex-start;
	}

	.userCard .userDetails:last-child {
		margin-bottom: 0
	}

	.navbar .btn.create {
		display: none;
	}

	.desc-list {
		font-size: 14px ;
        font-weight: 500;
	}

	.service-item .s-row {
		flex-wrap: wrap;
		align-items: center;
	}

	.service-item .s-col-avtime {
		width: 100%;
		text-align: center;
	}

	.service-item .s-col-btn {
		flex: 1;
	}

	.service-item .s-col {
		padding: 0px 0;
	}

	.service-item .s-col::before {
		content: attr(data-title);
		display: block;
		padding-bottom: 6px;
		font-weight: 600;
		color: var(--text-primary);
		font-size: 13px;
	}

	.service-item .s-col-fav {
		order: 100;
	}

	.service-item .s-col-id {
		width: 100%;
		text-align: center;
	}

	.service-item .s-title {
		width: 100%;
		text-align: center;
	}

	.service-item .s-col-c {
		width: 30%;
		text-align: center;
	}

	.service-item .s-col-d {
		width: 100%;
		text-align: center;
	}

	.search-services {
		margin-top: 15px
	}

	.m-title {
		font-size: 16px
	}

	#serviceModalText {
		padding: 15px;
		margin-top: 0
	}

	.m-header,
	.m-body {
		padding: 15px
	}

	.header-msg {
		display: none
	}

	.addF-text {
		display: none
	}

	.basket-drawer {
		width: 100%
	}

	.b-menu-wrapper .row.row-btn {
		display: unset !important
	}

	/* Compact hero on mobile — actual overrides moved to body#outside.dark section (line ~9388) for specificity */
	.homeLogin {
		padding-top: 0 !important;
		padding-bottom: 30px !important;
	}

	.hsTitle {
		font-size: 24px;
		line-height: 42px;
		text-align: center
	}

	.homeSection .rotate {
		font-size: 32px;
	}

	.tickets.d-flex {
		display: block !important;
	}

	.tickets .avatar.me-3 {
		display: none
	}

	.reg-logo {
		height: 45px
	}
    .d-flex.neworder-card {
          display: block!important
    }
    .search-input.input-group {
        width: 100%;
        margin: 20px 0;
    }
}


@media only screen and (min-width: 992px) {
	.si-wrapper {
		flex: 0 0 auto;
		width: 50%;
	}

	.s-row.s-title {
		display: flex;
	}

	.s-col {
		flex: 0 0 50px;
		width: 50px;
	}

	.s-col.s-col-sm {
		flex: 0 0 70px;
		width: 70px;
	}

	.s-col.s-col-md {
		flex: 0 0 100px;
		width: 100px;
	}

	.s-col.s-col-lg {
		flex: 0 0 180px;
		width: 180px;
	}

	.s-col.s-title {
		flex: 1 0 0;
		width: auto;
	}

	.services-wrapper {
		flex-direction: column;
	}

	.si-wrapper {
		width: 100%;
	}

	.sp-services .card {
		background-color: #fff;
		border: 1px solid #eee;
		overflow: hidden;
	}

	button .ri-history-line {
		display: none
	}

	.sc-sup-item .text {
		margin-bottom: 0;
	}

	.b-menu-wrapper {
		display: block;
		bottom: inherit;
		background-color: transparent;
		position: relative;
		border-radius: 0;
		padding: 0;
		width: 100%;
		transform: none;
		overflow: inherit;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.sm-header {
		display: none;
	}

	.b-menu-close {
		display: none;
	}

	.head-right-btns {
		display: inline;
	}

	.header-btn.without-icon {
		background-color: transparent;
		padding: 14px 30px;
	}

	.header-btn.without-icon .icon {
		display: none;
	}

	.nmenu {
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		padding: 10px 0 0 0;
	}

	.nmenu .nmenu-item .nmenu-link {
		padding: 34px 20px;
		display: block;
		font-size: 16px;
	}

	.nmenu .nmenu-item .nmenu-link::before {
		display: block;
		background-color: var(--primary) !important;
	}

	.homeHeader {
		margin-top: -127px;
		padding-top: 127px;
	}

	.homeHeader .hhSide {
		padding: 200px 0 0 0;
	}
}


@media (max-width: 2000.98px) {
	main {
		margin-left: 75px;
	}

	header {
		left: 75px;
	}

	.sidebar {
		max-width: 75px;
	}

	.sidebar .menu .nav-link {
		font-size: 0;
	}

	.sidebar .menu .nav-link .icon-item {
		margin-right: 0;
	}

	label.switch-theme {
		height: 48px;
	}

	label.switch-theme::before {
		width: calc(100% - 8px);
		height: 40px;
	}

	label.switch-theme .mode-dark .theme-text,
	label.switch-theme .mode-light .theme-text {
		display: none;
	}

	label.switch-theme .mode-dark .theme-icon,
	label.switch-theme .mode-light .theme-icon {
		margin: 4px 0 0 15px
	}


	input#switch-theme-input:checked+label::before {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}


	input#switch-theme-input:checked+label .mode-dark {
		-webkit-transform: translateX(-42px);
		transform: translateX(-42px);
	}

	input#switch-theme-input:checked+label .mode-light {
		-webkit-transform: translateX(-27px);
		transform: translateX(-27px);
		opacity: 0;
	}
}

   @media (min-width: 1199.98px) {
		.sidebar.passive {
			overflow: visible!important
		}
		.sidebar.passive .menu {
			overflow-x: visible!important;
			overflow-y: auto!important;
		}
		.sidebar.passive .nav-item {
			position: relative
		}
		.sidebar.passive .nav-item a .menu-text {
			position: absolute;
			box-shadow: 1px 0 16px -4px rgba(0, 0, 0, 0.25);
			background: var(--primary);
			color: var(--text-primary);
			width: 170px;
			z-index: 99999;
			left: 75px;
			top: 13px;
			border-radius: 10px;
			padding: 7px 15px;
			text-align: center;
			visibility: hidden;
			font-size: 13px
		}
		.sidebar.passive .nav-item a:hover .menu-text {
			visibility: visible;
			left: 88px;
			transition: 100ms
		}   
	}

/* ===== MOBILE NAVBAR — Floating Pill Modern ===== */

.mobile-navbar {
  position: fixed;
  z-index: 1031;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: auto;
  border: none;
  background-color: #1A1A2E;
  border-radius: 20px;
  padding: 8px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.mobile-navbar-content {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-around;
}

/* --- Inactive items: icon only --- */
.mnc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.5);
  transition: all 0.3s ease;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none !important;
  gap: 0;
}

.mnc-item .mnc-item-text {
  display: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.mnc-item .mnc-item-icon {
  font-size: 20px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

/* --- Active item: pill highlight + show text --- */
.mnc-item.active {
  background: var(--primary);
  color: #FFFFFF !important;
  padding: 10px 18px;
  gap: 8px;
}

.mnc-item.active .mnc-item-text {
  display: block;
  color: #FFFFFF;
}

.mnc-item.active .mnc-item-icon {
  color: #FFFFFF;
}

/* --- Hover (non-active) --- */
.mnc-item:not(.active):hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
  main {
  	padding-bottom: 80px
  }
  .sidebar {
      height: calc(100vh - 80px)!important;
  }
  .rankCard {
  		margin-top: 10px
  }
  .rankCard .rc-card {
  		min-width: 100%!important
  }
  .rankCard .rc-img {
  		display: none
  }
  .rankCard .progress {
  		width: 100%
  }
  .rankCard .rc-card .d-flex {
  		display: block!important
  }
}

@media (min-width: 768px) {
  .mobile-navbar {
    display: none;
    opacity: 0;
    transform: translateY(100%);
  }
}

.nextRank {
	color: var(--text-primary);
    font-size: 13px;
    background: var(--primary-light);
    border-radius: 15px;
    padding: 3px 10px;
}

.schat-chat-body .schat-body-content ul.chat {
	max-height: 350px;
	min-height: 350px;
	overflow-y: scroll;
	padding-right: 20px
}

.schat-chat-body .schat-body-content ul.chat::-webkit-scrollbar {
	width: 5px;
	border-radius: 2px
}

.schat-chat-body .schat-body-content ul.chat::-webkit-scrollbar-track {
	border-radius: 2px;
	background-color: rgba(255, 255, 255, .2)
}

.schat-chat-body .schat-body-content ul.chat::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: #fff
}

.schat-chat-body .schat-body-content ul.chat::-webkit-scrollbar-thumb:hover {
	background: #fff
}

.schat-chat-body .schat-body-content ul.chat li.user {
	display: flex;
	align-items: start;
	justify-content: flex-end;
	margin-bottom: 20px
}

.schat-chat-body .schat-body-content ul.chat li.user .l {
	text-align: end;
	margin-right: 30px
}

.schat-chat-body .schat-body-content ul.chat li.user .l .answer {
	background-color: var(--primary-light);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	padding: 20px;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	margin-bottom: 10px
}

.schat-chat-body .schat-body-content ul.chat li.user .l small {
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: end
}

.schat-chat-body .schat-body-content ul.chat li.user .r {
	min-width: 100px;
	max-width: 100px
}

.schat-chat-body .schat-body-content ul.chat li.user .r span.avatar {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	color: #3d455a;
	font-size: 20px;
	font-weight: 700;
	margin: 0 auto;
	text-transform: uppercase
}

.schat-chat-body .schat-body-content ul.chat li.user .r .name {
	margin-top: 8px;
	color: #dadada;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
	text-align: center
}

.schat-chat-body .schat-body-content ul.chat li.user .r small {
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	display: block
}

.schat-chat-body .schat-body-content ul.chat li.web {
	display: flex;
	align-items: start;
	justify-content: start;
	margin-bottom: 20px
}

.schat-chat-body .schat-body-content ul.chat li.web .l {
	text-align: start;
	margin-left: 30px
}

.schat-chat-body .schat-body-content ul.chat li.web .l .answer {
	background-color: var(--primary);
	color: #fff; /* was var(--text-primary): dark ink on the blue bubble in light theme = 2.06:1 */
	font-size: 14px;
	font-weight: 500;
	padding: 20px;
	border-radius: 10px;
	border-bottom-left-radius: 0;
	margin-bottom: 10px
}

.schat-chat-body .schat-body-content ul.chat li.web .l small {
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: start
}

.schat-chat-body .schat-body-content ul.chat li.web .r {
	min-width: 100px;
	max-width: 100px
}

.schat-chat-body .schat-body-content ul.chat li.web .r span.avatar {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	color: #3d455a;
	font-size: 20px;
	font-weight: 700;
	margin: 0 auto;
	text-transform: uppercase
}

.schat-chat-body .schat-body-content ul.chat li.web .r .name {
	margin-top: 8px;
	color: #dadada;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
	text-align: center
}

.schat-chat-body .schat-body-content ul.chat li.web .r small {
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	display: block
}

.schat-chat-body .schat-body-content ul.chat {
	padding-left: 0
}

@media (max-width: 991.98px) {

	.schat-chat-body .schat-body-content ul.chat li.web .r,
	.schat-chat-body .schat-body-content ul.chat li.user .r {
		display: none
	}

	.mobiledetail {
		display: block !important
	}

}

.outside-lang {
	background: #1A3BCC;
    color: #FFFFFF;
    padding: 5px;
    font-size: 24px;
    border-radius: 50%;
}

.outside-toggle {
	background: var(--bg-card);
    border-radius: 10px;
    margin-top: 10px;
}

.modal-body, .modal-header, .modal-footer {
	background: var(--bg-card)
}

.modal-header, .modal-footer {
	border-color: var(--bg-main)
}

/* --- Modal: generic dark theme (site-wide, layout-safe) --- */
/* The QR-payment modal redesign (spinner, delayed reveal, centered
   body, full-width footer buttons, QR image, info notices) was GLOBAL
   here and hijacked EVERY modal — e.g. #changeEmailModal showed a
   spinner and rendered narrow with centered text + stacked buttons.
   It now lives in addfund.twig, scoped with :has(#qr-code-image),
   because addfund.twig is the only page that renders the QR modal. */

/* Backdrop: blur glass effect — visual only, harmless on all modals */
.modal-backdrop.fade.show,
.modal-backdrop.fade.in {
	opacity: 1 !important;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Modal card: dark surface for all modals (color only, no layout) */
.modal-content {
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg) !important;
	overflow: hidden;
}

.select2-results__option a {
    border-bottom: 1px solid #2f3a50
}

.afp-ftext {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-primary);
}

.afp-top {
  margin-bottom: 30px;
}

.aft-item {
  display: flex;
  gap: 17px;
  align-items: center;
  margin: 5px 0;
}

.aft-item .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.aft-item .text {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-primary);
}

.aft-box-row {
  margin: 0 -8px -10px;
}
.aft-box-row > .col-lg {
  padding: 0 8px;
}

.aft-box-row > .col-lg:nth-child(1n) .aft-box .icon {
  background-color: #0258FF;
}
.aft-box-row > .col-lg:nth-child(2n) .aft-box .icon {
  background-color: #F65619;
}
.aft-box-row > .col-lg:nth-child(3n) .aft-box .icon {
  background-color: #8000FF;
}
.aft-box-row > .col-lg:nth-child(4n) .aft-box .icon {
  background-color: #FBBC05;
}
.aft-box-row > .col-lg:nth-child(5n) .aft-box .icon {
  background-color: #FF0099;
}

.aft-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.aft-box .icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 400;
  color: #fff
}
.aft-box .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: var(--text-primary);
}
.aft-box .text {
  font-weight: 600;
  font-size: 25px;
  line-height: 25px;
  color: var(--text-primary);
}

.dh-icon {
    background-color: var(--primary);
    color: #fff;
    border-radius: 50%;
    position: relative;
    height: 64px;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 400;
}

.btn-default {
    color: #ffffff;
    background-color: var(--primary);
}

.modal-footer {
      justify-content: center;
}

    .popup-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .popup-box {
      position: relative;
      width: 90vw;
      max-width: 500px;
    }
    .popup-box img {
      width: 100%;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
      display: block;
    }
    .popup-close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: white;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }

/* --- Bonus Table Premium --- */
.bonus-table {
  width: 100%;
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bonus-table th, .bonus-table td {
  padding: 16px 20px;
  text-align: left;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.bonus-table th {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bonus-table tbody tr {
  transition: all 0.2s ease;
}

.bonus-table tbody tr:hover {
  background: var(--primary-light);
}

.bonus-table tbody tr:hover td {
  background: transparent;
}

body.dark .bonus-table th {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}

body.dark .bonus-table td {
  background-color: var(--bg-main);
  color: var(--text-primary);
}

body.dark .bonus-table tbody tr:hover td {
  background: rgba(26,59,204,0.08);
}

/* Badge Bonus — glass pill */
.badge-bonus {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(26,59,204,0.25);
  transition: all 0.2s ease;
}

.badge-bonus-1 {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

.badge-bonus-3 {
  background: linear-gradient(135deg, #1A3BCC, #0F2A8A);
  box-shadow: 0 2px 8px rgba(26,59,204,0.3);
}

.badge-bonus-5 {
  background: linear-gradient(135deg, var(--accent), #A8D600);
  color: #000;
  box-shadow: 0 2px 12px rgba(200,255,0,0.3);
}

/* --- QR Watermark Overlay (on top of QR image) --- */
/* White band + colored text across center of QR (like Likester) */
.qr-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.75);
    padding: 5px 0;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    line-height: 1.4;
}

.qr-watermark-overlay .wm-line1 {
    font-size: 12px;
    font-weight: 700;
    color: rgba(26, 59, 204, 0.7);
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

.qr-watermark-overlay .wm-line2 {
    font-size: 9px;
    font-weight: 500;
    color: rgba(0,0,0,0.35);
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

/* --- Bonus Table Row Highlight (active tier) --- */
.bonus-table tbody tr {
    transition: all 0.2s ease;
}

.bonus-table tbody tr.bonus-row-active {
    background: var(--primary-light) !important;
    border-left: 3px solid var(--primary);
}

.bonus-table tbody tr.bonus-row-active td {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 700;
}

body.dark .bonus-table tbody tr.bonus-row-active td {
    background: rgba(26,59,204,0.12) !important;
}

/* --- Bonus Display Animations --- */
.bonus-total {
    transition: all 0.3s ease;
}

.bonus-display.tier-1 .bonus-total,
.bonus-display.tier-3 .bonus-total,
.bonus-display.tier-5 .bonus-total {
    transform: scale(1.05);
}

/* ============================================================
   ADDFUNDS PAGE — Payment Card Selector + Bonus Tiers + Fee Warning
   ============================================================ */

/* --- Payment Method Card Grid --- */
.af-method-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.af-method-card {
    background: var(--bg-main);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.af-method-card:hover {
    border-color: rgba(26,59,204,0.3);
    background: var(--bg-elevated);
}

.af-method-card.active {
    border-color: var(--accent);
    background: rgba(200,255,0,0.04);
    box-shadow: 0 0 0 1px rgba(200,255,0,0.2), 0 4px 15px rgba(200,255,0,0.08);
}

.af-method-card.active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.af-method-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--primary);
    transition: all 0.2s ease;
}

.af-method-card.active .af-method-icon {
    background: var(--accent);
    color: #000;
}

.af-method-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}

.af-method-card.active .af-method-name {
    color: var(--text-primary);
}

.af-method-badge {
    min-height: 18px;
}

.af-badge-bonus {
    font-size: 10px;
    font-weight: 700;
    color: #000;
    background: var(--accent);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.af-badge-fee {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    /* --danger (#EF4444) only reaches 3.76:1 behind white 10px text */
    background: #C62F2F;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

@media (max-width: 768px) {
    .af-method-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 400px) {
    .af-method-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Bonus Tiers Inline Pills --- */
.af-bonus-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.af-bonus-inline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.af-bonus-inline-label i {
    color: var(--accent);
    font-size: 16px;
}

.af-tier-pill {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

.af-tier-pill b {
    color: var(--primary);
    font-weight: 700;
}

/* --primary is a dark blue: 2.34:1 on the dark pill. Lift it for dark mode. */
body.dark .af-tier-pill b { color: #7C93FF; }

/* ---- accent used as TEXT ----
   #C8FF00 is a dark-shell colour: it lands at 1.05-1.18:1 on the light card
   surfaces (guests always render light). Swap to the primary hue there. */
body:not(.dark) .scd-item .text,
body:not(.dark) .af-bonus-result-total,
body:not(.dark) .af-bonus-inline-label i,
body:not(.dark) .bonus-total,
body:not(.dark) .youtube-partner-section .partner-subtitle,
body:not(.dark) .youtube-partner-section .requirement-desc,
body:not(.dark) .svc-parsed-fields .desc-list .icon { color: var(--primary); }

/* blog hero: the card is --primary-light (near white) in light mode, so the
   white article title read at 1.08:1. The 15%-opacity image behind it never
   darkens the card. */
body:not(.dark) .blog-head .blog-head--username { color: var(--text-primary); }
body:not(.dark) .blog-head .blog-head--site { color: var(--text-secondary); }

/* bootstrap's success/danger hues on the white services table: 3.1:1 */
body:not(.dark) .orlc.min { color: #0B6B4F !important; }
body:not(.dark) .orlc.max { color: #B32020 !important; }


.af-tier-pill.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text-primary);
}

.af-tier-pill-best b {
    color: var(--accent);
}

/* lime on a light surface is 1.05:1 — use the primary hue instead */
body:not(.dark) .af-tier-pill-best b {
    color: var(--primary);
}
body:not(.dark) .af-tier-pill-best.active {
    border-color: var(--primary);
    background: rgba(26,59,204,0.07);
}

.af-tier-pill-best.active {
    border-color: var(--accent);
    background: rgba(200,255,0,0.08);
}

/* --- Bonus Result Compact (inline) --- */
.af-bonus-result {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.af-bonus-result-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.af-bonus-result-total {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.af-bonus-result-unit {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.af-bonus-result-detail {
    font-size: 12px;
    color: var(--text-muted);
}

.af-bonus-result-bonus {
    color: var(--primary);
    font-weight: 600;
}

/* --- Fee Warning --- */
.af-fee-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    color: var(--danger);
    font-weight: 600;
    font-size: 14px;
}

.af-fee-warning i {
    font-size: 20px;
}

/* --- Amount Hint (inline with label) --- */
.af-amount-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

/* --- Submit Button States --- */
.af-submit-btn {
    transition: all 0.2s ease;
}

.af-submit-btn:disabled {
    background: var(--border) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.6;
    border: none !important;
}

.af-submit-btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.af-submit-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ri-spin {
    animation: spin 1s linear infinite;
}

/* --- Disclaimer --- */
.af-disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    margin-bottom: 0;
}


/* ใช้คลาส form-control เพื่อให้ครอบคลุม select ทั้งหมดที่มีคลาสนี้ */
.form-control {
   
    /* 4. ความสูง: เพิ่มความสูงเล็กน้อยเพื่อให้มีพื้นที่พอสำหรับข้อความ */
    height: 48px; /* เพิ่มจากค่าเริ่มต้นที่อาจมี */
    /* 5. กำจัดลูกศร default ของ browser ที่อาจมีปัญหาเรื่องสี */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 6. เพิ่มลูกศร custom ที่กำหนดสีได้เอง */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d1d2d3%22%20d%3D%22M287%2069.19%20146.2%20209.99%205.4%2069.19c-7.8-7.8-20.5-7.8-28.3%200s-7.8%2020.5%200%2028.3l138.5%20138.5c7.8%207.8%2020.5%207.8%2028.3%200l138.5-138.5c7.8-7.8%207.8-20.5%200-28.3s-20.5-7.8-28.3%200z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8em;
    cursor: pointer;
}

/*
 * ส่วนนี้เป็นโค้ด CSS สำหรับส่วนอัปโหลดไฟล์
 * กรุณาเพิ่มโค้ดนี้ลงในไฟล์ jaylike style.css ของคุณ
 * และควรวางไว้ท้ายๆ ของไฟล์ เพื่อให้แน่ใจว่ากฎนี้จะมีผล
 */

/* Styling for tickets-uploader (คงเดิม) */
.tickets-uploader {
    background-color: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tickets-uploader:hover {
    border-color: var(--primary);
}

/* สไตล์สำหรับเนื้อหาภายใน uploader */
/* **ข้อควรระวัง:** ถ้า .uploader-content มีการใช้ จะต้องแน่ใจว่า .files-label ไม่ได้อยู่ภายใต้และถูก override ด้วย color: var(--text-primary); */
/* หากคุณไม่มี div .uploader-content, สามารถละส่วนนี้ได้ */
.tickets-uploader .uploader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* อาจจะลบ color: var(--text-primary); ออกจากตรงนี้ หากต้องการควบคุมสีที่ระดับ files-label */
    /* color: var(--text-primary); */
    font-size: 14px;
    font-weight: 500;
}

.tickets-uploader .uploader-icon {
    font-size: 36px;
    color: var(--primary);
}

/* หากคุณมีปุ่มที่ใช้ .btn-attach ในอนาคต สไตล์นี้จะยังคงอยู่ */
/* แต่ตอนนี้ข้อความ "Attach files" ไม่ได้อยู่ในนี้แล้ว */
.tickets-uploader .btn-attach {
    background-color: var(--primary);
    color: var(--text-primary); /* ในโหมดปกติ --color-5 คือสีดำเข้ม */
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.tickets-uploader .btn-attach:hover {
    background-color: var(--accent) !important;
}

/* Dark mode adjustments สำหรับ container ทั่วไป (คงเดิม) */
body.dark .tickets-uploader {
    background-color: var(--bg-main);
    border-color: var(--border);
}

/*
 * กฎใหม่: กำหนดสีข้อความของ span.files-label ให้เป็นสีขาวในโหมดมืด
 * กฎนี้มีความเฉพาะเจาะจงสูง และใช้ !important
 */
body.dark .tickets-uploader .files-label {
    color: var(--text-primary) !important; /* จะใช้สี #FFFFFF ที่กำหนดไว้ใน --color-5 ของโหมดมืด */
}


/* สำหรับ div ที่ครอบไอคอน */
.updates-bell-item {
    display: flex; /* จัดให้เนื้อหาภายในอยู่ตรงกลาง */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    padding: 0 10px; /* เพิ่ม padding เล็กน้อยเพื่อให้มีพื้นที่รอบๆ */
}

/* สำหรับลิงก์ที่เป็นไอคอนกระดิ่ง */
.updates-bell-link {
    font-size: 24px; /* ปรับขนาดไอคอนตามต้องการ */
    color: var(--text-primary); /* สีของไอคอน (เช่น สีเทาเข้ม) */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ลิงก์ */
    position: relative; /* สำหรับตำแหน่งของ badge (ถ้ามี) */
    display: flex; /* เพื่อจัด icon ให้อยู่ตรงกลางของพื้นที่คลิก */
    align-items: center;
    justify-content: center;
    padding: 5px; /* เพิ่ม padding รอบๆ ไอคอนเพื่อให้คลิกง่ายขึ้น */
    border-radius: 50%; /* ทำให้เป็นวงกลมสำหรับพื้นที่คลิก */
    transition: background-color 0.3s ease; /* เพิ่ม transition เมื่อ hover */
}

.updates-bell-link:hover {
    background-color: rgba(0, 0, 0, 0.05); /* สีพื้นหลังเมื่อเมาส์ชี้ */
    color: var(--primary); /* เปลี่ยนสีไอคอนเมื่อ hover (เช่น สีน้ำเงิน) */
}

/* สำหรับ badge จำนวนการแจ้งเตือน (ถ้าคุณใช้) */
.notification-badge {
    position: absolute;
    top: -5px; /* ปรับตำแหน่งตามต้องการ */
    right: -5px; /* ปรับตำแหน่งตามต้องการ */
    background-color: var(--danger); /* สีของ badge */
    color: white; /* สีตัวอักษรใน badge */
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1;
    min-width: 18px; /* กำหนดขนาดขั้นต่ำ */
    text-align: center;
    box-shadow: 0 0 0 2px white; /* ขอบสีขาวรอบ badge */
}

/* ปรับขนาดไอคอนภายในลิงก์ ถ้าจำเป็น */
.updates-bell-link i {
    vertical-align: middle; /* จัดไอคอนให้อยู่กึ่งกลางแนวตั้ง */
}


/* General Enhancements (ส่วนนี้ยังคงเดิม ไม่ได้เน้นเงาอยู่แล้ว) */
.homeHeader {
    position: relative;
    padding-bottom: 50px;
}

.homeBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.homeBg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
}

/* Custom Card for Filter and Search (ลดเงาให้เรียบง่ายขึ้น) */
.custom-card-header {
    background-color: var(--bg-card);
    border-radius: 15px; /* ลดมุมมนลงเล็กน้อย */
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  ลด/เอาเงาออก */
    border: 1px solid var(--border); /* เพิ่มเส้นขอบบางๆ แทนเงา */
    padding: 30px !important;
}

/* Custom Dropdown for Filter */
.custom-dropdown .btn-primary {
    background-color: var(--primary);
    border: none;
    border-radius: 10px; /* ลดมุมมนลง */
    font-weight: 600;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease; /* เน้น transition ที่สีพื้นหลัง */
}

.custom-dropdown .btn-primary:hover {
    background-color: var(--accent);
    /* transform: translateY(-2px);  เอา effect ยกขึ้นออก */
}

.custom-dropdown .dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px; /* ลดมุมมนลง */
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  ลด/เอาเงาออก */
    padding: 10px 0;
    top: 10px !important;
}

.custom-dropdown .dropdown-item {
    color: var(--text-primary);
    padding: 10px 20px;
    transition: background-color 0.15s ease;
}

.custom-dropdown .dropdown-item:hover,
.custom-dropdown .dropdown-item.active {
    background-color: var(--border);
    color: var(--text-primary);
}

/* Custom Search Bar */
.custom-search-bar .search-services {
    position: relative;
    background-color: var(--bg-main);
    border-radius: 10px; /* ลดมุมมนลง */
    border: 1px solid var(--border); /* เพิ่มเส้นขอบ */
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.custom-search-bar .search-services .icon {
    position: static;
    width: auto;
    height: auto;
    margin-right: 10px;
    color: var(--text-primary);
}

.custom-search-bar .search-services .textbox {
    flex-grow: 1;
    width: auto;
    margin-left: 0;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    padding: 0;
    height: auto;
}

.custom-search-bar .search-services .textbox::placeholder {
    color: var(--text-primary);
    opacity: 0.7;
}

/* Custom Update Cards (ลดเงาและเอา effect ยกขึ้นออก) */
.custom-update-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border); /* เพิ่มเส้นขอบแทนเงา */
    border-radius: 10px; /* ลดมุมมนลง */
    /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);  ลด/เอาเงาออก */
    transition: border-color 0.2s ease, background-color 0.2s ease; /* เปลี่ยน transition */
}

.custom-update-card:hover {
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);  เอาเงาออก */
    /* transform: translateY(-3px);  เอา effect ยกขึ้นออก */
    border-color: var(--primary); /* เปลี่ยนสีเส้นขอบเมื่อ hover */
    background-color: var(--bg-main); /* เปลี่ยนสีพื้นหลังเล็กน้อยเมื่อ hover */
}

.custom-update-card .service-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.custom-update-card .update-date {
    font-weight: 400;
    color: var(--text-primary);
    font-size: 14px;
}

/* Base Badge Style (คงเดิมจากที่ปรับไป) */
.update-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    min-width: 120px;
}

/* Specific Badge Styles (ยังคงเดิม) */
.badge-active {
    background-color: #28a745;
    color: #fff;
}

.badge-new-service {
    background-color: var(--primary);
    color: #fff;
}

.badge-disabled {
    background-color: #dc3545;
    color: #fff;
}

.badge-price-down {
    background-color: #28a745;
    color: #fff;
}

.badge-price-up {
    background-color: #ffc107;
    color: var(--text-primary);
}

/* Custom Pagination (ลดเงา) */
.custom-pagination .page-item .page-link {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 8px; /* ลดมุมมนลงเล็กน้อย */
    margin: 0 4px;
    min-width: 40px; /* ลดขนาดเล็กน้อย */
    height: 40px; /* ลดขนาดเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
}

.custom-pagination .page-item .page-link:hover {
    background-color: var(--border);
    color: var(--primary);
}

.custom-pagination .page-item.active .page-link {
    background-color: var(--primary);
    color: #fff !important;
    border-color: var(--primary);
    /* box-shadow: none;  เอาเงาออก */
}

.custom-pagination .page-item.active .page-link:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.custom-pagination .page-item:first-child .page-link,
.custom-pagination .page-item:last-child .page-link {
    border-radius: 8px;
}

.custom-pagination .page-item.pi-pn .page-link {
    background-color: var(--bg-main);
    border-color: var(--border);
    color: var(--text-primary);
}

.custom-pagination .page-item.pi-pn .page-link:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

/* Dark Mode Adjustments for new styles (ปรับเพื่อให้เข้ากับแนวเรียบง่าย) */
body.dark .custom-card-header {
    /* box-shadow: none; */
}

body.dark .custom-dropdown .btn-primary {
    color: var(--text-primary) !important;
}

body.dark .custom-dropdown .dropdown-item:hover,
body.dark .custom-dropdown .dropdown-item.active {
    background-color: var(--border);
    color: var(--text-primary);
}

body.dark .custom-search-bar .search-services {
    background-color: var(--bg-main);
    border-color: var(--border);
}

/* Custom Google Sign-In Button for Jay Theme */
.btn-google-jay {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border) !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 18px 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -0.015em !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.btn-google-jay:hover {
    background: var(--bg-main) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

.btn-google-jay:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(23, 79, 242, 0.3) !important;
}

.btn-google-jay svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.btn-google-jay:hover svg {
    transform: scale(1.05);
}

/* Dark mode support */
body.dark .btn-google-jay {
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

body.dark .btn-google-jay:hover {
    background: var(--border) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

body.dark .custom-search-bar .search-services .textbox {
    color: var(--text-primary);
}

body.dark .custom-update-card {
    /* box-shadow: none; */
}

body.dark .custom-pagination .page-item .page-link {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

body.dark .custom-pagination .page-item .page-link:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

body.dark .custom-pagination .page-item.pi-pn .page-link {
    background-color: var(--bg-main);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Dark Mode Badge Adjustments (คงเดิม) */
body.dark .badge-active {
    background-color: #218838;
}

body.dark .badge-new-service {
    background-color: var(--primary);
}

body.dark .badge-disabled {
    background-color: #c82333;
}

body.dark .badge-price-down {
    background-color: #218838;
}

body.dark .badge-price-up {
    background-color: #e0a800;
    color: var(--bg-card);
}

/* =============================================
   REDEEM SYSTEM STYLES
   ============================================= */

/* Header Section */
.redeem-header-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 32px rgba(23, 79, 242, 0.3);
}

.redeem-header-icon i {
    font-size: 2.5rem;
    color: white;
}

.redeem-title {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.redeem-subtitle {
    color: var(--text-primary);
    opacity: 0.8;
    font-size: 1rem;
    font-weight: 400;
}

/* Main Card */
.redeem-card {
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.redeem-card-body {
    padding: 2.5rem;
}

/* User Info Display */
.user-info-display {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: white;
}

.user-info-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.username {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.balance {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Form Styling */
.redeem-form .form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.code-input-wrapper {
    position: relative;
    margin-bottom: 0.5rem;
}

.code-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

.code-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(23, 79, 242, 0.1);
    outline: none;
}

.code-input.valid {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.code-input.invalid {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.input-status-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.success-icon {
    color: #28a745;
    display: none;
}

.error-icon {
    color: #dc3545;
    display: none;
}

.code-input.valid ~ .input-status-icon .success-icon {
    display: block;
}

.code-input.invalid ~ .input-status-icon .error-icon {
    display: block;
}

.code-hint {
    font-size: 0.85rem;
    color: var(--text-primary);
    opacity: 0.7;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Result Display */
.redeem-result {
    margin-bottom: 1.5rem;
    padding: 0;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    overflow: hidden;
}

.redeem-result.show {
    opacity: 1;
    transform: translateY(0);
}

.redeem-result.success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.redeem-result.error {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.result-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.result-amount {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Submit Button */
.redeem-submit-btn {
    position: relative;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 56px;
}

.redeem-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(23, 79, 242, 0.4);
}

.redeem-submit-btn:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

.btn-content,
.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(10px);
}

.redeem-submit-btn.loading .btn-content {
    opacity: 0;
    transform: translateY(-10px);
}

.redeem-submit-btn.loading .btn-loading {
    opacity: 1;
    transform: translateY(0);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

/* Info Section */
.redeem-info {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    opacity: 0.8;
}

.info-item i {
    color: var(--primary);
    margin-top: 0.1rem;
    font-size: 1rem;
}

/* Benefits Card */
.benefits-card {
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.benefits-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.benefits-header i {
    font-size: 1.5rem;
}

.benefits-header h4 {
    margin: 0;
    font-weight: 600;
}

.benefits-list {
    padding: 1.5rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    background: var(--bg-main);
}

.benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.benefit-icon.welcome {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.benefit-icon.special {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
}

.benefit-icon.vip {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
}

.benefit-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.benefit-desc {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

/* How to Get Section */
.how-to-get {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
}

.how-to-get h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.method-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.method-item i {
    color: var(--primary);
    font-size: 1rem;
}

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .redeem-card-body {
        padding: 1.5rem;
    }
    
    .redeem-header-icon {
        width: 60px;
        height: 60px;
    }
    
    .redeem-header-icon i {
        font-size: 2rem;
    }
    
    .redeem-title {
        font-size: 1.5rem;
    }
    
    .user-info-display {
        padding: 1rem;
    }
    
    .code-input {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

/* Dark Mode Adjustments */
body.dark .redeem-card,
body.dark .benefits-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark .benefit-item {
    background: var(--border);
}

/* Free Instagram Followers Page Styling - Match signin.twig style */
.hero-section {
	padding: 60px 40px 75px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	color: #FFFFFF;
}

.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 40%);
	pointer-events: none;
}

.hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
	                   linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.hero-section h1,
.hero-section .display-4 {
	color: #FFFFFF !important;
}

.hero-section h1 .text-primary,
.hero-section .text-primary {
	color: var(--accent) !important;
}

.hero-section .lead {
	color: rgba(255,255,255,0.8) !important;
}

.hero-section .stat-item h3 {
	color: var(--accent) !important;
}

.hero-section .stat-item small {
	color: rgba(255,255,255,0.7) !important;
}

.hero-section .hero-badge .badge {
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
}

.hero-section .btn-outline-primary {
	color: #FFFFFF !important;
	border-color: rgba(255,255,255,0.4) !important;
}

.hero-section .btn-outline-primary:hover {
	background: rgba(255,255,255,0.1) !important;
	border-color: #FFFFFF !important;
}

.hero-section .card {
	background: rgba(255,255,255,0.1) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.15) !important;
}

.hero-section .card * {
	color: #FFFFFF !important;
}

.hero-section .progress {
	background: rgba(255,255,255,0.15);
}

.hero-section .progress-bar {
	background: var(--accent) !important;
}

@media (max-width: 768px) {
	.hero-section {
		padding: 40px 20px 50px;
		border-radius: var(--radius-md);
	}
}

.free-tool {
	padding-bottom: 75px;
}

/* Fix container and section layout like homeLogin */
.homeSection:has(.free-tool),
.homeSection:has(.hero-section) {
	padding: 100px 0;
}

.free-tool .card {
	background: var(--bg-card);
	box-shadow: 1px 1px 65px 0 rgb(20 60 228 / 10%), -3px 1px 50px 0 rgba(170, 86, 255, .15), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	-webkit-box-shadow: 1px 1px 65px 2px #0002ff33, -3px 1px 60px 1px rgb(116 126 245 / 11%), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	-moz-box-shadow: 1px 1px 65px 2px rgb(72 87 219 / 15%), -3px 1px 60px 1px rgba(170, 86, 255, .25), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	border-radius: 15px;
	border: none;
	z-index: 10;
}

.free-tool .card h2 {
	background: linear-gradient(89.31deg, rgb(0 94 255 / 38%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 18px;
	font-weight: 600;
}

.free-tool .card .form-control,
.free-tool .card .form-control:focus {
	background: var(--bg-main);
	color: var(--text-secondary);
	border-radius: 15px;
	border: 1px solid transparent;
}

.free-tool .card .form-control::placeholder {
	color: var(--text-muted);
}

.free-tool .card .form-select,
.free-tool .card .form-select:focus {
	background: var(--bg-main);
	color: var(--text-secondary);
	border-radius: 15px;
	border: 1px solid transparent;
}

.free-tool .card .form-text {
	color: var(--primary);
}

.free-tool .card .btn {
	border-radius: 15px !important;
}

.free-tool .card p {
	color: var(--primary);
}

/* Free tool section cards styling */
.free-tool-section .card {
	background: var(--bg-card);
	box-shadow: 1px 1px 65px 0 rgb(20 60 228 / 10%), -3px 1px 50px 0 rgba(170, 86, 255, .15), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	-webkit-box-shadow: 1px 1px 65px 2px #0002ff33, -3px 1px 60px 1px rgb(116 126 245 / 11%), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	-moz-box-shadow: 1px 1px 65px 2px rgb(72 87 219 / 15%), -3px 1px 60px 1px rgba(170, 86, 255, .25), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	border-radius: 15px;
	border: none;
}

.free-tool-section .card .form-control,
.free-tool-section .card .form-control:focus {
	background: var(--bg-main);
	color: var(--text-secondary);
	border-radius: 15px;
	border: 1px solid transparent;
}

.free-tool-section .card .form-control::placeholder {
	color: var(--text-muted);
}

.free-tool-section .card .btn {
	border-radius: 15px !important;
}

.free-tool-section .card .form-text {
	color: var(--primary);
}

/* Other sections styling */
.features-section .card,
.tips-section .card,
.faq-section .card,
.upgrade-section .card,
.related-tools .card {
	background: var(--bg-card);
	border-radius: 15px;
	border: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Input group styling */
.free-tool-section .input-group-text {
	background: var(--primary);
	color: white;
	border: none;
	border-radius: 15px 0 0 15px;
}

/* Button styling for check buttons */
.free-tool-section .btn-outline-primary {
	border-radius: 15px;
	border-color: var(--primary);
	color: var(--primary);
}

.free-tool-section .btn-outline-primary:hover,
.free-tool-section .btn-outline-primary.active,
.free-tool-section .btn-check:checked + .btn-outline-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: white;
}

/* Alert styling */
.free-tool-section .alert-success {
	background: #2dfad431;
	color: #09b797;
	border: none;
	border-radius: 15px;
}

/* New FAQ Design - Clean and Readable */
.faq-section {
	background: var(--bg-main);
	padding: 80px 0;
}

.faq-section h2 {
	color: var(--text-primary);
	font-size: 2.5rem;
	margin-bottom: 1rem;
	text-align: center;
}

.faq-section .lead {
	color: var(--text-primary);
	opacity: 0.8;
	font-size: 1.2rem;
}

.faq-item {
	margin-bottom: 1.5rem;
}

.faq-card {
	background: var(--bg-card);
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 1px solid rgba(var(--primary-rgb), 0.1);
	transition: all 0.3s ease;
}

.faq-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.faq-question {
	padding: 2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg-card);
	transition: all 0.3s ease;
}

.faq-question:hover {
	background: rgba(var(--primary-rgb), 0.05);
}

.faq-question h3 {
	color: var(--text-primary);
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	flex: 1;
	line-height: 1.4;
}

.faq-question h3 i {
	color: var(--primary);
	font-size: 1.5rem;
	margin-right: 1rem;
}

.expand-icon {
	color: var(--primary);
	font-size: 1.8rem;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.faq-question[aria-expanded="true"] .expand-icon {
	transform: rotate(45deg);
}

.faq-answer {
	padding: 0 2rem 2rem 2rem;
	background: var(--bg-card);
}

.faq-answer p {
	color: var(--text-primary);
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 0;
	opacity: 0.9;
}

.faq-answer strong {
	color: var(--primary);
	font-weight: 700;
}

/* Dark mode adjustments for FAQ */
body.dark .faq-section {
	background: var(--bg-main);
}

body.dark .faq-card {
	background: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

body.dark .faq-card:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

body.dark .faq-question,
body.dark .faq-answer {
	background: var(--bg-card);
}

body.dark .faq-question:hover {
	background: rgba(var(--primary-rgb), 0.1);
}

/* Tips section styling */
.tips-section .card {
	background: var(--bg-card);
	box-shadow: 1px 1px 65px 0 rgb(20 60 228 / 10%), -3px 1px 50px 0 rgba(170, 86, 255, .15), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	border: none;
	border-radius: 15px;
}

.tips-section .card .card-body h2 {
	background: linear-gradient(89.31deg, rgb(0 94 255 / 38%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tips-section .tip-item h5 {
	color: var(--primary);
}

.tips-section .tip-item p {
	color: var(--text-secondary);
}

/* How it works section styling */
.how-it-works .step-card {
	background: var(--bg-card);
	border-radius: 15px;
	padding: 2rem;
	box-shadow: 1px 1px 65px 0 rgb(20 60 228 / 10%), -3px 1px 50px 0 rgba(170, 86, 255, .15), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	margin-bottom: 2rem;
}

.how-it-works .step-card h4 {
	color: var(--primary);
}

.how-it-works .step-card p {
	color: var(--text-secondary);
}

.how-it-works .badge {
	background: var(--primary) !important;
}

/* Upgrade section styling */
.upgrade-section .card {
	background: var(--primary) !important;
	border-radius: 15px;
	border: none;
}

/* Related tools styling */
.related-tools .card {
	background: var(--bg-card);
	box-shadow: 1px 1px 65px 0 rgb(20 60 228 / 10%), -3px 1px 50px 0 rgba(170, 86, 255, .15), 3px 3px 15px 5px rgba(0, 0, 0, 0);
	border: none;
	border-radius: 15px;
}

.related-tools .card .card-body h5 {
	color: var(--primary);
}

.related-tools .card .card-body p {
	color: var(--text-secondary);
}

/* General text styling for Instagram followers page */
.homeSection h2:not(.hlTitle) {
	background: linear-gradient(89.31deg, rgb(0 94 255 / 38%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg, #ffffff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 600;
}

.homeSection .lead {
	color: var(--text-secondary);
}

/* Timeline Styles - Achievement Timeline Section */
.timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), rgba(var(--primary-rgb), 0.3));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
}

.timeline-item:nth-child(odd) {
    text-align: right;
    padding-right: calc(50% + 2rem);
}

.timeline-item:nth-child(even) {
    text-align: left;
    padding-left: calc(50% + 2rem);
}

.timeline-year {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.timeline-content {
    background: var(--bg-main);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Timeline Mobile Responsiveness */
@media (max-width: 768px) {
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        text-align: left;
        padding-left: 3rem;
        padding-right: 0;
    }
    
    .timeline-year {
        left: 20px;
        transform: translateX(-50%);
    }
}

/* YouTube Partner Program Section - Redesigned */
.youtube-partner-section {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 0, 0, 0.02) 100%);
    padding: 4rem 0;
    border-radius: 20px;
    margin: 2rem 0;
}

.youtube-partner-section .youtube-logo-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF0000, #CC0000);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
}

.youtube-partner-section .youtube-logo-badge i {
    font-size: 2.5rem;
    color: white;
}

.youtube-partner-section .partner-title {
    color: var(--primary-light);
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.youtube-partner-section .partner-subtitle {
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0;
}

.youtube-partner-section .requirement-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.youtube-partner-section .requirement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.3);
}

.youtube-partner-section .card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.05));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(255, 0, 0, 0.2);
}

.youtube-partner-section .card-icon i {
    font-size: 2rem;
    color: #FF0000;
}

.youtube-partner-section .requirement-number {
    color: #FF0000;
    font-weight: 800;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.youtube-partner-section .requirement-label {
    color: var(--primary-light);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.youtube-partner-section .requirement-desc {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 400;
}

.youtube-partner-section .partner-cta {
    background: linear-gradient(135deg, var(--primary), rgba(23, 79, 242, 0.9));
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(23, 79, 242, 0.2);
}

.youtube-partner-section .cta-title {
    color: white;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.youtube-partner-section .cta-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.youtube-partner-section .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.youtube-partner-section .btn-youtube {
    background: linear-gradient(135deg, #FF0000, #CC0000);
    border: none;
    color: white;
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 200px;
}

.youtube-partner-section .btn-youtube:hover {
    background: linear-gradient(135deg, #E60000, #B30000);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.3);
    color: white;
}

.youtube-partner-section .btn-premium {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 200px;
}

.youtube-partner-section .btn-premium:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .youtube-partner-section .partner-title {
        font-size: 2rem;
    }
    
    .youtube-partner-section .requirement-number {
        font-size: 2.5rem;
    }
    
    .youtube-partner-section .requirement-label {
        font-size: 1.25rem;
    }
    
    .youtube-partner-section .cta-title {
        font-size: 1.5rem;
    }
    
    .youtube-partner-section .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .youtube-partner-section .btn-youtube,
    .youtube-partner-section .btn-premium {
        width: 100%;
        max-width: 300px;
    }
}

/* Free Tools Page Styles */
.stat-box:hover {
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

.free-tool-form {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 15px;
    padding: 2rem;
}

.feature-card:hover,
.tool-card:hover,
.feature-highlight:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.step-number {
    position: relative;
}

.step-card:not(:last-child) .step-number::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -100%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: -1;
}

@media (max-width: 991px) {
    .step-card .step-number::after {
        display: none;
    }
}

.free-tool-mockup {
    position: relative;
}

.free-tool-mockup::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(45deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.2));
    border-radius: 20px;
    z-index: -1;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.tool-card,
.feature-highlight {
    border: none;
    transition: all 0.3s ease;
}

.hero-actions .btn {
    transition: all 0.3s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* ============================================================
   REFER & EARN — Sidebar Button + Modal
   ============================================================ */

/* --- Sidebar Refer Button --- */
.refer-earn-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
}

.refer-earn-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--accent);
	color: #000;
	border: none;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.refer-earn-btn i {
	font-size: 16px;
}

.refer-earn-btn:hover {
	background: var(--accent-hover);
	box-shadow: 0 4px 16px rgba(200,255,0,0.25);
}

/* Collapsed sidebar: icon only, small */
.sidebar.passive .refer-earn-btn {
	padding: 8px;
	gap: 0;
}

.sidebar.passive .refer-earn-btn .menu-text {
	display: none;
}

/* --- Refer Modal --- */
.refer-modal {
	max-width: 440px;
	text-align: center;
	overflow: hidden;
	padding: 0 !important;
}

.refer-modal .refer-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: rgba(0,0,0,0.3);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.refer-modal .refer-close:hover {
	background: rgba(0,0,0,0.5);
}

.refer-hero {
	background: linear-gradient(135deg, var(--primary) 0%, #0F2A8A 100%);
	padding: 30px 30px 20px;
	position: relative;
}

.refer-hero-img {
	display: block;
	margin: 0 auto;
	max-width: 180px;
	height: auto;
}

.refer-modal-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--accent);
	color: #000;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 13px;
	margin-top: 16px;
}

.refer-timer-digits {
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
}

.refer-modal-body {
	padding: 24px 28px 28px !important;
}

.refer-modal-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.refer-modal-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 20px;
}

/* --- How it works steps --- */
.refer-steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	margin-bottom: 24px;
}

.refer-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.refer-step-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--primary-light);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.refer-step-icon.refer-step-earn {
	background: var(--accent);
	color: #000;
}

.refer-step-text {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	line-height: 1.3;
	color: var(--text-secondary);
}

.refer-step-text strong {
	font-size: 12px;
	color: var(--text-primary);
}

.refer-step-arrow {
	color: var(--text-muted);
	font-size: 18px;
	margin-top: 10px;
}

.refer-highlight {
	color: var(--accent) !important;
	font-weight: 700;
}

/* --- Link box --- */
.refer-link-label {
	font-size: 12px;
	color: var(--text-muted);
	text-align: left;
	margin-bottom: 8px;
	font-weight: 600;
}

.refer-modal-link-wrap {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--bg-main);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 20px;
}

.refer-modal-link-box {
	flex: 1;
	padding: 12px 14px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.refer-modal-link-box i {
	color: var(--text-muted);
	font-size: 16px;
	flex-shrink: 0;
}

.refer-link-text {
	font-size: 13px;
	color: var(--text-primary);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.refer-copy-btn {
	background: var(--primary) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
	padding: 12px 18px !important;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	transition: all 0.15s ease;
}

.refer-copy-btn:hover {
	background: var(--primary-dark) !important;
}

.refer-modal-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.15s ease;
}

.refer-modal-more:hover {
	color: var(--primary);
}

/* --- Light mode --- */
body.dashboard:not(.dark) .refer-highlight {
	color: var(--primary) !important;
}

body.dashboard:not(.dark) .refer-hero {
	background: linear-gradient(135deg, #1A3BCC 0%, #3B5BDB 100%);
}

/* --- Mobile responsive --- */
@media (max-width: 576px) {
	.refer-modal {
		max-width: 92vw;
	}
	.refer-hero-img {
		max-width: 140px;
	}
	.refer-modal-body {
		padding: 20px 20px 24px !important;
	}
	.refer-steps {
		gap: 2px;
	}
	.refer-step-text {
		font-size: 10px;
	}
	.refer-step-text strong {
		font-size: 11px;
	}
}

/* ============================================================
   ANIMATIONS & TRANSITIONS (5.6)
   ============================================================ */

/* Smooth card transitions */
.card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Service item hover lift */
.service-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-item:hover {
    transform: translateY(-2px);
}

/* Button press effect */
.btn {
    transition: all 0.15s ease;
}

.btn:active {
    transform: scale(0.97);
}

/* CTA accent button glow on hover */
.btn-secondary,
.header-btn {
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    box-shadow: 0 4px 20px rgba(200,255,0,0.25);
}

/* Nav link smooth transitions */
.nav-link {
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* Modal fade */
.modal-wrapper {
    transition: opacity 0.2s ease;
}

.modal-box {
    transition: transform 0.2s ease;
}

/* Toggle body expand */
.toggle-body {
    transition: max-height 0.2s ease, opacity 0.15s ease;
}

/* Status badge hover */
.op-stats {
    transition: transform 0.15s ease, filter 0.15s ease;
}

/* Sidebar nav active glow */
.sidebar .menu .nav-link.active {
    transition: all 0.2s ease;
}

/* Subtle hover scale for stat items */
.stat-item {
    transition: transform 0.2s ease;
}

.stat-item:hover {
    transform: scale(1.03);
}

/* Accent pulse for important CTAs */
@keyframes accentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,255,0,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(200,255,0,0); }
}

.hero-actions .btn-primary,
.hero-actions .btn-danger {
    animation: accentPulse 2.5s ease-in-out infinite;
}

.hero-actions .btn-primary:hover,
.hero-actions .btn-danger:hover {
    animation: none;
}

/* New Order Page Styles */
.neworder-alert-orange {
    color: #ffffff !important;
    background-color: #ff9800 !important;
    border-color: #ff9800 !important;
}

.neworder-alert-red {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #f9f9f9 !important;
}

.neworder-row-padding {
    padding-top: 20px;
}

.neworder-desc-container {
    height: auto;
    padding: 10px;
    font-size: 13px;
}

.neworder-desc-text {
    line-height: 24px;
    font-weight: 500;
}

.neworder-modal-bronze {
    background: #ad8a56 !important;
}

.neworder-modal-silver {
    background: #ad8a56 !important;
}

.neworder-modal-gold {
    background: #c9b037 !important;
}

.neworder-modal-diamond {
    background: #b9f2ff !important;
}

.neworder-modal-platinum {
    background: #b4b4b4 !important;
}

/* Sign In Page Styles */
.signin-padding-top {
    padding-top: 55px;
}

.signin-google-btn {
    height: 48px;
    font-size: 1rem;
}

.signin-reset-link {
    color: #fff !important;
}

.signin-signup-link {
    color: #fff !important;
}

.signin-comparison-table th {
    border: none;
}

.signin-comparison-table-header-main {
    background: var(--primary);
    color: #fff;
}

.signin-comparison-table-header-alt {
    background: var(--border);
    color: var(--text-primary);
}

.signin-comparison-table-row-1 {
    background: var(--bg-card);
}

.signin-comparison-table-row-2 {
    background: var(--bg-main);
}

.signin-comparison-table td {
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.signin-comparison-table .table-data-highlight {
    color: var(--primary);
}

.signin-service-icon-instagram {
    font-size: 3rem;
    color: #E4405F;
}

.signin-service-icon-facebook {
    font-size: 3rem;
    color: #1877F2;
}

.signin-service-icon-youtube {
    font-size: 3rem;
    color: #FF0000;
}

.signin-service-icon-tiktok {
    font-size: 3rem;
    color: #000000;
}

.signin-service-icon-twitter {
    font-size: 3rem;
    color: #1DA1F2;
}

.signin-service-icon-telegram {
    font-size: 3rem;
    color: #0088cc;
}

.signin-service-icon-spotify {
    font-size: 3rem;
    color: #1DB954;
}

.signin-service-icon-linkedin {
    font-size: 3rem;
    color: #0A66C2;
}

.signin-service-card-text {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.signin-testimonial-avatar {
    width: 50px;
    height: 50px;
}

.signin-testimonial-avatar-1 {
    background: var(--primary);
    color: white;
    font-weight: bold;
}

.signin-testimonial-avatar-2 {
    background: var(--accent);
    color: white;
    font-weight: bold;
}

.signin-testimonial-stars {
    color: #FFD700;
}

.signin-testimonial-stars-large {
    font-size: 2rem;
    color: #FFD700;
}

.signin-testimonial-name {
    color: var(--text-primary);
}

.signin-testimonial-text {
    color: var(--text-primary);
}

.signin-feature-icon {
    font-size: 3rem;
    color: var(--primary);
}

.signin-feature-title {
    color: var(--text-primary);
}

.signin-feature-text {
    color: var(--text-primary);
}

/* Calculator Utility Classes */
.calc-primary-color {
    color: var(--primary) !important;
}

.calc-secondary-color {
    color: var(--accent) !important;
}

.calc-text-color {
    color: var(--text-primary) !important;
}

.calc-white-color {
    color: white !important;
}

.calc-bg-primary {
    background: var(--bg-card) !important;
}

.calc-bg-secondary {
    background: var(--bg-main) !important;
}

.calc-bg-alert {
    background: var(--primary-light) !important;
}

.calc-hero-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
}

.calc-card {
    background: var(--bg-card) !important;
    border: none !important;
    border-radius: 15px !important;
}

.calc-alert {
    background: var(--primary-light) !important;
    border: none !important;
    border-radius: 15px !important;
}

.calc-result-item {
    background: var(--bg-card) !important;
    border-radius: 10px !important;
}

.calc-btn-primary {
    background: var(--primary) !important;
    color: white !important;
    border-radius: 25px !important;
    border: none !important;
}

.calc-btn-primary:hover {
    background: var(--accent) !important;
    color: white !important;
}

/* Confirm Signup Page Styles */
.confirm-signup-section {
    padding: 120px 0 60px;
    background: var(--bg-main);
}

.confirm-signup-section .card {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 30px;
}

.confirm-signup-section .btn-google-jay {
    min-width: 280px;
    white-space: nowrap;
    padding: 12px 24px;
}

.confirm-icon {
    font-size: 4rem;
    color: var(--primary);
    animation: mailBounce 2s ease-in-out infinite;
}

@keyframes mailBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.confirm-text {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.divider-text {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.divider-text:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.divider-text span {
    background: var(--bg-card);
    padding: 0 15px;
    position: relative;
    color: var(--text-primary);
}

.confirm-terms {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.confirm-features {
    padding: 60px 0 40px;
    background: white;
}

.confirm-features .feature-icon {
    font-size: 2.5rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.confirm-features .feature-icon:hover {
    transform: scale(1.1);
}

.confirm-features h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 10px;
}

.confirm-features p {
    font-size: 0.95rem;
}

/* Dark mode adjustments for confirm signup */
body.dark .confirm-signup-section {
    background: var(--bg-main);
}

body.dark .confirm-signup-section .card {
    background: var(--bg-card);
}

body.dark .divider-text:before {
    background: #444;
}

body.dark .divider-text span {
    background: var(--bg-card);
}

body.dark .confirm-terms {
    border-top-color: #444;
}

body.dark .confirm-features {
    background: var(--bg-main);
}

/* Bonus Calculator Styles */
.bonus-calculator {
    margin-bottom: 1.5rem;
}

.bonus-display {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(135, 86, 255, 0.05) 100%);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.bonus-display.tier-1 {
    background: linear-gradient(135deg, rgba(42, 133, 255, 0.08) 0%, rgba(42, 133, 255, 0.02) 100%);
    border-color: rgba(42, 133, 255, 0.2);
}

.bonus-display.tier-3 {
    background: linear-gradient(135deg, rgba(135, 86, 255, 0.08) 0%, rgba(135, 86, 255, 0.02) 100%);
    border-color: rgba(135, 86, 255, 0.2);
}

.bonus-display.tier-5 {
    background: linear-gradient(135deg, rgba(23, 79, 242, 0.12) 0%, rgba(23, 79, 242, 0.03) 100%);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(23, 79, 242, 0.1);
}

.bonus-label {
    font-size: 0.9rem;
    color: var(--text-primary);
    opacity: 0.7;
    margin-bottom: 10px;
    font-weight: 500;
}

.bonus-amount-display {
    margin-bottom: 15px;
}

.bonus-total {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.bonus-currency {
    font-size: 1rem;
    color: var(--text-primary);
    margin-left: 8px;
    opacity: 0.8;
}

.bonus-breakdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
    opacity: 0.8;
}

.bonus-base {
    font-weight: 500;
}

.bonus-plus {
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
}

.bonus-extra {
    font-weight: 500;
    color: var(--primary);
}

.bonus-extra span {
    font-weight: 600;
}

/* Dark mode adjustments for bonus calculator */
body.dark .bonus-display {
    background: linear-gradient(135deg, rgba(23, 79, 242, 0.15) 0%, rgba(135, 86, 255, 0.08) 100%);
}

body.dark .bonus-display.tier-1 {
    background: linear-gradient(135deg, rgba(42, 133, 255, 0.12) 0%, rgba(42, 133, 255, 0.04) 100%);
    border-color: rgba(42, 133, 255, 0.3);
}

body.dark .bonus-display.tier-3 {
    background: linear-gradient(135deg, rgba(135, 86, 255, 0.12) 0%, rgba(135, 86, 255, 0.04) 100%);
    border-color: rgba(135, 86, 255, 0.3);
}

body.dark .bonus-display.tier-5 {
    background: linear-gradient(135deg, rgba(23, 79, 242, 0.2) 0%, rgba(23, 79, 242, 0.06) 100%);
    border-color: var(--primary);
    box-shadow: 0 10px 40px rgba(23, 79, 242, 0.2);
}

body.dark .bonus-label {
    color: var(--text-primary);
    opacity: 0.6;
}

body.dark .bonus-total {
    color: var(--accent);
}

body.dark .bonus-currency {
    color: var(--text-primary);
    opacity: 0.7;
}

body.dark .bonus-breakdown {
    color: var(--text-primary);
    opacity: 0.7;
}

body.dark .bonus-extra {
    color: var(--primary);
}

/* Animations */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(23, 79, 242, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(23, 79, 242, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(23, 79, 242, 0);
    }
}

.bonus-display.tier-5 {
    animation: pulseGlow 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bonus-display {
        padding: 20px;
    }
    
    .bonus-total {
        font-size: 2rem;
    }
    
    .bonus-breakdown {
        flex-wrap: wrap;
        gap: 5px;
    }
}

/* Mobile Service Details Styles */
.mobile-service-details {
    margin-bottom: 1.5rem;
}

.mobile-service-details .mobile-service-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.mobile-service-details .mobile-service-body {
    padding: 1rem;
}

.mobile-service-details .desc-list {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.mobile-service-details .desc-list .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
}

.mobile-service-details .desc-list .text {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.mobile-service-details .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    opacity: 0.8;
}

.mobile-service-details .neworder-desc-container {
    margin-top: 15px;
    padding: 15px;
    background: var(--bg-main);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-service-details .neworder-desc-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Dark mode adjustments for mobile service details */
body.dark .mobile-service-details .mobile-service-card {
    background: var(--bg-card);
    border-color: var(--border);
}

body.dark .mobile-service-details .neworder-desc-container {
    background: var(--border);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments for mobile service details */
@media (max-width: 768px) {
    .mobile-service-details .row {
        margin: 0 -8px;
    }
    
    .mobile-service-details .col-6 {
        padding: 0 8px;
    }
    
    .mobile-service-details .card-body {
        padding: 0.875rem;
    }
    
    .mobile-service-details .desc-list .text {
        font-size: 0.8rem;
    }
    
    .mobile-service-details .form-label {
        font-size: 0.75rem;
    }
}

/* Enhanced Alert Styles */
.alert-custom-red {
    background: linear-gradient(135deg, #8B0000 0%, #5C0000 50%, #8B0000 100%);
    border: none;
    border-radius: 15px;
    color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(139, 0, 0, 0.4);
    position: relative;
    overflow: visible;
}

.alert-custom-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="80" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.alert-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.alert-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 20px;
    color: #ffffff;
}

.alert-text {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.alert-message {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.95;
    font-weight: 400;
}

.alert-actions {
    flex-shrink: 0;
    margin-left: 15px;
}

.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #04853A; /* LINE green #06c755 gives white text 2.26:1 */
    color: #ffffff !important;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(6, 199, 85, 0.3);
    white-space: nowrap;
    animation: linePulse 2s ease-in-out infinite;
}

@keyframes linePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(6, 199, 85, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(6, 199, 85, 0.6), 0 0 15px rgba(6, 199, 85, 0.4);
    }
}

.btn-line:hover {
    background: #05b34a;
    color: #ffffff;
}

/* --- Floating LINE Button (mobile, non-auth pages only) --- */
.line-float-btn {
    position: fixed;
    bottom: 24px;
    right: 16px;
    z-index: 1040;
    background: #04853A; /* LINE green #06c755 gives white text 2.26:1 */
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(6, 199, 85, 0.4);
    transition: all 0.2s ease;
}

.line-float-btn i {
    font-size: 22px;
}

.line-float-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(6, 199, 85, 0.5);
    color: #ffffff !important;
}

.btn-line i {
    font-size: 1.3rem;
}

.alert-custom-red .close {
    color: #ffffff;
    opacity: 0.6;
    font-size: 0.9rem;
    font-weight: 400;
    text-shadow: none;
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    padding: 0;
    margin: 0;
}

.alert-custom-red .close:hover {
    color: #ffffff;
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Dark mode adjustments for enhanced alert */
body.dark .alert-custom-red {
    background: linear-gradient(135deg, #8B0000 0%, #5C0000 50%, #8B0000 100%);
    box-shadow: 0 8px 25px rgba(139, 0, 0, 0.4);
}

body.dark .btn-line {
    box-shadow: 0 4px 15px rgba(6, 199, 85, 0.25);
}

body.dark .btn-line:hover {
    box-shadow: 0 6px 20px rgba(6, 199, 85, 0.35);
}

/* Mobile responsive for enhanced alert */
@media (max-width: 768px) {
    .alert-custom-red {
        padding: 16px;
        border-radius: 12px;
    }
    
    .alert-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .alert-actions {
        margin-left: 0;
        align-self: stretch;
    }
    
    .btn-line {
        width: 100%;
        justify-content: center;
        padding: 15px 30px;
    }
    
    .alert-title {
        font-size: 1rem;
    }
    
    .alert-message {
        font-size: 0.9rem;
    }
    
    .alert-icon {
        align-self: flex-start;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}


/* ============================================================
   PART A: BASECLUB-INSPIRED PUBLIC PAGE REDESIGN
   All selectors scoped to body#outside.dark — dashboard safe
   ============================================================ */

/* ---- PHASE 1: HERO + HEADER + TYPOGRAPHY ---- */

/* 1B. Body background: electric blue */
body#outside.dark {
    background-color: #1A3BCC !important;
}

/* 1C. Hero: hide bg image, solid blue + grid overlay */
body#outside.dark .homeHeader {
    position: relative;
    overflow: hidden;
}

body#outside.dark .homeHeader .homeBg img {
    display: none !important;
}

body#outside.dark .homeHeader .homeBg {
    background-color: #1A3BCC !important;
    height: 100% !important;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

body#outside.dark .homeHeader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

body#outside.dark .homeHeader .hhSide {
    position: relative;
    z-index: 2;
}

body#outside.dark .homeHeader .hhBanner {
    position: relative;
    z-index: 2;
}

/* 1D. Hero title: pure white, bold, NO gradient */
body#outside.dark .homeHeader .hhSide .hhTitle {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 52px !important;
    line-height: 1.15 !important;
}

/* 1E. .rotate text: neon lime (not rainbow gradient) */
body#outside.dark .hhTitle .rotate,
body#outside.dark .hsTitle .rotate,
body#outside.dark .homeSection .rotate {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #C8FF00 !important;
    color: #C8FF00 !important;
    font-weight: 400 !important;
}

/* 1G. Nav links: pill shape with white border */
@media only screen and (min-width: 992px) {
    body#outside.dark .nmenu {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    body#outside.dark .nmenu .nmenu-item .nmenu-link {
        border: 1.5px solid rgba(255,255,255,0.3) !important;
        border-radius: 50px !important;
        padding: 10px 22px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
        transition: all 0.2s ease !important;
    }

    body#outside.dark .nmenu .nmenu-item .nmenu-link:hover {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.6) !important;
    }

    body#outside.dark .nmenu .nmenu-item .nmenu-link.active {
        background: rgba(255,255,255,0.15) !important;
        border-color: #FFFFFF !important;
    }

    body#outside.dark .nmenu .nmenu-item .nmenu-link::before {
        display: none !important;
    }
}

/* Mobile menu button: white border pill */
body#outside.dark .menu-btn {
    background-color: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    border-radius: 50px !important;
    color: #FFFFFF !important;
}

/* Mobile menu drawer */
body#outside.dark .b-menu-wrapper {
    background: rgba(26,59,204,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body#outside.dark .b-menu-wrapper .nmenu .nmenu-item .nmenu-link {
    color: #FFFFFF !important;
    border: none !important;
}

/* 1H. Stats badges: glass pills */
body#outside.dark .homeRateItem {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 50px !important;
    padding: 8px 18px !important;
}

body#outside.dark .homeRateItem .icon {
    background: rgba(255,255,255,0.15) !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
}

body#outside.dark .homeRateItem .text {
    color: rgba(255,255,255,0.85) !important;
}

body#outside.dark .homeRateItem .text strong {
    color: #FFFFFF !important;
}

/* 1I. Hero CTA: signup = neon lime pill, LINE = white outline */
body#outside.dark .homeHeader .btn-primary.btn-rounded {
    background: #C8FF00 !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

body#outside.dark .homeHeader .btn-primary.btn-rounded:hover {
    background: #B0E000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200,255,0,0.3);
}

body#outside.dark .homeHeader .btn-primary.btn-rounded span,
body#outside.dark .homeHeader .btn-primary.btn-rounded i {
    color: #000000 !important;
}

body#outside.dark .homeHeader .btn-line {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    animation: none !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    transition: all 0.2s ease !important;
}

body#outside.dark .homeHeader .btn-line:hover {
    background: rgba(255,255,255,0.1) !important;
}

body#outside.dark .homeHeader .btn-line span,
body#outside.dark .homeHeader .btn-line i {
    color: #FFFFFF !important;
}

/* Header CTA button (signup in nav) */
body#outside.dark .header-btn {
    background-color: #C8FF00 !important;
    color: #000000 !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

body#outside.dark .header-btn:hover {
    color: #000000 !important;
    background-color: #B0E000 !important;
}

body#outside.dark .header-btn .text {
    color: #000000 !important;
}


/* ---- PHASE 2: LOGIN + CONTENT SECTIONS ---- */

/* 2A. Login section: WHITE background zone */
body#outside.dark .homeLogin {
    background: #FFFFFF !important;
    padding: 60px 0 80px 0 !important;
    position: relative;
    z-index: 5;
}

/* 2B. Login card: clean white, subtle shadow */
body#outside.dark .homeLogin .card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
    border-radius: 20px !important;
}

body#outside.dark .homeLogin .card .hlTitle {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #1A1A2E !important;
    color: #1A1A2E !important;
    font-weight: 600 !important;
}

/* 2C. Form inputs on white bg */
body#outside.dark .homeLogin .card .form-control,
body#outside.dark .homeLogin .card .form-control:focus {
    background: #F0F2F5 !important;
    color: #1A1A2E !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 12px !important;
}

body#outside.dark .homeLogin .card .form-control::placeholder {
    color: #9CA3AF !important;
}

body#outside.dark .homeLogin .card .form-control:focus {
    border-color: #1A3BCC !important;
    box-shadow: 0 0 0 3px rgba(26,59,204,0.15) !important;
}

body#outside.dark .homeLogin .btn-primary {
    background: #1A3BCC !important;
    color: #FFFFFF !important;
    border-radius: 50px !important;
}

body#outside.dark .homeLogin .card .form-check-label,
body#outside.dark .homeLogin .card .hlText {
    color: #6B7280 !important;
}

body#outside.dark .homeLogin .card .hlText a {
    color: #1A3BCC !important;
}

body#outside.dark .homeLogin .btn-google-jay {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    color: #1A1A2E !important;
    border-radius: 50px !important;
}


/* ============================================================
   CLEAN SECTION SYSTEM v2 — 1 block เดียว ไม่มีซ้ำซ้อน

   Sections: 1=Hero, 2=Login, 3-5,7,9=BLUE, 6,8=WHITE, 4=CHFA

   หลักการ:
   - BLUE sections: inherit white จาก section level
   - WHITE sections: override variables → inherit dark
   - Cards บน blue (.text-center): white bg + DARK text (force)
   - Cards บน white: white bg + inherit dark จาก section
   - .bg-primary card: always blue gradient
   ============================================================ */

/* ===== 1. SECTION BACKGROUNDS ===== */

body#outside.dark .homeSection {
    background: #1A3BCC !important;
    color: #FFFFFF !important;
}

body#outside.dark .homeSection:nth-of-type(6),
body#outside.dark .homeSection:nth-of-type(8) {
    background: #FFFFFF !important;
    color: #1A1A2E !important;
}

body#outside.dark section:nth-of-type(4) {
    background: linear-gradient(180deg, #1A3BCC, #1433A8) !important;
}

/* ===== 2. BLUE SECTION TEXT (3,4,5,7,9) ===== */

body#outside.dark .homeSection .hsTitle {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

body#outside.dark .homeSection .hsText {
    color: rgba(255,255,255,0.85) !important;
}

body#outside.dark .homeSection .rotate {
    -webkit-text-fill-color: #C8FF00 !important;
    color: #C8FF00 !important;
}

body#outside.dark .homeSection h1,
body#outside.dark .homeSection h2,
body#outside.dark .homeSection h3,
body#outside.dark .homeSection h4,
body#outside.dark .homeSection h5,
body#outside.dark .homeSection h6,
body#outside.dark .homeSection strong,
body#outside.dark .homeSection b,
body#outside.dark .homeSection td,
body#outside.dark .homeSection th,
body#outside.dark .homeSection td strong,
body#outside.dark .homeSection .card-title {
    color: #FFFFFF !important;
}

body#outside.dark .homeSection p,
body#outside.dark .homeSection .card-text,
body#outside.dark .homeSection span,
body#outside.dark .homeSection li {
    color: rgba(255,255,255,0.85) !important;
}

body#outside.dark .homeSection small {
    color: rgba(255,255,255,0.6) !important;
}

body#outside.dark .homeSection i {
    color: var(--accent) !important;
}

body#outside.dark .homeSection a {
    color: #FFFFFF !important;
}

body#outside.dark .homeSection a:hover {
    color: var(--accent) !important;
}

/* ===== 3. WHITE SECTION TEXT (6=FAQ, 8=Testimonials) ===== */

body#outside.dark .homeSection:nth-of-type(6) h1,
body#outside.dark .homeSection:nth-of-type(6) h2,
body#outside.dark .homeSection:nth-of-type(6) h3,
body#outside.dark .homeSection:nth-of-type(6) h4,
body#outside.dark .homeSection:nth-of-type(6) h5,
body#outside.dark .homeSection:nth-of-type(6) h6,
body#outside.dark .homeSection:nth-of-type(6) strong,
body#outside.dark .homeSection:nth-of-type(6) b,
body#outside.dark .homeSection:nth-of-type(6) td,
body#outside.dark .homeSection:nth-of-type(6) th,
body#outside.dark .homeSection:nth-of-type(8) h1,
body#outside.dark .homeSection:nth-of-type(8) h2,
body#outside.dark .homeSection:nth-of-type(8) h3,
body#outside.dark .homeSection:nth-of-type(8) h4,
body#outside.dark .homeSection:nth-of-type(8) h5,
body#outside.dark .homeSection:nth-of-type(8) h6,
body#outside.dark .homeSection:nth-of-type(8) strong,
body#outside.dark .homeSection:nth-of-type(8) b,
body#outside.dark .homeSection:nth-of-type(8) td,
body#outside.dark .homeSection:nth-of-type(8) th {
    color: #1A1A2E !important;
}

body#outside.dark .homeSection:nth-of-type(6) .hsTitle,
body#outside.dark .homeSection:nth-of-type(8) .hsTitle {
    -webkit-text-fill-color: #1A1A2E !important;
    color: #1A1A2E !important;
}

body#outside.dark .homeSection:nth-of-type(6) .hsText,
body#outside.dark .homeSection:nth-of-type(8) .hsText {
    color: #6B7280 !important;
}

body#outside.dark .homeSection:nth-of-type(6) .rotate,
body#outside.dark .homeSection:nth-of-type(8) .rotate {
    -webkit-text-fill-color: #1A3BCC !important;
    color: #1A3BCC !important;
}

body#outside.dark .homeSection:nth-of-type(6) p,
body#outside.dark .homeSection:nth-of-type(6) .card-text,
body#outside.dark .homeSection:nth-of-type(6) span,
body#outside.dark .homeSection:nth-of-type(6) li,
body#outside.dark .homeSection:nth-of-type(8) p,
body#outside.dark .homeSection:nth-of-type(8) .card-text,
body#outside.dark .homeSection:nth-of-type(8) span,
body#outside.dark .homeSection:nth-of-type(8) li {
    color: #4B5563 !important;
}

body#outside.dark .homeSection:nth-of-type(6) .card-title,
body#outside.dark .homeSection:nth-of-type(8) .card-title {
    color: #1A3BCC !important;
}

body#outside.dark .homeSection:nth-of-type(6) i,
body#outside.dark .homeSection:nth-of-type(8) i {
    color: #1A3BCC !important;
}

body#outside.dark .homeSection:nth-of-type(6) small,
body#outside.dark .homeSection:nth-of-type(8) small {
    color: #9CA3AF !important;
}

body#outside.dark .homeSection:nth-of-type(6) a,
body#outside.dark .homeSection:nth-of-type(8) a {
    color: #1A3BCC !important;
}

/* ===== 4. GLASS CARDS บน BLUE sections ===== */

body#outside.dark .homeSection .card.h-100:not(.bg-primary) {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
    border-radius: var(--radius-lg) !important;
    transition: all 0.3s ease !important;
}

body#outside.dark .homeSection .card.h-100:not(.bg-primary):hover {
    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
}

/* ===== 5. WHITE CARDS (.text-center) บน BLUE — text ต้องเข้ม ===== */
/* เฉพาะ section 7 (services) + 9 (features) ที่มี .text-center cards ขาวบนน้ำเงิน */

body#outside.dark .homeSection .card.h-100.text-center {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

body#outside.dark .homeSection .card.h-100.text-center .card-title,
body#outside.dark .homeSection .card.h-100.text-center h5 {
    color: #1A1A2E !important;
    font-weight: 700 !important;
}

body#outside.dark .homeSection .card.h-100.text-center .card-text,
body#outside.dark .homeSection .card.h-100.text-center p {
    color: #4B5563 !important;
}

body#outside.dark .homeSection .card.h-100.text-center i {
    color: var(--accent) !important;
}

/* ===== 6. WHITE SECTION CARDS (6,8) — white bg ===== */

body#outside.dark .homeSection:nth-of-type(6) .card.h-100,
body#outside.dark .homeSection:nth-of-type(8) .card.h-100 {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}

/* ===== 7. .bg-primary CARD (CTA) — always blue ===== */

body#outside.dark .card.bg-primary {
    background: linear-gradient(135deg, #1A3BCC, #0F2A8A) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(26,59,204,0.4) !important;
    border-radius: var(--radius-lg) !important;
}

body#outside.dark .card.bg-primary h4,
body#outside.dark .card.bg-primary h3,
body#outside.dark .card.bg-primary p,
body#outside.dark .card.bg-primary span,
body#outside.dark .card.bg-primary a {
    color: #FFFFFF !important;
}

body#outside.dark .card.bg-primary .btn-light {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
}

body#outside.dark .card.bg-primary .btn-outline-light {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill) !important;
}

/* ===== 8. COMPARISON TABLE (section 5 — blue bg, white card) ===== */

body#outside.dark .homeSection .card:has(.signin-comparison-table) {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

body#outside.dark .signin-comparison-table {
    background: #FFFFFF !important;
}

body#outside.dark .signin-comparison-table-header-main {
    background: #1A3BCC !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    padding: 20px 24px !important;
    border: none !important;
}

body#outside.dark .signin-comparison-table-header-alt {
    background: #1E293B !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 20px 24px !important;
    border: none !important;
}

body#outside.dark .signin-comparison-table-header-alt *,
body#outside.dark .signin-comparison-table-header-main * {
    color: #FFFFFF !important;
}

body#outside.dark .signin-comparison-table td,
body#outside.dark .signin-comparison-table td strong {
    color: #374151 !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

body#outside.dark .signin-comparison-table td:first-child,
body#outside.dark .signin-comparison-table td:first-child strong {
    color: #1A1A2E !important;
    font-weight: 700 !important;
}

body#outside.dark .signin-comparison-table .table-data-highlight {
    color: var(--primary) !important;
    font-weight: 700 !important;
    background: rgba(26,59,204,0.04) !important;
}

body#outside.dark .signin-comparison-table td:last-child {
    color: #9CA3AF !important;
}

body#outside.dark .signin-comparison-table-row-1 { background: #FFFFFF !important; }
body#outside.dark .signin-comparison-table-row-2 { background: #FAFBFC !important; }

/* ===== 9. SECTION BUTTONS ===== */

body#outside.dark .homeSection .btn-primary {
    background: #C8FF00 !important;
    color: #000000 !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
}

body#outside.dark .homeSection .btn-primary span,
body#outside.dark .homeSection .btn-primary i {
    color: #000000 !important;
}

body#outside.dark .homeSection .btn-primary:hover {
    background: #B0E000 !important;
    transform: translateY(-2px);
}

body#outside.dark .homeSection .btn-outline-light,
body#outside.dark .homeSection .btn-outline-primary {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill) !important;
}

body#outside.dark .homeSection .btn-outline-light:hover,
body#outside.dark .homeSection .btn-outline-primary:hover {
    background: rgba(255,255,255,0.1) !important;
}

body#outside.dark .btn-light {
    background: #FFFFFF !important;
    color: #1A1A2E !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
}

body#outside.dark .btn-outline-light {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
}

/* ===== 10. LINE BUTTON ===== */

body#outside.dark .btn-line,
body#outside.dark .btn-line:link,
body#outside.dark .btn-line:visited {
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    animation: none !important;
    border-radius: var(--radius-pill) !important;
}

body#outside.dark .btn-line:hover {
    background: rgba(255,255,255,0.1) !important;
}

body#outside.dark .btn-line i,
body#outside.dark .btn-line span {
    color: #FFFFFF !important;
}

/* LINE button in login section — hide on mobile (floating icon replaces it) */
@media (max-width: 991px) {
    body#outside.dark .homeLogin .btn-line,
    body#outside.dark .homeLogin .d-lg-none:has(.btn-line),
    body#outside.dark .homeLogin div:has(> .btn-line) {
        display: none !important;
    }
}

/* ===== 11. PRODUCT BOXES (brand slider) ===== */

body#outside.dark .productBox {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--radius-md) !important;
}

body#outside.dark .productBox:hover {
    background: rgba(255,255,255,0.1) !important;
}

body#outside.dark .productBox .pbLeft,
body#outside.dark .productBox .pbRight {
    color: #FFFFFF !important;
}

/* ===== 12. CHFA SECTION ===== */

body#outside.dark .chfa-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

body#outside.dark .chfa-box .title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

/* ===== 13. FOOTER ===== */

body#outside.dark .footer {
    background: #0F2A8A !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

body#outside.dark .footer .footerLogo {
    background: #1A3BCC !important;
    border-color: #C8FF00 !important;
}

body#outside.dark .footer h2,
body#outside.dark .footer h5,
body#outside.dark .footer h6,
body#outside.dark .footer .title {
    color: #FFFFFF !important;
}

body#outside.dark .footer p,
body#outside.dark .footer li a,
body#outside.dark .footer a {
    color: rgba(255,255,255,0.7) !important;
}

body#outside.dark .footer a:hover {
    color: #C8FF00 !important;
}

body#outside.dark .footer .primary-color {
    color: #C8FF00 !important;
}

body#outside.dark footer .btn-primary {
    background: #C8FF00 !important;
    color: #000000 !important;
    border-radius: var(--radius-pill) !important;
}

body#outside.dark footer .btn-primary span,
body#outside.dark footer .btn-primary i {
    color: #000000 !important;
}

body#outside.dark .footerCopy {
    background: #0A1F6E !important;
}

body#outside.dark .footerCopy .footerCopyTx {
    color: rgba(255,255,255,0.5) !important;
}

/* ===== 14. SCROLLBAR ===== */

body#outside.dark ::-webkit-scrollbar-thumb {
    background: #C8FF00 !important;
}

body#outside.dark ::-webkit-scrollbar-track {
    background: #0F2A8A !important;
}

/* ===== 16. RESPONSIVE ===== */

@media (max-width: 991px) {
    body#outside.dark .homeHeader .hhSide .hhTitle {
        font-size: 22px !important;
        line-height: 34px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    body#outside.dark .homeHeader .hhSide .hhTitle span {
        font-size: 26px !important;
    }
    body#outside.dark .homeRate {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 4px 0 !important;
    }
    body#outside.dark .homeRateItem {
        margin-bottom: 0 !important;
        font-size: 11px !important;
        padding: 5px 12px !important;
    }
    body#outside.dark .homeHeader .hhSide {
        padding: 80px 0 0 !important;
    }
    body#outside.dark .signin-padding-top {
        padding-top: 0px !important;
    }
    body#outside.dark .homeHeader {
        padding-bottom: 10px !important;
    }
    body#outside.dark .homeHeader .mt-5 {
        margin-top: 12px !important;
    }
}

@supports not (backdrop-filter: blur(1px)) {
}


/* ============================================================
   DASHBOARD THEME — Dark Mode + Light Mode
   1 block สะอาด ไม่มีซ้ำซ้อน
   ============================================================ */

/* ===== DARK MODE DASHBOARD ===== */

/* --- Header --- */
body.dark header {
    background: rgba(13,13,20,0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border) !important;
}

body.dark .navbar .user-item .toggle-head {
    background-color: rgba(26,59,204,0.2) !important;
    border: 2px solid var(--primary) !important;
}

body.dark .navbar .user-item .toggle-head span {
    color: var(--accent) !important;
}

body.dark .navbar .nav-item .toggle-body {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
}

/* --- Cards --- */
body.dark .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
}

body.dark .card:hover {
    box-shadow: var(--shadow-md) !important;
}

body.dark .card-head {
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card)) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

body.dark .card-head-icon {
    background-color: rgba(200,255,0,0.1) !important;
    color: var(--accent) !important;
}

body.dark .card-head-title::after {
    background-color: var(--accent) !important;
}

body.dark .card.bg-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(26,59,204,0.3) !important;
}

/* --- Buttons --- */
body.dark .btn-primary {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

body.dark .btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,59,204,0.4) !important;
}

body.dark .btn-secondary {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

body.dark .btn-secondary:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200,255,0,0.3) !important;
}

body.dark .btn-danger {
    border-radius: var(--radius-pill) !important;
    transition: all 0.2s ease !important;
}

body.dark .btn-rounded {
    border-radius: var(--radius-pill) !important;
}

/* --- Forms --- */
body.dark .form-control {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease !important;
}

body.dark .form-control:focus {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(26,59,204,0.2) !important;
}

body.dark .form-control::placeholder {
    color: var(--text-muted) !important;
}

body.dark .form-select {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}

body.dark .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(26,59,204,0.2) !important;
}

/* --- Service Items --- */
body.dark .service-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease !important;
}

body.dark .service-item:hover {
    border-color: rgba(26,59,204,0.3) !important;
    box-shadow: var(--shadow-md) !important;
}

body.dark .si-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-radius: var(--radius-sm) !important;
}

/* --- Nav Pills (ไม่รวม sidebar) --- */
body.dark .nav-pills:not(.menu) .nav-link.active {
    background-color: var(--primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 2px 8px rgba(26,59,204,0.3) !important;
}

body.dark .nav-pills:not(.menu) .nav-link {
    border-radius: var(--radius-pill) !important;
    transition: all 0.2s ease !important;
}

body.dark .nav-pills .nav-link:hover:not(.active) {
    background: rgba(26,59,204,0.1) !important;
}

/* --- Status Badges --- */
body.dark .op-stats {
    border-radius: var(--radius-pill) !important;
}

/* --- Desc List --- */
body.dark .desc-list {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

body.dark .desc-list .icon {
    color: var(--accent) !important;
    background-color: rgba(200,255,0,0.1) !important;
}

/* --- User/Rank Cards --- */
body.dark .userCard .userDetails .ud-icon {
    color: var(--accent) !important;
    background-color: rgba(200,255,0,0.1) !important;
}

body.dark .rankCard .progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

/* --- Mobile Navbar --- */
body.dark .mobile-navbar {
    background: #1A1A2E !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

body.dark .mnc-item.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

/* --- Scrollbar --- */
body.dark ::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

body.dark ::-webkit-scrollbar-track {
    background: var(--bg-main) !important;
}

/* --- Alerts --- */
body.dark .alert {
    border-radius: var(--radius-md) !important;
}

body.dark .alert.alert-success {
    background: rgba(16,185,129,0.15) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16,185,129,0.2) !important;
}

body.dark .alert.alert-danger {
    background: rgba(239,68,68,0.15) !important;
    color: #FF8A8A !important; /* #ef4444 on its own dark tint was 4.1:1 */
    border: 1px solid rgba(239,68,68,0.2) !important;
}

/* --- Badge --- */
body.dark .badge {
    background: var(--primary) !important;
    border-radius: var(--radius-pill) !important;
}

/* --- Modals --- */
body.dark .modal-wrapper {
    background-color: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(12px) !important;
}

body.dark .modal-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* --- Toast --- */
body.dark .bs-toast {
    background: var(--primary) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* --- Overlay --- */
body.dark .overlay {
    background-color: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(8px) !important;
}

/* --- Basket Drawer --- */
body.dark .basket-drawer {
    background: var(--bg-card) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* --- Pagination --- */
body.dark .pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-radius: var(--radius-sm) !important;
}

body.dark .pagination .page-item .page-link {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* --- Dropdown --- */
body.dark .dropdown-menu .dropdown-item:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* --- Ticket Chat --- */
body.dark .ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

body.dark .ticket-message-block .ticket-msg-container .ticket-msg {
    background: rgba(255,255,255,0.06) !important;
    border-radius: var(--radius-md) !important;
}

/* --- Product Box --- */
body.dark .productBox {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

/* --- Platform Buttons --- */
body.dark ul.platforms li button {
    border: 1px solid var(--border) !important;
    background: rgba(255,255,255,0.04) !important;
}

body.dark ul.platforms li button.all {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* --- Primary Color Class --- */
body.dark .primary-color {
    color: var(--accent) !important;
}


/* ===== LIGHT MODE DASHBOARD ===== */

/* ===== LIGHT MODE DASHBOARD — premium clean ===== */

/* พื้นหลัง: ไม่ใช่ขาวจ๋า แต่เทาอ่อนอุ่น */
body.dashboard:not(.dark) {
    background-color: #F5F7FA !important;
}

body.dashboard:not(.dark) main {
    background-color: #F5F7FA !important;
}

/* Header: ขาว + shadow เบา */
body.dashboard:not(.dark) header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E8EBF0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    backdrop-filter: none !important;
}

body.dashboard:not(.dark) .navbar .user-item .toggle-head {
    border: 2px solid var(--primary) !important;
}

body.dashboard:not(.dark) .navbar .nav-item .toggle-body {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Sidebar: ขาว + active น้ำเงิน */
body.dashboard:not(.dark) .sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E8EBF0 !important;
}

body.dashboard:not(.dark) .sidebar .menu .nav-link {
    color: #6B7280 !important;
}

body.dashboard:not(.dark) .sidebar .menu .nav-link:hover {
    background: rgba(26,59,204,0.06) !important;
    color: var(--primary) !important;
}

body.dashboard:not(.dark) .sidebar .menu .nav-link.active {
    background: rgba(26,59,204,0.1) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--primary) !important;
    font-weight: 600 !important;
}

body.dashboard:not(.dark) .sidebar .menu .nav-link.active i {
    color: var(--primary) !important;
}

body.dashboard:not(.dark) .sidebar .menu .nav-link:hover {
    background: rgba(26,59,204,0.05) !important;
}

/* Cards: ขาว + shadow + border เทาอ่อน */
body.dashboard:not(.dark) .card {
    background: #FFFFFF !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid #E8EBF0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

body.dashboard:not(.dark) .card-head {
    background: #FAFBFC !important;
    border-bottom: 1px solid #E8EBF0 !important;
}

/* Icons: น้ำเงิน primary บนพื้นขาว (ไม่ใช่เขียวนีออน) */
body.dashboard:not(.dark) .card-head-icon {
    background-color: rgba(26,59,204,0.08) !important;
    color: var(--primary) !important;
}

body.dashboard:not(.dark) .card-head-title::after {
    background-color: var(--primary) !important;
}

body.dashboard:not(.dark) .desc-list .icon {
    color: var(--primary) !important;
    background-color: rgba(26,59,204,0.08) !important;
}

body.dashboard:not(.dark) .userCard .userDetails .ud-icon {
    color: var(--primary) !important;
    background-color: rgba(26,59,204,0.08) !important;
}

/* Buttons: pill + primary น้ำเงิน */
body.dashboard:not(.dark) .btn-primary {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(26,59,204,0.2) !important;
}

body.dashboard:not(.dark) .btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,59,204,0.3) !important;
}

/* Secondary: เขียวนีออน (CTA เด่น) */
body.dashboard:not(.dark) .btn-secondary {
    background: var(--accent) !important;
    color: var(--accent-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(200,255,0,0.2) !important;
}

body.dashboard:not(.dark) .btn-secondary:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px);
}

body.dashboard:not(.dark) .btn-danger {
    border-radius: var(--radius-pill) !important;
}

body.dashboard:not(.dark) .btn-rounded {
    border-radius: var(--radius-pill) !important;
}

/* Forms: bg เทาอ่อน + border ชัดขึ้น */
body.dashboard:not(.dark) .form-control {
    background: #F0F2F5 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: var(--radius-sm) !important;
}

body.dashboard:not(.dark) .form-control:focus {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(26,59,204,0.1) !important;
}

body.dashboard:not(.dark) .form-select {
    background-color: #F0F2F5 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: var(--radius-sm) !important;
}

/* Service items */
body.dashboard:not(.dark) .service-item {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF0 !important;
    border-radius: var(--radius-sm) !important;
}

body.dashboard:not(.dark) .service-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

body.dashboard:not(.dark) .si-header {
    background: var(--primary) !important;
    border-radius: var(--radius-sm) !important;
}

/* Nav pills */
body.dashboard:not(.dark) .nav-pills:not(.menu) .nav-link.active {
    background-color: var(--primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 2px 6px rgba(26,59,204,0.2) !important;
}

body.dashboard:not(.dark) .nav-pills:not(.menu) .nav-link {
    border-radius: var(--radius-pill) !important;
    color: #6B7280 !important;
}

body.dashboard:not(.dark) .nav-pills:not(.menu) .nav-link:hover:not(.active) {
    background: rgba(26,59,204,0.06) !important;
    color: var(--primary) !important;
}

/* Status badges */
body.dashboard:not(.dark) .op-stats {
    border-radius: var(--radius-pill) !important;
}

body.dashboard:not(.dark) .badge {
    border-radius: var(--radius-pill) !important;
}

body.dashboard:not(.dark) .alert {
    border-radius: var(--radius-md) !important;
}

/* Progress bar */
body.dashboard:not(.dark) .rankCard .progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

/* Mobile navbar */
body.dashboard:not(.dark) .mobile-navbar {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

body.dashboard:not(.dark) .mnc-item {
    color: #9CA3AF !important;
}

body.dashboard:not(.dark) .mnc-item.active {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

body.dashboard:not(.dark) .mnc-item:not(.active):hover {
    color: var(--primary) !important;
    background: rgba(26,59,204,0.06) !important;
}

/* Overlay */
body.dashboard:not(.dark) .overlay {
    background-color: rgba(0,0,0,0.3) !important;
}

/* Theme switch label */
body.dashboard:not(.dark) label.switch-theme {
    background-color: #F0F2F5 !important;
    border: 1px solid #D1D5DB !important;
}

/* Scrollbar */
body.dashboard:not(.dark) ::-webkit-scrollbar-thumb {
    background: #D1D5DB !important;
}

body.dashboard:not(.dark) ::-webkit-scrollbar-track {
    background: #F5F7FA !important;
}


/* ============================================================
   TIER SYSTEM — Badge, Progress, Benefits
   ============================================================ */

/* --- Tier Badge --- */
.tier-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tier-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #CD7F32, #B87333);
    box-shadow: 0 2px 12px rgba(205,127,50,0.3);
    animation: tierGlow 3s ease-in-out infinite;
}

.tier-badge i {
    font-size: 16px;
}

/* Tier-specific colors (set by JS based on currentStatus text) */
.tier-badge.tier-silver {
    background: linear-gradient(135deg, #A8A8A8, #C0C0C0) !important;
    box-shadow: 0 2px 12px rgba(192,192,192,0.3) !important;
}

.tier-badge.tier-gold {
    background: linear-gradient(135deg, #DAA520, #FFD700) !important;
    box-shadow: 0 2px 12px rgba(255,215,0,0.3) !important;
}

.tier-badge.tier-diamond {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 2px 16px rgba(26,59,204,0.4) !important;
}

@keyframes tierGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; box-shadow: 0 2px 20px rgba(200,255,0,0.2); }
}

/* --- Progress Bar --- */
.tier-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tier-progress .progress {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-pill);
    background-color: rgba(255,255,255,0.08);
    overflow: hidden;
}

.tier-progress .progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
    border-radius: var(--radius-pill);
    transition: width 1s ease;
}

.tier-percent {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    min-width: 40px;
    text-align: right;
}

/* --- Next Level --- */
.tier-next {
    margin-bottom: 16px;
}

.nextRank {
    font-size: 13px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    display: inline-block;
}

.tier-next-name {
    color: var(--accent) !important;
    font-weight: 700;
}

/* --- Benefits Button --- */
.tier-benefits-btn {
    border-radius: var(--radius-pill) !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
}

/* --- Light Mode Tier --- */
body.dashboard:not(.dark) .tier-progress .progress {
    background-color: #E5E7EB;
}

body.dashboard:not(.dark) .tier-percent {
    color: var(--primary);
}

body.dashboard:not(.dark) .nextRank {
    background: rgba(26,59,204,0.06);
    color: var(--text-secondary);
}

body.dashboard:not(.dark) .tier-next-name {
    color: var(--primary) !important;
}

/* --- rankCard override (remove old styles) --- */
.rankCard .card-body {
    padding: 24px !important;
}

.rankCard .rc-img {
    display: none;
}


/* ===== TIER ROADMAP MODAL ===== */

.tier-roadmap-modal {
    max-width: 720px !important;
    width: 95% !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.tier-roadmap-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 28px !important;
    border-bottom: 1px solid var(--border) !important;
}

.tier-roadmap-header h4 {
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--text-primary) !important;
}

/* --- Progress Line --- */
.tier-progress-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 40px;
}

.tier-line-bg {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--border);
    transform: translateY(-50%);
    border-radius: 2px;
}

.tier-line-fill {
    position: absolute;
    top: 50%;
    left: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: translateY(-50%);
    border-radius: 2px;
    width: 0%;
    transition: width 1s ease;
}

.tier-node {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.tier-node-active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 16px rgba(26,59,204,0.4);
}

.tier-node-active:last-child {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

/* --- Tier Cards Grid --- */
.tier-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 24px 28px;
}

@media (max-width: 768px) {
    .tier-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tier-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: all 0.3s ease;
    opacity: 0.5;
}

.tier-card.tier-passed {
    opacity: 0.8;
    border-color: rgba(16,185,129,0.25);
}

.tier-card.tier-passed .tier-card-header::after {
    content: "\eb81";
    font-family: "remixicon";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--success);
    color: #FFFFFF;
    font-size: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.tier-card.tier-passed .tier-card-header {
    position: relative;
}

.tier-card.tier-current {
    opacity: 1;
    border-color: rgba(200,255,0,0.4);
    box-shadow: 0 0 24px rgba(200,255,0,0.08), 0 4px 16px rgba(0,0,0,0.2);
}

.tier-card.tier-locked {
    opacity: 0.35;
}

/* Card Header */
.tier-card-header {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tier-card-header i {
    font-size: 24px;
    color: #FFFFFF;
}

.tier-card-name {
    font-weight: 700;
    font-size: 15px;
    color: #FFFFFF;
}

.tier-card-range {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

/* Tier gradient colors */
.tier-color-bronze { background: linear-gradient(135deg, #CD7F32, #A0522D); }
.tier-color-silver { background: linear-gradient(135deg, #A8A8A8, #6B6B6B); }
.tier-color-gold { background: linear-gradient(135deg, #FFD700, #B8860B); }
.tier-color-diamond { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }

/* Benefits List */
.tier-card-benefits {
    list-style: none;
    padding: 12px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tier-card-benefits li {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    line-height: 1.4;
}

.tier-card-benefits .benefit-on {
    color: var(--success);
}

.tier-card-benefits .benefit-on i {
    color: var(--success);
}

.tier-card-benefits .benefit-off {
    color: var(--text-muted);
    opacity: 0.5;
}

.tier-card-benefits .benefit-off i {
    color: var(--text-muted);
}

/* Current tier badge */
.tier-card.tier-current .tier-card-header::after {
    content: "YOU";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.tier-card.tier-current .tier-card-header {
    position: relative;
}

/* Light mode */
body.dashboard:not(.dark) .tier-card {
    border-color: #E8EBF0;
}

body.dashboard:not(.dark) .tier-card.tier-current {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(26,59,204,0.1);
}


/* ===== TIER MODAL — Premium Benefits Popup ===== */

.tier-modal {
    max-width: 480px !important;
    width: 90% !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

/* Modal Header — gradient per tier */
.tier-modal-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 24px 20px !important;
    position: relative !important;
    text-align: center !important;
}

.tier-modal-badge {
    font-size: 40px;
    margin-bottom: 8px;
}

.tier-modal-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    margin: 0 !important;
}

.tier-modal-subtitle {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    margin: 4px 0 0 !important;
}

.tier-modal-header .m-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    color: rgba(255,255,255,0.7) !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Tier gradient headers */
.tier-modal-bronze {
    background: linear-gradient(135deg, #CD7F32, #A0522D) !important;
}

.tier-modal-silver {
    background: linear-gradient(135deg, #B0B0B0, #808080) !important;
}

.tier-modal-gold {
    background: linear-gradient(135deg, #FFD700, #DAA520) !important;
}

.tier-modal-diamond {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

/* Benefit List */
.tier-benefit-list {
    list-style: none !important;
    padding: 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.tier-benefit {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.tier-benefit i {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Unlocked benefit */
.tier-benefit.unlocked {
    background: rgba(16,185,129,0.1) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
}

.tier-benefit.unlocked i {
    color: var(--success) !important;
}

/* Locked benefit */
.tier-benefit.locked {
    background: rgba(255,255,255,0.03) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    opacity: 0.6 !important;
}

.tier-benefit.locked i {
    color: var(--text-muted) !important;
}

/* Light mode tier modal */
body.dashboard:not(.dark) .tier-benefit.unlocked {
    background: rgba(16,185,129,0.08) !important;
}

body.dashboard:not(.dark) .tier-benefit.locked {
    background: #F5F7FA !important;
    border-color: #E8EBF0 !important;
}


/* ============================================================
   ORDERS TABLE — Desktop table + Mobile cards + Copy feature
   ============================================================ */

/* --- Order Cards --- */
.order-container .card {
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.order-container .card:hover {
    border-color: rgba(26,59,204,0.15);
    box-shadow: var(--shadow-md);
}

/* --- ID Badge Click-to-copy --- */
.op-stats.op-stats-sm {
    cursor: pointer;
    transition: all 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.op-stats.op-stats-sm:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* --- Order ID Wrapper + Title --- */
.op-id-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.op-id-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* --- Checkbox --- */
.order-checkbox,
.order-select-all {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* --- Select All Label --- */
.order-select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    margin: 0;
}

.order-select-all-label:hover {
    color: var(--primary);
}

/* --- Copy Selected Bar --- */
.order-copy-bar {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 1040;
    font-size: 14px;
    color: var(--text-primary);
}

/* --- Light Mode Orders --- */
body.dashboard:not(.dark) .order-copy-bar {
    background: #FFFFFF !important;
    border: 1px solid #E8EBF0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

body.dashboard:not(.dark) .order-container .card:hover {
    border-color: rgba(26,59,204,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}



/* ============================================
   JL PUBLIC / MARKETING DESIGN SYSTEM
   Moved here from layout.twig inline <style id="jl-design"> on 2026-07-09.
   Scoped #outside .jl-page — applies to guest pages (body#outside) AND
   auth marketing pages (content wrapped in #outside > .jl-page). Loaded
   globally via this stylesheet so BOTH guest + auth get it (previously the
   block was duplicated inline in layout: head jl-design-shared + guest body).
   ============================================ */
:root{
  --jl-primary:#1A3BCC; --jl-primary-d:#14309C; --jl-primary-dd:#0F2A8A;
  --jl-lime:#C8FF00; --jl-ink:#0B0E16; --jl-bg:#F4F6FA;
  --jl-t1:#0B0E16; --jl-t2:#5A6478; --jl-t3:#626C80; /* was #9AA1B0 = 2.3-2.6:1 as text on white; #626C80 = 5.28 / 4.88 on --jl-bg */
  --jl-bd:rgba(11,14,22,.06); --jl-bd2:rgba(11,14,22,.12);
  --jl-tint:#EAEEFC;
  --jl-card-sh:0 1px 2px rgba(11,14,22,.04),0 20px 44px -34px rgba(11,14,22,.25);
  --jl-blue-grad:radial-gradient(125% 130% at 82% -15%,#3452E8 0%,#1A3BCC 47%,#0F2472 100%);
}
#outside .jl-page .jl-d{font-family:'Anuphan',sans-serif}
#outside .jl-page{font-family:'IBM Plex Sans Thai','IBM Plex Sans',-apple-system,sans-serif;color:var(--jl-t1) !important;background:var(--jl-bg) !important;letter-spacing:-.011em;overflow-x:clip}
#outside .jl-page *{box-sizing:border-box}
#outside .jl-page a{text-decoration:none}
#outside .jl-page .jl-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
#outside .jl-page .jl-hd{position:sticky;top:0;z-index:1000;background:rgba(26,59,204,.92) !important;backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px)}
#outside .jl-page .jl-hd-in{max-width:1240px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:22px}
#outside .jl-page .jl-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
#outside .jl-page .jl-logo img{height:34px;width:auto;display:block}
#outside .jl-page .jl-logo span{font-weight:700;font-size:20px;color:#fff !important;letter-spacing:-.02em}
#outside .jl-page .jl-nav{margin:0 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
#outside .jl-page .jl-nav a{padding:8px 15px;border-radius:999px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85) !important;white-space:nowrap;transition:all .2s}
#outside .jl-page .jl-nav a:hover{background:rgba(255,255,255,.14) !important;color:#fff !important}
#outside .jl-page .jl-nav a.active{font-weight:600;color:var(--jl-ink) !important;background:#fff !important}
#outside .jl-page .jl-hd-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
#outside .jl-page .jl-login{font-size:14.5px;font-weight:500;color:#fff !important;white-space:nowrap}
#outside .jl-page .jl-login:hover{color:var(--jl-lime) !important}
#outside .jl-page .jl-cta{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 20px;border-radius:999px;background:var(--jl-lime) !important;color:var(--jl-ink) !important;font-weight:700;font-size:14px;white-space:nowrap;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 22px -12px rgba(200,255,0,.8) !important}
#outside .jl-page .jl-cta:hover{transform:translateY(-1px);color:var(--jl-ink) !important}
#outside .jl-page .jl-lang{position:relative;display:flex;align-items:center}
#outside .jl-page .jl-lang .toggle-head{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.24) !important;color:#fff !important;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
#outside .jl-page .jl-lang .toggle-head:hover{background:rgba(255,255,255,.2) !important;border-color:rgba(255,255,255,.42) !important}
#outside .jl-page .jl-lang .toggle-head .outside-lang{font-size:18px;line-height:0;color:var(--jl-lime) !important;display:inline-flex}
#outside .jl-page .jl-lang .toggle-head span{line-height:1;letter-spacing:.03em}
#outside .jl-page .jl-lang .toggle-head::after{content:"";width:6px;height:6px;border-right:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75);transform:rotate(45deg);margin:-3px 0 0 1px}
#outside .jl-page .jl-lang .toggle-body{position:absolute;top:calc(100% + 10px);right:0;min-width:172px;background:#fff !important;border-radius:16px !important;box-shadow:0 22px 48px -18px rgba(9,17,60,.45) !important;border:1px solid #E6E9F2 !important;padding:6px !important;z-index:80}
#outside .jl-page .jl-lang .currencyList{display:flex;flex-direction:column;gap:2px}
#outside .jl-page .jl-lang .toggle-body .item{padding:10px 12px !important;border-radius:11px !important;color:#0B0E16 !important;background:none !important;border:0 !important;font-weight:500;font-size:14.5px;transition:background .15s}
#outside .jl-page .jl-lang .toggle-body .item:hover{background:#F2F5FA !important;color:#0B0E16 !important}
#outside .jl-page .jl-lang .toggle-body .item .cText,#outside .jl-page .jl-lang .toggle-body .name{color:#0B0E16 !important}
@media(max-width:820px){ #outside .jl-page .jl-lang .toggle-head{height:38px;padding:0 11px;font-size:13.5px;gap:5px} #outside .jl-page .jl-lang .toggle-head::after{display:none} }
#outside .jl-page .jl-burger{display:none;background:none !important;border:0 !important;color:#fff !important;font-size:26px;cursor:pointer;line-height:1;padding:4px}
#outside .jl-page .jl-mnav{display:none;position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#14247A !important;z-index:1100;padding:66px 22px 24px;flex-direction:column;gap:6px;overflow-y:auto}
#outside .jl-page .jl-mnav.open{display:flex}
#outside .jl-page .jl-mnav a{color:#fff !important;padding:12px 16px;border-radius:12px;font-size:16px;font-weight:500}
#outside .jl-page .jl-mnav a:hover,#outside .jl-page .jl-mnav a.active{background:rgba(255,255,255,.12) !important;color:#fff !important}
#outside .jl-page .jl-mnav-x{position:absolute;top:14px;right:16px;background:none !important;border:0 !important;color:#fff !important;font-size:30px;line-height:1;cursor:pointer}
#outside .jl-page .jl-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5) !important;z-index:1090}
#outside .jl-page .jl-ov.open{display:block}
#outside .jl-page .jl-hero{background:var(--jl-blue-grad) !important;color:#fff !important}
#outside .jl-page .jl-hero-c{max-width:900px;margin:0 auto;padding:clamp(44px,5vw,78px) 24px clamp(48px,6vw,78px);text-align:center}
#outside .jl-page .jl-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82) !important}
#outside .jl-page .jl-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--jl-lime) !important;box-shadow:0 0 10px var(--jl-lime) !important}
#outside .jl-page .jl-h1{font-weight:700;font-size:clamp(34px,5.4vw,68px);line-height:1.05;letter-spacing:-.03em;margin:18px 0 0;color:#fff !important}
@media(max-width:560px){ #outside [style*="minmax(238px"],#outside [style*="minmax(240px"],#outside [style*="minmax(280px"],#outside [style*="minmax(300px"],#outside [style*="minmax(320px"]{grid-template-columns:1fr !important}}
#outside .jl-page .jl-h1 .hl{color:var(--jl-lime) !important}
#outside .jl-page .jl-lead{max-width:540px;margin:18px auto 0;font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:rgba(255,255,255,.82) !important}
#outside .jl-page .jl-eyebrow-b{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--jl-primary) !important}
#outside .jl-page .jl-body{background:var(--jl-bg) !important;border-radius:32px 32px 0 0;margin-top:-24px;position:relative;z-index:5}
#outside .jl-page .jl-body.r26{border-radius:26px 26px 0 0;margin-top:-20px}
#outside .jl-page .jl-body.r28{border-radius:28px 28px 0 0;margin-top:-22px}
#outside .jl-page .jl-section{padding:clamp(44px,6vw,80px) 0}
#outside .jl-page .jl-sec-head{text-align:center;max-width:560px;margin:0 auto 40px}
#outside .jl-page .jl-h2{font-weight:700;font-size:clamp(26px,4vw,46px);line-height:1.08;letter-spacing:-.025em;margin:14px 0 0;color:var(--jl-t1) !important}
#outside .jl-page .jl-h3{font-weight:600;font-size:19px;margin:18px 0 0;color:var(--jl-t1) !important}
#outside .jl-page .jl-p{font-size:16px;line-height:1.75;color:var(--jl-t2) !important}
#outside .jl-page .jl-grid{display:grid;gap:18px}
#outside .jl-page .jl-g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
#outside .jl-page .jl-g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
#outside .jl-page .jl-g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
#outside .jl-page .jl-card{background:#fff !important;border:1px solid var(--jl-bd) !important;border-radius:20px;padding:28px;box-shadow:var(--jl-card-sh) !important}
#outside .jl-page .jl-card.lift{transition:transform .25s,box-shadow .25s}
#outside .jl-page .jl-card.lift:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,14,22,.04),0 30px 60px -34px rgba(11,14,22,.4) !important}
#outside .jl-page .jl-card-dark{background:var(--jl-ink) !important;border-radius:20px;padding:28px;color:#fff !important}
#outside .jl-page .jl-icotile{width:52px;height:52px;border-radius:14px;background:var(--jl-tint) !important;color:var(--jl-primary) !important;display:inline-flex;align-items:center;justify-content:center;font-size:25px}
#outside .jl-page .jl-stat{background:#fff !important;border:1px solid var(--jl-bd) !important;border-radius:20px;padding:28px;text-align:center;box-shadow:var(--jl-card-sh) !important}
#outside .jl-page .jl-stat .n{font-weight:700;font-size:clamp(30px,3.6vw,44px);color:var(--jl-primary) !important;line-height:1}
#outside .jl-page .jl-stat .l{font-size:14px;color:var(--jl-t2) !important;margin-top:6px}
#outside .jl-page .jl-stat.dark{background:var(--jl-ink) !important;border:0 !important}
#outside .jl-page .jl-stat.dark .n{color:var(--jl-lime) !important}
#outside .jl-page .jl-stat.dark .l{color:rgba(255,255,255,.7) !important}
#outside .jl-page .jl-checks{margin-top:24px;display:flex;flex-direction:column;gap:13px}
#outside .jl-page .jl-check{display:flex;align-items:center;gap:12px;font-size:15px;color:#2A3142 !important}
#outside .jl-page .jl-check i{color:var(--jl-primary) !important;font-size:20px;flex-shrink:0}
#outside .jl-page .jl-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 30px;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;border:0 !important;transition:transform .25s,box-shadow .25s;font-family:inherit}
#outside .jl-page .jl-btn-lime{background:var(--jl-lime) !important;color:var(--jl-ink) !important;box-shadow:0 18px 32px -12px rgba(200,255,0,.6) !important}
#outside .jl-page .jl-btn-lime:hover{transform:translateY(-2px);color:var(--jl-ink) !important}
#outside .jl-page .jl-btn-blue{background:var(--jl-primary) !important;color:#fff !important;box-shadow:0 18px 34px -14px rgba(26,59,204,.7) !important}
#outside .jl-page .jl-btn-blue:hover{transform:translateY(-2px);background:var(--jl-primary-d) !important;color:#fff !important}
#outside .jl-page .jl-btn-ghost{background:rgba(255,255,255,.1) !important;color:#fff !important;border:1px solid rgba(255,255,255,.25) !important}
#outside .jl-page .jl-btn-ghost:hover{background:rgba(255,255,255,.18) !important;color:#fff !important}
#outside .jl-page .jl-cta-card{background:radial-gradient(120% 150% at 82% -10%,#3452E8,#0F2A8A 60%) !important;border-radius:28px;padding:clamp(44px,6vw,80px);text-align:center;box-shadow:0 40px 80px -44px rgba(26,59,204,.5) !important}
#outside .jl-page .jl-cta-card h2{font-weight:700;color:#fff !important;font-size:clamp(28px,4.4vw,52px);line-height:1.06;letter-spacing:-.025em;margin:0}
#outside .jl-page .jl-cta-card p{color:rgba(255,255,255,.8) !important;font-size:16.5px;line-height:1.65;margin:16px auto 0;max-width:480px}
#outside .jl-page .jl-ft{background:#070A12 !important;color:rgba(255,255,255,.6) !important;padding:60px 0 0}
#outside .jl-page .jl-ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08) !important}
#outside .jl-page .jl-ft h3,#outside .jl-page .jl-ft h6{color:#fff !important;font-size:14px;font-weight:600;margin:0 0 18px}
#outside .jl-page .jl-ft-col{display:flex;flex-direction:column;gap:11px;font-size:14px}
#outside .jl-page .jl-ft-col a{color:rgba(255,255,255,.55) !important}
#outside .jl-page .jl-ft-col a:hover{color:var(--jl-lime) !important}
#outside .jl-page .jl-ft-brand p{font-size:14px;line-height:1.75;margin:16px 0 0;color:rgba(255,255,255,.5) !important;max-width:260px}
#outside .jl-page .jl-ft-hl{text-align:center;padding:0 0 44px}
#outside .jl-page .jl-ft-hl h2{color:#fff !important;font-weight:700;font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px}
#outside .jl-page .jl-ft-hl .hl{color:var(--jl-lime) !important}
#outside .jl-page .jl-ft-copy{padding:24px 0;font-size:13.5px;color:rgba(255,255,255,.62) !important;text-align:center}
#outside .jl-page .jl-ft-badge{display:inline-flex;align-items:center;gap:6px;background:#10B981 !important;color:#fff !important;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;margin-top:14px}
@keyframes jl-reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes jl-fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
#outside .jl-page .jl-fadeup{animation:jl-fadeup .7s both}
#outside .jl-page [data-reveal]{opacity:0}
@media (prefers-reduced-motion:reduce){ #outside .jl-page [data-reveal]{opacity:1!important;animation:none!important}
#outside .jl-page .jl-fadeup{animation:none}}
@media(max-width:900px){ #outside .jl-page .jl-ft-top{grid-template-columns:1fr 1fr}
#outside .jl-page .jl-ft-brand{grid-column:1/-1}}
@media(max-width:820px){ #outside .jl-page .jl-nav,#outside .jl-page .jl-login{display:none}
#outside .jl-page .jl-burger{display:block}
#outside .jl-page .jl-hd-in{padding:12px 18px;gap:12px}}
@media(max-width:560px){ #outside .jl-page .jl-ft-top{grid-template-columns:1fr}
#outside .jl-page .jl-hero-c{padding-top:36px;padding-bottom:40px}}
#outside .jl-page .faq-question,#outside .jl-page .faq-answer{background:transparent !important}
#outside .jl-page .faq-question:hover{background:transparent !important}
body#outside.dark .jl-page .jl-section{background:transparent !important}
#outside .jl-page .homeHeader{margin-top:0 !important;padding-top:0 !important;background:#1A3BCC !important}
#outside .jl-page .homeHeader .homeBg{z-index:0 !important}
#outside .jl-page .homeHeader .hhSide{padding-top:48px !important;padding-bottom:48px !important}
body#outside.dark .jl-page .homeSection{background:#F4F6FA !important}
body#outside.dark .jl-page .homeSection::before{opacity:0 !important}
body#outside.dark .jl-page .homeSection .hsTitle{color:#0B0E16 !important;-webkit-text-fill-color:#0B0E16 !important;background:none !important}
body#outside.dark .jl-page .homeSection .hsTitle .rotate{color:#1A3BCC !important;-webkit-text-fill-color:#1A3BCC !important;background:none !important}
body#outside.dark .jl-page .homeSection .hsText,body#outside.dark .jl-page .homeSection .col-lg-5 p,body#outside.dark .jl-page .homeSection .col-lg-6 > p,body#outside.dark .jl-page .homeSection .text-center > p{color:#5A6478 !important}
body#outside.dark .jl-page .homeSection .col-lg-5 p a{color:#1A3BCC !important}
body#outside.dark .jl-page .homeSection .btn-outline-light{border:1.5px solid #D3DAE6 !important;color:#1A3BCC !important;background:#fff !important}
body#outside.dark .jl-page .homeSection .btn-outline-light span{color:#1A3BCC !important;-webkit-text-fill-color:#1A3BCC !important}
body#outside.dark .jl-page .homeSection .btn-outline-light i{color:#1A3BCC !important}
body#outside.dark .jl-page .homeSection .card{border:1px solid #EAECF2 !important;box-shadow:0 12px 32px -20px rgba(11,14,22,.3) !important}
body#outside.dark .jl-page .homeSection .card .card-title{color:#0B0E16 !important}
body#outside.dark .jl-page .homeSection .card .card-text,body#outside.dark .jl-page .homeSection .card p,body#outside.dark .jl-page .homeSection .card li{color:#5A6478 !important}


/* ============================================
   JL AUTH DARK MODE — marketing pages rendered dark for logged-in members
   (body.dashboard.dark). Blue heros + lime/accent colors stay; light
   surfaces -> dark, dark text -> light. Selectors carry higher specificity
   than the per-page rules so they win without depending on load order.
   Added 2026-07-09 (companion to the jl-design block above).
   ============================================ */
/* --- base page + section backgrounds --- */
body.dashboard.dark #outside .jl-page{background:#13141b !important}
body.dashboard.dark #outside .jl-body,body.dashboard.dark #outside .jbx-wrap,body.dashboard.dark #outside .jl-page .ft-body{background:#13141b !important}
/* --- cards / panels / surfaces (standard + calc + free-tool + faq) --- */
body.dashboard.dark #outside .jbx-card,body.dashboard.dark #outside .jbx-feat,body.dashboard.dark #outside .jbx-intro,body.dashboard.dark #outside .jl-card,body.dashboard.dark #outside .jl-stat,body.dashboard.dark #outside .hwf-card,body.dashboard.dark #outside .hw-gcard,body.dashboard.dark #outside .card,body.dashboard.dark #outside .jl-section .card,body.dashboard.dark #outside .jl-page .ft-card,body.dashboard.dark #outside .jl-page .ft-step,body.dashboard.dark #outside .jl-page .ft-faq-item,body.dashboard.dark #outside .jl-page .cl-tw,body.dashboard.dark #outside .jl-page .cl-rcard,body.dashboard.dark #outside .home-ss-tab{background:#1c1d27 !important;border-color:rgba(255,255,255,.08) !important;color:#c7cdd8 !important}
/* terms pills-tab card — page rule has 2 ids (#outside #pills-tabContent), so match it */
body.dashboard.dark #outside #pills-tabContent .card{background:#1c1d27 !important;border-color:rgba(255,255,255,.08) !important}
/* --- headings + emphasized text -> light --- */
body.dashboard.dark #outside .jl-page h1,body.dashboard.dark #outside .jl-page h2,body.dashboard.dark #outside .jl-page h3,body.dashboard.dark #outside .jl-page h4,body.dashboard.dark #outside .jl-h2,body.dashboard.dark #outside .jl-h3,body.dashboard.dark #outside .jbx-card h3 a,body.dashboard.dark #outside .jbx-feat h2 a,body.dashboard.dark #outside .hwf-card h3,body.dashboard.dark #outside .hw-gcard h3,body.dashboard.dark #outside .jl-d,body.dashboard.dark #outside .cl-rhead,body.dashboard.dark #outside .ft-faq .faq-question h3,body.dashboard.dark #outside [class$="-stat-n"]{color:#f2f4f8 !important;-webkit-text-fill-color:#f2f4f8 !important}
/* --- body / muted text -> muted light --- */
body.dashboard.dark #outside .jl-page p,body.dashboard.dark #outside .jl-page li,body.dashboard.dark #outside .jl-p,body.dashboard.dark #outside .jbx-card p,body.dashboard.dark #outside .jbx-feat p,body.dashboard.dark #outside .hwf-card p,body.dashboard.dark #outside .hw-gcard p,body.dashboard.dark #outside .jbx-intro,body.dashboard.dark #outside .jbx-rt,body.dashboard.dark #outside .jbx-empty,body.dashboard.dark #outside .cl-table td{color:#9aa3b2 !important}
body.dashboard.dark #outside .cl-table td:first-child{color:#e6e9f0 !important}
/* --- form controls (calc cl-in, free-tool ft-*, native inputs/selects) --- */
body.dashboard.dark #outside .jl-page .cl-in,body.dashboard.dark #outside .jl-page .ft-input,body.dashboard.dark #outside .jl-page .ft-select,body.dashboard.dark #outside .jl-page .ft-pill,body.dashboard.dark #outside .jl-page input,body.dashboard.dark #outside .jl-page select,body.dashboard.dark #outside .jl-page textarea{background:#0f1017 !important;border-color:rgba(255,255,255,.14) !important;color:#f2f4f8 !important}
body.dashboard.dark #outside .jl-page .ft-in{background:transparent !important;color:#f2f4f8 !important}
/* --- calculator table --- */
body.dashboard.dark #outside .cl-table th{background:#13141b !important;color:#f2f4f8 !important;border-bottom-color:rgba(255,255,255,.1) !important}
body.dashboard.dark #outside .cl-table td{border-top-color:rgba(255,255,255,.07) !important}
body.dashboard.dark #outside .cl-table tr:hover td{background:rgba(255,255,255,.03) !important}
/* --- blog category chips + tags + pager --- */
body.dashboard.dark #outside .jbx-cat{background:#1c1d27 !important;color:#c7cdd8 !important;border-color:rgba(255,255,255,.1) !important}
body.dashboard.dark #outside .jbx-cat.act{background:#1E45FB !important;color:#fff !important;border-color:#1E45FB !important}
body.dashboard.dark #outside .jbx-tag{background:rgba(30,69,251,.2) !important;color:#93a6ff !important}
body.dashboard.dark #outside .jbx-pager a{color:#c7cdd8 !important}
body.dashboard.dark #outside .jbx-foot{border-top-color:rgba(255,255,255,.08) !important}
body.dashboard.dark #outside .hw-gcard .hw-gi{background:rgba(255,255,255,.06) !important}
/* --- hero lead text stays legible on the blue hero --- */
body.dashboard.dark #outside .jl-hero .jl-lead,body.dashboard.dark #outside .jl-hero p{color:rgba(255,255,255,.85) !important}


/* ============================================
   JL AUTH DARK MODE — robustness pass (2026-07-09b)
   Fixes dark-on-dark / light-on-light text the first pass missed:
   (1) flip the design tokens so every var(--jl-*) text/surface follows dark,
   (2) protect decorative inline-white mockups (IG profile card, phone screens)
       so their text stays dark-on-white and reads like a real app,
   (3) lift the few hardcoded content colors + low-contrast blue accents.
   Verified with a per-element WCAG-contrast audit on all 8 marketing types.
   ============================================ */
body.dashboard.dark #outside{--jl-t1:#f2f4f8 !important;--jl-t2:#9aa3b2 !important;--jl-t3:#8892a4 !important;--jl-bg:#13141b !important;--jl-tint:#1c1d27 !important;--jl-bd:rgba(255,255,255,.09) !important;--jl-bd2:rgba(255,255,255,.14) !important}
body.dashboard.dark #outside [style*="background:#fff"],body.dashboard.dark #outside [style*="background: #fff"],body.dashboard.dark #outside [style*="background:#FFF"],body.dashboard.dark #outside [style*="background:white"]{--jl-t1:#0B0E16 !important;--jl-t2:#5A6478 !important;--jl-t3:#626C80 !important;--jl-bd:rgba(11,14,22,.06) !important}
body.dashboard.dark #outside [style*="background:#fff"] :is(h1,h2,h3,h4,h5,h6,p,li,span,div,strong,b,small,a,td,.jl-d,[class$="-stat-n"]){color:#0B0E16 !important;-webkit-text-fill-color:#0B0E16 !important}
body.dashboard.dark #outside .jl-check{color:#c7cdd8 !important}
body.dashboard.dark #outside .jl-eyebrow-b,body.dashboard.dark #outside .hw-link{color:#8aa0ff !important}

/* terms category tab pills — page rule #outside .jl-page #pills-tab .nav-link is 2-id, match it */
body.dashboard.dark #outside #pills-tab .nav-link:not(.active){background:#1c1d27 !important;color:#c7cdd8 !important;border-color:rgba(255,255,255,.12) !important}

/* Bootstrap components used inside marketing content (accordion FAQ on calculators, etc.) */
body.dashboard.dark #outside .jl-page :is(.accordion-button,.accordion-item,.accordion-body,.accordion){background:#1c1d27 !important;color:#e6e9f0 !important;border-color:rgba(255,255,255,.08) !important}
body.dashboard.dark #outside .jl-page .accordion-button:not(.collapsed){background:#22232f !important;color:#f2f4f8 !important}
body.dashboard.dark #outside .jl-page :is(.list-group-item,.form-control,.form-select,.input-group-text){background:#13141b !important;color:#f2f4f8 !important;border-color:rgba(255,255,255,.14) !important}

/* ============================================================================
 * JL-GEN — shared layer for generated landing pages (seo/build-landings.mjs)
 * ----------------------------------------------------------------------------
 * Extends the existing :root at L11077 — no new brand colours, no new fonts.
 * Everything here exists because the hand-built landings did it with ~80 inline
 * style="" each, which is why they drift. Anything a generated page needs must
 * be a class here, never an inline style.
 *
 * Scope matches the rest of the file: #outside .jl-page + !important, because
 * PerfectPanel injects its own Bootstrap after the theme sheet.
 * ========================================================================== */
:root{
  /* surfaces + text already exist as --jl-bg/-t1/-t2/-t3; these fill the gaps
     that were previously hardcoded across the landing pages */
  --jl-surface:#FFFFFF; --jl-surface-2:#EDF0F6; --jl-surface-3:#EEF1FF;
  --jl-warn:#E00000;
  /* platform colours, lifted from the existing pages so every generated page
     uses the same value for a given network */
  --jl-ig:#DD2A7B; --jl-fb:#1877F2; --jl-yt:#FF0000; --jl-tt:#FE2C55;
  --jl-tg:#229ED9; --jl-tw:#0B0E16; --jl-sp:#1DB954;
  /* radii + shadows: the four values the hand-built pages actually converged on */
  --jl-r-pill:999px; --jl-r-lg:22px; --jl-r:14px; --jl-r-sm:9px;
  --jl-sh-soft:0 12px 28px rgba(9,17,60,.18);
  --jl-sh-deep:0 44px 92px -40px rgba(0,0,0,.55);
  /* type scale: the clamps already in use, named so pages stop inventing new ones */
  --jl-fs-hero:clamp(40px,7.2vw,96px);
  --jl-fs-h2:clamp(32px,4.6vw,54px);
  --jl-fs-h3:clamp(20px,2.2vw,30px);
  --jl-fs-lead:clamp(16px,1.5vw,20px);
}

/* ---- generated page shell ------------------------------------------------ */
#outside .jl-page .jg-sec{padding:clamp(56px,7vw,104px) 0}
#outside .jl-page .jg-sec--tint{background:var(--jl-bg) !important}
#outside .jl-page .jg-sec--ink{background:var(--jl-ink) !important;color:#fff !important}
#outside .jl-page .jg-sec--ink :is(h2,h3,p){color:#fff !important}
#outside .jl-page .jg-head{max-width:62ch;margin:0 0 clamp(28px,3.4vw,44px)}
#outside .jl-page .jg-h2{font-family:'Anuphan',sans-serif;font-weight:700;font-size:var(--jl-fs-h2);line-height:1.06;letter-spacing:-.02em;margin:10px 0 0}
#outside .jl-page .jg-lead{font-size:var(--jl-fs-lead);line-height:1.6;color:var(--jl-t2) !important;margin:16px 0 0;max-width:56ch}
#outside .jl-page .jg-sec--ink .jg-lead{color:rgba(255,255,255,.82) !important}

/* ---- SIGNATURE: grade rail ----------------------------------------------
 * The one device these pages are built around. Jay's own service names already
 * state the grade out loud ("เกรดบอท ... ไม่มีประกัน" sits in the catalogue next
 * to "งานไทย ... ประกันตลอดชีพ"), which no competitor publishes. The rail turns
 * that into the page's main explanation: same service, three honest grades,
 * real ฿ per 1,000 from the catalogue, guarantee stated under each.
 * Deliberately shows the cheap bot tier FIRST rather than hiding it.
 * ------------------------------------------------------------------------- */
#outside .jl-page .jg-rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(30px,4vw,52px)}
#outside .jl-page .jg-rail::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:2px;background:linear-gradient(90deg,var(--jl-warn),var(--jl-t3) 46%,var(--jl-lime));opacity:.5}
#outside .jl-page .jg-stop{position:relative;text-align:center;padding-top:70px}
#outside .jl-page .jg-stop::before{content:"";position:absolute;top:25px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--jl-surface);border:3px solid var(--jl-t3)}
#outside .jl-page .jg-stop--mid::before{border-color:var(--jl-primary)}
#outside .jl-page .jg-stop--best::before{border-color:var(--jl-lime);box-shadow:0 0 0 6px rgba(200,255,0,.22)}
#outside .jl-page .jg-stop-name{font-family:'Anuphan',sans-serif;font-weight:700;font-size:clamp(17px,1.7vw,21px);line-height:1.2}
#outside .jl-page .jg-price{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em;margin-top:8px;display:block}
#outside .jl-page .jg-price small{font-size:.42em;font-weight:600;color:var(--jl-t3) !important;margin-left:5px;letter-spacing:0}
#outside .jl-page .jg-warranty{display:inline-block;margin-top:10px;padding:5px 13px;border-radius:var(--jl-r-pill);font-size:13px;font-weight:600;background:var(--jl-surface-2) !important;color:var(--jl-t2) !important}
#outside .jl-page .jg-warranty--none{background:rgba(224,0,0,.09) !important;color:var(--jl-warn) !important}
#outside .jl-page .jg-warranty--life{background:rgba(200,255,0,.2) !important;color:#4A6B00 !important}
#outside .jl-page .jg-note{font-size:13.5px;line-height:1.55;color:var(--jl-t3) !important;margin-top:12px;max-width:30ch;margin-inline:auto}
@media (max-width:720px){
  #outside .jl-page .jg-rail{grid-template-columns:1fr;gap:26px}
  #outside .jl-page .jg-rail::before{left:34px;right:auto;top:10%;bottom:10%;width:2px;height:auto;background:linear-gradient(180deg,var(--jl-warn),var(--jl-t3) 46%,var(--jl-lime))}
  #outside .jl-page .jg-stop{text-align:left;padding:0 0 0 74px;min-height:64px}
  #outside .jl-page .jg-stop::before{top:6px;left:24px;transform:none}
  #outside .jl-page .jg-note{margin-inline:0}
}

/* ---- service table (real rows from the catalogue) ------------------------ */
#outside .jl-page .jg-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
#outside .jl-page .jg-tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--jl-t3) !important;padding:0 14px 12px}
#outside .jl-page .jg-tbl td{padding:15px 14px;border-top:1px solid var(--jl-bd) !important;vertical-align:top}
#outside .jl-page .jg-tbl td:last-child{text-align:right;font-family:'IBM Plex Sans',sans-serif;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
#outside .jl-page .jg-tag{display:inline-block;padding:3px 9px;border-radius:var(--jl-r-sm);font-size:12px;font-weight:600;background:var(--jl-surface-3) !important;color:var(--jl-primary) !important;margin-right:6px}
#outside .jl-page .jg-tag--th{background:rgba(200,255,0,.22) !important;color:#4A6B00 !important}
#outside .jl-page .jg-tag--bot{background:var(--jl-surface-2) !important;color:var(--jl-t3) !important}
@media (max-width:640px){
  #outside .jl-page .jg-tbl thead{display:none}
  #outside .jl-page .jg-tbl td{display:block;border-top:0;padding:4px 0}
  #outside .jl-page .jg-tbl tr{display:block;padding:16px 0;border-top:1px solid var(--jl-bd) !important}
  #outside .jl-page .jg-tbl td:last-child{text-align:left;font-size:19px}
}

/* ---- FAQ + interlink ----------------------------------------------------- */
#outside .jl-page .jg-faq details{border-top:1px solid var(--jl-bd) !important;padding:18px 0}
#outside .jl-page .jg-faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
#outside .jl-page .jg-faq summary::-webkit-details-marker{display:none}
#outside .jl-page .jg-faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--jl-t3) !important;flex:none;line-height:1}
#outside .jl-page .jg-faq details[open] summary::after{content:"–"}
#outside .jl-page .jg-faq p{margin:12px 0 0;color:var(--jl-t2) !important;line-height:1.7;max-width:70ch}
#outside .jl-page .jg-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
#outside .jl-page .jg-links a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--jl-r-pill);background:var(--jl-surface-2) !important;color:var(--jl-t1) !important;font-size:14.5px;font-weight:600;transition:transform .15s,background .15s}
#outside .jl-page .jg-links a:hover{transform:translateY(-1px);background:var(--jl-tint) !important}

@media (prefers-reduced-motion:reduce){
  #outside .jl-page :is(.jg-links a,.jg-stop){transition:none !important;transform:none !important}
}
/* end JL-GEN */

/* ---- duration ladder (live-stream pages) ---------------------------------
 * Live views are not sold on the grade axis the .jg-rail assumes — they are
 * sold by how long the stream runs and how many concurrent viewers show up.
 * Verified against the catalogue: Facebook 15/30/60/90 min, TikTok 15→120,
 * Twitch 15→180, Instagram 30→60. Using .jg-rail here produced nonsense
 * ("งานไทย 8,000฿ ไม่มีประกัน" is a different product, not a better grade).
 * ------------------------------------------------------------------------- */
#outside .jl-page .jg-dur{display:grid;gap:10px;margin-top:clamp(24px,3vw,38px)}
#outside .jl-page .jg-dur-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:15px 20px;border-radius:var(--jl-r);background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;transition:border-color .15s,transform .15s}
#outside .jl-page .jg-dur-row:hover{border-color:var(--jl-bd2) !important;transform:translateY(-1px)}
#outside .jl-page .jg-dur-time{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(19px,2.1vw,26px);letter-spacing:-.02em;min-width:4.5ch}
#outside .jl-page .jg-dur-time span{font-size:.5em;font-weight:600;color:var(--jl-t3) !important;margin-left:4px}
#outside .jl-page .jg-dur-label{font-size:14.5px;color:var(--jl-t2) !important;line-height:1.45}
#outside .jl-page .jg-dur-price{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(17px,1.9vw,22px);white-space:nowrap}
#outside .jl-page .jg-dur-row--hi{background:var(--jl-ink) !important;border-color:var(--jl-ink) !important}
#outside .jl-page .jg-dur-row--hi :is(.jg-dur-time,.jg-dur-price){color:#fff !important}
#outside .jl-page .jg-dur-row--hi .jg-dur-label{color:rgba(255,255,255,.72) !important}
#outside .jl-page .jg-dur-row--hi .jg-dur-price{color:var(--jl-lime) !important}
@media (max-width:560px){
  #outside .jl-page .jg-dur-row{grid-template-columns:auto auto;row-gap:6px}
  #outside .jl-page .jg-dur-label{grid-column:1/-1;order:3}
}

/* rate freshness stamp — every page that prints a ฿ figure carries one */
#outside .jl-page .jg-stamp{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:18px;font-size:13px;color:var(--jl-t3) !important}
#outside .jl-page .jg-stamp a{color:var(--jl-primary) !important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* end duration ladder */

/* ---- per-platform accent -------------------------------------------------
 * The hand-built landings each ship their own <style> block (.tt-hero, .ig-hero…)
 * which is a second source of drift on top of the inline styles. Generated pages
 * set one class on the wrapper instead and everything reads --jg-accent.
 * ------------------------------------------------------------------------- */
#outside .jl-page .jg-p{--jg-accent:var(--jl-primary)}
#outside .jl-page .jg-p--facebook{--jg-accent:var(--jl-fb)}
#outside .jl-page .jg-p--tiktok{--jg-accent:var(--jl-tt)}
#outside .jl-page .jg-p--youtube{--jg-accent:var(--jl-yt)}
#outside .jl-page .jg-p--instagram{--jg-accent:var(--jl-ig)}
#outside .jl-page .jg-p--twitch{--jg-accent:#9146FF}
#outside .jl-page .jg-p--telegram{--jg-accent:var(--jl-tg)}

#outside .jl-page .jg-hero{position:relative;overflow:hidden;background:var(--jl-ink) !important;color:#fff !important;padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,88px)}
#outside .jl-page .jg-hero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:70%;border-radius:50%;background:var(--jg-accent);opacity:.22;filter:blur(90px);pointer-events:none}
#outside .jl-page .jg-hero .jl-wrap{position:relative;z-index:1}
#outside .jl-page .jg-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--jl-r-pill);background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.22) !important;font-size:13.5px;font-weight:600;color:#fff !important}
#outside .jl-page .jg-h1{font-family:'Anuphan',sans-serif;font-weight:700;font-size:var(--jl-fs-hero);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;max-width:17ch;color:#fff !important}
#outside .jl-page .jg-h1 em{font-style:normal;color:var(--jl-lime) !important}
#outside .jl-page .jg-sub{font-size:var(--jl-fs-lead);line-height:1.55;color:rgba(255,255,255,.86) !important;margin:20px 0 0;max-width:54ch}
#outside .jl-page .jg-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* end per-platform accent */

/* ============================================================================
 * JL-GEN v2 — hero parity with the hand-built landings
 * The first version shipped a flat dark band. Next to /tiktok-smm-panel (radial
 * platform gradient, split layout, phone mock, floating stat cards) it read as a
 * different, cheaper site. Same structure now, built once instead of per page.
 * ========================================================================== */
#outside .jl-page .jg-hero{
  background:radial-gradient(125% 120% at 88% -12%,var(--jg-accent) 0%,#151517 52%,#000 100%) !important;
  padding:0 !important}
#outside .jl-page .jg-hero::after{display:none}
#outside .jl-page .jg-hero-in{max-width:1160px;margin:0 auto;padding:clamp(40px,5vw,76px) 24px clamp(34px,4vw,60px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,52px);align-items:center;position:relative;z-index:2}
#outside .jl-page .jg-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:1}
#outside .jl-page .jg-blob--a{width:420px;height:420px;background:rgba(200,255,0,.16) !important;top:-140px;left:-90px}
#outside .jl-page .jg-blob--b{width:360px;height:360px;background:var(--jg-accent) !important;opacity:.3;bottom:-160px;right:-60px}

/* ---- CSS-only stream / post mock (no image files, same trick the theme uses) */
#outside .jl-page .jg-mock{position:relative;max-width:310px;margin:0 auto;width:100%}
#outside .jl-page .jg-mock-frame{position:relative;background:#000 !important;border-radius:30px;padding:12px;box-shadow:var(--jl-sh-deep)}
#outside .jl-page .jg-mock-screen{position:relative;background:linear-gradient(180deg,#1b1b1f,#000) !important;border-radius:22px;height:410px;overflow:hidden;padding:16px;display:flex;flex-direction:column}
#outside .jl-page .jg-mock-top{display:flex;align-items:center;gap:8px}
#outside .jl-page .jg-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;background:#E00000 !important;color:#fff !important;font-size:11px;font-weight:800;letter-spacing:.06em}
#outside .jl-page .jg-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:jg-pulse 1.6s ease-in-out infinite}
#outside .jl-page .jg-eye{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.14) !important;color:#fff !important;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
#outside .jl-page .jg-mock-body{flex:1;display:flex;align-items:flex-end}
#outside .jl-page .jg-bars{display:flex;align-items:flex-end;gap:6px;width:100%;height:120px}
#outside .jl-page .jg-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--jl-lime),rgba(200,255,0,.15)) !important;animation:jg-rise 2.4s ease-out both}
#outside .jl-page .jg-mock-foot{margin-top:14px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.72) !important;font-size:12px}
#outside .jl-page .jg-dot{width:26px;height:26px;border-radius:50%;background:var(--jg-accent) !important;flex:none}
#outside .jl-page .jg-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:#fff !important;color:var(--jl-ink) !important;font-weight:700;font-size:13px;box-shadow:var(--jl-sh-soft);animation:jg-float 5s ease-in-out infinite}
/* The frame is position:relative and comes after the top-left chip in the DOM, so
   without this it paints over it and "+10 ล้าน" reads as "+10 ล". */
#outside .jl-page .jg-chip{z-index:2}
#outside .jl-page .jg-chip b{font-variant-numeric:tabular-nums}
#outside .jl-page .jg-chip{white-space:nowrap}
#outside .jl-page .jg-chip--tl{top:6%;left:-14%}
/* Entry price in the hero copy. Deliberately not a .jg-chip: chips are decoration and are
   display:none under 900px, which is where most of the traffic is. And not .jg-price either —
   that class already styles the per-1,000 figure inside the grade cards. The headline number
   is what a buyer pays to try; the rate sits under it so the figure they will meet again on
   the order form is on the same screen. */
#outside .jl-page .jg-entry{margin:18px 0 0;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #E6E9F2;box-shadow:var(--jl-sh-soft);display:inline-block;max-width:100%}
#outside .jl-page .jg-entry-lead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
#outside .jl-page .jg-entry-n{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(28px,3.4vw,38px);line-height:1;color:#0B0E16 !important}
#outside .jl-page .jg-entry-l{font-weight:600;font-size:14px;color:#5A6478 !important}
#outside .jl-page .jg-entry-note{margin-top:7px;font-size:13px;line-height:1.55;color:#5A6478 !important}
@media (max-width:520px){ #outside .jl-page .jg-entry{display:block} }
#outside .jl-page .jg-chip--br{bottom:9%;right:-12%;animation-delay:2.2s}
#outside .jl-page .jg-chip--lime{background:var(--jl-lime) !important}
@keyframes jg-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes jg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes jg-rise{from{height:6%}to{height:var(--h,60%)}}
@media (max-width:900px){ #outside .jl-page .jg-chip{display:none} }
@media (prefers-reduced-motion:reduce){
  #outside .jl-page :is(.jg-chip,.jg-bars i,.jg-live::before){animation:none !important}
  #outside .jl-page .jg-bars i{height:var(--h,60%)}
}

/* ---- long-form body copy ------------------------------------------------- */
#outside .jl-page .jg-prose{max-width:68ch}
#outside .jl-page .jg-prose h3{font-family:'Anuphan',sans-serif;font-weight:700;font-size:var(--jl-fs-h3);line-height:1.2;margin:34px 0 0}
#outside .jl-page .jg-prose h3:first-child{margin-top:0}
#outside .jl-page .jg-prose p{margin:12px 0 0;line-height:1.78;color:var(--jl-t2) !important}
#outside .jl-page .jg-prose ul{margin:12px 0 0;padding-left:20px}
#outside .jl-page .jg-prose li{margin:7px 0;line-height:1.7;color:var(--jl-t2) !important}
#outside .jl-page .jg-prose strong{color:var(--jl-t1) !important;font-weight:700}

/* ---- JL-GEN v3 — ordering steps, quantity table, described internal links ---
   The step numerals are real information here (you cannot pay before you top up),
   so they are counter-generated rather than typed into the copy — renumbering a
   step means editing one array in the generator, not four strings. */
/* 232px, not 268: at the 1,160px wrap the wider track fits only three, which strands
   step 4 alone on its own row and reads as a missing card rather than a fourth step. */
#outside .jl-page .jg-steps{counter-reset:jgstep;list-style:none;margin:0;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
#outside .jl-page .jg-steps li{counter-increment:jgstep;position:relative;
  padding:22px 22px 22px 62px;border-radius:var(--jl-r-lg);
  background:var(--jl-surface-2) !important;border:1px solid var(--jl-line)}
#outside .jl-page .jg-steps li::before{content:counter(jgstep);position:absolute;
  left:20px;top:21px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--jg-accent);color:#0a0a0b}
#outside .jl-page .jg-steps h3{font-family:'Anuphan',sans-serif;font-weight:700;
  font-size:16.5px;line-height:1.35;margin:0}
#outside .jl-page .jg-steps p{margin:8px 0 0;font-size:14.5px;line-height:1.7;
  color:var(--jl-t2) !important}

#outside .jl-page .jg-tbl--qty td:first-child{font-weight:700;color:var(--jl-t1) !important}
#outside .jl-page .jg-tbl--qty td:last-child{font-weight:800;font-variant-numeric:tabular-nums}

/* Links carry their own catalogue numbers, so the pill grew into a card. */
#outside .jl-page .jg-links{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
#outside .jl-page .jg-links a{display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:2px 10px;padding:14px 16px;border-radius:var(--jl-r-md);
  background:var(--jl-surface-2) !important;border:1px solid var(--jl-line)}
#outside .jl-page .jg-links a b{grid-column:1;font-size:15px;font-weight:700;
  color:var(--jl-t1) !important}
#outside .jl-page .jg-links a span{grid-column:1;font-size:12.5px;font-weight:500;
  color:var(--jl-t3) !important;font-variant-numeric:tabular-nums}
#outside .jl-page .jg-links a i{grid-column:2;grid-row:1/3;font-size:17px;
  color:var(--jg-accent) !important}
#outside .jl-page .jg-links a:hover{background:var(--jl-tint) !important;
  border-color:var(--jg-accent)}

/* ---- JL-GEN v4 — guide pages (build-guides.mjs) --------------------------
   A guide answers a question rather than selling one service, so it drops the
   device mock and the split hero: no product to show, and a fake screenshot
   beside an explainer reads as filler. */
#outside .jl-page .jg-p--guide{--jg-accent:var(--jl-lime)}
#outside .jl-page .jg-hero--guide{
  background:radial-gradient(120% 140% at 12% -20%,#1b1b1f 0%,#0d0d0f 55%,#000 100%) !important}
#outside .jl-page .jg-hero-in--guide{
  display:block;max-width:760px;padding-top:clamp(56px,7vw,96px);
  padding-bottom:clamp(56px,7vw,96px)}
#outside .jl-page .jg-hero-in--guide .jg-h1{max-width:16ch}
#outside .jl-page .jg-hero-in--guide .jg-sub{max-width:56ch}

/* Comparison table: the price is the answer, the count is the caveat, so they
   share a cell with the count set back rather than taking a column of its own. */
#outside .jl-page .jg-cmp td b{display:block;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--jl-t1) !important}
#outside .jl-page .jg-cmp td span{display:block;margin-top:2px;font-size:12px;
  color:var(--jl-t3) !important}
#outside .jl-page .jg-cmp td:first-child{font-weight:700;color:var(--jl-t1) !important}
/* .jg-tbl right-aligns its last cell because there it is always the price. Here the
   last column is one grade among several, and right-aligning it alone breaks the
   line-up with its own header. */
#outside .jl-page .jg-cmp :is(td,th):last-child{text-align:left}
#outside .jl-page .jg-cmp-none{color:var(--jl-t3) !important}
#outside .jl-page .jg-hero-in--guide .jg-h1{font-size:clamp(30px,4.4vw,54px)}
/* end JL-GEN v2 */

/* bar heights live here, not on the element — generated pages must stay free of style="" */
#outside .jl-page .jg-bars i:nth-child(1){--h:22%;height:22%;animation-delay:0.00s}
#outside .jl-page .jg-bars i:nth-child(2){--h:34%;height:34%;animation-delay:0.06s}
#outside .jl-page .jg-bars i:nth-child(3){--h:28%;height:28%;animation-delay:0.12s}
#outside .jl-page .jg-bars i:nth-child(4){--h:46%;height:46%;animation-delay:0.18s}
#outside .jl-page .jg-bars i:nth-child(5){--h:40%;height:40%;animation-delay:0.24s}
#outside .jl-page .jg-bars i:nth-child(6){--h:58%;height:58%;animation-delay:0.30s}
#outside .jl-page .jg-bars i:nth-child(7){--h:52%;height:52%;animation-delay:0.36s}
#outside .jl-page .jg-bars i:nth-child(8){--h:70%;height:70%;animation-delay:0.42s}
#outside .jl-page .jg-bars i:nth-child(9){--h:64%;height:64%;animation-delay:0.48s}
#outside .jl-page .jg-bars i:nth-child(10){--h:82%;height:82%;animation-delay:0.54s}
#outside .jl-page .jg-bars i:nth-child(11){--h:76%;height:76%;animation-delay:0.60s}
#outside .jl-page .jg-bars i:nth-child(12){--h:94%;height:94%;animation-delay:0.66s}

/* ── /en language nudge ──────────────────────────────────────────────────────
   Guests whose browser is set to English are redirected to /en on their very first
   request (engine-side, before the theme runs), so a Thai visitor lands on the English
   site with no hint that a Thai one exists. Mark the switcher once, then stay out of
   the way: the dot rides the globe button and the tip fades after 6s. */
#outside .jl-page .jl-lang .jl-ln-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--jl-lime);pointer-events:none;z-index:82;animation:jlLnPulse 1.9s ease-out infinite}
@keyframes jlLnPulse{0%{box-shadow:0 0 0 2px var(--jl-ink),0 0 0 0 rgba(200,255,0,.5)}70%{box-shadow:0 0 0 2px var(--jl-ink),0 0 0 8px rgba(200,255,0,0)}100%{box-shadow:0 0 0 2px var(--jl-ink),0 0 0 0 rgba(200,255,0,0)}}
@media(prefers-reduced-motion:reduce){ #outside .jl-page .jl-lang .jl-ln-dot{animation:none;box-shadow:0 0 0 2px var(--jl-ink)} }
#outside .jl-page .jl-lang .jl-ln-tip{position:absolute;top:calc(100% + 10px);right:0;display:flex;align-items:center;padding:3px 3px 3px 11px;border-radius:11px;background:var(--jl-lime);box-shadow:0 14px 30px -14px rgba(9,17,60,.6);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;z-index:81}
#outside .jl-page .jl-lang .jl-ln-tip.show{opacity:1;transform:none;pointer-events:auto}
#outside .jl-page .jl-lang .jl-ln-tip::before{content:"";position:absolute;top:-4px;right:15px;width:10px;height:10px;background:var(--jl-lime);border-radius:2px;transform:rotate(45deg)}
#outside .jl-page .jl-lang .jl-ln-tip a{position:relative;display:inline-flex;align-items:center;color:var(--jl-ink) !important;font-weight:700;font-size:13.5px;line-height:1;text-decoration:none}
#outside .jl-page .jl-lang .jl-ln-tip a i{font-size:16px;line-height:0;margin-left:1px}
#outside .jl-page .jl-lang .jl-ln-tip button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;padding:0;border:0 !important;border-radius:8px;background:rgba(11,14,22,.11) !important;color:var(--jl-ink) !important;font-size:15px;line-height:1;cursor:pointer;transition:background .15s}
#outside .jl-page .jl-lang .jl-ln-tip button:hover{background:rgba(11,14,22,.22) !important}
/* the display:flex above outranks the UA [hidden] rule — restore it so the tip stays down until JS shows it */
#outside .jl-page .jl-lang .jl-ln-tip[hidden],#outside .jl-page .jl-lang .jl-ln-dot[hidden]{display:none}

/* =========================================================
   New Service Request — anti-confusion UI (services.twig)
   ========================================================= */
body{
	--nsr-warn-bg: rgba(245,158,11,.10);
	--nsr-warn-bd: rgba(245,158,11,.35);
	--nsr-warn-tx: #B45309;
	--nsr-ok-bg: rgba(16,185,129,.09);
	--nsr-ok-bd: rgba(16,185,129,.32);
	--nsr-ok-tx: #047857;
	--nsr-ghost-bd: rgba(11,14,22,.16);
	--nsr-ghost-tx: #5A6478;
}
body.dark{
	--nsr-warn-bg: rgba(245,158,11,.13);
	--nsr-warn-bd: rgba(245,158,11,.30);
	--nsr-warn-tx: #FBBF24;
	--nsr-ok-bg: rgba(16,185,129,.12);
	--nsr-ok-bd: rgba(16,185,129,.28);
	--nsr-ok-tx: #34D399;
	--nsr-ghost-bd: rgba(255,255,255,.20);
	--nsr-ghost-tx: #8B8B9A;
}
/* deliberately low-emphasis: this is not the page's primary action.
   Doubled class + body prefix so it outranks `body.dark .btn-secondary` and
   `body.dashboard:not(.dark) .btn-secondary`, which paint the lime accent with !important. */
body .nsr-open-btn.nsr-open-btn,
body.dark .nsr-open-btn.nsr-open-btn,
body.dashboard .nsr-open-btn.nsr-open-btn,
body .nsr-open-btn.nsr-open-btn:focus,
body.dark .nsr-open-btn.nsr-open-btn:focus,
body.dashboard .nsr-open-btn.nsr-open-btn:focus{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;background:transparent !important;background-image:none !important;border:1px solid var(--nsr-ghost-bd) !important;color:var(--nsr-ghost-tx) !important;box-shadow:none !important;transform:none !important;font-weight:600 !important}
body .nsr-open-btn.nsr-open-btn:hover,
body.dark .nsr-open-btn.nsr-open-btn:hover,
body.dashboard .nsr-open-btn.nsr-open-btn:hover{background:transparent !important;border-color:var(--primary) !important;color:var(--text-primary) !important;box-shadow:none !important;transform:none !important}
.nsr-open-btn i{font-size:17px;line-height:1}
.nothing-found .nsr-open-btn{padding:10px 20px}
.nsr-kw{font-weight:600;color:var(--text-primary)}

.nsr-modal .m-header.nsr-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.nsr-head-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.nsr-title{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.nsr-title i{color:var(--primary);font-size:19px;line-height:1}
.nsr-sub{font-size:12.5px;line-height:1.5;color:var(--text-muted)}

.nsr-notice{display:flex;gap:11px;padding:14px;border-radius:12px;background:var(--nsr-warn-bg);border:1px solid var(--nsr-warn-bd)}
.nsr-notice>i{font-size:20px;line-height:1.15;color:#F59E0B;flex-shrink:0}
.nsr-notice-body{min-width:0}
.nsr-notice-body strong{display:block;font-size:14.5px;font-weight:700;color:var(--nsr-warn-tx);margin-bottom:4px}
.nsr-notice-body p{margin:0 0 11px;font-size:13px;line-height:1.6;color:var(--text-secondary)}
.nsr-go-order{display:inline-flex;align-items:center;gap:6px}

.nsr-exists{margin-top:10px;padding:12px;border-radius:12px;background:var(--nsr-ok-bg);border:1px solid var(--nsr-ok-bd)}
.nsr-exists-head{font-size:13px;font-weight:600;line-height:1.5;color:var(--nsr-ok-tx);margin-bottom:8px}
.nsr-exists-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin-bottom:6px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;transition:border-color .15s}
.nsr-exists-item:last-child{margin-bottom:0}
.nsr-exists-item:hover{border-color:var(--primary);text-decoration:none}
.nsr-exists-name{font-size:12.5px;line-height:1.45;color:var(--text-primary);overflow:hidden}
.nsr-exists-rate{font-size:12.5px;font-weight:700;color:var(--primary);white-space:nowrap}
.nsr-exists-more{margin-top:7px;font-size:12px;line-height:1.5;color:var(--text-muted)}

.nsr-ack{display:flex;align-items:flex-start;gap:9px;margin:16px 0 4px;padding:11px 12px;border-radius:11px;background:var(--bg-main);border:1px solid var(--border);cursor:pointer}
.nsr-ack input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--primary)}
.nsr-ack span{font-size:13px;line-height:1.5;color:var(--text-secondary)}

#successArea .btn{margin-top:10px}

@media (max-width:575px){
	.nsr-notice{padding:12px}
	.nsr-exists-item{flex-direction:column;align-items:flex-start;gap:3px}
}

/* footer status pill: white on #10B981 was 2.54:1.
   Must sit at the end of the file — the original rule is declared later than the
   accent-text block above, so an earlier override loses on source order. */
#outside .jl-page .jl-ft-badge{background:#0B7A57 !important}

/* ===== J2 — notifications settings page (was the stock template: no shell, hidden under the fixed header, unreadable in dark) ===== */
.nt-page{max-width:920px}
.nt-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.nt-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-weight:600;font-size:14px;text-decoration:none}
.nt-tab:hover{color:var(--text-primary);text-decoration:none}
.nt-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.nt-page .nt-sub{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.nt-tbl-wrap{overflow-x:auto}
.nt-tbl{width:100%;border-collapse:collapse}
.nt-tbl th,.nt-tbl td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:center;color:var(--text-primary)}
.nt-tbl thead th{font-size:12px;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.nt-tbl .nt-evt{text-align:left;font-size:14px;font-weight:600}
.nt-tbl tbody tr:last-child td{border-bottom:0}
.nt-switch{position:relative;display:inline-flex;width:44px;height:25px;margin:0;cursor:pointer;vertical-align:middle}
.nt-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit}
.nt-track{position:absolute;inset:0;border-radius:999px;background:rgba(127,127,127,.35);transition:background .18s;pointer-events:none}
.nt-track::after{content:'';position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
.nt-switch input:checked + .nt-track{background:var(--primary)}
.nt-switch input:checked + .nt-track::after{transform:translateX(19px)}
.nt-switch input:focus-visible + .nt-track{outline:2px solid var(--accent);outline-offset:2px}
.nt-switch.is-disabled{cursor:not-allowed;opacity:.45}
body.dark .nt-tab.active{color:#fff}

/* ===== J2b — members see marketing pages inside div#outside (layout.twig _mkt), with no dashboard <main> around them.
   The clearance for the fixed header/sidebar used to come from the bare `main` rule by accident; give it to the wrapper
   instead, so it also covers pages without a <main> (/blog). Mirrors the three `main` margin rules above. ===== */
body.dashboard div#outside{padding-top:97px;margin-left:80px;transition:margin-left .15s ease}
body.dashboard.sidebar-expanded div#outside{margin-left:300px}
@media (max-width:766.98px){body.dashboard div#outside{margin-left:0!important;padding-bottom:80px}}

/* ===== J3 — batch 2: measured contrast + layout fixes (audit A6-A9, B10, B11, C3-C8) ===== */
/* C4: --primary is a fill colour; as TEXT on the dark shell it is 2.2-2.6:1 */
body.dark .af-bonus-result-bonus,body.dark .tickets .avatar .tickets-img span{color:#8EA2FF}
body.dashboard.dark #outside .jbx-go{color:#8EA2FF !important}
/* C5: dark status pills (label on its own tint) */
body.dark .op-stats.cancelled{color:#FF8FB3;border-color:#FF8FB3}
body.dark .op-stats.partial{color:#B9B9C2;border-color:#B9B9C2}
body.dark .op-stats.processing{color:#FF9466;border-color:#FF9466}
body:not(.dark) .op-stats.cancelled{color:#A3143F;border-color:#A3143F}
/* C6 + E10: min/max are facts, not states — red read as an error. Neutral ink in both themes */
.orlc.min,.orlc.max,body:not(.dark) .orlc.min,body:not(.dark) .orlc.max{color:var(--text-secondary) !important}
/* C8 */
#outside .jbx-rt,#outside .jbx-rt .js-rt{color:var(--jl-t3) !important}
/* C3: free-tool eyebrow uses the raw platform colour (3.4-4.1:1 on white) */
/* guest: <body id="outside"> IS #outside; member: div#outside inside body.dashboard — cover both */
body#outside:not(.dark) .jl-page .ft-eyb,body:not(.dark) div#outside .jl-page .ft-eyb{color:color-mix(in srgb,var(--fa,#1A3BCC) 68%,#000) !important}
/* B6: update badges join the soft status-pill family */
.update-badge{padding:6px 14px;font-size:12.5px;min-width:0;border:1px solid transparent}
.badge-active,.badge-price-down{background:#DDF3EA;color:#0B6B4F;border-color:rgba(11,107,79,.25)}
.badge-disabled{background:#FBE1E8;color:#A3143F;border-color:rgba(163,20,63,.25)}
.badge-price-up{background:#FFF0CC;color:#7A4A00;border-color:rgba(122,74,0,.25)}
.badge-new-service{background:#E3E9FF;color:#1A3BCC;border-color:rgba(26,59,204,.25)}
body.dark .badge-active,body.dark .badge-price-down{background:#16302a;color:#5FE0B0;border-color:rgba(95,224,176,.3)}
body.dark .badge-disabled{background:#3a1f2a;color:#FF8FB3;border-color:rgba(255,143,179,.3)}
body.dark .badge-price-up{background:#3a2f17;color:#FFCF70;border-color:rgba(255,207,112,.3)}
body.dark .badge-new-service{background:#1d2447;color:#A9B8FF;border-color:rgba(169,184,255,.3)}
/* A6: updates pagination pushed the page 26px wide at 390 */
.custom-pagination{flex-wrap:wrap;justify-content:center;row-gap:6px;max-width:100%}
/* B10: "รายละเอียด" broke into two lines inside a 100px column */
.s-col-btn .btn{white-space:nowrap;padding-left:12px;padding-right:12px}
/* A8: 4 quick-amount chips in one row at phone width — 16px side padding left 44px for "1000฿" */
@media (max-width:575.98px){#quickAmounts .addBalanceBtn{padding-left:4px;padding-right:4px;white-space:nowrap}}
/* A9: promo text ran underneath the trophy below 992px (the 70% cap only existed above it) */
@media (max-width:991.98px){.cp-right-box .cp-r-title,.cp-right-box .cp-r-text{max-width:calc(100% - 92px)}}
/* A7: the 275px mascot reached into the third stat ("ส่วนลดของคุณ") once the card got narrower than ~860px.
   590px = measured right edge of the stat row inside the card + gap; the image takes what is left, and goes away when that is too small to read. */
.userCard .ud-img{width:min(275px,calc(100% - 590px));height:auto}
@media (max-width:1320px){.userCard .ud-img{display:none}}

/* ===== J4 — batch 3: page title (audit B1-B4) ===== */
/* the menu-derived title comes first; the fallback chain after it only shows when the page is not in the menu */
.header-msg .header-title ~ .header-title{display:none}
.header-msg .header-title{font-size:1rem;line-height:1.3;margin:0;font-family:inherit}
/* B2: phones had no page name at all (.header-msg was display:none below 992px) */
@media only screen and (max-width:991.98px){
	.header-msg{display:block;margin-left:12px;min-width:0;flex:1 1 auto;overflow:hidden}
	.header-msg .header-title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* B11 follow-up: once every <li> became a .page-item (50px each) the row no longer fit a phone */
.pagination{flex-wrap:wrap;justify-content:center;row-gap:6px;max-width:100%}
@media (max-width:575.98px){.pagination .page-item .page-link{min-width:40px;height:40px;font-size:14px}}
body.dashboard.dark #outside .jbx-pager a.act{color:#fff !important}

/* ===== J5 — batch 3b: empty states, affiliates steps, API summary cards (audit B7-B9) ===== */
.jl-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:56px 20px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary)}
body.dark .jl-empty{border-color:rgba(255,255,255,.12)}
.jl-empty i{font-size:40px;line-height:1;color:var(--text-muted)}
.jl-empty b{font-size:16px;color:var(--text-primary)}
.jl-empty span{font-size:14px;max-width:46ch}
.jl-empty .btn{margin-top:10px}
.aff-steps{margin:0;padding-left:20px;display:grid;gap:8px;max-width:calc(100% - 120px);font-size:14px;line-height:1.5;color:var(--text-primary)}
.aff-steps li::marker{font-weight:700;color:var(--primary)}
body.dark .aff-steps li::marker{color:var(--accent)}
.api-title--url{font-size:15px;line-height:1.4;word-break:break-all}
.cp-sns-sub{margin:-6px 0 14px;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}

/* ===== J6 — batch 4: home page on phones (audit E1, E4, E6, E7) ===== */
@media (max-width:640px){
	/* E1: the three columns stacked into three separate lists, so no value sat next to its label. Keep them side by side. */
	#outside .jl-page .hp2 .hp-cmp{flex-wrap:nowrap !important;gap:6px !important;align-items:flex-end !important}
	#outside .jl-page .hp2 .hp-cmp-col{min-width:0 !important;flex:1 1 0 !important;padding:0 6px 12px !important;border-radius:16px !important;font-size:13px}
	#outside .jl-page .hp2 .hp-cmp-lab{flex:0 0 27% !important}
	#outside .jl-page .hp2 .hp-cmp-col > div[style*="height:64px"]{height:54px !important}
	#outside .jl-page .hp2 .hp-cmp-col > div[style*="height:64px"] span:first-child{font-size:14px !important}
	#outside .jl-page .hp2 .hp-cmp-col > div:not([style*="height:64px"]):not([style*="position:absolute"]){height:54px;padding-top:0 !important;padding-bottom:0 !important;display:flex;align-items:center;justify-content:center;line-height:1.25;text-align:center}
	#outside .jl-page .hp2 .hp-cmp-lab > div:not([style*="height:64px"]){justify-content:flex-start !important;text-align:left !important}
	/* E4: 8 full-width platform cards were ~1,500px of scrolling; the link index ~1,400px */
	#outside .jl-page .hp2 .hp-plat{grid-template-columns:1fr 1fr !important;gap:10px !important}
	#outside .jl-page .hp2 .hp-plat > a{padding:14px !important;border-radius:18px !important}
	#outside .jl-page .hp2 .hp-plat > a b{font-size:15px !important}
	#outside .jl-page .hp2 .hp-plat > a > div:nth-child(2){font-size:12.5px !important;line-height:1.45}
	#outside .jl-page .hp2 .hp-idx{grid-template-columns:1fr 1fr !important;gap:22px 14px !important}
	#outside .jl-page .hp2 .hp-idx a{font-size:13.5px !important}
	/* E6 */
	/* the grid has ONE explicit column here; the lime card's `span 2` creates an implicit second one, which `1 / -1` cannot reach */
	#outside .jl-page .hp2 .hp-feat > :last-child{grid-column:span 2 !important}
}
/* E7: the floating LINE pill sat on top of the footer's last line */
@media (max-width:900px){#outside .jl-page .jl-ft-copy{padding-bottom:84px}}

/* ===== J7 — order form: the page's job is ordering, so that button carries the accent (audit E9) ===== */
/* `body.dashboard:not(.dark) .btn-secondary` (0,3,1 + !important) paints lime in light; match it on specificity */
body.dashboard a.sepetbtn.btn,body.dashboard:not(.dark) a.sepetbtn.btn-secondary{background:transparent !important;color:var(--text-primary) !important;border:1.5px solid rgba(127,127,127,.45) !important;box-shadow:none !important}
body.dashboard a.sepetbtn.btn:hover,body.dashboard:not(.dark) a.sepetbtn.btn-secondary:hover{border-color:var(--text-primary) !important;background:transparent !important}
form:has(a.sepetbtn) button.btn-primary.btn-100{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-text) !important}
form:has(a.sepetbtn) button.btn-primary.btn-100:hover{background:var(--accent-hover) !important}
@media (max-width:991.98px){.row:has(> .col-lg > a.sepetbtn) > .col-lg:first-child{order:2}}
/* the computed charge is output, not input */
#charge[readonly]{background:transparent !important;border-style:dashed !important;font-weight:700;cursor:default}
/* E8: say how the grade rail is ordered */
#outside .jl-page .jg-rail-cap{margin:0 0 14px;font-size:13px;color:var(--jl-t3) !important;text-align:center}
/* B2 follow-up: at 390 the title had ~55px ("สั่ง…"). Tighten the icon row so the page name fits. */
@media (max-width:575.98px){
	header.px-4{padding-left:12px !important;padding-right:12px !important}
	.navbar .nav-item:not(:last-child){margin-right:4px}
	.header-msg{margin-left:8px}
	/* the navbar kept ~250px because its first item carries .ms-auto (81px of auto margin inside it) */
	header .navbar{padding:0 !important;flex:0 0 auto !important;width:auto !important;min-width:0 !important}
	header .navbar .updates-bell-item.ms-auto{margin-left:0 !important}
	header .navbar .nav-item.me-2{margin-right:0 !important}
	.header-msg .header-title{font-size:14px}
}

/* ===== J8 — /contact for members in dark: tokens flip to light ink but the method cards stayed #fff (1.1:1) ===== */
body.dashboard.dark #outside .jl-page .ct-method{background:#1c1d27 !important;border-color:rgba(255,255,255,.08) !important}
body.dashboard.dark #outside .jl-page .jl-card > a{color:#8EA2FF !important}
/* price table: the unit next to the figure ("/1,000" or "ต่อไลค์") */
#outside .jl-page .jg-tbl td .jg-per{font-size:.78em;font-weight:500;color:var(--jl-t3) !important;margin-left:4px;white-space:nowrap}

/* ===== J10 — landing/marketing pages for a logged-in member in DARK =====
   The dark override above flips the INK tokens (--jl-t1/2/3) but not the SURFACE tokens, so every component painted with
   --jl-surface* kept a near-white background under near-white text (link cards 1.04:1, steps, duration rows, pills).
   Fix at the token, then the few colours that are hard-coded for a white page. */
body.dashboard.dark #outside{--jl-surface:#1c1d27 !important;--jl-surface-2:#262733 !important;--jl-surface-3:#1d2447 !important;--jl-warn:#FF8A8A !important;--jl-line:rgba(255,255,255,.09) !important}
body.dashboard.dark #outside .jl-page .jg-tag{color:#A9B8FF !important}
body.dashboard.dark #outside .jl-page .jg-tag--bot{color:var(--jl-t2) !important}
body.dashboard.dark #outside .jl-page .jg-tag--th,
body.dashboard.dark #outside .jl-page .jg-warranty--life{background:rgba(200,255,0,.14) !important;color:#C8FF00 !important}
body.dashboard.dark #outside .jl-page .jg-warranty--none{background:rgba(255,138,138,.14) !important}
body.dashboard.dark #outside .jl-page .jg-stamp a,
body.dashboard.dark #outside .jl-page .jg-prose a,
body.dashboard.dark #outside .jl-page .jg-links a i{color:#8EA2FF !important}
/* hand-written platform pages: brand-coloured labels and #5A6478 captions were picked for white */
body.dashboard.dark #outside .jl-page [class$="-eyb"]{color:var(--jl-lime) !important}
body.dashboard.dark #outside .jl-page [class$="-price"],
body.dashboard.dark #outside .jl-page [class$="-stat-l"],
body.dashboard.dark #outside .jl-page .ft-chips span,
body.dashboard.dark #outside .jl-page .ft-lb{color:var(--jl-t2) !important}
body.dashboard.dark #outside .jl-page [class$="-svc-cta"]{color:#8EA2FF !important}

/* ===== J12 — generated landing layout (owner review 2026-09-21) ===== */
/* headings: 62ch was measured in BODY-size characters, so a 56px h2 wrapped after ~14 of its own and orphaned one word ("นี้") */
#outside .jl-page .jg-head{max-width:min(100%,900px)}
#outside .jl-page .jg-h2{text-wrap:balance}
/* grade rail: the grid was hard-wired to 3 columns — with 2 grades everything sat left and the line ran on to nothing */
#outside .jl-page .jg-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#outside .jl-page .jg-rail::before{left:16.6%;right:16.6%}
#outside .jl-page .jg-rail:has(> .jg-stop:nth-child(2):last-child)::before{left:25%;right:25%}
#outside .jl-page .jg-rail:has(> .jg-stop:only-child)::before{display:none}
@media (max-width:720px){
	#outside .jl-page .jg-rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
	#outside .jl-page .jg-rail::before,#outside .jl-page .jg-rail:has(> .jg-stop:nth-child(2):last-child)::before{left:34px;right:auto}
}
/* prose: one 68ch column left half of a 1200px page empty; two columns keep the measure and use the width */
@media (min-width:1000px){
	#outside .jl-page .jg-prose{max-width:none;columns:2;column-gap:clamp(40px,5vw,72px)}
	#outside .jl-page .jg-prose h3{break-after:avoid;margin-top:30px}
	#outside .jl-page .jg-prose p,#outside .jl-page .jg-prose ul,#outside .jl-page .jg-prose li{break-inside:avoid}
}

/* ===== J14 — viewticket + shared controls found in the modal/hover/tablet pass ===== */
.schat-chat-body .schat-body-content ul.chat li.web .l .answer a{color:#fff;text-decoration:underline}
.schat-chat-body .schat-body-content ul.chat li.web .l .answer small,
.schat-chat-body .schat-body-content ul.chat li.web .l .answer .mobiledetail small{color:rgba(255,255,255,.82) !important}
/* .btn-outline-primary had no dashboard rule at all: Bootstrap's white-on-hover state + theme overrides left it white on white */
body.dashboard .btn-outline-primary{background:transparent !important;color:var(--primary) !important;border:1.5px solid var(--primary) !important;border-radius:var(--radius-pill);font-weight:600}
body.dashboard .btn-outline-primary:hover{background:var(--primary) !important;color:#fff !important}
body.dashboard.dark .btn-outline-primary{color:#8EA2FF !important;border-color:#8EA2FF !important}
body.dashboard.dark .btn-outline-primary:hover{background:#8EA2FF !important;color:#0d0d14 !important}
/* tier roadmap modal, light theme: #10b981 on white is 2.54:1 */
body:not(.dark) .tier-card-benefits .benefit-on,body:not(.dark) .tier-card-benefits .benefit-on i{color:#0B7A57 !important}
/* /services below 992px: the column-header row is display:none there, but its wrapper card stayed as an empty 26px box */
@media only screen and (max-width:991.98px){.services-head-row{display:none}}
/* free tools: in-page validation message (replaces the browser alert) */
#outside .jl-page .ft-err{margin:8px 0 0;font-size:13.5px;font-weight:600;color:#B32020 !important;min-height:0}
#outside .jl-page .ft-err:empty{display:none}
body.dashboard.dark #outside .jl-page .ft-err{color:#FF8A8A !important}
/* member + dark: figures set in a brand ink (picked for white) on the dark cards */
body.dashboard.dark #outside .jl-page [class$="-price"] b,
body.dashboard.dark #outside .jl-page [class$="-stat-n"],
body.dashboard.dark #outside .jl-page .ft-step-n{color:#fff !important}
/* the class attribute is "fb-stat-n jl-d", so match with *= (a $= test looks at the END of the whole attribute) */
body.dashboard.dark #outside .jl-page [class*="-stat "] div[class*="-stat-n"].jl-d,
body.dashboard.dark #outside .jl-page div[class*="-stat-n"].jl-d{color:#fff !important}

/* ===== J17 — generated landing pages, redesign (owner: "information laid out in a row, no UI") =====
   Components for seo/build-landings.mjs (classes jx-*). Same language as the home page: blue grid hero, lime CTA,
   Anuphan headings, rounded cards, alternating section backgrounds. Colours are variables on .jx so the member dark
   shell only has to redefine them once (the J10 lesson: flipping ink without flipping surfaces = white on white).
   Every protected rule is written twice — `#outside .jl-page .jx X` for guests, where <body> IS #outside, and
   `body.dashboard #outside .jl-page .jx X` for members, which also out-ranks the dark shell's blanket p/li colour rule. */
.jx{--jx-b:#1E45FB;--jx-bd:#1A3BCC;--jx-lime:#C8FF00;--jx-ink:#0B0E16;--jx-t2:#5A6478;--jx-t3:#626C80;--jx-bg:#F4F6FA;--jx-card:#fff;--jx-page:#fff;--jx-line:#E7EAF1;--jx-soft:#EEF1FF;--jx-ok:#0B7A57;
  font-family:'IBM Plex Sans Thai','Anuphan',sans-serif;color:var(--jx-ink)}
body.dashboard.dark #outside .jx{--jx-ink:#F2F4F8;--jx-t2:#A3ABBB;--jx-t3:#8E97A8;--jx-bg:#101119;--jx-card:#1C1D27;--jx-page:#13141B;--jx-line:rgba(255,255,255,.10);--jx-soft:#1D2447;--jx-bd:#A9B8FF;--jx-ok:#5FE0B0}
#outside .jl-page .jx h1,#outside .jl-page .jx h2,#outside .jl-page .jx h3,#outside .jl-page .jx strong{font-family:'Anuphan',sans-serif}
.jx-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,30px)}
/* hero */
.jx-hero{background:var(--jx-b);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;color:#fff;position:relative;overflow:hidden}
.jx-hero:before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(200,255,0,.30),transparent 68%)}
.jx-hero-in{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center;padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(52px,7vw,96px)}
.jx-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;font-weight:600;font-size:13.5px;color:#fff}
#outside .jl-page .jx .jx-hero h1,body.dashboard #outside .jl-page .jx .jx-hero h1{font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.02em;margin:18px 0 0;color:#fff !important;text-wrap:balance}
#outside .jl-page .jx .jx-hero h1 em,body.dashboard #outside .jl-page .jx .jx-hero h1 em{font-style:normal;color:var(--jx-lime) !important}
#outside .jl-page .jx .jx-hero-l>p,body.dashboard #outside .jl-page .jx .jx-hero-l>p{font-size:clamp(16px,1.5vw,18.5px);line-height:1.65;color:rgba(255,255,255,.88) !important;max-width:48ch;margin:18px 0 0}
.jx-entry{display:inline-flex;align-items:center;gap:22px;margin-top:26px;background:#fff;color:#0B0E16;border-radius:20px;padding:14px 22px;box-shadow:0 24px 50px -20px rgba(4,12,60,.6)}
.jx-entry>i{width:1px;height:38px;background:#E7EAF1}
.jx-entry small{display:block;font-size:12px;color:#626C80 !important;font-weight:600}
#outside .jl-page .jx .jx-entry strong,body.dashboard #outside .jl-page .jx .jx-entry strong{font-size:28px;line-height:1.1;color:#0B0E16 !important}
#outside .jl-page .jx .jx-entry span,body.dashboard #outside .jl-page .jx .jx-entry span{font-size:13px;color:#5A6478 !important;margin-left:6px}
#outside .jl-page .jx .jx-entry-note,body.dashboard #outside .jl-page .jx .jx-entry-note{margin-top:10px;font-size:13px;color:rgba(255,255,255,.88) !important}
.jx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.jx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Anuphan',sans-serif;font-weight:700;font-size:15px;padding:12px 20px;border-radius:999px;text-decoration:none !important;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.jx-btn:hover{transform:translateY(-2px)}
#outside .jl-page .jx .jx-btn--lime,body.dashboard #outside .jl-page .jx .jx-btn--lime{background:var(--jx-lime) !important;color:#0B0E16 !important;box-shadow:0 14px 30px -12px rgba(200,255,0,.7)}
#outside .jl-page .jx .jx-btn--glass,body.dashboard #outside .jl-page .jx .jx-btn--glass{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.45);color:#fff !important}
#outside .jl-page .jx .jx-btn--ghost,body.dashboard #outside .jl-page .jx .jx-btn--ghost{background:var(--jx-card) !important;border-color:var(--jx-line);color:var(--jx-ink) !important}
#outside .jl-page .jx .jx-btn--sm,body.dashboard #outside .jl-page .jx .jx-btn--sm{font-size:13.5px;padding:9px 16px;background:#0B0E16 !important;color:#fff !important}
body.dashboard.dark #outside .jl-page .jx .jx-btn--sm{background:var(--jx-lime) !important;color:#0B0E16 !important}
.jx-btn--lg{font-size:16.5px;padding:15px 28px}
.jx-trust{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
#outside .jl-page .jx .jx-trust li,body.dashboard #outside .jl-page .jx .jx-trust li{font-size:14px;color:rgba(255,255,255,.92) !important;margin:0}
.jx-trust i{color:var(--jx-lime);margin-right:6px;font-size:17px;vertical-align:-3px}
.jx-hero-r{position:relative;justify-self:center;width:min(100%,360px)}
.jx-post{background:#fff;color:#0B0E16;border-radius:22px;padding:18px;box-shadow:0 40px 80px -30px rgba(4,12,60,.7);transform:rotate(-2deg)}
.jx-post-h{display:flex;gap:10px;align-items:center}.jx-ava{width:42px;height:42px;border-radius:50%;background:var(--jx-b);color:#fff;display:grid;place-items:center;font-size:21px}
#outside .jl-page .jx .jx-post-h b,body.dashboard #outside .jl-page .jx .jx-post-h b{display:block;font-size:14.5px;color:#0B0E16 !important}#outside .jl-page .jx .jx-post-h small,body.dashboard #outside .jl-page .jx .jx-post-h small{color:#626C80 !important;font-size:12px}
.jx-livedot{font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.06em;background:#E0274B;color:#fff;border-radius:6px;padding:1px 6px}
.jx-post-t{display:grid;gap:7px;margin:14px 0}.jx-post-t span{height:9px;border-radius:9px;background:#E9ECF3}.jx-post-t span:last-child{width:64%}
.jx-post-img{height:140px;border-radius:14px;background:linear-gradient(135deg,#DDE5FF,#F3FFD0);display:grid;place-items:center;color:#8C9BD0;font-size:40px}
.jx-post-r{display:flex;align-items:flex-end;gap:12px;margin-top:14px}
.jx-re{width:34px;height:34px;border-radius:50%;background:var(--jx-b);color:#fff;display:grid;place-items:center;font-size:17px;flex:none}
.jx-bars{flex:1;display:flex;align-items:flex-end;gap:4px;height:44px}.jx-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#C8FF00,#7FB800)}
.jx-bars i:nth-child(1){height:22%}.jx-bars i:nth-child(2){height:34%}.jx-bars i:nth-child(3){height:28%}.jx-bars i:nth-child(4){height:46%}.jx-bars i:nth-child(5){height:40%}.jx-bars i:nth-child(6){height:58%}.jx-bars i:nth-child(7){height:52%}.jx-bars i:nth-child(8){height:70%}.jx-bars i:nth-child(9){height:64%}.jx-bars i:nth-child(10){height:82%}.jx-bars i:nth-child(11){height:76%}.jx-bars i:nth-child(12){height:94%}
.jx-float{position:absolute;display:inline-flex;align-items:center;gap:7px;font-family:'Anuphan';font-weight:700;font-size:14px;padding:9px 15px;border-radius:999px;box-shadow:0 16px 30px -12px rgba(4,12,60,.6);white-space:nowrap}
.jx-float--a{background:#0B0E16;color:#fff;right:-18px;top:-16px}.jx-float--a i{color:var(--jx-lime)}.jx-float--b{background:var(--jx-lime);color:#0B0E16;left:-26px;top:56%}
/* sections */
.jx-sec{padding:clamp(56px,7vw,100px) 0;background:var(--jx-page)}.jx-sec--tint{background:var(--jx-bg)}
.jx-sec--ink{background:#0B1020;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;color:#fff}
.jx-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,4vw,48px)}.jx-head--l{text-align:left;margin:0}
.jx-kicker{display:inline-block;font-family:'Anuphan';font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--jx-bd);background:var(--jx-soft);border-radius:999px;padding:6px 14px}
#outside .jl-page .jx .jx-head h2,body.dashboard #outside .jl-page .jx .jx-head h2{font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 0;text-wrap:balance;color:var(--jx-ink) !important}
#outside .jl-page .jx .jx-head p,body.dashboard #outside .jl-page .jx .jx-head p{font-size:16.5px;line-height:1.65;color:var(--jx-t2) !important;margin:14px 0 0}
#outside .jl-page .jx .jx-head--inv h2,body.dashboard #outside .jl-page .jx .jx-head--inv h2{color:#fff !important}.jx-head--inv .jx-kicker{background:rgba(200,255,0,.16);color:var(--jx-lime)}
/* grade cards */
.jx-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.jx-grades--2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}.jx-grades--1{grid-template-columns:minmax(0,420px);justify-content:center}
.jx-grade{position:relative;display:flex;flex-direction:column;background:var(--jx-card);border:1.5px solid var(--jx-line);border-radius:26px;padding:26px;box-shadow:0 1px 2px rgba(11,14,22,.04),0 24px 44px -34px rgba(11,14,22,.3)}
.jx-grade.is-best{border-color:var(--jx-b);box-shadow:0 30px 60px -30px rgba(30,69,251,.55)}
.jx-ribbon{position:absolute;top:-14px;left:26px;background:var(--jx-b);color:#fff;font-family:'Anuphan';font-weight:700;font-size:12.5px;padding:5px 13px;border-radius:999px}
.jx-gh{display:flex;align-items:center;gap:10px}.jx-dot{width:12px;height:12px;border-radius:4px;background:#9AA8D8;flex:none}.jx-grade--th .jx-dot{background:var(--jx-lime);box-shadow:0 0 0 3px rgba(200,255,0,.3)}.jx-grade--for .jx-dot{background:var(--jx-b)}
#outside .jl-page .jx .jx-grade h3,body.dashboard #outside .jl-page .jx .jx-grade h3{font-size:19px;font-weight:700;margin:0;color:var(--jx-ink) !important}
.jx-count{margin-left:auto;font-size:12.5px;color:var(--jx-t3);background:var(--jx-bg);border-radius:999px;padding:3px 10px;font-weight:600;white-space:nowrap}
.jx-price{display:flex;align-items:baseline;gap:8px;margin-top:18px;flex-wrap:wrap}#outside .jl-page .jx .jx-price strong,body.dashboard #outside .jl-page .jx .jx-price strong{font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--jx-ink) !important}#outside .jl-page .jx .jx-price span,body.dashboard #outside .jl-page .jx .jx-price span{color:var(--jx-t2) !important;font-weight:600}
#outside .jl-page .jx .jx-from,body.dashboard #outside .jl-page .jx .jx-from{margin-top:8px;font-size:14px;color:var(--jx-t2) !important}
.jx-cover{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:12px;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 12px;background:var(--jx-soft);color:var(--jx-bd)}
.jx-cover--none{background:var(--jx-bg);color:var(--jx-t2)}
.jx-grade ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--jx-line);display:grid;gap:10px}
#outside .jl-page .jx .jx-grade li,body.dashboard #outside .jl-page .jx .jx-grade li{display:flex;gap:9px;font-size:14.5px;line-height:1.5;color:var(--jx-ink) !important;margin:0}.jx-grade li i{color:var(--jx-ok);font-size:17px;flex:none;margin-top:1px}
#outside .jl-page .jx .jx-fit,body.dashboard #outside .jl-page .jx .jx-fit{font-size:13.5px;color:var(--jx-t2) !important;background:var(--jx-bg);border-radius:12px;padding:10px 12px;margin:18px 0 20px}
.jx-grade .jx-btn{margin-top:auto;width:100%}
#outside .jl-page .jx .jx-stamp,body.dashboard #outside .jl-page .jx .jx-stamp{text-align:center;font-size:13px;color:var(--jx-t3) !important;margin:26px 0 0}.jx-stamp--l{text-align:left !important}
#outside .jl-page .jx .jx-stamp a,body.dashboard #outside .jl-page .jx .jx-stamp a{color:var(--jx-bd) !important;font-weight:600}
/* duration cards (live pages) */
.jx-durs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.jx-dur{background:var(--jx-card);border:1.5px solid var(--jx-line);border-radius:20px;padding:18px 20px;display:grid;gap:8px}
.jx-dur.is-hi{border-color:var(--jx-b);box-shadow:0 20px 40px -28px rgba(30,69,251,.6)}
#outside .jl-page .jx .jx-dur-t strong,body.dashboard #outside .jl-page .jx .jx-dur-t strong{font-size:34px;line-height:1;color:var(--jx-ink) !important}.jx-dur-t span{margin-left:6px;color:var(--jx-t2);font-weight:600}
.jx-dur-l{font-size:13.5px;line-height:1.5;color:var(--jx-t2);min-height:40px}
.jx-dur-p{display:flex;align-items:baseline;gap:6px;border-top:1px solid var(--jx-line);padding-top:10px}#outside .jl-page .jx .jx-dur-p strong,body.dashboard #outside .jl-page .jx .jx-dur-p strong{font-size:20px;color:var(--jx-ink) !important}.jx-dur-p small{color:var(--jx-t3);font-size:12.5px}
/* price tiles */
.jx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}.jx-split--faq{align-items:start}
.jx-qty{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jx-q{background:var(--jx-card);border:1px solid var(--jx-line);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}.jx-q span{color:var(--jx-t2);font-weight:600;font-size:14px}#outside .jl-page .jx .jx-q strong,body.dashboard #outside .jl-page .jx .jx-q strong{font-size:32px;line-height:1;color:var(--jx-ink) !important}
.jx-q:first-child{background:#0B0E16;border-color:#0B0E16}.jx-q:first-child span{color:rgba(255,255,255,.72)}#outside .jl-page .jx .jx-q:first-child strong,body.dashboard #outside .jl-page .jx .jx-q:first-child strong{color:var(--jx-lime) !important}
/* service rows */
.jx-svcs{display:grid;gap:10px}
.jx-svc{display:grid;grid-template-columns:110px 1fr auto auto;align-items:center;gap:16px;background:var(--jx-card);border:1px solid var(--jx-line);border-radius:18px;padding:14px 18px;transition:border-color .15s,box-shadow .15s}
.jx-svc:hover{border-color:var(--jx-b);box-shadow:0 14px 30px -22px rgba(30,69,251,.7)}.jx-svc.jx-more{display:none}.jx-svcs.is-all .jx-more{display:grid}
.jx-tag{font-family:'Anuphan';font-weight:700;font-size:12px;padding:5px 11px;border-radius:999px;white-space:nowrap;justify-self:start}.jx-tag--for{background:var(--jx-soft);color:var(--jx-bd)}.jx-tag--th{background:#EAFBB0;color:#3F5C00}.jx-tag--bot{background:var(--jx-bg);color:var(--jx-t2)}
body.dashboard.dark #outside .jx .jx-tag--th{background:rgba(200,255,0,.14);color:#C8FF00}
#outside .jl-page .jx .jx-svc-b b,body.dashboard #outside .jl-page .jx .jx-svc-b b{font-size:15px;font-weight:600;color:var(--jx-ink) !important;font-family:inherit}
.jx-svc-c{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.jx-svc-c span{font-size:12px;color:var(--jx-t2);background:var(--jx-bg);border-radius:8px;padding:2px 8px}
.jx-svc-p{text-align:right;white-space:nowrap}#outside .jl-page .jx .jx-svc-p strong,body.dashboard #outside .jl-page .jx .jx-svc-p strong{font-size:19px;color:var(--jx-ink) !important}.jx-svc-p small{display:block;font-size:12px;color:var(--jx-t3)}
.jx-moreb{display:flex !important;margin:22px auto 0 !important;width:auto !important;align-items:center;gap:6px;background:var(--jx-card);border:1.5px solid var(--jx-line);border-radius:999px;padding:12px 24px;font-family:'Anuphan';font-weight:700;font-size:15px;color:var(--jx-ink);cursor:pointer}
/* steps */
.jx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.jx-steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px;margin:0}
.jx-step-ic{width:48px;height:48px;border-radius:14px;background:var(--jx-lime);color:#0B0E16;display:grid;place-items:center;font-size:24px}
.jx-step-n{display:block;margin-top:18px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--jx-lime)}
#outside .jl-page .jx .jx-steps h3,body.dashboard #outside .jl-page .jx .jx-steps h3{font-size:18px;font-weight:700;margin:6px 0 0;color:#fff !important}#outside .jl-page .jx .jx-steps p,body.dashboard #outside .jl-page .jx .jx-steps p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.76) !important;margin:10px 0 0}
/* guide cards */
.jx-guides{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.jx-guides>.jx-guide:last-child:nth-child(odd){grid-column:1/-1}
.jx-guide{background:var(--jx-card);border:1px solid var(--jx-line);border-radius:22px;padding:24px 26px}
.jx-guide-ic{width:42px;height:42px;border-radius:12px;background:var(--jx-soft);color:var(--jx-bd);display:grid;place-items:center;font-size:21px}
#outside .jl-page .jx .jx-guide h3,body.dashboard #outside .jl-page .jx .jx-guide h3{font-size:18.5px;font-weight:700;line-height:1.3;margin:16px 0 0;color:var(--jx-ink) !important}
#outside .jl-page .jx .jx-guide p,body.dashboard #outside .jl-page .jx .jx-guide p,#outside .jl-page .jx .jx-guide li,body.dashboard #outside .jl-page .jx .jx-guide li{font-size:15px;line-height:1.75;color:var(--jx-t2) !important}
#outside .jl-page .jx .jx-guide p,body.dashboard #outside .jl-page .jx .jx-guide p{margin:10px 0 0}.jx-guide ul{margin:10px 0 0;padding-left:20px}
/* faq + links */
.jx-faq details{border:1px solid var(--jx-line);border-radius:18px;padding:0 20px;background:var(--jx-card);margin-bottom:10px}.jx-faq details[open]{border-color:var(--jx-b)}
.jx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-family:'Anuphan';font-weight:700;font-size:16.5px;color:var(--jx-ink)}.jx-faq summary::-webkit-details-marker{display:none}
.jx-faq summary i{font-size:20px;color:var(--jx-bd);transition:transform .2s;flex:none}.jx-faq details[open] summary i{transform:rotate(45deg)}
#outside .jl-page .jx .jx-faq p,body.dashboard #outside .jl-page .jx .jx-faq p{margin:0;padding:0 0 18px;font-size:15px;line-height:1.7;color:var(--jx-t2) !important}
.jx-links{display:grid;gap:8px;margin-top:22px}
#outside .jl-page .jx .jx-links a,body.dashboard #outside .jl-page .jx .jx-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--jx-card);border:1px solid var(--jx-line);border-radius:14px;padding:12px 16px;color:var(--jx-ink) !important;text-decoration:none !important}
#outside .jl-page .jx .jx-links b,body.dashboard #outside .jl-page .jx .jx-links b{display:block;font-weight:600;font-size:14.5px;color:var(--jx-ink) !important;font-family:inherit}.jx-links small{display:block;font-size:12.5px;color:var(--jx-t3);margin-top:2px}.jx-links a>i{color:var(--jx-bd);flex:none}
@media (max-width:900px){
  .jx-hero-in,.jx-split{grid-template-columns:1fr}.jx-hero-r{width:min(86%,320px);margin:6px auto 0}.jx-post-img{height:104px}
  .jx-grades,.jx-grades--2{grid-template-columns:1fr}.jx-grade.is-best{order:-1}.jx-steps{grid-template-columns:1fr 1fr}.jx-guides{grid-template-columns:1fr}
  .jx-svc{grid-template-columns:1fr auto;gap:8px 12px;padding:14px}.jx-svc .jx-tag{grid-area:1/1;justify-self:start}.jx-svc .jx-svc-p{grid-area:1/2;display:flex;align-items:baseline;gap:4px}.jx-svc .jx-svc-b{grid-area:2/1}.jx-svc .jx-btn{grid-area:2/2;align-self:end;padding:7px 16px}
  .jx-float--b{left:-10px}.jx-float--a{right:-8px}.jx-entry{gap:14px;padding:12px 16px}#outside .jl-page .jx .jx-entry strong,body.dashboard #outside .jl-page .jx .jx-entry strong{font-size:24px}.jx-cta .jx-btn{flex:1 1 100%}
}
@media (max-width:520px){.jx-steps{grid-template-columns:1fr}#outside .jl-page .jx .jx-q strong,body.dashboard #outside .jl-page .jx .jx-q strong{font-size:26px}.jx-durs{grid-template-columns:1fr 1fr}}

/* ===== J18 — long-form blocks on hand-written landings: lede + numbered chapter cards (was an 820px wall of paragraphs) ===== */
#outside .jl-page .jx-prose.jx-prose{max-width:1100px;margin:0 auto}
#outside .jl-page .jx-prose .jx-lede{max-width:780px;margin:0 auto;text-align:center}
#outside .jl-page .jx-prose .jx-lede .jl-p{font-size:17px;line-height:1.8}
#outside .jl-page .jx-prose .jx-lede .jl-p:first-child{font-size:19px;color:var(--jl-t1) !important}
#outside .jl-page .jx-prose .jx-chaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px;counter-reset:jxch}
#outside .jl-page .jx-prose .jx-lede + .jx-chaps{margin-top:40px}
#outside .jl-page .jx-prose .jx-chap{counter-increment:jxch;position:relative;background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:22px;padding:28px 30px 30px;transition:border-color .15s,box-shadow .15s,transform .15s}
#outside .jl-page .jx-prose .jx-chap:hover{border-color:var(--jl-bd2) !important;box-shadow:0 18px 40px -24px rgba(16,32,96,.35);transform:translateY(-2px)}
#outside .jl-page .jx-prose .jx-chap::before{content:counter(jxch,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:26px;padding:0 10px;border-radius:999px;background:var(--jl-surface-3);color:var(--jl-primary);font:700 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em}
#outside .jl-page .jx-prose .jx-chap h3{margin-top:14px;font-size:20px;line-height:1.35}
#outside .jl-page .jx-prose .jx-chap .jl-p{font-size:15px;line-height:1.78}
#outside .jl-page .jx-prose .jx-chap--list{grid-column:1/-1}
#outside .jl-page .jx-prose .jx-chap--list{background:var(--jl-ink) !important;border-color:transparent !important;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) !important;background-size:44px 44px !important}
#outside .jl-page .jx-prose .jx-chap--list::before{background:var(--jl-lime);color:var(--jl-ink)}
#outside .jl-page .jx-prose .jx-chap--list h3{color:#fff !important}
#outside .jl-page .jx-prose .jx-chap--list .jl-p{color:rgba(255,255,255,.78) !important}
#outside .jl-page .jx-prose .jx-chap--list .jl-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin-top:18px}
#outside .jl-page .jx-prose .jx-chap--list .jl-check{color:#fff !important;margin:0}
#outside .jl-page .jx-prose .jx-chap--list .jl-check i{color:var(--jl-lime) !important}
#outside .jl-page .jx-prose .jx-chap--wide{grid-column:1/-1}
#outside .jl-page .jx-prose .jx-chap--wide{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:40px;align-items:start}
#outside .jl-page .jx-prose .jx-chap--wide::before{position:absolute;top:28px;left:30px}
#outside .jl-page .jx-prose .jx-chap--wide h3{grid-column:1;grid-row:1/span 8;margin-top:40px;font-size:22px}
#outside .jl-page .jx-prose .jx-chap--wide .jl-p{grid-column:2}
#outside .jl-page .jx-prose .jx-chap--wide h3 + .jl-p{margin-top:0 !important}
/* style.css:4609 (.devServices, .ri-checkbox-circle-fill{display:none!important}) is a leftover from the old service list; it hid every check icon on the public pages */
#outside .jl-page i.ri-checkbox-circle-fill:not(.devServices){display:inline-block !important}
@media (max-width:900px){
  #outside .jl-page .jx-prose .jx-chaps,#outside .jl-page .jx-prose .jx-chap--list .jl-checks{grid-template-columns:1fr}
  #outside .jl-page .jx-prose .jx-chap{padding:22px 20px 24px}
  #outside .jl-page .jx-prose .jx-chap--wide{display:block}
  #outside .jl-page .jx-prose .jx-chap--wide::before{position:static}
  #outside .jl-page .jx-prose .jx-chap--wide h3{margin-top:14px;font-size:20px}
  #outside .jl-page .jx-prose .jx-chap--wide h3 + .jl-p{margin-top:12px !important}
  #outside .jl-page .jx-prose .jx-lede{text-align:left}
  #outside .jl-page .jx-prose .jx-lede .jl-p:first-child{font-size:17px}
}
body.dashboard.dark #outside .jl-page .jx-prose .jx-chap:not(.jx-chap--list)::before{background:rgba(200,255,0,.12);color:var(--jl-lime)}
body.dashboard.dark #outside .jl-page .jx-prose .jx-chap--list{border-color:rgba(255,255,255,.09) !important}

/* ===== J19 — buying guides (jg-p--guide): stat strip over the hero edge, table in a card, chapter cards, FAQ cards ===== */
#outside .jl-page .jg-p--guide .jgx-stats{position:relative;z-index:3;margin-top:-46px;background:transparent !important}
#outside .jl-page .jg-p--guide .jgx-stats .jl-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#outside .jl-page .jg-p--guide .jgx-stat{background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:20px;padding:20px 24px;box-shadow:0 22px 44px -28px rgba(11,14,22,.45)}
#outside .jl-page .jg-p--guide .jgx-stat strong{display:block;font-family:'Anuphan',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.02em;color:var(--jl-t1) !important;font-variant-numeric:tabular-nums}
#outside .jl-page .jg-p--guide .jgx-stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--jl-t2) !important}
#outside .jl-page .jg-p--guide .jgx-stats + .jg-sec{padding-top:clamp(44px,5vw,72px)}
#outside .jl-page .jg-p--guide .jgx-card{background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:22px;padding:10px 12px 4px;box-shadow:var(--jl-card-sh)}
#outside .jl-page .jg-p--guide .jgx-card .jg-tbl th{padding:14px 16px 12px}
#outside .jl-page .jg-p--guide .jgx-card .jg-tbl td{padding:16px}
#outside .jl-page .jg-p--guide .jgx-card .jg-tbl tbody tr:first-child td{border-top-color:var(--jl-bd2) !important}
#outside .jl-page .jg-p--guide .jgx-card .jg-cmp td b{font-size:18px}
#outside .jl-page .jg-p--guide .jg-prose.jx-prose{max-width:none;columns:auto;column-count:auto}
#outside .jl-page .jg-p--guide .jx-prose .jx-chaps{margin-top:0}
#outside .jl-page .jg-p--guide .jx-prose .jx-chap h3{margin:14px 0 0;font-size:20px;line-height:1.35}
#outside .jl-page .jg-p--guide .jx-prose .jx-chap p{font-size:15px;line-height:1.78}
#outside .jl-page .jg-p--guide .jx-prose .jx-chap--wide p{grid-column:2;margin-top:0}
#outside .jl-page .jg-p--guide .jg-faq{max-width:880px;display:grid;gap:10px}
#outside .jl-page .jg-p--guide .jg-faq details{background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:16px;padding:18px 22px;transition:border-color .15s}
#outside .jl-page .jg-p--guide .jg-faq details[open]{border-color:var(--jl-primary) !important}
#outside .jl-page .jg-p--guide .jg-faq summary::after{width:28px;height:28px;border-radius:50%;background:var(--jl-surface-3);color:var(--jl-primary) !important;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
@media (max-width:760px){
  #outside .jl-page .jg-p--guide .jgx-stats{margin-top:-30px}
  #outside .jl-page .jg-p--guide .jgx-stats .jl-wrap{grid-template-columns:1fr;gap:10px}
  #outside .jl-page .jg-p--guide .jgx-stat{display:flex;align-items:baseline;gap:12px;padding:14px 18px}
  #outside .jl-page .jg-p--guide .jgx-stat span{margin-top:0}
  #outside .jl-page .jg-p--guide .jgx-card{padding:2px 16px}
  #outside .jl-page .jg-p--guide .jx-prose .jx-chap--wide p{margin-top:12px}
}
body.dashboard.dark #outside .jl-page .jg-p--guide .jg-faq summary::after{background:rgba(200,255,0,.12);color:var(--jl-lime) !important}
body.dashboard.dark #outside .jl-page .jg-p--guide .jg-faq details[open]{border-color:rgba(200,255,0,.45) !important}
/* J19: the guide hero was a centred 760px column while every section below is a 1160px wrap — left edges did not line up */
#outside .jl-page .jg-p--guide .jg-hero-in--guide{max-width:1160px;padding-bottom:clamp(84px,9vw,124px)}
#outside .jl-page .jg-p--guide .jg-hero-in--guide > div{max-width:780px}
#outside .jl-page .jg-p--guide .jg-hero-in--guide .jg-h1{max-width:22ch}
#outside .jl-page .jg-p--guide .jg-faq{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:760px){#outside .jl-page .jg-p--guide .jg-faq{grid-template-columns:1fr}}
@media (max-width:640px){
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;padding:16px 0}
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl tbody tr:first-child{border-top:0 !important}
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl td{padding:0;border:0 !important;font-size:16px;text-align:left}
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl td:first-child{grid-column:1/-1;font-size:16px;margin-bottom:8px}
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--jl-t3)}
  #outside .jl-page .jg-p--guide .jgx-card .jg-tbl td[data-l]:last-child:nth-child(3){grid-column:span 2}
}

/* ===== J20 — /api rebuilt as a reference page (was the stock template on a flat blue page); /faq hero full-bleed + topic groups ===== */
#outside .jl-page .apx-hero{padding:clamp(48px,6vw,88px) 0 clamp(72px,8vw,112px);text-align:left}
#outside .jl-page .apx-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
#outside .jl-page .apx-hero .jl-h1{margin-top:16px}
#outside .jl-page .apx-hero .jl-lead{margin:18px 0 0;max-width:560px}
#outside .jl-page .apx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
#outside .jl-page .apx-term{background:#0B0E16 !important;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);overflow:hidden;transform:rotate(1.2deg)}
#outside .jl-page .apx-term-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
#outside .jl-page .apx-term-bar span{width:10px;height:10px;border-radius:50%;background:#3a3f4d}
#outside .jl-page .apx-term-bar em{margin-left:auto;font:600 12px/1 'Geist Mono',ui-monospace,monospace;font-style:normal;color:#C8FF00 !important}
#outside .jl-page .apx-term pre{margin:0;padding:18px 20px 22px;background:transparent !important;border:0;font:500 14px/1.9 'Geist Mono',ui-monospace,SFMono-Regular,monospace;color:#9AA3B5 !important;white-space:pre-wrap}
#outside .jl-page .apx-term pre b{color:#fff !important;font-weight:600}
#outside .jl-page .apx-term pre i{color:#7FA0FF !important;font-style:normal}
#outside .jl-page .apx-term pre u{color:#C8FF00 !important;text-decoration:none}
#outside .jl-page .apx-facts{position:relative;z-index:3;margin-top:-44px}
#outside .jl-page .apx-facts .jl-wrap{display:grid;grid-template-columns:.7fr 1.6fr .8fr 1fr;gap:14px}
#outside .jl-page .apx-fact{background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:18px;padding:16px 20px;box-shadow:0 22px 44px -28px rgba(11,14,22,.45);min-width:0}
#outside .jl-page .apx-fact span{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--jl-t3) !important}
#outside .jl-page .apx-fact strong{display:block;margin-top:6px;font:700 17px/1.35 'Geist Mono',ui-monospace,monospace;color:var(--jl-t1) !important;overflow-wrap:anywhere}
#outside .jl-page .apx-fact strong a{color:var(--jl-primary) !important;font-family:'IBM Plex Sans Thai',sans-serif;text-decoration:underline;text-underline-offset:3px}
#outside .jl-page .apx-body{padding-top:clamp(36px,4vw,56px)}
#outside .jl-page .apx-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
#outside .jl-page .apx-nav,#outside .jl-page .fqx-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
#outside .jl-page .apx-cap,#outside .jl-page .fqx-cap{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--jl-t3) !important;margin:0 0 8px}
#outside .jl-page .apx-nav a,#outside .jl-page .fqx-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--jl-t2) !important;transition:background .15s,color .15s}
#outside .jl-page .apx-nav a i,#outside .jl-page .fqx-nav a i{font-size:17px;color:var(--jl-primary) !important}
#outside .jl-page .apx-nav a:hover,#outside .jl-page .fqx-nav a:hover{background:var(--jl-surface-3) !important;color:var(--jl-t1) !important}
#outside .jl-page .apx-list{display:grid;gap:18px;min-width:0}
#outside .jl-page .apx-ep{background:var(--jl-surface) !important;border:1px solid var(--jl-bd) !important;border-radius:22px;overflow:hidden;scroll-margin-top:96px}
#outside .jl-page .apx-ep-h{display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--jl-bd)}
#outside .jl-page .apx-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--jl-surface-3);color:var(--jl-primary);font-size:21px}
#outside .jl-page .apx-ep-t{flex:1;min-width:0}
#outside .jl-page .apx-ep-t h2{margin:0;font-family:'Anuphan',sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:var(--jl-t1) !important}
#outside .jl-page .apx-ep-t p{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--jl-t2) !important}
#outside .jl-page .apx-act{flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--jl-surface-2)}
#outside .jl-page .apx-act b{padding:4px 9px;border-radius:999px;background:#0B0E16;color:#C8FF00;font:700 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em}
#outside .jl-page .apx-act code,#outside .jl-page .apx-param code{background:transparent !important;padding:0;font:600 13px/1.4 'Geist Mono',ui-monospace,monospace;color:var(--jl-t1) !important}
#outside .jl-page .apx-ep-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#outside .jl-page .apx-params{padding:20px 24px 24px}
#outside .jl-page .apx-param{display:grid;grid-template-columns:96px 78px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--jl-bd);font-size:14px}
#outside .jl-page .apx-cap + .apx-param{border-top:0}
#outside .jl-page .apx-req{justify-self:start;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(224,0,0,.09);color:#B00020 !important}
#outside .jl-page .apx-req--opt{background:var(--jl-surface-2);color:var(--jl-t3) !important}
#outside .jl-page .apx-pd{color:var(--jl-t2) !important;line-height:1.55}
#outside .jl-page .apx-param code.apx-val{padding:2px 8px;border-radius:7px;background:var(--jl-surface-3) !important;color:var(--jl-primary) !important}
#outside .jl-page .apx-res{padding:20px 24px 24px;background:#0B0E16 !important;min-width:0}
#outside .jl-page .apx-res .apx-cap{color:#8A93A6 !important}
#outside .jl-page .apx-code{margin:0;padding:0;background:transparent !important;border:0;font:500 13px/1.75 'Geist Mono',ui-monospace,SFMono-Regular,monospace;color:#D6DCE8 !important;white-space:pre;overflow-x:auto;max-height:340px}
@media (max-width:980px){
  #outside .jl-page .apx-hero-in,#outside .jl-page .apx-grid,#outside .jl-page .fqx-grid{grid-template-columns:1fr}
  #outside .jl-page .apx-term{transform:none}
  #outside .jl-page .apx-facts .jl-wrap{grid-template-columns:1fr 1fr}
  #outside .jl-page .apx-fact--url{grid-column:1/-1;order:-1}
  #outside .jl-page .apx-nav,#outside .jl-page .fqx-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  #outside .jl-page .apx-nav .apx-cap,#outside .jl-page .fqx-nav .fqx-cap{flex:1 1 100%;margin:0}
  #outside .jl-page .apx-nav a,#outside .jl-page .fqx-nav a{padding:8px 12px;background:var(--jl-surface) !important;border:1px solid var(--jl-bd);font-size:13.5px}
}
@media (max-width:720px){
  #outside .jl-page .apx-ep-b{grid-template-columns:1fr}
  #outside .jl-page .apx-ep-h{flex-wrap:wrap;padding:18px}
  #outside .jl-page .apx-ep-t{flex:1 1 calc(100% - 64px)}
  #outside .jl-page .apx-act{order:3;margin-left:60px}
  #outside .jl-page .apx-params,#outside .jl-page .apx-res{padding:16px 18px 20px}
  #outside .jl-page .apx-param{grid-template-columns:auto auto;gap:4px 10px}
  #outside .jl-page .apx-param .apx-pd{grid-column:1/-1}
  #outside .jl-page .apx-param .apx-req{justify-self:end}
}
body.dashboard.dark #outside .jl-page .apx-ico,body.dashboard.dark #outside .jl-page .apx-nav a i,body.dashboard.dark #outside .jl-page .fqx-nav a i,body.dashboard.dark #outside .jl-page .fqx-gh i{color:var(--jl-lime) !important}
body.dashboard.dark #outside .jl-page .apx-ico{background:rgba(200,255,0,.1)}
body.dashboard.dark #outside .jl-page .apx-fact strong a,body.dashboard.dark #outside .jl-page .apx-param code.apx-val{color:#9DB4FF !important}
body.dashboard.dark #outside .jl-page .apx-req:not(.apx-req--opt){background:rgba(255,138,138,.14);color:#FF9C9C !important}
body.dashboard.dark #outside .jl-page .apx-res{border-left:1px solid rgba(255,255,255,.08)}
/* faq */
#outside .jl-page .fqx .fqx-hero{margin:0}
#outside .jl-page .fqx .fqx-hero + .container,#outside .jl-page .fqx .fqx-hero + .container-fluid{margin-top:0 !important;max-width:1160px}
#outside .jl-page .fqx .faq-page{margin-top:0 !important;padding-top:clamp(28px,4vw,52px)}
#outside .jl-page .fqx-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
#outside .jl-page .fqx .faq-ss-tabs{max-width:none;margin:0}
#outside .jl-page .fqx-gh{display:flex;align-items:center;gap:10px;margin:22px 0 2px;font-family:'Anuphan',sans-serif;font-weight:700;font-size:20px;color:var(--jl-t1) !important;scroll-margin-top:96px}
#outside .jl-page .fqx-gh:first-child{margin-top:0}
#outside .jl-page .fqx-gh i{font-size:20px;color:var(--jl-primary) !important}
@media (max-width:980px){#outside .jl-page .fqx-grid{grid-template-columns:minmax(0,1fr)}}
/* J20b: style.css:11300 sets -webkit-text-fill-color on every dark-member heading; fill is inherited, so the lime accent word
   inside h1 (.hl, .jx h1 em) rendered white although computed `color` was lime. Let the accent paint with its own colour. */
body.dashboard.dark #outside .jl-page :is(h1,h2,h3) .hl,body.dashboard.dark #outside .jl-page .jx h1 em,body.dashboard.dark #outside .jl-page .jl-stat.dark .n{-webkit-text-fill-color:currentColor !important}

/* ===== J21 — keyboard focus on public pages. There was no :focus-visible rule at all: the UA ring (1px #005FCC) sat on a #1A3BCC hero ===== */
#outside .jl-page :is(a,button,summary,select,[tabindex]):focus-visible{outline:3px solid var(--jl-primary) !important;outline-offset:3px;border-radius:10px}
#outside .jl-page :is(.jl-btn,.jx-btn,.jl-cta,.apx-act,.jx-tag,[class*="pill"]):focus-visible{border-radius:999px}
#outside .jl-page :is(.jl-hero,.jx-hero,.jg-hero,.jx-sec--ink,.jx-chap--list,.jl-ft,.jl-nav,.jl-cta-card,.apx-res,header) :is(a,button,summary,[tabindex]):focus-visible,
body.dashboard.dark #outside .jl-page :is(a,button,summary,select,[tabindex]):focus-visible{outline-color:var(--jl-lime) !important}