/* =========================================================
   Shop theme (หน้าร้าน) — dark, rounded, gradient accent
   ========================================================= */
:root {
	--fs-2xs: .68rem;
	--fs-xs: .72rem;
	--fs-sm: .78rem;
	--fs-md: .84rem;
	--fs-base: .875rem;
	--fs-lg: .95rem;
	--fs-xl: 1.05rem;
	--fs-2xl: 1.15rem;
	--fs-3xl: 1.3rem;
	--fs-4xl: 1.5rem;
	--fs-5xl: 1.75rem;

	--sp-bg: #1e1f22;
	--sp-surface: #2a2c31;
	--sp-surface-2: #33363d;
	--sp-surface-3: #3b3f47;
	--sp-border: rgba(255, 255, 255, 0.07);
	--sp-border-strong: rgba(255, 255, 255, 0.14);
	--sp-text: #eceef2;
	--sp-muted: #9ba1ad;
	--sp-blue: #8aa8ff;
	--sp-mint: #8fe3c0;
	--sp-grad: linear-gradient(90deg, #8aa8ff 0%, #8fe3c0 100%);
	--sp-bg-rgb: 30, 31, 34;
	--sp-blue-rgb: 138, 168, 255;
	--sp-mint-rgb: 143, 227, 192;
	--sp-on-accent: #14161a;
	--sp-footer: #18191b;
	--sp-sunken: rgba(0, 0, 0, 0.18);
	--sp-dma: #c6b5ff;
	--sp-warn: #ffcf75;
	--sp-danger: #ff8f8f;
	--sp-radius: 18px;
	--sp-radius-sm: 12px;
	--sp-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Page base (storefront pages only) ---------- */
body.shop-page,
[data-bs-theme] #BodyMaster.shop-page {
	background: var(--sp-bg) !important;
	background-image: none !important;
	color: var(--sp-text) !important;
	font-family: var(--app-font);
}
body.shop-page::before,
body.shop-page::after { display: none !important; }
body.shop-page main { min-height: 60vh; }
body.shop-page a { color: inherit; }

.sp-wrap { max-width: calc(var(--app-content-max-width, 1400px) + var(--app-content-padding-x, 16px) * 2); margin: 0 auto; padding: 0 var(--app-content-padding-x, 16px); }
.sp-section { padding: 18px 0; scroll-margin-top: 72px; }
.sp-box {
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	padding: 22px;
}
.sp-muted { color: var(--sp-muted) !important; }
.sp-grad-text {
	background: var(--sp-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Buttons ---------- */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; border-radius: 12px;
	padding: 10px 18px;
	font-weight: 600; font-size: var(--fs-lg); line-height: 1.2;
	text-decoration: none !important; cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:disabled, .sp-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }
.sp-btn-grad { background: var(--sp-grad); color: var(--sp-on-accent) !important; }
.sp-btn-grad:hover { filter: brightness(1.06); }
.sp-btn-ghost { background: var(--sp-surface-2); color: var(--sp-text) !important; border: 1px solid var(--sp-border); }
.sp-btn-ghost:hover { background: var(--sp-surface-3); }
.sp-btn-block { width: 100%; }
.sp-btn-lg { padding: 14px 20px; font-size: var(--fs-lg); border-radius: 14px; }

/* ---------- Badges ---------- */
.sp-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; border-radius: 999px;
	font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
	white-space: nowrap;
}
.sp-badge-on { background: rgba(var(--sp-mint-rgb), 0.14); color: var(--sp-mint); }
.sp-badge-off { background: rgba(255, 107, 107, 0.15); color: var(--sp-danger); }
.sp-badge-warn { background: rgba(255, 196, 87, 0.15); color: var(--sp-warn); }
.sp-badge-info { background: rgba(var(--sp-blue-rgb), 0.15); color: var(--sp-blue); }
.sp-badge-hot { background: rgba(20, 22, 26, 0.82); color: #ffd28a; backdrop-filter: blur(4px); }
.sp-badge-new { background: var(--sp-grad); color: var(--sp-on-accent); }
.sp-badge-dma { background: rgba(20, 22, 26, 0.82); color: #c6b5ff; border: 1px solid rgba(178, 150, 255, 0.45); backdrop-filter: blur(4px); }
.sp-badge-dma i { margin-right: 4px; }

/* DMA spec */
.sp-dma-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sp-dma-chips span { font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--sp-surface-2); color: var(--sp-muted); border: 1px solid var(--sp-border); white-space: nowrap; }
.sp-dma-chips span.is-warn { color: var(--sp-warn); border-color: rgba(255, 196, 87, 0.35); background: rgba(255, 196, 87, 0.1); }
.sp-dma-spec { margin-top: 16px; border: 1px solid rgba(178, 150, 255, 0.28); border-radius: var(--sp-radius-sm); background: linear-gradient(180deg, rgba(178, 150, 255, 0.07), transparent 70%); overflow: hidden; }
.sp-dma-spec-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--sp-dma); border-bottom: 1px solid var(--sp-border); font-size: var(--fs-base); }
.sp-dma-spec-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: var(--fs-md); color: var(--sp-muted); }
.sp-dma-spec-row + .sp-dma-spec-row { border-top: 1px solid var(--sp-border); }
.sp-dma-spec-row > i { width: 18px; text-align: center; color: var(--sp-dma); flex-shrink: 0; }
.sp-dma-spec-row > span { flex: 1; min-width: 0; }
.sp-dma-spec-row em { font-style: normal; font-weight: 600; color: var(--sp-text); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; text-align: right; }
.sp-dma-spec-row em.is-warn { color: var(--sp-warn); }
.sp-dma-spec-row em.is-ok { color: var(--sp-mint); }
.sp-dma-spec-row em.is-muted { color: var(--sp-muted); font-weight: 500; }
.sp-dma-spec-row.is-main { background: rgba(178, 150, 255, 0.06); }
.sp-dma-spec-row.is-main b { display: block; color: var(--sp-text); }
.sp-dma-spec-row.is-main small { display: block; font-size: var(--fs-sm); }
.sp-dma-card { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 6px; background: var(--sp-surface-2); border: 1px solid var(--sp-border-strong); }
.sp-pill-count {
	display: inline-block; padding: 4px 12px; border-radius: 999px;
	background: var(--sp-surface-2); color: var(--sp-muted);
	font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--sp-border);
}

/* ---------- Header ---------- */
.sp-header {
	position: sticky; top: 0; z-index: 1030;
	background: rgba(var(--sp-bg-rgb), .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--sp-border);
	color: var(--sp-text);
}
.sp-header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.sp-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none !important; color: var(--sp-text) !important; }
.sp-brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.15); }
.sp-brand span { font-weight: 800; font-size: var(--fs-xl); letter-spacing: .5px; text-transform: uppercase; }
.sp-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.sp-nav a {
	padding: 8px 14px; border-radius: 10px;
	color: var(--sp-muted) !important; font-weight: 600; font-size: var(--fs-base);
	text-decoration: none !important;
}
.sp-nav a:hover, .sp-nav a.active { color: var(--sp-text) !important; background: var(--sp-surface-2); }
.sp-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sp-point-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 10px;
	background: var(--sp-surface-2); border: 1px solid var(--sp-border);
	font-weight: 700; font-size: var(--fs-base); color: var(--sp-mint) !important; text-decoration: none !important;
}
.sp-point-chip i { color: var(--sp-blue); }
.sp-user-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 10px 4px 4px; border-radius: 999px;
	background: var(--sp-surface-2); border: 1px solid var(--sp-border);
	color: var(--sp-text) !important; font-weight: 600; font-size: var(--fs-base); text-decoration: none !important;
}
.sp-user-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.sp-header .dropdown-menu {
	background: var(--sp-surface); border: 1px solid var(--sp-border-strong);
	border-radius: 14px; padding: 8px; min-width: 240px; box-shadow: var(--sp-shadow);
}
.sp-header .dropdown-item { color: var(--sp-text); border-radius: 10px; font-weight: 500; padding: 8px 10px; font-size: var(--fs-base); }
.sp-header .dropdown-item:hover, .sp-header .dropdown-item:focus { background: var(--sp-surface-2); color: var(--sp-text); }
.sp-header .dropdown-item i { width: 20px; color: var(--sp-muted); }
.sp-header .dropdown-divider { border-color: var(--sp-border-strong); margin: 6px 0; }
.sp-header .sp-dd-head { padding: 6px 10px 10px; }
.sp-header .sp-dd-head b { display: block; color: var(--sp-text); }
.sp-header .sp-dd-head small { color: var(--sp-muted); }
.sp-theme-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; color: var(--sp-muted); font-size: var(--fs-md); }
.sp-theme-row button { background: transparent; border: 0; color: var(--sp-muted); padding: 4px 6px; border-radius: 8px; }
.sp-theme-row button.active, .sp-theme-row button:hover { color: var(--sp-text); background: var(--sp-surface-2); }

/* ---------- User menu ---------- */
.sp-header .sp-umenu { width: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; margin-top: 8px !important; }
.sp-umenu a { text-decoration: none !important; }
.sp-umenu-head { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--sp-text) !important; }
.sp-umenu-head:hover { background: var(--sp-surface-2); }
.sp-umenu-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sp-border-strong); flex-shrink: 0; }
.sp-umenu-head div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-umenu-head b { font-size: var(--fs-lg); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-umenu-head small { color: var(--sp-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-umenu-rank { margin-top: 3px; }
.sp-umenu-wallet {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 6px 0 4px; padding: 12px 12px 12px 14px; border-radius: 12px;
	background: linear-gradient(135deg, rgba(122, 162, 255, .14), rgba(94, 224, 181, .10));
	border: 1px solid var(--sp-border-strong);
}
.sp-umenu-wallet small { display: block; color: var(--sp-muted); font-size: var(--fs-xs); }
.sp-umenu-wallet b { color: var(--sp-mint); font-size: var(--fs-2xl); white-space: nowrap; }
.sp-umenu-wallet .sp-btn { padding: 7px 12px; font-size: var(--fs-md); white-space: nowrap; }
.sp-umenu-label { padding: 10px 8px 6px; color: var(--sp-muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sp-umenu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-umenu-grid a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 12px 6px; border-radius: 12px; text-align: center;
	background: var(--sp-surface-2); border: 1px solid var(--sp-border);
	color: var(--sp-text) !important; font-size: var(--fs-md); font-weight: 600; line-height: 1.2;
	transition: transform .15s, border-color .15s, background .15s;
}
.sp-umenu-grid a i {
	--c: var(--sp-blue);
	width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
	font-size: var(--fs-xl); color: var(--c);
	background: color-mix(in srgb, var(--c) 16%, transparent);
}
.sp-umenu-grid a:hover { transform: translateY(-2px); border-color: var(--sp-border-strong); background: var(--sp-surface-3); }
.sp-umenu-grid a.active { border-color: var(--sp-mint); }
.sp-umenu-item {
	display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px;
	color: var(--sp-text) !important; font-size: var(--fs-base); font-weight: 500;
}
.sp-umenu-item > i:first-child { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--sp-surface-2); color: var(--sp-muted); font-size: var(--fs-lg); flex-shrink: 0; }
.sp-umenu-item span { flex: 1; min-width: 0; }
.sp-umenu-item:hover, .sp-umenu-item.active { background: var(--sp-surface-2); }
.sp-umenu-item:hover > i:first-child, .sp-umenu-item.active > i:first-child { color: var(--sp-mint); background: var(--sp-surface-3); }
.sp-umenu-item.is-admin > i:first-child { color: #ffc861; }
.sp-umenu-go { color: var(--sp-muted); font-size: var(--fs-sm); opacity: .6; }
.sp-umenu-count { font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #ff5f6d; color: #fff; font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.sp-umenu-logout {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 10px; padding: 10px; border-radius: 10px;
	background: rgba(255, 95, 109, .08); border: 1px solid rgba(255, 95, 109, .25);
	color: #ff7b86 !important; font-weight: 600; font-size: var(--fs-base);
}
.sp-umenu-logout:hover { background: rgba(255, 95, 109, .16); color: #ff9aa2 !important; }

@media (max-width: 991.98px) {
	.sp-nav { display: none; }
	.sp-header-inner { min-height: 58px; }
	.sp-user-btn .sp-user-name { display: none; }
}

/* ---------- Hero ---------- */
.sp-hero {
	position: relative; overflow: hidden;
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: 24px;
	padding: 44px 40px;
}
.sp-hero::before {
	content: ""; position: absolute; inset: -40% -10% auto auto;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--sp-blue-rgb), .18), transparent 65%);
	pointer-events: none;
}
.sp-hero::after {
	content: ""; position: absolute; inset: auto auto -50% -10%;
	width: 460px; height: 460px; border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--sp-mint-rgb), .12), transparent 65%);
	pointer-events: none;
}
.sp-hero > * { position: relative; z-index: 1; }
.sp-hero-kicker { color: var(--sp-mint); font-weight: 700; font-size: var(--fs-md); letter-spacing: .4px; margin-bottom: 8px; }
.sp-hero h1 { color: var(--sp-text); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.25; margin-bottom: 10px; }
.sp-hero p.sp-hero-sub { color: var(--sp-muted); font-size: var(--fs-lg); max-width: 640px; margin-bottom: 22px; }

.sp-search {
	display: flex; align-items: center; gap: 8px;
	background: var(--sp-bg); border: 1px solid var(--sp-border-strong);
	border-radius: 16px; padding: 6px 6px 6px 16px;
	max-width: 720px;
}
.sp-search i { color: var(--sp-muted); }
.sp-search input {
	flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
	color: var(--sp-text); font-size: var(--fs-lg); padding: 10px 4px;
}
.sp-search input::placeholder { color: #737985; }
.sp-search .sp-btn { padding: 11px 26px; }
.sp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sp-quick a {
	padding: 7px 14px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600;
	background: var(--sp-surface-2); border: 1px solid var(--sp-border);
	color: var(--sp-muted) !important; text-decoration: none !important;
}
.sp-quick a:hover { color: var(--sp-text) !important; border-color: var(--sp-border-strong); }

.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 720px; }
.sp-stat { background: var(--sp-sunken); border: 1px solid var(--sp-border); border-radius: 14px; padding: 12px 14px; }
.sp-stat b { display: block; font-size: var(--fs-2xl); color: var(--sp-text); }
.sp-stat span { color: var(--sp-muted); font-size: var(--fs-sm); }

/* Home hero */
.hx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px; }
.hx-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: var(--sp-dma); background: rgba(178, 150, 255, .1); border: 1px solid rgba(178, 150, 255, .3); margin-bottom: 16px; }
.hx h1 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.2; margin-bottom: 12px; letter-spacing: -.3px; }
.hx h1 .sp-grad-text { display: block; }
.hx-sub { color: var(--sp-muted); font-size: var(--fs-lg); line-height: 1.6; max-width: 560px; margin-bottom: 22px; }
.hx-search { max-width: none; border-radius: 14px; }
.hx-search:focus-within { border-color: rgba(var(--sp-blue-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--sp-blue-rgb), .12); }
.hx-search .sp-btn { gap: 6px; }
.hx-search-icon { display: none; }
.hx-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.hx-popular > span { color: var(--sp-muted); font-size: var(--fs-sm); margin-right: 2px; }
.hx-popular a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--sp-text) !important; text-decoration: none !important; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s, background .15s; }
.hx-popular a:hover { border-color: rgba(var(--sp-blue-rgb), .5); background: var(--sp-surface-3); }
.hx-popular img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hx-actions .sp-btn { padding: 12px 22px; gap: 8px; }
.hx-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 22px 0 0; }
.hx-feats li { display: inline-flex; align-items: center; gap: 7px; color: var(--sp-muted); font-size: var(--fs-md); }
.hx-feats i { color: var(--sp-mint); }

/* ลูกค้าของเรา (หน้าแรก) */
.hx-proof { margin-top: 24px; padding: 14px 16px; border-radius: 16px; background: var(--sp-sunken); border: 1px solid var(--sp-border); }
.hx-proof-row { display: flex; align-items: center; gap: 14px; }
.hx-faces { display: flex; flex-shrink: 0; padding-left: 8px; }
.hx-face { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sp-sunken); background: hsl(var(--h, 220) 55% 42%); color: #fff; font-size: var(--fs-sm); font-weight: 800; }
.hx-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-face-more { background: var(--sp-surface-3); color: var(--sp-text); font-size: var(--fs-2xs); }
.hx-proof-nums { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--fs-sm); color: var(--sp-muted); }
.hx-proof-nums span { display: inline-flex; align-items: center; gap: 5px; }
.hx-proof-nums b { color: var(--sp-text); font-size: var(--fs-lg); }
.hx-proof-nums .is-live b { color: var(--sp-mint); }
.hx-proof-nums .hx-live { margin-right: 3px; }
.hx-recent { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--sp-border); }
.hx-recent-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; color: var(--sp-mint); background: rgba(79, 209, 165, .1); }
.hx-recent-track { position: relative; flex: 1; min-width: 0; height: 30px; }
.hx-recent-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; color: var(--sp-text) !important; text-decoration: none !important; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.hx-recent-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hx-recent-item img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.hx-recent-text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-recent-text b { color: var(--sp-text); font-weight: 700; }
.hx-recent-item em { flex-shrink: 0; font-style: normal; font-size: var(--fs-2xs); color: var(--sp-muted); }
.hx-recent-item:hover .hx-recent-text b:last-of-type { color: var(--sp-blue); }
@media (prefers-reduced-motion: reduce) { .hx-recent-item { transition: none; } }
@media (max-width: 575.98px) {
	.hx-proof { padding: 12px; }
	.hx-proof-row { gap: 10px; }
	.hx-face { width: 28px; height: 28px; font-size: var(--fs-2xs); }
	.hx-proof-nums { gap: 2px 10px; }
	.hx-proof-nums b { font-size: var(--fs-md); }
	.hx-recent-tag span, .hx-recent-item em { display: none; }
	.hx-recent-tag { padding: 5px 7px; }
}

.hx-side { background: var(--sp-sunken); border: 1px solid var(--sp-border); border-radius: 20px; padding: 18px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55); }
.hx-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hx-side-head b { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-lg); }
.hx-side-head b i { color: #ffb36b; }
.hx-side-head a { font-size: var(--fs-sm); color: var(--sp-blue) !important; text-decoration: none !important; }
.hx-hot { display: flex; flex-direction: column; gap: 6px; }
.hx-hot-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-decoration: none !important; color: var(--sp-text) !important; transition: background .15s; }
.hx-hot-item:hover { background: var(--sp-surface-2); }
.hx-rank { width: 20px; flex-shrink: 0; text-align: center; font-weight: 800; color: var(--sp-muted); font-size: var(--fs-md); }
.hx-hot-item:first-child .hx-rank { color: #ffd28a; }
.hx-hot-item img { width: 52px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.hx-hot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-hot-text small { color: var(--sp-blue); font-size: var(--fs-2xs); font-weight: 600; }
.hx-hot-text b { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-hot-price { text-align: right; font-weight: 700; color: var(--sp-mint); font-size: var(--fs-md); white-space: nowrap; display: flex; flex-direction: column; }
.hx-hot-price small { color: var(--sp-muted); font-weight: 500; font-size: var(--fs-2xs); }
.hx-hot-empty { color: var(--sp-muted); font-size: var(--fs-md); padding: 18px 8px; text-align: center; }
.hx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sp-border); text-align: center; }
.hx-stats div + div { border-left: 1px solid var(--sp-border); }
.hx-stats b { display: block; font-size: var(--fs-2xl); }
.hx-stats span { color: var(--sp-muted); font-size: var(--fs-xs); }

@media (max-width: 1199.98px) {
	.hx { gap: 28px; padding: 32px; }
}
@media (max-width: 991.98px) {
	.hx { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 28px; }
}
@media (max-width: 575.98px) {
	.hx { padding: 24px 16px; }
	.hx-kicker { margin-bottom: 12px; }
	.hx-sub { font-size: var(--fs-base); margin-bottom: 18px; }
	.hx-search-label { display: none; }
	.hx-search-icon { display: inline; }
	.hx-search .sp-btn { padding: 10px 14px; }
	.hx-popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
	.hx-popular::-webkit-scrollbar { display: none; }
	.hx-popular > *, .hx-popular a { flex-shrink: 0; white-space: nowrap; }
	.hx-actions .sp-btn { flex: 1; justify-content: center; padding: 12px 14px; }
	.hx-feats { gap: 8px 14px; }
	.hx-feats li { font-size: var(--fs-sm); }
	.hx-side { padding: 12px; }
}

@media (max-width: 575.98px) {
	.sp-hero { padding: 24px 18px; border-radius: 20px; }
	.sp-search { padding-left: 12px; }
	.sp-search .sp-btn { padding: 10px 16px; }
	.sp-stats { gap: 8px; margin-top: 18px; }
	.sp-stat { padding: 10px; }
	.sp-stat b { font-size: var(--fs-xl); }
	.sp-stat span { font-size: var(--fs-xs); }
	.sp-item-stats { gap: 6px; }
	.sp-item-stat { padding: 10px 8px; }
	.sp-item-stat b { font-size: var(--fs-base); }
}

/* ---------- Info strip ---------- */
.sp-strip {
	display: flex; align-items: center; gap: 12px;
	background: var(--sp-surface); border: 1px solid var(--sp-border);
	border-radius: 14px; padding: 10px 14px; overflow: hidden;
}
.sp-strip-tag { flex-shrink: 0; background: var(--sp-grad); color: var(--sp-on-accent); font-weight: 700; font-size: var(--fs-sm); padding: 4px 10px; border-radius: 999px; }
.sp-strip-track { overflow: hidden; flex: 1; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sp-strip-text { display: inline-block; padding-left: 100%; animation: sp-marquee 28s linear infinite; color: var(--sp-muted); font-size: var(--fs-base); }
@keyframes sp-marquee { to { transform: translateX(-100%); } }

/* ---------- Section head / tabs ---------- */
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-head h2 { font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); margin: 0; }
.sp-head p { margin: 2px 0 0; color: var(--sp-muted); font-size: var(--fs-base); }
.sp-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.sp-tabs button, .sp-tabs a {
	border: 0; background: transparent; color: var(--sp-muted) !important;
	padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: var(--fs-base);
	text-decoration: none !important; white-space: nowrap;
}
.sp-tabs button.active, .sp-tabs a.active { background: var(--sp-surface-3); color: var(--sp-text) !important; }
.sp-link-more { color: var(--sp-blue) !important; font-weight: 600; font-size: var(--fs-base); text-decoration: none !important; }

/* ---------- Product grid / cards ---------- */
.sp-grid { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .sp-grid, .sp-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .sp-grid, .sp-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sp-grid, .sp-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.sp-card-product {
	display: flex; flex-direction: column;
	background: var(--sp-surface); border: 1px solid var(--sp-border);
	border-radius: 16px; overflow: hidden;
	text-decoration: none !important; color: var(--sp-text) !important;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sp-card-product:hover { transform: translateY(-3px); border-color: var(--sp-border-strong); box-shadow: var(--sp-shadow); }
.sp-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--sp-surface-2); overflow: hidden; }
.sp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sp-card-product:hover .sp-card-media img { transform: scale(1.04); }
.sp-card-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.sp-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; flex: 1; }
.sp-card-game { color: var(--sp-blue); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-title { font-weight: 700; font-size: var(--fs-lg); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.sp-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.sp-card-stock { color: var(--sp-muted); font-size: var(--fs-sm); }
.sp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--sp-border-strong); }
.sp-price { color: var(--sp-mint); font-weight: 800; font-size: var(--fs-lg); white-space: nowrap; }
.sp-price small { color: var(--sp-muted); font-weight: 500; font-size: var(--fs-xs); }
.sp-card-cta { color: var(--sp-muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.sp-card-product:hover .sp-card-cta { color: var(--sp-text); }
@media (max-width: 575.98px) {
	.sp-card-body { padding: 10px; }
	.sp-card-title { font-size: var(--fs-md); }
	.sp-card-cta { display: none; }
}

/* ---------- Game tiles ---------- */
.sp-games { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .sp-games { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sp-games { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .sp-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-game {
	display: flex; flex-direction: column; gap: 8px;
	background: var(--sp-surface); border: 1px solid var(--sp-border);
	border-radius: 16px; padding: 10px;
	text-decoration: none !important; color: var(--sp-text) !important;
	transition: border-color .18s ease, transform .18s ease;
}
.sp-game:hover { border-color: var(--sp-border-strong); transform: translateY(-2px); }
.sp-game-img { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--sp-surface-2); }
.sp-game-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-game-img .sp-badge { position: absolute; right: 6px; bottom: 6px; background: rgba(20,22,26,.82); color: var(--sp-text); }
.sp-game b { font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-game span.sp-game-go { color: var(--sp-muted); font-size: var(--fs-sm); font-weight: 600; }
.sp-game:hover span.sp-game-go { color: var(--sp-mint); }

/* ---------- Steps / trust ---------- */
.sp-steps { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-step { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; padding: 16px; }
.sp-step-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sp-grad); color: var(--sp-on-accent); font-weight: 800; margin-bottom: 10px; }
.sp-step b { display: block; color: var(--sp-text); margin-bottom: 4px; }
.sp-step p { color: var(--sp-muted); font-size: var(--fs-md); margin: 0; }

/* ---------- Discord block ---------- */
.sp-discord {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	background: linear-gradient(120deg, rgba(88,101,242,.28), rgba(var(--sp-mint-rgb), .08)), var(--sp-surface);
	border: 1px solid var(--sp-border); border-radius: 20px; padding: 24px 26px;
}
.sp-discord h3 { color: var(--sp-text); font-weight: 800; font-size: var(--fs-2xl); margin: 0 0 4px; }
.sp-discord p { color: var(--sp-muted); margin: 0; }
.sp-btn-discord { background: #5865f2; color: #fff !important; }

/* ---------- Empty ---------- */
.sp-empty { text-align: center; padding: 48px 16px; color: var(--sp-muted); background: var(--sp-surface); border: 1px dashed var(--sp-border-strong); border-radius: 16px; }
.sp-empty i { font-size: var(--fs-5xl); display: block; margin-bottom: 8px; color: var(--sp-blue); }
.sp-empty b { color: var(--sp-text); }

/* ---------- Breadcrumb ---------- */
.sp-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--sp-muted); font-size: var(--fs-md); margin-bottom: 14px; }
.sp-crumb a { color: var(--sp-muted) !important; text-decoration: none !important; }
.sp-crumb a:hover { color: var(--sp-text) !important; }
.sp-crumb span.sep { opacity: .5; }
.sp-crumb .current { color: var(--sp-text); }

/* ---------- Item page ---------- */
.sp-item { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 991.98px) { .sp-item { grid-template-columns: 1fr; } }
@media (min-width: 992px) {
	.sp-item { grid-template-rows: auto 1fr; }
	.sp-item > .sp-item-info { grid-column: 2; grid-row: 1 / span 2; }
	.sp-item > .sp-item-descbox { grid-column: 1; grid-row: 2; }
}
.sp-gallery-main { position: relative; border-radius: 18px; overflow: hidden; background: var(--sp-surface-2); aspect-ratio: 4 / 3; border: 1px solid var(--sp-border); }
.sp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.sp-gallery-main .sp-badge { position: absolute; top: 12px; left: 12px; font-size: var(--fs-sm); padding: 5px 12px; background: rgba(20,22,26,.85); }
.sp-gallery-main .sp-zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(20,22,26,.8); color: #fff !important; }
.sp-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.sp-thumbs button { flex: 0 0 76px; height: 58px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--sp-surface-2); opacity: .7; }
.sp-thumbs button.active, .sp-thumbs button:hover { border-color: var(--sp-mint); opacity: 1; }
.sp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.sp-item-game { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-blue) !important; font-weight: 700; font-size: var(--fs-md); text-decoration: none !important; }
.sp-item h1 { color: var(--sp-text); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin: 6px 0 10px; line-height: 1.3; }
.sp-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sp-item-desc { color: color-mix(in srgb, var(--sp-text) 82%, var(--sp-muted)); font-size: var(--fs-lg); line-height: 1.7; white-space: pre-line; }
.sp-feature { display: flex; gap: 10px; align-items: flex-start; color: var(--sp-text); font-size: var(--fs-base); margin-top: 8px; }
.sp-feature i { color: var(--sp-mint); margin-top: 3px; }
.sp-warn { display: flex; gap: 10px; background: rgba(255,196,87,.08); border: 1px solid rgba(255,196,87,.25); color: #ffd99a; border-radius: 12px; padding: 10px 12px; font-size: var(--fs-md); margin-top: 14px; }

.sp-item-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.sp-item-stat { background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: 14px; padding: 12px; }
.sp-item-stat span { display: block; color: var(--sp-muted); font-size: var(--fs-sm); margin-bottom: 2px; }
.sp-item-stat b { color: var(--sp-text); font-size: var(--fs-lg); }
.sp-item-stat b.mint { color: var(--sp-mint); }

.sp-order h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--sp-text); margin: 0; }
.sp-order > p { color: var(--sp-muted); font-size: var(--fs-md); margin: 2px 0 14px; }
.sp-pkgs { display: grid; gap: 8px; }
.sp-pkg { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sp-surface-2); border: 1.5px solid var(--sp-border); cursor: pointer; transition: border-color .15s ease, background .15s ease; margin: 0; }
.sp-pkg:hover { border-color: var(--sp-border-strong); }
.sp-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.sp-pkg-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sp-muted); flex-shrink: 0; display: grid; place-items: center; }
.sp-pkg-name { flex: 1; color: var(--sp-text); font-weight: 600; font-size: var(--fs-base); }
.sp-pkg-name small { display: block; color: var(--sp-muted); font-weight: 500; font-size: var(--fs-sm); }
.sp-pkg-price { color: var(--sp-mint); font-weight: 800; white-space: nowrap; }
.sp-pkg.is-checked { border-color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .07); }
.sp-pkg.is-checked .sp-pkg-dot { border-color: var(--sp-mint); }
.sp-pkg.is-checked .sp-pkg-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-mint); }
.sp-pkg.is-disabled { opacity: .5; cursor: not-allowed; }

.sp-summary { margin: 14px 0; border-radius: 12px; background: var(--sp-sunken); border: 1px solid var(--sp-border); padding: 12px 14px; }
.sp-summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-base); color: var(--sp-muted); padding: 3px 0; }
.sp-summary-row b { color: var(--sp-text); }
.sp-summary-row.total { border-top: 1px dashed var(--sp-border-strong); margin-top: 6px; padding-top: 9px; font-size: var(--fs-lg); }
.sp-summary-row.total b { color: var(--sp-mint); font-size: var(--fs-2xl); }
.sp-summary-row .neg { color: var(--sp-danger); }
.sp-note { font-size: var(--fs-md); color: var(--sp-muted); margin-top: 10px; text-align: center; }
.sp-note a { color: var(--sp-blue) !important; }

/* product page */
.it-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "gallery buy" "info buy"; gap: 22px; align-items: start; }
.it-gallery { grid-area: gallery; min-width: 0; }
.it-buy { grid-area: buy; position: sticky; top: 84px; min-width: 0; }
.it-info { grid-area: info; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.it-buybox { padding: 22px; }
.it-title { color: var(--sp-text); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; margin: 6px 0 10px; }
.it-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.it-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 14px; padding: 14px 0; border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); }
.it-price-label { width: 100%; color: var(--sp-muted); font-size: var(--fs-sm); }
.it-price b { color: var(--sp-mint); font-size: var(--fs-4xl); font-weight: 800; line-height: 1; }
.it-price-meta { color: var(--sp-muted); font-size: var(--fs-sm); display: inline-flex; gap: 6px; align-items: center; }
.it-buybox .sp-alert { margin-bottom: 12px; }
.it-step { color: var(--sp-text); font-weight: 700; font-size: var(--fs-base); margin-bottom: 8px; }
.it-pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.it-pkgs:has(.is-best) { padding-top: 6px; }
.it-pkg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--sp-surface-2); border: 1.5px solid var(--sp-border); cursor: pointer; transition: border-color .15s, background .15s; }
.it-pkg:hover { border-color: var(--sp-border-strong); }
.it-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.it-pkg-name { color: var(--sp-text); font-weight: 700; font-size: var(--fs-base); padding-right: 22px; }
.it-pkg-price { color: var(--sp-mint); font-weight: 800; font-size: var(--fs-xl); }
.it-pkg-sub { color: var(--sp-muted); font-size: var(--fs-xs); }
.it-pkg.is-checked { border-color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .08); box-shadow: 0 0 0 3px rgba(var(--sp-mint-rgb), .12); }
.it-pkg.is-checked::after { content: "\F633"; font-family: "bootstrap-icons"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--sp-mint); color: var(--sp-on-accent); }
.it-pkg.is-disabled { opacity: .55; cursor: not-allowed; }
.it-pkg.is-disabled.is-checked { border-color: var(--sp-border); background: var(--sp-surface-2); box-shadow: none; }
.it-pkg.is-disabled.is-checked::after { display: none; }
.it-pkg-best { position: absolute; top: -9px; left: 12px; padding: 1px 8px; border-radius: 999px; background: var(--sp-grad); color: var(--sp-on-accent); font-size: var(--fs-2xs); font-weight: 800; }
.it-summary { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--sp-sunken); border: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 4px; }
.it-summary > div { display: flex; justify-content: space-between; gap: 10px; color: var(--sp-muted); font-size: var(--fs-md); }
.it-summary b { color: var(--sp-text); }
.it-summary b.neg { color: var(--sp-danger); }
.it-summary b.is-renew { color: var(--sp-mint); }
.it-summary .is-total { border-top: 1px dashed var(--sp-border-strong); margin-top: 4px; padding-top: 8px; font-size: var(--fs-base); }
.it-summary .is-total b { color: var(--sp-mint); font-size: var(--fs-xl); }
.it-cta { min-height: 52px; font-size: var(--fs-lg); }
.it-trust { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 7px; }
.it-trust li { display: flex; align-items: center; gap: 9px; color: var(--sp-muted); font-size: var(--fs-sm); }
.it-trust i { color: var(--sp-mint); font-size: var(--fs-base); }
.it-card { padding: 20px; }
.it-card h2 { display: flex; align-items: center; gap: 8px; color: var(--sp-text); font-size: var(--fs-lg); font-weight: 800; margin: 0 0 12px; }
.it-card h2 i { color: var(--sp-blue); }
.it-desc { color: color-mix(in srgb, var(--sp-text) 82%, var(--sp-muted)); font-size: var(--fs-base); line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.it-features { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.it-features li { display: flex; gap: 10px; align-items: flex-start; color: var(--sp-text); font-size: var(--fs-base); }
.it-features i { color: var(--sp-mint); margin-top: 2px; }
.it-warn { display: flex; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: var(--fs-md); background: rgba(255, 196, 87, .1); border: 1px solid rgba(255, 196, 87, .3); color: color-mix(in srgb, var(--sp-warn) 70%, var(--sp-text)); }
.it-spec-main { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(178, 150, 255, .08); border: 1px solid rgba(178, 150, 255, .25); margin-bottom: 6px; }
.it-spec-main > i { font-size: var(--fs-2xl); color: var(--sp-dma); }
.it-spec-main b { display: block; color: var(--sp-text); }
.it-spec-main small { display: block; color: var(--sp-muted); font-size: var(--fs-sm); }
.it-spec { margin: 0; }
.it-spec > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--sp-border); font-size: var(--fs-md); }
.it-spec > div:last-child { border-bottom: 0; padding-bottom: 0; }
.it-spec dt { display: flex; align-items: center; gap: 8px; color: var(--sp-muted); font-weight: 500; }
.it-spec dt i { color: var(--sp-dma); width: 16px; text-align: center; }
.it-spec dd { margin: 0; color: var(--sp-text); font-weight: 600; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; text-align: right; }
.it-spec dd.is-warn { color: var(--sp-warn); }
.it-spec dd.is-ok { color: var(--sp-mint); }
.it-spec dd.is-muted { color: var(--sp-muted); font-weight: 500; }
.it-mbar { display: none; }
@media (max-width: 991.98px) {
	.it-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "buy" "info"; gap: 16px; }
	.it-buy { position: static; }
	.it-mbar { position: fixed; left: 10px; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
	.it-mbar[hidden] { display: none; }
	.it-mbar small { display: block; color: var(--sp-muted); font-size: var(--fs-xs); }
	.it-mbar b { color: var(--sp-mint); font-size: var(--fs-xl); font-weight: 800; }
}
@media (max-width: 575.98px) {
	.it-buybox, .it-card { padding: 16px; }
	.it-price b { font-size: var(--fs-3xl); }
}
.sp-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 11px 13px; font-size: var(--fs-base); margin-bottom: 12px; }
.sp-alert-warn { background: rgba(255,196,87,.08); border: 1px solid rgba(255,196,87,.25); color: #ffd99a; }
.sp-alert-info { background: rgba(var(--sp-blue-rgb), .08); border: 1px solid rgba(var(--sp-blue-rgb), .25); color: #c4d2ff; }
.sp-alert-off { background: rgba(255,107,107,.08); border: 1px solid rgba(255,107,107,.25); color: #ffb0b0; }

/* ---------- Search page ---------- */
.sp-search-hero { padding: 26px 28px; }
.sp-search-hero h1 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 800; color: var(--sp-text); margin: 0 0 6px; }
.sp-sort { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 14px; align-items: center; }
.sp-sort span.label { color: var(--sp-muted); font-size: var(--fs-md); margin-right: 4px; }
.sp-sort a { padding: 7px 14px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600; background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-muted) !important; text-decoration: none !important; }
.sp-sort a.active { background: var(--sp-grad); color: var(--sp-on-accent) !important; border-color: transparent; }
.sp-sort a:not(.active):hover { color: var(--sp-text) !important; }
.sp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.sp-chips a { padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); background: var(--sp-surface-2); color: var(--sp-muted) !important; border: 1px solid var(--sp-border); text-decoration: none !important; }
.sp-chips a.active, .sp-chips a:hover { color: var(--sp-text) !important; border-color: var(--sp-mint); }
.sp-pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.sp-pager a, .sp-pager span { min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-muted) !important; font-weight: 600; text-decoration: none !important; }
.sp-pager span.active { background: var(--sp-grad); color: var(--sp-on-accent) !important; border-color: transparent; }
.sp-pager span.disabled { opacity: .4; }

/* ---------- Auth ---------- */
.sp-auth { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 30px 16px; }
.sp-auth-card { width: 100%; max-width: 440px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 22px; padding: 28px; box-shadow: var(--sp-shadow); }
.sp-auth-brand { text-align: center; margin-bottom: 18px; }
.sp-auth-brand img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.15); margin-bottom: 10px; }
.sp-auth-brand h1 { font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); margin: 0; }
.sp-auth-brand p { color: var(--sp-muted); font-size: var(--fs-base); margin: 4px 0 0; }
.sp-auth .sp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 18px; background: var(--sp-bg); }
.sp-auth .sp-tabs a { text-align: center; padding: 9px 6px; font-size: var(--fs-md); }
.sp-field { margin-bottom: 12px; }
.sp-field label { display: block; color: var(--sp-muted); font-size: var(--fs-md); font-weight: 600; margin-bottom: 6px; }
.sp-input { position: relative; }
.sp-input > i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sp-muted); pointer-events: none; }
.sp-input input {
	width: 100%; background: var(--sp-bg) !important; color: var(--sp-text) !important;
	border: 1px solid var(--sp-border-strong); border-radius: 12px;
	padding: 12px 42px 12px 40px; font-size: var(--fs-lg); outline: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-input input:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(var(--sp-blue-rgb), .15); }
.sp-input input::placeholder { color: #6f7581; }
.sp-input .sp-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--sp-muted); padding: 6px 8px; }
.sp-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--sp-muted); margin: 4px 0 16px; }
.sp-auth-row a, .sp-auth-foot a { color: var(--sp-blue) !important; text-decoration: none; font-weight: 600; }
.sp-auth-row .form-check-input { background-color: var(--sp-bg); border-color: var(--sp-border-strong); }
.sp-auth-foot { text-align: center; color: var(--sp-muted); font-size: var(--fs-md); margin-top: 16px; }
.sp-auth-hint { background: rgba(var(--sp-blue-rgb), .08); border: 1px solid rgba(var(--sp-blue-rgb), .2); color: #c4d2ff; border-radius: 12px; padding: 10px 12px; font-size: var(--fs-md); margin-bottom: 14px; }

/* ---------- Footer ---------- */
.sp-footer { position: relative; background: var(--sp-footer); color: var(--sp-muted); padding: 48px 0 0; margin-top: 56px; }
.sp-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--sp-blue-rgb), .45), rgba(var(--sp-mint-rgb), .45), transparent); }
.sp-footer a { color: var(--sp-muted) !important; text-decoration: none !important; transition: color .15s; }
.sp-footer a:hover { color: var(--sp-text) !important; }
.sp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; padding-bottom: 36px; }

.sp-footer-about .sp-brand { color: var(--sp-text) !important; margin-bottom: 12px; }
.sp-footer-about .sp-brand span { font-size: var(--fs-xl); }
.sp-footer-about p { font-size: var(--fs-base); line-height: 1.65; margin: 0 0 14px; max-width: 340px; }
.sp-footer-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--sp-text); background: var(--sp-surface); border: 1px solid var(--sp-border); }
.sp-footer-status i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); }
.sp-footer-social { display: flex; gap: 8px; margin-top: 16px; }
.sp-footer-social a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: var(--fs-lg); background: var(--sp-surface); border: 1px solid var(--sp-border); transition: color .15s, border-color .15s, transform .15s; }
.sp-footer-social a:hover { border-color: rgba(var(--sp-blue-rgb), .5); transform: translateY(-2px); }

.sp-footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-footer h6 { color: var(--sp-text); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; }
.sp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sp-footer ul a { font-size: var(--fs-base); }

.sp-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; border-top: 1px solid var(--sp-border); padding: 18px 0 22px; font-size: var(--fs-sm); }
.sp-footer-copy { min-width: 0; }
.sp-footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-footer-pay > span { margin-right: 4px; }
.sp-footer .sp-footer-pay a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.sp-footer .sp-footer-pay a:hover { border-color: var(--sp-border-strong); }
.sp-footer-pay .bi-currency-bitcoin { color: #f7a531; }

@media (max-width: 991.98px) {
	.sp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sp-footer-about p { max-width: none; }
}
@media (max-width: 575.98px) {
	.sp-footer { padding-top: 32px; margin-top: 40px; }
	.sp-footer-grid { gap: 28px; padding-bottom: 24px; }
	.sp-footer-links { gap: 12px; }
	.sp-footer h6 { font-size: var(--fs-xs); margin-bottom: 10px; }
	.sp-footer ul { gap: 8px; }
	.sp-footer ul a { font-size: var(--fs-md); }
	.sp-footer-bottom { flex-direction: column; align-items: flex-start; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- SweetAlert on storefront ---------- */
body.shop-page .swal2-popup { background: var(--sp-surface); border: 1px solid var(--sp-border-strong); border-radius: 20px; color: var(--sp-text); }
body.shop-page .swal2-title { color: var(--sp-text) !important; }
body.shop-page .swal2-html-container { color: #c7cbd3 !important; }
body.shop-page .swal2-html-container b { color: var(--sp-text); }
body.shop-page .swal2-styled { border-radius: 12px !important; font-weight: 600; }

/* ---------- Mobile bottom nav ---------- */
.navbar-mobile.sp-mobile { background: rgba(var(--sp-bg-rgb), .96) !important; border-top: 1px solid var(--sp-border); backdrop-filter: blur(10px); }
.navbar-mobile.sp-mobile .nav-link { color: var(--sp-muted) !important; }
.navbar-mobile.sp-mobile .nav-link.active { color: var(--sp-mint) !important; }

/* ---------- Member / admin pages: same palette as storefront ---------- */
body.sp-themed,
[data-bs-theme] #BodyMaster.sp-themed {
	background: var(--sp-bg) !important;
	background-image: none !important;
	font-family: var(--app-font);
}
body.sp-themed::before,
body.sp-themed::after { display: none !important; }
body.sp-themed:not(.shop-page) .card { border-radius: var(--sp-radius) !important; background: var(--sp-surface) !important; border: 1px solid var(--sp-border) !important; box-shadow: var(--sp-shadow) !important; }
body.sp-themed:not(.shop-page) .card .card { background: var(--sp-surface-2) !important; box-shadow: none !important; }
body.sp-themed:not(.shop-page) .card-header,
body.sp-themed:not(.shop-page) .card-footer { background: transparent !important; border-color: var(--sp-border) !important; }
body.sp-themed:not(.shop-page) .btn { border-radius: 12px; }
body.sp-themed:not(.shop-page) .btn-primary { background: var(--sp-grad) !important; color: var(--sp-on-accent) !important; box-shadow: none !important; }
body.sp-themed:not(.shop-page) .btn-primary:hover { filter: brightness(1.06); }
body.sp-themed:not(.shop-page) .btn-outline-primary { color: var(--sp-mint) !important; border-color: rgba(var(--sp-mint-rgb), .45) !important; background: transparent !important; }
body.sp-themed:not(.shop-page) .btn-outline-primary:hover { background: rgba(var(--sp-mint-rgb), .12) !important; color: var(--sp-mint) !important; }
body.sp-themed:not(.shop-page) input.form-control,
body.sp-themed:not(.shop-page) select.form-select,
body.sp-themed:not(.shop-page) textarea.form-control { background: var(--sp-bg) !important; border-color: var(--sp-border-strong) !important; border-radius: 12px; }
body.sp-themed:not(.shop-page) .input-group > .form-control { border-radius: 12px 0 0 12px; }
body.sp-themed:not(.shop-page) .input-group-text { background: var(--sp-surface-2) !important; border-color: var(--sp-border-strong) !important; color: var(--sp-muted) !important; }
body.sp-themed:not(.shop-page) .nav-tabs .nav-link.active,
body.sp-themed:not(.shop-page) .nav-bottom-line .nav-link.active { color: var(--sp-mint) !important; border-bottom-color: var(--sp-mint) !important; background: transparent !important; }
body.sp-themed:not(.shop-page) .text-primary { color: var(--sp-blue) !important; }
body.sp-themed:not(.shop-page) .bg-primary:not([class*="bg-opacity"]) { background: var(--sp-grad) !important; color: var(--sp-on-accent) !important; }
body.sp-themed:not(.shop-page) .bg-primary[class*="bg-opacity"] { background: rgba(var(--sp-blue-rgb), .1) !important; box-shadow: none !important; color: var(--sp-text) !important; }

/* SweetAlert (all pages) */
body.sp-themed .swal2-popup { background: var(--sp-surface); border: 1px solid var(--sp-border-strong); border-radius: 20px; color: var(--sp-text); }
body.sp-themed .swal2-title { color: var(--sp-text) !important; }
body.sp-themed .swal2-html-container { color: #c7cbd3 !important; }
body.sp-themed .swal2-html-container b { color: var(--sp-text); }
body.sp-themed .swal2-styled { border-radius: 12px !important; font-weight: 600; }

/* Legacy pages with light-only inline styles */
body.sp-themed .buy-page .buy-price-row { background: var(--sp-surface-2) !important; }
body.sp-themed .buy-page .buy-filter-pills .form-check-label { background: var(--sp-bg) !important; border-color: var(--sp-border-strong) !important; color: var(--sp-muted) !important; }
body.sp-themed .buy-page .buy-filter-pills .form-check-input:checked + .form-check-label { background: var(--sp-grad) !important; border-color: transparent !important; color: var(--sp-on-accent) !important; }
body.sp-themed .buy-page .buy-meta { color: var(--sp-muted) !important; }
body.sp-themed .buy-page .buy-program-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; }
body.sp-themed .alert-info { background: rgba(var(--sp-blue-rgb), .1) !important; border-color: rgba(var(--sp-blue-rgb), .25) !important; color: #c9d6ff !important; }
body.sp-themed .admin-dashboard .stat-label { color: var(--sp-muted) !important; }
body.sp-themed .admin-dashboard .quick-link { background: var(--sp-surface-2) !important; border-color: var(--sp-border-strong) !important; color: var(--sp-text) !important; }
body.sp-themed .admin-dashboard .quick-link:hover { background: var(--sp-surface-3) !important; color: var(--sp-mint) !important; }


/* =============================================================
 * Header extras: language switch + notification bell
 * =========================================================== */
.sp-lang-btn, .sp-bell {
	display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
	border-radius: 12px; background: var(--sp-surface); border: 1px solid var(--sp-border);
	color: var(--sp-text) !important; font-weight: 700; font-size: var(--fs-md); text-decoration: none !important;
	position: relative; transition: border-color .15s;
}
.sp-lang-btn:hover, .sp-bell:hover { border-color: var(--sp-border-strong); }
.sp-lang-btn { white-space: nowrap; }
.sp-bell { width: 38px; padding: 0; justify-content: center; font-size: var(--fs-lg); }
.sp-bell span {
	position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: #ff5c7a; color: #fff; font-size: var(--fs-2xs); line-height: 18px; text-align: center;
}
.sp-bell.has-new i { color: var(--sp-mint); }
/* ===== Toast notifications ===== */
.cc-toasts {
	position: fixed; top: 76px; right: 20px; z-index: 2147483000;
	display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 24px)); pointer-events: none;
}
.cc-toast {
	--c: var(--sp-mint, #4fd1a5);
	position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 14px 14px;
	border-radius: 14px; background: var(--sp-surface, #1d2026); border: 1px solid var(--sp-border-strong, rgba(255,255,255,.12));
	box-shadow: 0 12px 32px rgba(0,0,0,.35); color: var(--sp-text, #eceef2); overflow: hidden; pointer-events: auto;
	animation: ccToastIn .28s cubic-bezier(.2,.9,.3,1.1) both;
}
.cc-toast.is-out { animation: ccToastOut .25s ease forwards; }
.cc-toast.is-error { --c: var(--sp-danger, #ff6b7d); }
.cc-toast.is-warning { --c: var(--sp-warn, #f5b84b); }
.cc-toast.is-info { --c: #8aa8ff; }
.cc-toast-ico {
	width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
	background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: var(--fs-md);
}
.cc-toast-body { flex: 1; min-width: 0; padding-top: 3px; }
.cc-toast-title { display: block; font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.cc-toast-msg { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--sp-muted, #a3a9b5); word-break: break-word; }
.cc-toast-msg b, .cc-toast-msg strong { color: var(--sp-text, #eceef2); font-weight: 600; }
.cc-toast-msg small { font-size: inherit; }
.cc-toast-x {
	width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent;
	color: var(--sp-muted, #a3a9b5); display: grid; place-items: center; font-size: var(--fs-lg); cursor: pointer;
}
.cc-toast-x:hover { background: var(--sp-surface-2, rgba(255,255,255,.06)); color: var(--sp-text, #eceef2); }
.cc-toast-bar {
	position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: .7;
	transform-origin: left; animation: ccToastBar var(--cc-toast-ms, 4s) linear forwards;
}
.cc-toast.is-paused .cc-toast-bar { animation-play-state: paused; }
@keyframes ccToastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ccToastOut { to { opacity: 0; transform: translateX(16px); } }
@keyframes ccToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) {
	.cc-toasts { top: 68px; right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-toast, .cc-toast.is-out { animation-duration: .01s; }
}

.sp-admin-btn { position: relative; }
.sp-admin-count {
	position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: #ff5c7a; color: #fff; font-size: var(--fs-2xs); font-weight: 700;
	line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--sp-bg, #111);
}
.sp-admin-count.is-forum { top: auto; bottom: -6px; background: #4f8cff; }
.sp-admin-count[hidden] { display: none; }
.sp-admin-count:not([hidden]) { animation: spAdmPulse 1.6s ease-in-out infinite; }
@keyframes spAdmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.sp-admin-snd { padding-inline: 10px; }
.sp-sso-bar { background: rgba(79, 140, 255, .12); border-bottom: 1px solid rgba(79, 140, 255, .3); font-size: var(--fs-sm); }
.sp-sso-bar .sp-wrap { display: flex; align-items: center; gap: 8px; padding-block: 7px; }
.sp-sso-bar .sp-wrap > i { color: #8aa8ff; font-size: 1.1em; }
.sp-sso-bar span { flex: 1; color: var(--bs-body-color); }
.sp-sso-bar a { white-space: nowrap; font-weight: 600; color: #ff8fa3; text-decoration: none; }
.sp-sso-bar a i { margin-right: 4px; }
.sp-admin-snd i { color: #4fd1a5; }
.sp-admin-snd.is-off i { color: var(--bs-secondary-color); }
@media (prefers-reduced-motion: reduce) { .sp-admin-count:not([hidden]) { animation: none; } }
.sp-lang-menu { min-width: 170px; }
.sp-lang-menu .dropdown-item.active { background: var(--sp-surface-3) !important; color: var(--sp-mint) !important; }

/* =============================================================
 * Forum
 * =========================================================== */
.fr-subnav-wrap { padding-top: 18px; }
.fr-subnav {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; padding: 6px;
}
.fr-subnav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.fr-subnav-links a {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
	color: var(--sp-muted) !important; font-weight: 600; font-size: var(--fs-base); text-decoration: none !important; position: relative;
}
.fr-subnav-links a:hover { color: var(--sp-text) !important; background: var(--sp-surface-2); }
.fr-subnav-links a.active { color: var(--sp-text) !important; background: var(--sp-surface-3); }
.fr-subnav-links a.active i { color: var(--sp-mint); }
.fr-nav-badge { background: #ff5c7a; color: #fff; border-radius: 999px; font-size: var(--fs-2xs); padding: 1px 6px; margin-left: 2px; }
.fr-subnav-search { display: flex; align-items: center; gap: 8px; background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: 10px; padding: 0 12px; min-width: 240px; flex: 0 1 320px; }
.fr-subnav-search i { color: var(--sp-muted); }
.fr-subnav-search input { background: transparent; border: 0; outline: 0; color: var(--sp-text); height: 38px; width: 100%; font-size: var(--fs-base); }

.fr-flash { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; margin-top: 12px; font-weight: 600; font-size: var(--fs-base); }
.fr-flash-success { background: rgba(var(--sp-mint-rgb), .12); border: 1px solid rgba(var(--sp-mint-rgb), .35); color: var(--sp-mint); }
.fr-flash-error { background: rgba(255,92,122,.12); border: 1px solid rgba(255,92,122,.35); color: #ff8fa3; }

.fr-hero {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin: 18px 0 22px; padding: 28px; border-radius: var(--sp-radius);
	background: radial-gradient(1200px 300px at 0% 0%, rgba(var(--sp-blue-rgb), .18), transparent 60%), radial-gradient(900px 260px at 100% 100%, rgba(var(--sp-mint-rgb), .14), transparent 60%), var(--sp-surface);
	border: 1px solid var(--sp-border);
}
.fr-hero h1 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 800; color: var(--sp-text); margin: 6px 0; }
.fr-hero p { color: var(--sp-muted); margin: 0; max-width: 640px; }
.fr-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-hero-sm { padding: 22px 26px; }
.fr-my-totals { display: flex; gap: 18px; flex-wrap: wrap; }
.fr-my-totals > div { display: flex; flex-direction: column; gap: 4px; }
.fr-my-totals span { color: var(--sp-muted); font-size: var(--fs-sm); }
.fr-my-totals b { color: var(--sp-text); font-size: var(--fs-xl); }

.fr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; padding-bottom: 40px; }
.fr-main { min-width: 0; }
.fr-narrow { max-width: 1040px; padding-bottom: 40px; }
.fr-page-title { font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); margin: 4px 0 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-block { margin-bottom: 24px; }
.fr-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fr-block-head h2 { font-size: var(--fs-xl); font-weight: 800; color: var(--sp-text); margin: 0; display: flex; align-items: center; gap: 8px; }
.fr-block-head h2 i { color: var(--sp-mint); }

/* category list */
.fr-cats { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; }
.fr-cat { display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px 220px; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--sp-border); }
.fr-cat:first-child { border-top: 0; }
.fr-cat:hover { background: var(--sp-surface-2); }
.fr-cat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--sp-blue-rgb), .12); color: var(--sp-blue); font-size: var(--fs-2xl); }
.fr-cat-icon.lg { width: 60px; height: 60px; font-size: var(--fs-4xl); border-radius: 16px; flex-shrink: 0; }
.fr-cat-name { color: var(--sp-text) !important; font-weight: 700; text-decoration: none !important; margin-right: 6px; }
.fr-cat-name:hover { color: var(--sp-mint) !important; }
.fr-cat-desc { color: var(--sp-muted); font-size: var(--fs-md); margin-top: 2px; }
.fr-cat-stats { display: flex; gap: 16px; }
.fr-cat-stats div, .fr-trow-stats div { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.fr-cat-stats b, .fr-trow-stats b { color: var(--sp-text); font-size: var(--fs-lg); }
.fr-cat-stats span, .fr-trow-stats span { color: var(--sp-muted); font-size: var(--fs-xs); }
.fr-cat-last { min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-md); }
.fr-cat-last-title { color: var(--sp-text) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fr-cat-last-title:hover { color: var(--sp-mint) !important; }
.fr-cat-last span { color: var(--sp-muted); }
.fr-cat-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); margin-bottom: 14px; }
.fr-cat-hero h1 { font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); margin: 0 0 4px; }
.fr-cat-hero p { color: var(--sp-muted); margin: 0 0 6px; }

.fr-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--sp-surface-3); color: var(--sp-muted) !important; text-decoration: none !important; vertical-align: middle; }
a.fr-tag:hover { color: var(--sp-mint) !important; }
.fr-tag-op { background: rgba(var(--sp-blue-rgb), .16); color: var(--sp-blue) !important; }

/* thread rows */
.fr-tlist { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; }
.fr-trow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 130px 150px; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--sp-border); }
.fr-trow:first-child { border-top: 0; }
.fr-trow:hover { background: var(--sp-surface-2); }
.fr-trow.is-pinned { background: rgba(var(--sp-mint-rgb), .05); }
.fr-trow-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sp-grad); color: var(--sp-on-accent); font-weight: 800; }
.fr-trow-main { min-width: 0; }
.fr-trow-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fr-trow-title a { color: var(--sp-text) !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-trow-title a:hover { color: var(--sp-mint) !important; }
.fr-trow-meta { display: flex; flex-wrap: wrap; gap: 5px; color: var(--sp-muted); font-size: var(--fs-sm); margin-top: 2px; }
.fr-trow-meta a { color: var(--sp-muted) !important; text-decoration: none !important; }
.fr-trow-meta a:hover { color: var(--sp-text) !important; }
.fr-trow-cat { color: var(--sp-blue) !important; }
.fr-trow-stats { display: flex; gap: 10px; justify-content: center; }
.fr-trow-last { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-sm); min-width: 0; }
.fr-trow-last a { color: var(--sp-text) !important; text-decoration: none !important; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-trow-last span { color: var(--sp-muted); }
.fr-ic-pin { color: var(--sp-mint); }
.fr-ic-lock { color: #f5c451; }
.fr-ic-hot { color: #ff7a59; }

/* prefixes + ranks */
.fr-prefix { display: inline-flex; align-items: center; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; white-space: nowrap; }
.fr-prefix-release { background: rgba(var(--sp-mint-rgb), .16); color: var(--sp-mint); }
.fr-prefix-tutorial { background: rgba(var(--sp-blue-rgb), .16); color: var(--sp-blue); }
.fr-prefix-question { background: rgba(245,196,81,.16); color: #f5c451; }
.fr-prefix-discussion { background: rgba(155,161,173,.18); color: #c3c8d2; }
.fr-prefix-request { background: rgba(255,122,182,.16); color: #ff7ab6; }
.fr-prefix-update { background: rgba(255,122,89,.16); color: #ff9a7f; }
.fr-rank {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm);
	color: var(--rank); background: color-mix(in srgb, var(--rank) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rank) 38%, transparent); white-space: nowrap;
}
.fr-rank-sm { font-size: var(--fs-2xs); padding: 2px 8px; }

/* sidebar */
.fr-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.fr-side-box h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--sp-text); margin: 0 0 12px; }
.fr-side-line { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-md); padding: 6px 0; border-top: 1px dashed var(--sp-border); }
.fr-side-line:first-of-type { border-top: 0; }
.fr-side-line span { color: var(--sp-muted); }
.fr-side-line b, .fr-side-line a { color: var(--sp-text) !important; text-decoration: none !important; }
.fr-side-next { font-size: var(--fs-md); color: var(--sp-muted); margin-top: 8px; }
.fr-side-next b { color: var(--sp-mint); }
.fr-online { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-online a { font-size: var(--fs-sm); padding: 3px 9px; border-radius: 999px; background: var(--sp-surface-2); color: var(--sp-text) !important; text-decoration: none !important; }
.fr-online a.is-admin { color: var(--sp-danger) !important; }

/* thread page */
.fr-thread-head { margin-bottom: 14px; }
.fr-thread-head h1 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 800; color: var(--sp-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.fr-thread-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--sp-muted); font-size: var(--fs-md); align-items: center; }
.fr-thread-meta i { margin-right: 4px; }
.fr-thread-meta a { color: var(--sp-text) !important; text-decoration: none !important; }
.fr-modbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 12px; margin-bottom: 14px; background: rgba(255,107,107,.07); border: 1px dashed rgba(255,107,107,.35); }
.fr-modbar form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.fr-modbar-label { font-weight: 800; font-size: var(--fs-sm); color: var(--sp-danger); margin-right: 6px; display: inline-flex; gap: 6px; align-items: center; }
.fr-modbar select { background: var(--sp-bg); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 8px; height: 32px; font-size: var(--fs-md); max-width: 190px; }
.fr-posts { display: flex; flex-direction: column; gap: 14px; }
.fr-post { display: grid; grid-template-columns: 190px minmax(0, 1fr); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; scroll-margin-top: 90px; }
.fr-post.is-op { border-color: rgba(var(--sp-mint-rgb), .35); }
.fr-post:target { box-shadow: 0 0 0 2px var(--sp-mint); }
.fr-post-author { padding: 18px 14px; background: var(--sp-surface-2); border-right: 1px solid var(--sp-border); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fr-post-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sp-border-strong); }
.fr-post-author-info { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.fr-post-name { color: var(--sp-text) !important; font-weight: 800; text-decoration: none !important; word-break: break-all; }
.fr-post-stats { width: 100%; margin: 6px 0 0; font-size: var(--fs-sm); }
.fr-post-stats div { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px dashed var(--sp-border); }
.fr-post-stats dt { color: var(--sp-muted); font-weight: 500; }
.fr-post-stats dd { margin: 0; color: var(--sp-text); font-weight: 700; }
.fr-post-main { display: flex; flex-direction: column; min-width: 0; }
.fr-post-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--sp-border); color: var(--sp-muted); font-size: var(--fs-sm); }
.fr-post-head i { margin-right: 4px; }
.fr-post-num { margin-left: auto; color: var(--sp-muted) !important; text-decoration: none !important; font-weight: 700; }
.fr-edited { font-style: italic; }
.fr-content { padding: 18px; color: var(--sp-text); line-height: 1.7; word-wrap: break-word; overflow-wrap: anywhere; flex: 1; }
.fr-content a { color: var(--sp-blue) !important; }
.fr-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; }
.fr-content ul { padding-left: 1.3rem; margin: 6px 0; }
.fr-content pre, .fr-code { background: #16171a; border: 1px solid var(--sp-border); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: var(--fs-md); color: #d7e0ea; margin: 8px 0; white-space: pre; }
.fr-content blockquote, .fr-quote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--sp-blue); background: rgba(var(--sp-blue-rgb), .07); border-radius: 0 10px 10px 0; color: #cfd3db; }
.fr-quote-by, .fr-quote cite { display: block; font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: var(--sp-blue); margin-bottom: 4px; }
.fr-content details, .fr-spoiler { margin: 8px 0; border: 1px dashed var(--sp-border-strong); border-radius: 10px; padding: 8px 12px; }
.fr-content details summary { cursor: pointer; color: var(--sp-mint); font-weight: 700; font-size: var(--fs-md); }
.fr-signature { margin: 0 18px; padding: 10px 0; border-top: 1px dashed var(--sp-border); color: var(--sp-muted); font-size: var(--fs-md); max-height: 140px; overflow: hidden; }
.fr-signature img { max-height: 90px; }
.fr-post-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--sp-border); }
.fr-act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; border: 0; background: transparent; color: var(--sp-muted) !important; font-size: var(--fs-sm); font-weight: 600; text-decoration: none !important; cursor: pointer; list-style: none; }
.fr-act::-webkit-details-marker { display: none; }
.fr-act:hover { background: var(--sp-surface-3); color: var(--sp-text) !important; }
.fr-act.is-static { cursor: default; }
.fr-act.is-static:hover { background: transparent; }
.fr-like.is-liked { color: #ff6b8a !important; }
.fr-act-danger:hover { color: #ff8fa3 !important; background: rgba(255,92,122,.1); }
.fr-report { position: relative; }
.fr-report-form { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; width: min(320px, 80vw); padding: 12px; border-radius: 12px; background: var(--sp-surface-2); border: 1px solid var(--sp-border-strong); box-shadow: var(--sp-shadow); display: flex; flex-direction: column; gap: 8px; }
.fr-report-form textarea { width: 100%; background: var(--sp-bg); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 8px; padding: 8px; font-size: var(--fs-md); }
.fr-reply { margin: 22px 0 40px; }
.fr-reply-title { font-size: var(--fs-xl); font-weight: 800; color: var(--sp-text); display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }

/* editor + forms */
.fr-label { display: block; color: var(--sp-text); font-weight: 700; font-size: var(--fs-md); margin-bottom: 6px; }
.fr-input, .fr-select, .fr-editor textarea {
	width: 100%; background: var(--sp-bg); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-base); outline: 0;
}
.fr-input:focus, .fr-select:focus, .fr-editor textarea:focus { border-color: var(--sp-mint); box-shadow: 0 0 0 3px rgba(var(--sp-mint-rgb), .12); }
.fr-select { height: 44px; padding: 0 10px; }
.fr-editor { border: 1px solid var(--sp-border); border-radius: 12px; overflow: hidden; background: var(--sp-bg); }
.fr-editor textarea { border: 0; border-radius: 0; resize: vertical; min-height: 140px; font-family: inherit; line-height: 1.6; }
.fr-editor textarea:focus { box-shadow: none; }
.fr-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--sp-surface-2); border-bottom: 1px solid var(--sp-border); align-items: center; }
.fr-toolbar button { border: 0; background: transparent; color: var(--sp-muted); width: 34px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; }
.fr-toolbar button:hover { background: var(--sp-surface-3); color: var(--sp-text); }
.fr-toolbar .fr-preview-btn { width: auto; padding: 0 12px; display: inline-flex; gap: 6px; font-weight: 600; font-size: var(--fs-md); }
.fr-toolbar .fr-preview-btn.active { background: var(--sp-grad); color: var(--sp-on-accent); }
.fr-toolbar-sep { width: 1px; height: 20px; background: var(--sp-border); margin: 0 4px; }
.fr-toolbar-grow { flex: 1; }
.fr-preview { padding: 14px 16px; min-height: 140px; color: var(--sp-text); line-height: 1.7; }
.fr-editor-foot { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; font-size: var(--fs-xs); color: var(--sp-muted); border-top: 1px solid var(--sp-border); background: var(--sp-surface-2); }
.fr-form-tips { display: flex; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(245,196,81,.07); color: #e9cf85; font-size: var(--fs-md); }

/* gate card */
.fr-gate { display: flex; gap: 16px; padding: 20px; border-radius: 16px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(var(--sp-blue-rgb), .1), rgba(var(--sp-mint-rgb), .08)); border: 1px solid var(--sp-border-strong); }
.fr-gate-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: var(--sp-grad); color: var(--sp-on-accent); font-size: var(--fs-3xl); }
.fr-gate-body { flex: 1; min-width: 0; }
.fr-gate-body b { color: var(--sp-text); font-size: var(--fs-xl); }
.fr-gate-body p { color: var(--sp-muted); margin: 4px 0 12px; font-size: var(--fs-base); }
.fr-gate-req { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.fr-gate-req > div:not(.fr-gate-or) { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-text); font-size: var(--fs-md); }
.fr-gate-or, .fr-rank-or { color: var(--sp-muted); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; }
.fr-gate-wall { padding: 24px; align-items: flex-start; }
.fr-narrow > .fr-gate-wall { margin: 28px 0 40px; }
.fr-wall-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.fr-wall-list li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-text); font-size: var(--fs-sm); }
.fr-wall-list i { color: var(--sp-mint); }
.fr-cat-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-muted); font-weight: 600; font-size: var(--fs-sm); }
.fr-item-forum-empty .sp-muted { display: block; margin-top: 4px; }
.fr-progress { height: 8px; border-radius: 999px; background: var(--sp-surface-3); overflow: hidden; }
.fr-progress span { display: block; height: 100%; background: var(--sp-grad); border-radius: inherit; }

/* ranks page */
.fr-how { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); margin-bottom: 20px; }
.fr-how > div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.fr-how i { font-size: var(--fs-3xl); color: var(--sp-mint); }
.fr-how b { color: var(--sp-text); }
.fr-how span { color: var(--sp-muted); font-size: var(--fs-md); }
.fr-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.fr-rank-card { position: relative; padding: 18px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 10px; }
.fr-rank-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 16px 16px 0 0; background: var(--rank); }
.fr-rank-card.is-mine { border-color: var(--rank); box-shadow: 0 0 0 1px var(--rank); }
.fr-rank-card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: var(--fs-3xl); color: var(--rank); background: color-mix(in srgb, var(--rank) 14%, transparent); }
.fr-rank-card-name { font-weight: 800; font-size: var(--fs-xl); color: var(--rank); }
.fr-rank-req { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); color: var(--sp-text); }
.fr-rank-req i { margin-right: 6px; color: var(--sp-muted); }
.fr-rank-perm { font-size: var(--fs-sm); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.fr-rank-perm.on { color: var(--sp-mint); }
.fr-rank-perm.off { color: var(--sp-muted); }
.fr-rank-pct { font-size: var(--fs-xs); color: var(--sp-muted); }
.fr-rank-done { font-size: var(--fs-sm); color: var(--sp-mint); font-weight: 700; display: flex; gap: 6px; }
.fr-rank-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fr-rank-perms { list-style: none; padding: 10px 0 0; margin: 0; border-top: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); }
.fr-rank-perms li { display: flex; align-items: center; gap: 7px; }
.fr-rank-perms li.on { color: var(--sp-text); }
.fr-rank-perms li.on i { color: var(--sp-mint); }
.fr-rank-perms li.off { color: var(--sp-muted); opacity: .75; }
.fr-goal { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--rank) 12%, var(--sp-surface)), var(--sp-surface) 70%); border: 1px solid color-mix(in srgb, var(--rank) 35%, var(--sp-border)); }
.fr-goal-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; display: grid; place-items: center; font-size: var(--fs-3xl); color: var(--rank); background: color-mix(in srgb, var(--rank) 16%, transparent); }
.fr-goal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-goal-main b { color: var(--sp-text); font-size: var(--fs-lg); }
.fr-goal-main > span { color: var(--sp-muted); font-size: var(--fs-md); }
.fr-goal-main small { color: var(--sp-muted); font-size: var(--fs-sm); display: flex; gap: 6px; align-items: center; }
.fr-goal-main small i { color: var(--rank); }
.fr-goal-pct { font-size: var(--fs-2xl); font-weight: 800; color: var(--rank); }
.fr-ranks-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.fr-ranks-foot b { color: var(--sp-text); }

/* profile + members */
.fr-profile { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 22px; border-radius: var(--sp-radius); margin: 4px 0 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--rank) 14%, var(--sp-surface)), var(--sp-surface) 60%); border: 1px solid var(--sp-border); }
.fr-profile-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rank); }
.fr-profile-main { flex: 1; min-width: 220px; }
.fr-profile-main h1 { font-size: var(--fs-4xl); font-weight: 800; color: var(--sp-text); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.fr-profile-stats { display: flex; gap: 10px; }
.fr-profile-stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 12px; background: var(--sp-sunken); border: 1px solid var(--sp-border); min-width: 84px; }
.fr-profile-stats b { color: var(--sp-text); font-size: var(--fs-2xl); }
.fr-profile-stats span { color: var(--sp-muted); font-size: var(--fs-xs); }
.fr-online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5d636e; border: 2px solid var(--sp-surface); }
.fr-online-dot.on { background: #3ddc84; }
.fr-activity { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; }
.fr-activity-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-top: 1px solid var(--sp-border); text-decoration: none !important; }
.fr-activity-item:first-child { border-top: 0; }
.fr-activity-item:hover { background: var(--sp-surface-2); }
.fr-activity-item b { color: var(--sp-text); }
.fr-activity-item span { color: var(--sp-muted); font-size: var(--fs-md); }
.fr-activity-item small { color: var(--sp-muted); font-size: var(--fs-xs); }
.fr-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.fr-member { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); text-decoration: none !important; transition: transform .15s, border-color .15s; }
.fr-member:hover { transform: translateY(-2px); border-color: var(--rank); }
.fr-member-avatar { position: relative; }
.fr-member-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rank); }
.fr-member-avatar .fr-online-dot { position: absolute; right: 2px; bottom: 2px; }
.fr-member-name { color: var(--sp-text); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-member-stats { display: flex; gap: 12px; color: var(--sp-muted); font-size: var(--fs-sm); }
.fr-member-stats i { margin-right: 4px; }
.fr-searchbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fr-searchbar-input { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.fr-searchbar-input i { color: var(--sp-muted); }
.fr-searchbar-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--sp-text); height: 44px; }
.fr-searchbar .fr-select { width: auto; min-width: 200px; background: var(--sp-surface); }

/* notifications */
.fr-notifs { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.fr-notif { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--sp-border); text-decoration: none !important; color: var(--sp-text) !important; }
.fr-notif:first-child { border-top: 0; }
.fr-notif:hover { background: var(--sp-surface-2); }
.fr-notif.is-unread { background: rgba(var(--sp-mint-rgb), .06); box-shadow: inset 3px 0 0 var(--sp-mint); }
.fr-notif-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.fr-notif-icon.like { background: rgba(255,107,138,.14); color: #ff6b8a; }
.fr-notif-icon.reply { background: rgba(var(--sp-blue-rgb), .14); color: var(--sp-blue); }
.fr-notif-text { display: flex; flex-direction: column; font-size: var(--fs-base); }
.fr-notif-text small { color: var(--sp-muted); font-size: var(--fs-sm); }

/* item page discussion */
.fr-item-forum { margin-top: 28px; }
.fr-item-forum-empty { padding: 28px 16px; }

/* admin */
.fr-admin .sp-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; margin-top: 0; }
.fr-admin-pane[hidden] { display: none !important; }
.fr-admin-h { font-size: var(--fs-lg); font-weight: 800; color: var(--sp-text); margin-bottom: 10px; }
.fr-admin-help { padding-left: 1.1rem; color: var(--sp-muted); font-size: var(--fs-base); margin: 0; }
.fr-admin-help li { margin-bottom: 6px; }
.fr-admin-list { display: flex; flex-direction: column; gap: 8px; }
.fr-admin-item { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; padding: 10px 12px; }
.fr-admin-row { display: grid; gap: 8px; align-items: center; margin: 0; }
.fr-admin-row .fr-input, .fr-admin-row .fr-select { height: 38px; padding: 0 10px; font-size: var(--fs-md); }
.fr-admin-cat { grid-template-columns: 1.3fr 1.6fr 1fr 1.2fr .9fr 70px 48px; }
.fr-admin-rank { grid-template-columns: 1.3fr 60px 1fr 1fr 1fr .8fr .8fr 70px 48px; }
.fr-admin-row-head { padding: 0 12px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.fr-admin-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-sm); color: var(--sp-muted); }
.fr-admin-meta a { color: var(--sp-text) !important; }
.fr-admin-meta form { margin: 0; }
.fr-admin-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr-admin-btns form { margin: 0; }
.fr-admin-btns .sp-btn { padding: 8px 12px; }
.fr-color { padding: 2px !important; cursor: pointer; }
.fr-check { display: inline-flex; gap: 6px; align-items: center; color: var(--sp-text); font-size: var(--fs-md); }
.fr-report-item { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.fr-report-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.fr-report-main a { color: var(--sp-text) !important; }
.fr-report-reason { color: #e9cf85; font-size: var(--fs-base); }
.fr-btn-danger:hover { color: #ff8fa3 !important; border-color: rgba(255,92,122,.5) !important; }
.sp-pill-count.is-alert { background: #ff5c7a; color: #fff; }

@media (max-width: 1199px) {
	.fr-layout { grid-template-columns: minmax(0, 1fr); }
	.fr-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
	.fr-admin-cat, .fr-admin-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fr-admin-row-head { display: none; }
}
@media (max-width: 991px) {
	.fr-cat { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.fr-cat-last { display: none; }
	.fr-trow { grid-template-columns: 36px minmax(0, 1fr) auto; }
	.fr-trow-last { display: none; }
	.fr-admin .sp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.fr-subnav-search { flex: 1 1 100%; min-width: 0; }
	.fr-subnav-links a span { display: none; }
	.fr-subnav-links a { padding: 8px 11px; font-size: var(--fs-lg); }
	.fr-hero { padding: 20px; }
	.fr-cat-stats div:last-child { display: none; }
	.fr-trow { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
	.fr-trow-avatar { display: none; }
	.fr-trow-stats div:last-child { display: none; }
	.fr-post { grid-template-columns: 1fr; }
	.fr-post-author { flex-direction: row; text-align: left; border-right: 0; border-bottom: 1px solid var(--sp-border); padding: 12px 14px; }
	.fr-post-avatar { width: 46px; height: 46px; }
	.fr-post-author-info { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.fr-post-stats { display: none; }
	.fr-content { padding: 14px; }
	.fr-how { grid-template-columns: 1fr; }
	.fr-profile-stats { width: 100%; }
	.fr-profile-stats div { flex: 1; min-width: 0; }
	.fr-gate { flex-direction: column; }
	.fr-searchbar .fr-select { flex: 1; }
	.fr-admin-cat, .fr-admin-rank { grid-template-columns: 1fr; }
	.fr-admin .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-lang-btn span { display: none; }
	.sp-lang-btn { width: 38px; padding: 0; justify-content: center; }
}

/* Header: keep labels on one line in every language */
.sp-nav a, .sp-brand span, .sp-point-chip, .sp-header-right .sp-btn, .sp-user-name { white-space: nowrap; }
.sp-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.sp-header-right .sp-admin-btn { font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; justify-content: center; }
.sp-header-right .sp-admin-btn i { font-size: var(--fs-base); }
.sp-header .sp-nav a { padding: 8px 11px; }
.sp-header .sp-header-right { gap: 8px; }
@media (max-width: 1279px) {
	.sp-nav a:nth-child(n+4) { display: none; }
}
@media (max-width: 1099px) {
	.sp-header-right .sp-admin-btn { display: none !important; }
}
@media (max-width: 479px) {
	.sp-header .sp-brand span { display: none; }
	.sp-header-right { gap: 6px; }
}

/* ---------- Notification center ---------- */
.fr-nc { padding-bottom: 40px; }
.fr-nc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.fr-nc-title { display: flex; align-items: center; gap: 14px; }
.fr-nc-title h1 { margin: 0; font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); }
.fr-nc-sub { margin: 2px 0 0; color: var(--sp-muted); font-size: var(--fs-base); }
.fr-nc-bell {
	width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: var(--fs-3xl);
	color: var(--sp-blue); background: linear-gradient(135deg, rgba(var(--sp-blue-rgb), .18), rgba(var(--sp-mint-rgb), .12)); border: 1px solid var(--sp-border-strong);
}
.fr-nc-bell.ring i { animation: frBellRing 2.4s ease-in-out infinite; transform-origin: 50% 10%; color: #ffc861; }
@keyframes frBellRing { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-5deg); } }
.fr-nc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fr-nc-actions form { margin: 0; }
.fr-nc-actions .sp-btn { padding: 8px 14px; font-size: var(--fs-md); }
.fr-nc-actions .sp-btn:disabled { opacity: .45; cursor: not-allowed; }
.fr-nc-danger:not(:disabled):hover { color: #ff7b86 !important; border-color: rgba(255,95,109,.4) !important; }

.fr-nc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-bottom: 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; scrollbar-width: none; }
.fr-nc-tabs::-webkit-scrollbar { display: none; }
.fr-nc-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 10px; white-space: nowrap; color: var(--sp-muted) !important; font-weight: 600; font-size: var(--fs-md); text-decoration: none !important; transition: background .15s, color .15s; }
.fr-nc-tab i { font-size: var(--fs-md); }
.fr-nc-tab-unread i { font-size: .5rem; color: var(--sp-mint); }
.fr-nc-tab-reply i { color: var(--sp-blue); }
.fr-nc-tab-like i { color: #ff6b8a; }
.fr-nc-tab em { font-style: normal; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px; background: var(--sp-surface-2); color: var(--sp-muted); }
.fr-nc-tab:hover { color: var(--sp-text) !important; background: var(--sp-surface-2); }
.fr-nc-tab.active { color: var(--sp-text) !important; background: var(--sp-surface-3); }
.fr-nc-tab.active em { background: var(--sp-mint); color: var(--sp-on-accent); }

.fr-nc-live {
	display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px 10px 14px; border-radius: 12px;
	background: linear-gradient(135deg, rgba(var(--sp-blue-rgb), .16), rgba(var(--sp-mint-rgb), .12)); border: 1px solid var(--sp-border-strong);
	color: var(--sp-text); font-weight: 600; font-size: var(--fs-base); animation: frSlideIn .3s ease;
}
.fr-nc-live[hidden] { display: none; }
.fr-nc-live > i { color: #ffc861; }
.fr-nc-live span { flex: 1; }
.fr-nc-live .sp-btn { padding: 6px 12px; font-size: var(--fs-sm); }
@keyframes frSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.fr-nc-group { margin-bottom: 18px; padding: 0 !important; }
.fr-nc-day { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); margin: 0 0 8px 4px; }
.fr-nc-list { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; }
.fr-nc-item { position: relative; display: flex; align-items: center; border-top: 1px solid var(--sp-border); transition: background .15s, opacity .25s, transform .25s; }
.fr-nc-item:first-child { border-top: 0; }
.fr-nc-item:hover { background: var(--sp-surface-2); }
.fr-nc-item.is-unread { background: rgba(var(--sp-mint-rgb), .055); }
.fr-nc-item.is-unread::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sp-mint); }
.fr-nc-item.is-leaving { opacity: 0; transform: translateX(24px); }
.fr-nc-link { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 14px 8px 14px 16px; color: var(--sp-text) !important; text-decoration: none !important; }
.fr-nc-avatars { position: relative; display: flex; flex-shrink: 0; padding-right: 4px; }
.fr-nc-avatars img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sp-surface); background: var(--sp-surface-2); }
.fr-nc-avatars img + img { margin-left: -16px; }
.fr-nc-type { position: absolute; right: -2px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs); color: #fff; border: 2px solid var(--sp-surface); }
.type-reply .fr-nc-type { background: #5b7cff; }
.type-like .fr-nc-type { background: #ff5c7a; }
.fr-nc-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fr-nc-text { font-size: var(--fs-base); line-height: 1.45; color: var(--sp-muted); }
.fr-nc-text b, .fr-nc-thread { color: var(--sp-text); font-weight: 700; }
.fr-nc-item:not(.is-unread) .fr-nc-text b, .fr-nc-item:not(.is-unread) .fr-nc-thread { font-weight: 600; }
.fr-nc-quote { display: block; padding: 7px 11px; border-radius: 10px; background: var(--sp-surface-2); border-left: 3px solid #5b7cff; color: var(--sp-text); font-size: var(--fs-md); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fr-nc-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--sp-muted); font-size: var(--fs-xs); }
.fr-nc-meta i { font-size: var(--fs-xs); }
.fr-nc-item.is-unread .fr-nc-meta > i:first-child, .fr-nc-item.is-unread .fr-nc-meta { color: var(--sp-mint); }
.fr-nc-tools { display: flex; gap: 4px; padding-right: 12px; opacity: 0; transition: opacity .15s; }
.fr-nc-item:hover .fr-nc-tools, .fr-nc-item:focus-within .fr-nc-tools { opacity: 1; }
.fr-nc-tool { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--sp-border-strong); background: var(--sp-surface); color: var(--sp-muted); display: grid; place-items: center; font-size: var(--fs-md); cursor: pointer; }
.fr-nc-tool:hover { color: var(--sp-mint); background: var(--sp-surface-3); }
.fr-nc-del:hover { color: #ff7b86; }
.fr-nc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-mint); box-shadow: 0 0 0 4px rgba(var(--sp-mint-rgb), .15); margin-right: 16px; flex-shrink: 0; opacity: 0; }
.fr-nc-item.is-unread .fr-nc-dot { opacity: 1; }
.fr-nc-item:hover .fr-nc-dot { display: none; }

.fr-nc-more { text-align: center; margin: 4px 0 18px; }
.fr-nc-more small { color: var(--sp-muted); }
.fr-nc-empty { text-align: center; padding: 48px 20px; background: var(--sp-surface); border: 1px dashed var(--sp-border-strong); border-radius: 18px; }
.fr-nc-empty-icon { width: 72px; height: 72px; border-radius: 22px; display: inline-grid; place-items: center; font-size: var(--fs-5xl); color: var(--sp-blue); background: linear-gradient(135deg, rgba(var(--sp-blue-rgb), .18), rgba(var(--sp-mint-rgb), .12)); margin-bottom: 14px; }
.fr-nc-empty b { display: block; color: var(--sp-text); font-size: var(--fs-xl); }
.fr-nc-empty p { color: var(--sp-muted); font-size: var(--fs-base); max-width: 420px; margin: 6px auto 16px; }
.fr-nc-tip { display: flex; gap: 8px; align-items: flex-start; color: var(--sp-muted); font-size: var(--fs-sm); margin: 8px 4px 0; }
.fr-nc-tip i { color: #ffc861; margin-top: 2px; }

@media (hover: none), (max-width: 640px) {
	.fr-nc-tools { opacity: 1; flex-direction: column; padding-right: 10px; }
	.fr-nc-tool { width: 30px; height: 30px; }
	.fr-nc-dot { display: none; }
}
@media (max-width: 640px) {
	.fr-nc-actions { width: 100%; }
	.fr-nc-actions form { flex: 1; }
	.fr-nc-actions .sp-btn { width: 100%; justify-content: center; }
	.fr-nc-tab span { display: none; }
	.fr-nc-tab.active span { display: inline; }
	.fr-nc-link { padding-left: 12px; gap: 10px; }
	.fr-nc-avatars img { width: 38px; height: 38px; }
}

/* ---------- Member hub ---------- */
.hub-section { padding-bottom: 1.25rem !important; }
.hub { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 16px; box-shadow: var(--sp-shadow); }
.hub a { text-decoration: none !important; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hub-user { display: flex; align-items: center; gap: 14px; padding: 4px 8px 4px 4px; border-radius: 16px; color: var(--sp-text) !important; min-width: 0; transition: background .15s; }
.hub-user:hover { background: var(--sp-surface-2); }
.hub-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; padding: 2px; background: var(--sp-grad); flex-shrink: 0; }
.hub-user-info { display: flex; flex-direction: column; min-width: 0; }
.hub-user-info small { color: var(--sp-muted); font-size: var(--fs-sm); }
.hub-user-info b { font-size: var(--fs-xl); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-user-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.hub-email { color: var(--sp-muted); font-size: var(--fs-sm); }

.hub-wallet { display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); color: var(--sp-text) !important; transition: border-color .15s; }
.hub-wallet:hover { border-color: rgba(var(--sp-mint-rgb), .5); }
.hub-wallet-text { display: flex; flex-direction: column; line-height: 1.25; }
.hub-wallet-text small { color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; }
.hub-wallet-text b { font-size: var(--fs-xl); color: var(--sp-mint); white-space: nowrap; }
.hub-wallet-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: 11px; font-weight: 700; font-size: var(--fs-md); white-space: nowrap; color: var(--sp-on-accent); background: var(--sp-grad); transition: filter .15s; }
.hub-wallet:hover .hub-wallet-btn { filter: brightness(1.08); }

.hub-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--sp-blue-rgb), .1), rgba(var(--sp-mint-rgb), .08)); border: 1px dashed var(--sp-border-strong); }
.hub-steps-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-md); color: var(--sp-text); margin-right: 6px; }
.hub-steps-title i { color: var(--sp-warn); }
.hub-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); color: var(--sp-text) !important; font-size: var(--fs-md); font-weight: 600; transition: border-color .15s; }
.hub-step:hover { border-color: var(--sp-blue); }
.hub-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; background: var(--sp-surface-3); color: var(--sp-text); }
.hub-step.is-done .hub-step-n { background: var(--sp-mint); color: var(--sp-on-accent); }
.hub-step.is-done { color: var(--sp-muted) !important; }
.hub-steps-arrow { color: var(--sp-muted); font-size: var(--fs-sm); }

.hub-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hub-note { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-md); color: var(--sp-text) !important; background: rgba(var(--sp-blue-rgb), .08); border: 1px solid rgba(var(--sp-blue-rgb), .25); transition: border-color .15s; }
.hub-note > i:first-child { color: var(--sp-blue); }
.hub-note span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-note > i:last-child { color: var(--sp-muted); font-size: var(--fs-sm); }
.hub-note:hover { border-color: var(--sp-blue); }
.hub-note.is-warn { background: color-mix(in srgb, var(--sp-warn) 10%, transparent); border-color: color-mix(in srgb, var(--sp-warn) 35%, transparent); }
.hub-note.is-warn > i:first-child, .hub-note.is-warn b { color: var(--sp-warn); }
.hub-note.is-warn:hover { border-color: var(--sp-warn); }

.hub-tabs { display: flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); overflow-x: auto; scrollbar-width: none; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; color: var(--sp-muted) !important; transition: background .15s, color .15s; }
.hub-tab i { font-size: var(--fs-xl); }
.hub-tab:hover { color: var(--sp-text) !important; background: var(--sp-surface-3); }
.hub-tab.active { color: var(--sp-text) !important; background: var(--sp-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--sp-border); }
.hub-tab.active i { color: var(--sp-blue); }
.hub-tab-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--sp-on-accent); background: var(--sp-blue); }
.hub-tab-badge.is-warn { background: var(--sp-warn); }

@media (max-width: 767.98px) {
	.hub { padding: 12px; border-radius: 18px; }
	.hub-top { flex-direction: column; align-items: stretch; gap: 12px; }
	.hub-avatar { width: 50px; height: 50px; }
	.hub-user-info b { font-size: var(--fs-xl); }
	.hub-wallet { justify-content: space-between; padding: 10px 10px 10px 14px; }
	.hub-steps-arrow { display: none; }
	.hub-note { flex-basis: 100%; font-size: var(--fs-md); }
	.hub-note span { white-space: normal; }
	.hub-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hub-tab { flex-direction: column; gap: 4px; padding: 9px 4px; font-size: var(--fs-sm); }
	.hub-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	.hub-tab-badge { position: absolute; top: 5px; right: 8px; min-width: 18px; height: 18px; font-size: var(--fs-2xs); }
}

/* ===== Remaining time (exp) ===== */
.xp { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 20px; box-shadow: var(--sp-shadow); color: var(--sp-text); }
.xp a { text-decoration: none !important; }
.xp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.xp-head h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--sp-text); }
.xp-head h5 i { color: var(--sp-blue); }
.xp-head small { color: var(--sp-muted); font-size: var(--fs-md); }
.xp-head-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; color: var(--sp-text) !important; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s; }
.xp-head-btn:hover { border-color: var(--sp-blue); }

.xp-list { display: flex; flex-direction: column; gap: 10px; }
.xp-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 16px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s; }
.xp-item:hover { border-color: var(--sp-border-strong); }
.xp-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--sp-surface-3); }
.xp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xp-info b { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm); color: var(--sp-muted); }
.xp-status { font-style: normal; font-weight: 700; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; background: var(--sp-surface-3); color: var(--sp-muted); }
.xp-status.is-ok { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .14); }
.xp-status.is-off { color: var(--sp-danger); background: color-mix(in srgb, var(--sp-danger) 14%, transparent); }
.xp-status.is-soon { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 14%, transparent); }
.xp-status.is-info { color: var(--sp-blue); background: rgba(var(--sp-blue-rgb), .14); }
.xp-time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.xp-count { font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sp-mint); white-space: nowrap; }
.xp-time small { color: var(--sp-muted); font-size: var(--fs-xs); }
.xp-item.is-soon { border-color: color-mix(in srgb, var(--sp-warn) 40%, transparent); }
.xp-item.is-soon .xp-count { color: var(--sp-warn); }
.xp-item.is-expired { opacity: .6; }
.xp-item.is-expired .xp-count { color: var(--sp-danger); }
.xp-renew { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 11px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; color: var(--sp-on-accent) !important; background: var(--sp-grad); transition: filter .15s; }
.xp-renew:hover { filter: brightness(1.08); }
.xp-renew.is-off { color: var(--sp-muted) !important; background: var(--sp-surface-3); cursor: help; }
.xp-renew.is-off:hover { filter: none; }

.xp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 16px 32px; border-radius: 16px; background: var(--sp-surface-2); border: 1px dashed var(--sp-border-strong); }
.xp-empty-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-4xl); color: var(--sp-blue); background: rgba(var(--sp-blue-rgb), .12); margin-bottom: 14px; }
.xp-empty h6 { font-size: var(--fs-xl); font-weight: 700; color: var(--sp-text); margin: 0 0 6px; }
.xp-empty p { color: var(--sp-muted); font-size: var(--fs-base); max-width: 360px; margin: 0 0 18px; }
.xp-empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-weight: 700; color: var(--sp-on-accent) !important; background: var(--sp-grad); transition: filter .15s; }
.xp-empty-btn:hover { filter: brightness(1.08); }

@media (max-width: 575.98px) {
	.xp { padding: 14px; border-radius: 18px; }
	.xp-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px; }
	.xp-logo { width: 44px; height: 44px; }
	.xp-time { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; }
	.xp-time small { order: -1; }
	.xp-renew { grid-row: 1; grid-column: 3; padding: 8px 10px; }
	.xp-renew span { display: none; }
}

/* ===== Account pages (profile, device) ===== */
.ac { display: flex; flex-direction: column; gap: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 20px; box-shadow: var(--sp-shadow); color: var(--sp-text); }
.ac a { text-decoration: none !important; }
.ac-head h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--sp-text); }
.ac-head h5 i { color: var(--sp-blue); }
.ac-head small { display: block; margin-top: 4px; color: var(--sp-muted); font-size: var(--fs-md); }
.ac-flash { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: var(--fs-base); font-weight: 600; }
.ac-flash.is-success { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .1); border: 1px solid rgba(var(--sp-mint-rgb), .35); }
.ac-flash.is-error { color: var(--sp-danger); background: color-mix(in srgb, var(--sp-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sp-danger) 35%, transparent); }

.ac-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ac-field > span:first-child { font-size: var(--fs-md); font-weight: 600; color: var(--sp-text); }
.ac-field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sp-border); background: var(--sp-surface-2); color: var(--sp-text); font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s; }
.ac-field input:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(var(--sp-blue-rgb), .15); }
.ac-field small { color: var(--sp-muted); font-size: var(--fs-sm); min-height: 1em; }
.ac-field small.is-ok { color: var(--sp-mint); }
.ac-field small.is-bad { color: var(--sp-danger); }
.ac-pw { position: relative; display: block; }
.ac-pw input { padding-right: 44px; }
.ac-eye { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--sp-muted); cursor: pointer; }
.ac-eye:hover { color: var(--sp-text); }
.ac-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }

.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: var(--fs-base); white-space: nowrap; cursor: pointer; transition: filter .15s, border-color .15s, opacity .15s; }
.ac-btn.is-main { color: var(--sp-on-accent) !important; background: var(--sp-grad); }
.ac-btn.is-main:hover, .ac-btn.is-danger:hover { filter: brightness(1.08); }
.ac-btn.is-ghost { color: var(--sp-text) !important; background: var(--sp-surface-2); border-color: var(--sp-border); }
.ac-btn.is-ghost:hover { border-color: var(--sp-border-strong); }
.ac-btn.is-danger { color: #fff !important; background: #e5484d; }
.ac-btn:disabled { opacity: .45; cursor: default; }

.ac-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px 28px; border-radius: 16px; background: var(--sp-surface-2); border: 1px dashed var(--sp-border-strong); }
.ac-empty-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-4xl); color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 14%, transparent); margin-bottom: 14px; }
.ac-empty h6 { font-size: var(--fs-xl); font-weight: 700; color: var(--sp-text); margin: 0 0 6px; }
.ac-empty p { color: var(--sp-muted); font-size: var(--fs-base); max-width: 420px; margin: 0 0 18px; }

.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pf-me { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); }
.pf-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; padding: 2px; background: var(--sp-grad); flex-shrink: 0; }
.pf-me b { display: block; font-size: var(--fs-xl); }
.pf-me small { color: var(--sp-muted); font-size: var(--fs-sm); }

.rh { margin-top: 16px; container-type: inline-size; }
.rh a { text-decoration: none !important; }
.rh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rh-head-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; color: var(--sp-text) !important; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s; }
.rh-head-btn:hover { border-color: var(--sp-blue); }
.rh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rh-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); min-width: 0; }
.rh-stats small { color: var(--sp-muted); font-size: var(--fs-sm); }
.rh-stats b { font-size: var(--fs-xl); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-stats .is-on b { color: var(--sp-mint); }
.rh-list { display: flex; flex-direction: column; gap: 8px; }
.rh-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px 150px 128px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s; }
.rh-item[hidden] { display: none; }
.rh-item:hover { border-color: var(--sp-border-strong); }
.rh-item.is-on { border-color: rgba(var(--sp-mint-rgb), .35); }
.rh-item.is-held { border-color: color-mix(in srgb, var(--sp-warn) 40%, transparent); }
.rh-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; background: var(--sp-surface-3); }
.rh-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rh-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); color: var(--sp-muted); }
.rh-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rh-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rh-state .xp-status { display: inline-flex; align-items: center; gap: 2px; }
.rh-state small { color: var(--sp-muted); font-size: var(--fs-xs); white-space: nowrap; }
.rh-again { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 11px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; color: var(--sp-text) !important; background: var(--sp-surface); border: 1px solid var(--sp-border); transition: border-color .15s; }
.rh-again:hover { border-color: var(--sp-blue); }
.rh-item.is-on .rh-again, .rh-item.is-held .rh-again { color: var(--sp-on-accent) !important; background: var(--sp-grad); border-color: transparent; }
.rh-again.is-off, .rh-item .rh-again.is-off { color: var(--sp-muted) !important; background: var(--sp-surface); border-color: var(--sp-border); font-weight: 600; font-size: var(--fs-sm); cursor: help; }
.rh-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border-radius: 12px; border: 1px dashed var(--sp-border-strong); background: none; color: var(--sp-muted); font-weight: 700; font-size: var(--fs-md); transition: color .15s, border-color .15s; }
.rh-more:hover { color: var(--sp-text); border-color: var(--sp-blue); }
.rh-more.is-open i { transform: rotate(180deg); }

@container (max-width: 720px) {
	.rh-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; }
	.rh-logo { grid-row: 1 / 3; align-self: start; }
	.rh-state { grid-column: 2 / 3; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
	.rh-again { grid-column: 3 / 4; padding: 7px 10px; }
	.rh-again span { display: none; }
}
@container (max-width: 420px) {
	.rh-stats { gap: 6px; }
	.rh-stats > div { padding: 9px 10px; border-radius: 12px; }
	.rh-stats small { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.rh-stats b { font-size: var(--fs-base); }
	.rh-head-btn { font-size: var(--fs-sm); padding: 7px 10px; }
}

.hw-device { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); }
.hw-device-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; font-size: var(--fs-3xl); color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); }
.hw-device-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hw-device-info small { display: flex; align-items: center; gap: 8px; color: var(--sp-muted); font-size: var(--fs-sm); }
.hw-chip { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); }
.hw-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-lg); color: var(--sp-text); background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-reset { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--sp-border); }
.hw-reset-text { display: flex; flex-direction: column; gap: 2px; }
.hw-reset-text small { color: var(--sp-muted); font-size: var(--fs-sm); }
.hw-reset-text strong { color: var(--sp-text); }
.hw-confirm { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--sp-danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sp-danger) 35%, transparent); }
.hw-confirm[hidden] { display: none; }
.hw-confirm > i { color: var(--sp-danger); font-size: var(--fs-2xl); }
.hw-confirm b { display: block; margin-bottom: 4px; }
.hw-confirm p { color: var(--sp-muted); font-size: var(--fs-md); margin: 0 0 12px; }
.hw-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hw-steps-title { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.hw-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.hw-steps li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); font-size: var(--fs-md); }
.hw-steps li > i { color: var(--sp-blue); font-size: var(--fs-xl); }
.hw-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 800; background: var(--sp-surface-3); color: var(--sp-text); }
.hw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hw-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); }
.hw-stats small { color: var(--sp-muted); font-size: var(--fs-sm); }
.hw-stats b { font-size: var(--fs-lg); color: var(--sp-text); }
.hw-stats b.is-ok { color: var(--sp-mint); }
.hw-stats b.is-warn { color: var(--sp-warn); }
.hw-stats b.is-bad { color: var(--sp-danger); }
.hw-reset-text .hw-block { color: var(--sp-warn); margin-top: 2px; }
.hw-rules ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.hw-rules li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-md); color: var(--sp-muted); }
.hw-rules li > i { color: var(--sp-blue); font-size: var(--fs-lg); line-height: 1.2; }

/* ดาวน์โหลด Loader */
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: center; padding: 20px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(var(--sp-mint-rgb), .10), transparent 55%), var(--sp-surface-2); border: 1px solid var(--sp-border); }
.dl-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dl-app { display: flex; align-items: center; gap: 14px; }
.dl-app-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--sp-border-strong), 0 8px 24px rgba(var(--sp-mint-rgb), .25); }
.dl-app b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--sp-text); }
.dl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--sp-muted); background: var(--sp-surface-3); }
.dl-chip.is-ver { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); border: 1px solid rgba(var(--sp-mint-rgb), .35); }
.dl-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dl-feats li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--sp-text); }
.dl-feats li > i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); }
.dl-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.dl-cta small { color: var(--sp-muted); font-size: var(--fs-sm); }
.dl-btn { height: 50px; padding: 0 26px; font-size: var(--fs-lg); border-radius: 14px; box-shadow: 0 8px 24px rgba(var(--sp-mint-rgb), .25); }
.dl-old { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: var(--fs-sm); color: var(--sp-muted); background: rgba(var(--sp-blue-rgb), .08); border: 1px solid rgba(var(--sp-blue-rgb), .25); }
.dl-old > i { color: var(--sp-blue); }
.dl-shot { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--sp-border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.dl-shot img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.dl-shot:hover img { transform: scale(1.02); }
.dl-shot-zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .2s; }
.dl-shot:hover .dl-shot-zoom { opacity: 1; }
.dl-faq { display: flex; flex-direction: column; gap: 8px; }
.dl-faq .hw-steps-title { margin-bottom: 2px; }
.dl-faq details { border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); transition: border-color .15s; }
.dl-faq details[open] { border-color: var(--sp-border-strong); }
.dl-faq summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: var(--fs-md); font-weight: 600; color: var(--sp-text); }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary > i:first-child { color: var(--sp-blue); font-size: var(--fs-lg); }
.dl-faq summary > span { flex: 1; }
.dl-faq-arrow { color: var(--sp-muted); transition: transform .2s; }
.dl-faq details[open] .dl-faq-arrow { transform: rotate(180deg); }
.dl-faq details p { margin: 0; padding: 0 14px 14px 42px; font-size: var(--fs-md); color: var(--sp-muted); }
.dl-faq details a { color: var(--sp-blue); font-weight: 600; white-space: nowrap; }
.dl-risk { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--sp-text); background: color-mix(in srgb, var(--sp-warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--sp-warn) 30%, transparent); }
.dl-risk > i { color: var(--sp-warn); font-size: var(--fs-xl); }
.dl-risk b { display: block; font-size: var(--fs-md); }
.dl-risk span { font-size: var(--fs-sm); color: var(--sp-muted); }

@media (max-width: 991.98px) {
	.dl-hero { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
	.pf-grid { grid-template-columns: 1fr; }
	.dl-btn { width: 100%; }
	.hw-steps ol, .hw-rules ul { grid-template-columns: 1fr; }
	.hw-stats { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
	.ac { padding: 14px; border-radius: 18px; }
	.ac-actions .ac-btn, .hw-reset .ac-btn { width: 100%; }
	.hw-reset { flex-direction: column; align-items: stretch; }
	.hw-device { flex-wrap: wrap; }
	.hw-device .ac-btn { width: 100%; }
}

/* ===== Refill page ===== */
.rf-section { padding: 0 0 2rem !important; }
.rf { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 22px; box-shadow: var(--sp-shadow); color: var(--sp-text); }
.rf + .rf { margin-top: 16px; }
.rf a { color: var(--sp-blue); }
.rf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rf-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3xl); font-weight: 800; margin: 0; color: var(--sp-text); }
.rf-title i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: var(--fs-2xl); color: var(--sp-on-accent); background: var(--sp-grad); }
.rf-title.is-sm { font-size: var(--fs-2xl); }
.rf-title.is-sm i { width: 34px; height: 34px; font-size: var(--fs-lg); }
.rf-sub { margin: 6px 0 0; color: var(--sp-muted); font-size: var(--fs-base); }
.rf-promo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: var(--fs-md); color: #ffb36b; background: rgba(255, 140, 60, .14); border: 1px solid rgba(255, 140, 60, .35); }
.rf-label { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-weight: 700; font-size: var(--fs-lg); }
.rf-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; color: var(--sp-on-accent); background: var(--sp-grad); flex-shrink: 0; }
.rf-sublabel { display: block; margin: 14px 0 8px; color: var(--sp-muted); font-size: var(--fs-md); font-weight: 600; }

.rf-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; flex-wrap: nowrap; }
.rf-ch { --c: var(--sp-mint); position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; border-radius: 16px; background: var(--sp-surface-2); border: 2px solid var(--sp-border); color: var(--sp-text); cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.rf-ch:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.rf-ch.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--sp-surface-2)); }
.rf-ch.is-off { opacity: .55; }
.rf-ch-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; font-size: var(--fs-3xl); color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.rf-ch-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rf-ch-body b { font-size: var(--fs-lg); }
.rf-ch-body small { color: var(--sp-muted); font-size: var(--fs-sm); }
.rf-ch-tag { position: absolute; top: 8px; right: 10px; font-size: var(--fs-2xs); font-weight: 700; color: var(--c); }
.rf-ch-check { position: absolute; bottom: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); color: var(--sp-on-accent); background: var(--c); transform: scale(0); transition: transform .2s; }
.rf-ch.active .rf-ch-check { transform: scale(1); }
.rf-ch-body small { padding-right: 24px; }

.rf-panels { padding: 20px; border-radius: 16px; background: var(--sp-sunken); border: 1px solid var(--sp-border); }
.rf-rates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.rf-rate { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); text-align: center; }
.rf-rate-price { font-weight: 800; font-size: var(--fs-2xl); }
.rf-rate-price small, .rf-rate-get small { font-size: var(--fs-xs); color: var(--sp-muted); font-weight: 600; }
.rf-rate-arrow { color: var(--sp-muted); font-size: var(--fs-sm); }
.rf-rate-get { font-weight: 800; color: var(--sp-mint); }
.rf-rate-bonus { margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; color: #ffc861; background: rgba(255, 200, 97, .12); }

.rf-input-wrap { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--sp-bg); border: 2px solid var(--sp-border-strong); transition: border-color .15s, box-shadow .15s; }
.rf-input-wrap:focus-within { border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(var(--sp-blue-rgb), .15); }
.rf-input-wrap > i { color: var(--sp-muted); font-size: var(--fs-2xl); }
.rf-input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--sp-text); font-size: var(--fs-xl); font-weight: 600; }
.rf-input::placeholder { color: var(--sp-muted); opacity: .6; font-weight: 500; }
.rf-input-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; font-size: var(--fs-2xl); }
.rf-input[type=number]::-webkit-inner-spin-button { opacity: .4; }
.rf-paste { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sp-border-strong); background: var(--sp-surface-3); color: var(--sp-text); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; }
.rf-paste:hover { border-color: var(--sp-blue); }
.rf-suffix { padding: 0 12px; color: var(--sp-muted); font-weight: 700; }
.rf-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 2px 16px; font-size: var(--fs-sm); color: var(--sp-muted); }
.rf-hint-count { padding: 2px 9px; border-radius: 999px; font-weight: 700; background: var(--sp-surface-3); color: var(--sp-text); }
.rf-hint.is-ok .rf-hint-count, .rf-hint.is-ok .rf-hint-text { color: var(--sp-mint); }
.rf-hint.is-ok .rf-hint-count { background: rgba(var(--sp-mint-rgb), .15); }
.rf-hint.is-bad .rf-hint-text { color: #ff8a8a; }
.rf-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 14px; border: 0; font-weight: 800; font-size: var(--fs-lg); color: var(--sp-on-accent); background: var(--sp-grad); box-shadow: 0 8px 22px rgba(var(--sp-blue-rgb), .2); transition: filter .15s, transform .15s, opacity .15s; }
.rf-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.rf-submit:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.rf-ghost { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px; font-weight: 700; color: #ff9a9a; background: transparent; border: 1px solid rgba(255, 120, 120, .35); }
.rf-ghost:hover { background: rgba(255, 120, 120, .08); }

.rf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.rf-steps { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rf-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); font-size: var(--fs-base); line-height: 1.45; }
.rf-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 800; background: var(--sp-surface-3); color: var(--sp-mint); }
.rf-steps.is-compact li { padding: 8px 12px; font-size: var(--fs-md); }
.rf-video-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--sp-border-strong); background: transparent; color: var(--sp-text); font-weight: 600; font-size: var(--fs-base); }
.rf-video-btn > i:first-child { color: #ff6b7a; font-size: var(--fs-xl); }
.rf-video-btn[aria-expanded=true] .bi-chevron-down { transform: rotate(180deg); }
.rf-video { margin-top: 10px; border-radius: 14px; overflow: hidden; background: #000; }
.rf-video video { display: block; width: 100%; max-height: 420px; }

.rf-amounts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rf-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--sp-border); background: var(--sp-surface-2); color: var(--sp-text); transition: border-color .15s, background .15s; }
.rf-amount b { font-size: var(--fs-xl); }
.rf-amount small { white-space: nowrap; font-size: var(--fs-sm); color: var(--sp-mint); font-weight: 600; }
.rf-amount:hover { border-color: rgba(var(--sp-mint-rgb), .4); }
.rf-amount.active { border-color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .08); }
.rf-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; padding: 12px 16px; border-radius: 12px; background: rgba(var(--sp-mint-rgb), .08); border: 1px solid rgba(var(--sp-mint-rgb), .25); }
.rf-preview > span { color: var(--sp-muted); font-size: var(--fs-base); }
.rf-preview b { color: var(--sp-mint); font-size: var(--fs-2xl); }
.rf-note { display: flex; gap: 8px; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--sp-muted); }

.rf-qr { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.rf-qr-left { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rf-qr-img { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.rf-qr-img img { display: block; width: 240px; height: 240px; }
.rf-acct { width: 264px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border-radius: 18px; text-align: center; background: var(--sp-surface-2); border: 1px solid var(--sp-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.rf-acct-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; font-size: var(--fs-3xl); color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); margin-bottom: 4px; }
.rf-acct small { color: var(--sp-muted); font-size: var(--fs-md); }
.rf-acct-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-3xl); letter-spacing: .04em; color: var(--sp-text); }
.rf-acct-name { font-weight: 600; color: var(--sp-text); }
.rf-acct .rf-copy { margin-top: 6px; padding: 6px 14px; font-size: var(--fs-sm); }
.rf-qr-timer { width: 100%; text-align: center; font-size: var(--fs-md); color: var(--sp-muted); }
.rf-qr-timer b { color: var(--sp-text); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.rf-qr-bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--sp-surface-3); overflow: hidden; }
.rf-qr-bar i { display: block; height: 100%; background: var(--sp-grad); transition: width 1s linear; }
.rf-qr-bar.is-low i { background: #ff7a7a; }
.rf-qr-amount { padding: 16px; border-radius: 14px; background: rgba(var(--sp-mint-rgb), .08); border: 1px solid rgba(var(--sp-mint-rgb), .25); margin-bottom: 12px; }
.rf-qr-amount small { display: block; color: var(--sp-muted); font-size: var(--fs-sm); }
.rf-qr-amount b { font-size: var(--fs-5xl); line-height: 1.2; }
.rf-qr-amount b em { font-style: normal; font-size: var(--fs-xl); color: var(--sp-muted); }
.rf-qr-exact { display: block; font-size: var(--fs-sm); color: #ffc861; }
.rf-qr-rows { display: flex; flex-direction: column; margin-bottom: 14px; }
.rf-qr-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--sp-border); font-size: var(--fs-base); }
.rf-qr-rows span { color: var(--sp-muted); }
.rf-mint { color: var(--sp-mint); }
.rf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display: inline-flex; align-items: center; gap: 8px; }
.rf-x { font-style: normal; padding: 1px 6px; border-radius: 6px; font-size: var(--fs-sm); background: #ff6b6b; color: #fff; }
.rf-copy { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--sp-border-strong); background: var(--sp-surface-3); color: var(--sp-text); font-size: var(--fs-xs); font-family: inherit; }
.rf-copy.is-done { color: var(--sp-mint); border-color: var(--sp-mint); }
.rf-qr-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

.rf-flash { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-base); }
.rf-flash.is-success { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .1); border: 1px solid rgba(var(--sp-mint-rgb), .3); }
.rf-flash.is-warning { color: #ffc861; background: rgba(255, 200, 97, .1); border: 1px solid rgba(255, 200, 97, .3); }
.rf-flash.is-error { color: #ff8a8a; background: rgba(255, 120, 120, .1); border: 1px solid rgba(255, 120, 120, .3); }
.rf-closed { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; color: #ffc861; background: rgba(255, 200, 97, .08); border: 1px dashed rgba(255, 200, 97, .35); }
.rf-closed > i { font-size: var(--fs-4xl); }
.rf-closed small { display: block; color: var(--sp-muted); margin-top: 2px; }
.rf-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: var(--fs-sm); color: var(--sp-muted); }
.rf-safe i { color: var(--sp-mint); }
.rf-history .refill-history-body { padding: 0; }

@media (max-width: 991.98px) {
	.rf-rates, .rf-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rf-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.rf-qr { grid-template-columns: 1fr; justify-items: center; }
	.rf-qr-right { width: 100%; }
}
@media (max-width: 575.98px) {
	.rf { padding: 16px; border-radius: 16px; }
	.rf-panels { padding: 14px; }
	.rf-title { font-size: var(--fs-2xl); }
	.rf-channels { grid-template-columns: 1fr; gap: 8px; }
	.rf-ch { padding: 12px 14px; }
	.rf-rates { gap: 8px; }
	.rf-rate { padding: 10px 4px; }
	.rf-rate-price { font-size: var(--fs-lg); }
	.rf-qr-img img { width: 200px; height: 200px; }
	.rf-qr-actions { grid-template-columns: 1fr; }
	.rf-paste span, .rf-paste { font-size: var(--fs-sm); padding: 8px 10px; }
	.rf-amounts { gap: 8px; }
	.rf-input-code { font-size: var(--fs-lg); letter-spacing: .02em; }
	.rf-input-wrap { padding-left: 12px; gap: 8px; }
	.rf-amount { padding: 10px 4px; }
	.rf-amount b { font-size: var(--fs-lg); }
	.rf-amount small, .rf-rate-get small { display: block; }
	.rf-rate-get { line-height: 1.2; }
}
.rf-qr { scroll-margin-top: 90px; }
.rf-empty { text-align: center; padding: 28px 10px; color: var(--sp-muted); }
.rf-empty i { font-size: var(--fs-5xl); opacity: .5; }
.rf-empty p { margin: 8px 0 0; }
.rf-hfilter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rf-hfilter button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sp-border-strong); background: var(--sp-surface-2); color: var(--sp-muted); font-weight: 600; font-size: var(--fs-md); }
.rf-hfilter button em { font-style: normal; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 999px; background: var(--sp-surface-3); color: var(--sp-text); }
.rf-hfilter button.active { color: var(--sp-on-accent); background: var(--sp-grad); border-color: transparent; }
.rf-hfilter button.active em { background: rgba(0, 0, 0, .15); color: var(--sp-on-accent); }
.rf-hfilter button:disabled { opacity: .4; }
.rf-hlist { display: flex; flex-direction: column; gap: 8px; }
.rf-hitem { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto; grid-template-areas: "icon ch date amt st"; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); }
.rf-hitem[hidden] { display: none; }
.rf-hitem-icon { grid-area: icon; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: var(--fs-lg); }
.rf-hitem-icon.is-ok { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .14); }
.rf-hitem-icon.is-wait { color: #ffc861; background: rgba(255, 200, 97, .14); }
.rf-hitem-icon.is-fail { color: #ff8a8a; background: rgba(255, 120, 120, .12); }
.rf-hitem-ch { grid-area: ch; min-width: 0; }
.rf-hitem-ch .refill-history-channel { display: block; font-weight: 700; color: var(--sp-text); }
.rf-hitem-ch .refill-history-channel-sub { display: block; font-size: var(--fs-sm); color: var(--sp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-hitem-ch .refill-history-channel-tag { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 5px; font-size: var(--fs-2xs); font-weight: 800; color: var(--sp-on-accent); background: var(--sp-mint); vertical-align: 1px; }
.rf-hitem-date { grid-area: date; font-size: var(--fs-sm); color: var(--sp-muted); white-space: nowrap; }
.rf-hitem-amt { grid-area: amt; font-weight: 800; font-size: var(--fs-xl); white-space: nowrap; min-width: 80px; text-align: right; }
.rf-hitem-st { grid-area: st; min-width: 96px; text-align: right; }
.rf-hitem .refill-history-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.rf-hitem .refill-history-badge--success { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .14); }
.rf-hitem .refill-history-badge--warning { color: #ffc861; background: rgba(255, 200, 97, .14); }
.rf-hitem .refill-history-badge--danger { color: #ff8a8a; background: rgba(255, 120, 120, .12); }
.rf-hitem .refill-history-badge--dark, .rf-hitem .refill-history-badge--muted { color: var(--sp-muted); background: var(--sp-surface-3); }
.rf-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px dashed var(--sp-border-strong); background: transparent; color: var(--sp-muted); font-weight: 600; }
.rf-more:hover { color: var(--sp-text); border-color: var(--sp-blue); }
@media (max-width: 575.98px) {
	.rf-hitem { grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "icon ch amt" "icon date st"; row-gap: 4px; column-gap: 12px; padding: 10px 12px; }
	.rf-hitem-amt, .rf-hitem-st { min-width: 0; }
}

/* Crypto top-up */
.rf-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.rf-coins span { padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em; color: #f7a531; background: rgba(247, 165, 49, .1); border: 1px solid rgba(247, 165, 49, .25); }
.rf-coins em { font-style: normal; font-size: var(--fs-sm); color: var(--sp-muted); }
.rf-csteps { margin-top: 14px; }
.rf-ghost.is-neutral { color: var(--sp-text); border-color: var(--sp-border-strong); }
.rf-ghost.is-neutral:hover { background: var(--sp-surface-2); }
.rf-hitem-ch .refill-history-channel-tag.is-crypto { background: #f7a531; }
.rf-co { --c: #ffc861; max-width: 560px; margin: 0 auto; text-align: center; }
.rf-co.is-paying { --c: var(--sp-blue); }
.rf-co.is-paid { --c: var(--sp-mint); }
.rf-co.is-expired, .rf-co.is-failed { --c: #ff8a8a; }
.rf-co [hidden] { display: none !important; }
.rf-co-icon { width: 72px; height: 72px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-5xl); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 6%, transparent); }
.rf-co.is-paying .rf-co-icon i { animation: rfSpin 1.4s linear infinite; }
.rf-co.is-waiting .rf-co-icon { animation: rfPulse 2s ease-in-out infinite; }
@keyframes rfSpin { to { transform: rotate(360deg); } }
@keyframes rfPulse { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c) 4%, transparent); } }
.rf-co-title { font-size: var(--fs-3xl); font-weight: 800; margin: 0 0 6px; color: var(--c); }
.rf-co-sub { color: var(--sp-muted); font-size: var(--fs-base); margin: 0 0 16px; }
.rf-co-sub b { color: var(--sp-mint); }
.rf-co-rows { text-align: left; }
.rf-co-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rf-co-actions > * { flex: 1 1 200px; width: auto; }
.rf-co-actions a { text-decoration: none; }
.rf-co-actions a.rf-submit, .rf-co-actions a.rf-submit:hover { color: var(--sp-on-accent) !important; }
.rf-co-actions a.rf-ghost.is-neutral, .rf-co-actions a.rf-ghost.is-neutral:hover { color: var(--sp-text) !important; }
.rf-co .rf-note { justify-content: center; }

/* ===== Buy page (rent a program) ===== */
.by-section { color: var(--sp-text); }
.by { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 18px; box-shadow: var(--sp-shadow); margin-bottom: 16px; }
.by-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.by-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-3xl); font-weight: 800; color: var(--sp-text); }
.by-title i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(199, 146, 255, .16); color: #c792ff; font-size: var(--fs-2xl); }
.by-sub { margin: 6px 0 0; color: var(--sp-muted); font-size: var(--fs-base); }
.by-wallet { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); color: var(--sp-text) !important; text-decoration: none !important; }
.by-wallet > i { color: var(--sp-mint); font-size: var(--fs-2xl); }
.by-wallet span { display: flex; flex-direction: column; line-height: 1.2; }
.by-wallet small { color: var(--sp-muted); font-size: var(--fs-xs); }
.by-wallet b { font-size: var(--fs-lg); color: var(--sp-mint); }
.by-wallet em { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sp-grad); color: var(--sp-on-accent); font-style: normal; }

.by-bar { display: flex; gap: 10px; margin-top: 16px; }
.by-search, .by-sort { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); margin: 0; }
.by-search { flex: 1; }
.by-search:focus-within, .by-sort:focus-within { border-color: var(--sp-mint); }
.by-search i, .by-sort i { color: var(--sp-muted); }
.by-search input, .by-sort select { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--sp-text); font-size: var(--fs-base); }
.by-sort select { cursor: pointer; }
.by-sort select option { background: var(--sp-surface); color: var(--sp-text); }

.by-chips { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.by-chips::-webkit-scrollbar { display: none; }
.by-chips.is-games { margin-top: 8px; }
.by-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); color: var(--sp-muted); font-size: var(--fs-md); font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.by-chip:hover { color: var(--sp-text); border-color: var(--sp-border-strong); }
.by-chip span { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: var(--fs-xs); }
.by-chip.active { color: var(--sp-text); border-color: var(--sp-mint); background: rgba(94, 224, 181, .1); }
.by-chips.is-games .by-chip { font-weight: 500; font-size: var(--fs-sm); padding: 4px 11px; }

.by-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.by-card { display: flex; flex-direction: column; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 18px; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.by-card:hover { transform: translateY(-2px); border-color: var(--sp-border-strong); box-shadow: var(--sp-shadow); }
.by-card[hidden] { display: none; }
.by-media { position: relative; display: block; aspect-ratio: 16 / 8; background: var(--sp-surface-2); overflow: hidden; }
.by-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.by-card:hover .by-media img { transform: scale(1.04); }
.by-card.is-off .by-media img { filter: grayscale(.6) brightness(.75); }
.by-media-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.by-media-badges .sp-badge-on,
.by-media-badges .sp-badge-off,
.by-media-badges .sp-badge-warn,
.by-media-badges .sp-badge-info,
.sp-card-badges .sp-badge-on,
.sp-card-badges .sp-badge-off,
.sp-card-badges .sp-badge-warn,
.sp-card-badges .sp-badge-info { background-color: rgba(20, 22, 26, 0.82); backdrop-filter: blur(4px); }
.by-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; }
.by-game { color: var(--sp-blue); font-size: var(--fs-sm); font-weight: 600; }
.by-name { margin: -4px 0 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.by-name a { color: var(--sp-text) !important; text-decoration: none !important; }
.by-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--sp-muted); font-size: var(--fs-sm); }
.by-meta i { margin-right: 4px; }
.by-meta b { color: var(--sp-mint); }

.by-form { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.by-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.by-pkg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; margin: 0; }
.by-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.by-pkg span { font-size: var(--fs-sm); color: var(--sp-muted); }
.by-pkg b { font-size: var(--fs-base); color: var(--sp-text); }
.by-pkg:hover { border-color: var(--sp-border-strong); }
.by-pkg.is-checked { border-color: var(--sp-mint); background: rgba(94, 224, 181, .1); box-shadow: inset 0 0 0 1px var(--sp-mint); }
.by-pkg.is-checked span { color: var(--sp-mint); }
.by-after { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--sp-muted); padding: 0 2px; }
.by-after b { color: var(--sp-text); }
.by-after b.is-neg { color: #ff7a8a; }

.by-state { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--sp-surface-2); border: 1px dashed var(--sp-border-strong); color: var(--sp-muted); font-size: var(--fs-md); }
.by-state.is-active { border-style: solid; border-color: rgba(255, 184, 107, .5); background: rgba(255, 184, 107, .08); color: #ffb86b; font-weight: 600; }
.by-actions { display: flex; gap: 8px; }
.by-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: var(--fs-base); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: filter .15s, border-color .15s; }
.by-btn.is-main { flex: 1; background: var(--sp-grad); color: var(--sp-on-accent) !important; }
.by-btn.is-main:hover { filter: brightness(1.08); }
.by-btn.is-topup { flex: 1; background: rgba(255, 200, 97, .14); border-color: rgba(255, 200, 97, .5); color: #ffc861 !important; }
.by-btn.is-ghost { background: var(--sp-surface-2); border-color: var(--sp-border); color: var(--sp-text) !important; }
.by-btn.is-ghost:hover { border-color: var(--sp-border-strong); }

.by-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; border-radius: 18px; background: var(--sp-surface); border: 1px dashed var(--sp-border-strong); color: var(--sp-muted); }
.by-empty[hidden] { display: none; }
.by-empty > i { font-size: var(--fs-5xl); }
.by-empty b { color: var(--sp-text); }
.by-note { display: flex; gap: 8px; margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 122, 138, .08); border: 1px solid rgba(255, 122, 138, .25); color: #ff9aa6; font-size: var(--fs-sm); line-height: 1.5; }
.by-note i { flex: 0 0 auto; margin-top: 2px; }

@media (min-width: 1200px) {
	.by-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.by-body { padding: 12px; }
	.by-pkgs { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
	.by-pkg { padding: 7px 4px; }
	.by-pkg b { font-size: var(--fs-md); }
	.by-media-badges { top: 8px; left: 8px; right: 8px; gap: 4px; }
	.by-btn { height: 40px; padding: 0 10px; font-size: var(--fs-sm); gap: 5px; }
}
@media (max-width: 1199.98px) { .by-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .by-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
	.by { padding: 14px; border-radius: 18px; }
	.by-title { font-size: var(--fs-2xl); }
	.by-wallet { width: 100%; }
	.by-wallet span { flex: 1; }
	.by-bar { flex-direction: column; }
	.by-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Game updates (Steam patch watch) ---------- */
.hx-patch-head { justify-content: flex-start; gap: 12px; margin-bottom: 12px; padding: 0 4px 14px; border-bottom: 1px solid var(--sp-border); }
.hx-patch-ico { flex-shrink: 0; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); }
.hx-patch-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hx-patch-title b { font-size: var(--fs-xl); line-height: 1.25; }
.hx-patch-title small { color: var(--sp-muted); font-size: var(--fs-xs); line-height: 1.4; }
.hx-patch-sum { flex-shrink: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .13); }
.hx-patch-sum:has(.bi-pause-fill) { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 15%, transparent); }
.hx-patches { display: flex; flex-direction: column; gap: 4px; }
.hx-patch { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 14px; text-decoration: none !important; color: var(--sp-text) !important; transition: background .15s, border-color .15s; border: 1px solid transparent; }
.hx-patch:hover { background: var(--sp-surface-2); border-color: var(--sp-border); }
.hx-patch.is-hold { background: color-mix(in srgb, var(--sp-warn) 7%, transparent); border-color: color-mix(in srgb, var(--sp-warn) 24%, transparent); }
.hx-patch.is-hold:hover { background: color-mix(in srgb, var(--sp-warn) 12%, transparent); }
.hx-patch img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--sp-surface-3); }
.hx-patch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hx-patch-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hx-patch-name b { min-width: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-patch-name > .bi { flex-shrink: 0; font-size: .8rem; color: var(--sp-muted); }
.hx-patch-new { flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(var(--sp-mint-rgb), .16); color: var(--sp-mint); }
.hx-patch-text small { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--sp-muted); font-size: var(--fs-sm); line-height: 1.4; white-space: nowrap; }
.hx-patch-text small > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hx-patch.is-hold .hx-patch-text small > span:last-child { color: var(--sp-text); opacity: .85; }
.hx-patch-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hx-patch-side em { font-style: normal; font-size: var(--fs-2xs); color: var(--sp-muted); white-space: nowrap; }
.hx-patch-state { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.hx-patch-state.is-ok { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .13); }
.hx-patch-state.is-hold { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 15%, transparent); }
@media (max-width: 575.98px) {
	.hx-patch-head { gap: 10px; padding-bottom: 12px; }
	.hx-patch-ico { width: 36px; height: 36px; font-size: 1rem; }
	.hx-patch-title small { display: none; }
	.hx-patch { gap: 10px; padding: 9px 6px; }
	.hx-patch img { width: 40px; height: 40px; border-radius: 10px; }
	.hx-patch-name b { font-size: var(--fs-md); }
	.hx-patch-text small { font-size: var(--fs-xs); }
	.hx-patch-state { padding: 3px 8px; font-size: var(--fs-2xs); }
}
.hx-patch-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 6px; font-size: var(--fs-xs); color: var(--sp-muted); }
.hx-patch-foot > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-patch-foot a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--sp-blue) !important; text-decoration: none !important; }
.hx-patch-foot a:hover { text-decoration: underline !important; }
.hx-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-mint); flex-shrink: 0; }
.hx-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sp-mint); animation: hx-live 1.8s ease-out infinite; }
@keyframes hx-live { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-live::after { animation: none; } }

/* ---------- ผู้เล่นออนไลน์ (Steam สด / ทีมงานกรอก) ---------- */
.gp-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--sp-mint); font-variant-numeric: tabular-nums; }
.gp-chip > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(var(--sp-mint-rgb), .18); }
.gp-chip.is-manual { color: var(--sp-blue); }
.gp-chip.is-manual > i { box-shadow: 0 0 0 3px rgba(var(--sp-blue-rgb), .18); }
.it-game-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.gp-chip-link { text-decoration: none !important; }
.gp-chip-link .gp-chip { padding: 3px 10px 3px 9px; border-radius: 999px; font-size: var(--fs-xs); background: rgba(var(--sp-mint-rgb), .1); border: 1px solid rgba(var(--sp-mint-rgb), .25); transition: background .15s; }
.gp-chip-link .gp-chip.is-manual { background: rgba(var(--sp-blue-rgb), .1); border-color: rgba(var(--sp-blue-rgb), .25); }
.gp-chip-link:hover .gp-chip { background: rgba(var(--sp-mint-rgb), .18); }
.gp-chip-link:hover .gp-chip.is-manual { background: rgba(var(--sp-blue-rgb), .18); }

.gp-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--sp-sunken); border: 1px solid var(--sp-border); }
.gp-box-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.gp-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-now small { display: inline-flex; align-items: center; gap: 7px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; }
.gp-now b { font-size: 1.6rem; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; color: var(--sp-text); font-variant-numeric: tabular-nums; }
.gp-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-mint); flex-shrink: 0; }
.gp-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sp-mint); animation: hx-live 1.8s ease-out infinite; }
.gp-box.is-manual .gp-dot { background: var(--sp-blue); }
.gp-box.is-manual .gp-dot::after { display: none; }
.gp-trend { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.gp-trend.is-up { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .13); }
.gp-trend.is-down { color: #ff8a9a; background: rgba(255, 107, 125, .13); }
.gp-chart { height: 56px; margin: 0 -2px; }
.gp-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.gp-spark-area { fill: rgba(var(--sp-mint-rgb), .12); }
.gp-spark-line { fill: none; stroke: var(--sp-mint); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gp-spark-dot { fill: var(--sp-mint); stroke: var(--sp-sunken); stroke-width: 2; }
.gp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-xs); color: var(--sp-muted); }
.gp-stats b { color: var(--sp-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-stats i { margin-right: 4px; }
.gp-stats a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--sp-muted) !important; text-decoration: none !important; }
.gp-stats a:hover { color: var(--sp-text) !important; }
.gp-stats a i { margin: 0; }
@media (prefers-reduced-motion: reduce) { .gp-dot::after { animation: none; } }

.it-hold a { display: inline-flex; align-items: center; margin-top: 4px; color: inherit !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.xp-status.is-hold { display: inline-flex; align-items: center; gap: 2px; color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 15%, transparent); }
.xp-item.is-hold { border-color: color-mix(in srgb, var(--sp-warn) 40%, transparent); }
.xp-item.is-hold .xp-count { color: var(--sp-warn); }

/* หน้าอัปเดตเกม (/patches) */
.pn-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.pn-top h1 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.3px; }
.pn-top p { margin: 0; max-width: 620px; color: var(--sp-muted); font-size: var(--fs-md); line-height: 1.6; }
.pn-top-status { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-sum { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; }
.pn-sum.is-ok { color: var(--sp-mint); background: rgba(var(--sp-mint-rgb), .12); }
.pn-sum.is-hold { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 14%, transparent); }
.pn-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sp-surface-2); border: 1px solid var(--sp-border); font-size: var(--fs-sm); color: var(--sp-muted); white-space: nowrap; }

.pn-how-box { margin-top: 16px; border-radius: 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.pn-how-box > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--sp-muted); }
.pn-how-box > summary::-webkit-details-marker { display: none; }
.pn-how-box > summary:hover { color: var(--sp-text); }
.pn-how-box > summary > i:first-child { color: var(--sp-blue); }
.pn-how-caret { margin-left: auto; transition: transform .2s; }
.pn-how-box[open] .pn-how-caret { transform: rotate(180deg); }
.pn-how { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-how li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sp-sunken); border: 1px solid var(--sp-border); }
.pn-how li > i { font-size: 1.25rem; color: var(--sp-mint); line-height: 1.2; }
.pn-how li:nth-child(2) > i { color: var(--sp-warn); }
.pn-how span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--sp-muted); }
.pn-how b { color: var(--sp-text); font-size: var(--fs-md); }

.pn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 14px; }
.pn-search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; border-radius: 12px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.pn-search:focus-within { border-color: rgba(var(--sp-blue-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--sp-blue-rgb), .12); }
.pn-search i { color: var(--sp-muted); }
.pn-search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: none; color: var(--sp-text); font-size: var(--fs-md); }
.pn-filter { display: flex; gap: 6px; }
.pn-filter button { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-muted); font-size: var(--fs-sm); font-weight: 600; }
.pn-filter button span { padding: 0 7px; border-radius: 999px; font-size: var(--fs-2xs); background: var(--sp-surface-3); color: var(--sp-text); }
.pn-filter button.active { color: var(--sp-text); border-color: rgba(var(--sp-blue-rgb), .55); background: rgba(var(--sp-blue-rgb), .12); }
.pn-filter button[data-pn-f="hold"] i { color: var(--sp-warn); }

.pn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pn-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); color: var(--sp-text) !important; text-decoration: none !important; min-width: 0; transition: border-color .15s, transform .15s, background .15s; }
.pn-card:hover { border-color: rgba(var(--sp-blue-rgb), .5); background: var(--sp-surface-2); transform: translateY(-2px); }
.pn-card[hidden] { display: none; }
.pn-card.is-hold { border-color: color-mix(in srgb, var(--sp-warn) 45%, transparent); }
.pn-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pn-card-head img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--sp-surface-3); }
.pn-card-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-card-name b { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-card-name small { color: var(--sp-muted); font-size: var(--fs-xs); }
.pn-card-last, .pn-card-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); background: var(--sp-sunken); color: var(--sp-muted); min-width: 0; }
.pn-card-last span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-card-last i { color: var(--sp-blue); flex-shrink: 0; }
.pn-card-note { color: var(--sp-warn); background: color-mix(in srgb, var(--sp-warn) 9%, transparent); }
.pn-card-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 28px; }
.pn-card-pl { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--sp-muted); white-space: nowrap; }
.pn-card-pl i { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-mint); }
.pn-card-pl b { color: var(--sp-mint); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pn-card-pl.is-manual i { background: var(--sp-blue); }
.pn-card-pl.is-manual b { color: var(--sp-blue); }
.pn-card-spark { flex: 1; min-width: 40px; max-width: 120px; height: 26px; }
.pn-card-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; color: var(--sp-blue); white-space: nowrap; }
.pn-card:hover .pn-card-go i { transform: translateX(3px); }
.pn-card-go i { transition: transform .15s; }
.pn-nomatch { margin-top: 0; }

.pn-h2 { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: var(--fs-xl); font-weight: 700; color: var(--sp-text); }
.pn-h2 i { color: var(--sp-blue); }
.pn-kind { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 6px; background: rgba(var(--sp-blue-rgb), .14); color: var(--sp-blue); }
.pn-kind.is-build { background: color-mix(in srgb, var(--sp-warn) 16%, transparent); color: var(--sp-warn); }

.pn-recent { border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); overflow: hidden; }
.pn-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--sp-text) !important; text-decoration: none !important; border-top: 1px solid var(--sp-border); transition: background .15s; }
.pn-recent-row:first-child { border-top: 0; }
.pn-recent-row:hover { background: var(--sp-surface-2); }
.pn-recent-row img { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.pn-recent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn-recent-text b { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-recent-text small { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--sp-muted); }
.pn-recent-row time { flex-shrink: 0; font-size: var(--fs-xs); color: var(--sp-muted); }
.pn-recent-row > .bi-chevron-right { color: var(--sp-muted); }

/* หน้าเกมเดียว */
.pn-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pn-back { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; background: var(--sp-surface); border: 1px solid var(--sp-border); font-size: var(--fs-sm); font-weight: 700; color: var(--sp-text) !important; text-decoration: none !important; }
.pn-back:hover { border-color: rgba(var(--sp-blue-rgb), .5); }
.pn-switch { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--sp-muted); }
.pn-switch select { height: 38px; max-width: 240px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid var(--sp-border); background: var(--sp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.6a.5.5 0 0 1 .7 0L8 10.3l5.7-5.7a.5.5 0 0 1 .7.7l-6 6a.5.5 0 0 1-.7 0l-6-6a.5.5 0 0 1 0-.7z'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--sp-text); font-size: var(--fs-sm); appearance: none; }

.pn-head { display: flex; gap: 18px; padding: 18px; border-radius: 20px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.pn-head.is-hold { border-color: color-mix(in srgb, var(--sp-warn) 45%, transparent); }
.pn-head > img { width: 96px; height: 96px; flex-shrink: 0; border-radius: 18px; object-fit: cover; background: var(--sp-surface-3); }
.pn-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-head h1 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; overflow-wrap: anywhere; }
.pn-head-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-sm); color: var(--sp-muted); }
.pn-head.is-hold .pn-head-state > span:last-child { color: var(--sp-warn); }
.pn-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-facts > span { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 10px; background: var(--sp-sunken); min-width: 0; }
.pn-facts small { font-size: var(--fs-2xs); color: var(--sp-muted); }
.pn-facts b { font-size: var(--fs-sm); color: var(--sp-text); overflow-wrap: anywhere; }
.pn-facts a { display: inline-flex; align-items: center; gap: 5px; color: inherit !important; text-decoration: none !important; }
.pn-facts a:hover { color: var(--sp-blue) !important; }
.pn-facts a .bi-box-arrow-up-right { font-size: .8em; color: var(--sp-muted); }
.pn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.pn-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pn-detail-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.pn-list { display: flex; flex-direction: column; gap: 8px; }
.pn-item { border-radius: 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); transition: border-color .15s; }
.pn-item[open] { border-color: var(--sp-border-strong, var(--sp-border)); }
.pn-item.is-flash { animation: pn-flash 1.8s ease-out; }
@keyframes pn-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(var(--sp-blue-rgb), .6); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pn-item > summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pn-item > summary::-webkit-details-marker { display: none; }
.pn-item time { flex-shrink: 0; width: 46px; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; background: var(--sp-sunken); line-height: 1.2; }
.pn-item time b { font-size: var(--fs-md); }
.pn-item time span { font-size: var(--fs-2xs); color: var(--sp-muted); }
.pn-item-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pn-item-title b { font-size: var(--fs-md); overflow-wrap: anywhere; }
.pn-item-title small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--sp-muted); }
.pn-item-title em { font-style: normal; font-weight: 700; color: var(--sp-mint); }
.pn-item-caret { flex-shrink: 0; color: var(--sp-muted); transition: transform .2s; }
.pn-item[open] .pn-item-caret { transform: rotate(180deg); }
.pn-item-body { padding: 0 14px 14px 74px; }
.pn-item-body p { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.65; color: var(--sp-muted); overflow-wrap: anywhere; }
.pn-item-body a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--sp-blue) !important; text-decoration: none !important; }
.pn-item-body a:hover { text-decoration: underline !important; }

.pn-progs-box { padding: 12px; border-radius: 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.pn-progs-box h3 { margin: 2px 4px 8px; font-size: var(--fs-md); font-weight: 700; }
.pn-prog { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--sp-text) !important; text-decoration: none !important; }
.pn-prog:hover { background: var(--sp-surface-2); }
.pn-prog > i:first-child { color: var(--sp-mint); font-size: 1.1rem; }
.pn-prog.is-hold > i:first-child { color: var(--sp-warn); }
.pn-prog span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-prog b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-prog small { font-size: var(--fs-2xs); color: var(--sp-muted); }
.pn-prog > .bi-chevron-right { color: var(--sp-muted); }

@media (max-width: 991.98px) {
	.pn-detail { grid-template-columns: minmax(0, 1fr); }
	.pn-detail-side { position: static; order: -1; margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.pn-how { grid-template-columns: 1fr; }
	.pn-detail-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
	.pn-cards { grid-template-columns: minmax(0, 1fr); }
	.pn-search { max-width: none; flex-basis: 100%; }
	.pn-head { padding: 14px; gap: 12px; }
	.pn-head > img { width: 64px; height: 64px; border-radius: 14px; }
	.pn-switch > span { display: none; }
	.pn-switch select { max-width: 180px; }
	.pn-item > summary { gap: 10px; padding: 10px 12px; }
	.pn-item-body { padding: 0 12px 12px; }
	.pn-recent-row time { display: none; }
}

/* แพลตฟอร์มเกม + Build ของโปรเกม Steam */
.sp-badge-plat { background: var(--sp-surface-2, rgba(128, 128, 128, .14)); color: var(--sp-text); border: 1px solid var(--sp-border); }
.sp-badge-plat i, .sp-badge-build i { font-size: .95em; }
.sp-badge-plat i { margin-right: 4px; }
.sp-badge-plat.is-steam i { color: #66c0f4; }
.sp-badge-plat.is-epic i { color: var(--sp-text); }
.sp-badge-plat.is-ios i { color: var(--sp-text); }
.sp-badge-plat.is-android i { color: #3ddc84; }
.sp-badge-plat.is-global i { color: var(--sp-blue); }
.sp-badge-build { display: inline-flex; align-items: center; gap: 4px; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.sp-badge-build:hover { filter: brightness(1.12); }
.sp-plat-ico { margin-right: 5px; opacity: .85; }
.sp-plat-filter a { display: inline-flex; align-items: center; gap: 6px; }
.sp-plat-filter a small { opacity: .6; font-weight: 500; }