/* =========================================================
   CLUBETOP Feed App — Premium dark shell
   Scoped to body.ct-feed-app (does not restyle the whole site)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
	--clubetop-black: #08090D;
	--clubetop-dark: #0D1017;
	--clubetop-surface: #121620;
	--clubetop-surface-2: #171C27;
	--clubetop-elevated: #1B2130;
	--clubetop-border: rgba(255,255,255,.08);
	--clubetop-gold: #D6A84F;
	--clubetop-gold-light: #F0CF82;
	--clubetop-champagne: #F5E1AE;
	--clubetop-purple: #8B5CF6;
	--clubetop-pink: #EC4899;
	--clubetop-red: #F43F5E;
	--clubetop-text: #F5F5F7;
	--clubetop-text-secondary: #A6ADBB;
	--clubetop-text-muted: #6F7785;
	--clubetop-radius: 16px;
	--clubetop-radius-sm: 12px;
	--clubetop-shadow: 0 10px 30px rgba(0,0,0,.18);
	--clubetop-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
	--clubetop-gold-grad: linear-gradient(135deg, #F0CF82, #B98932);
	--clubetop-premium-grad: linear-gradient(135deg, #8B5CF6, #EC4899);
}

/* ---------- App shell ---------- */
body.ct-feed-app {
	font-family: var(--clubetop-font) !important;
	background: var(--clubetop-black) !important;
	color: var(--clubetop-text) !important;
}

body.ct-feed-app #wrap {
	margin-top: 0 !important;
	min-height: 100%;
	background:
		radial-gradient(1200px 500px at 12% -10%, rgba(214,168,79,.07), transparent 55%),
		radial-gradient(900px 420px at 90% 0%, rgba(139,92,246,.06), transparent 50%),
		var(--clubetop-black) !important;
}

body.ct-feed-app #main > main {
	padding-top: var(--ct-header-h, 68px);
}

body.ct-feed-app .white-smoke-bg,
body.ct-feed-app .add-padding {
	background: transparent !important;
}

/* ---------- Header ---------- */
body.ct-feed-app .ct-header {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 1040;
	height: 68px;
	padding: 0 !important;
	background: rgba(8, 9, 13, 0.82) !important;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--clubetop-border) !important;
	box-shadow: 0 8px 28px rgba(0,0,0,.28);
	background-image: none !important;
}

body.ct-feed-app .ct-header.is-scrolled {
	background: rgba(8, 9, 13, 0.94) !important;
	box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

body.ct-feed-app .ct-header-inner,
body.ct-feed-app .ct-header .container {
	max-width: 1440px;
	padding-left: 20px;
	padding-right: 20px;
}

body.ct-feed-app .ct-nav-primary {
	display: none !important;
}

body.ct-feed-app .ct-lang-switch {
	display: none !important;
}

body.ct-feed-app .ct-legacy-account-links {
	display: none !important;
}

body.ct-feed-app .ct-header .autocomplete-results {
	display: block;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: 520px;
	max-height: 360px;
	z-index: 1060;
	background: var(--clubetop-elevated, #1B2130) !important;
	border: 1px solid var(--clubetop-border) !important;
	border-radius: 14px !important;
	overflow: auto;
	box-shadow: 0 16px 40px rgba(0,0,0,.45);
	padding: 8px;
}

body.ct-feed-app .ct-header .autocomplete-results:empty {
	display: none !important;
}

body.ct-feed-app .ct-search-wrap {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	flex: 1 1 auto;
}

body.ct-feed-app .ct-search-box {
	position: relative;
}

body.ct-feed-app .ct-search-hit {
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none !important;
	color: var(--clubetop-text) !important;
	transition: background .2s ease;
}

body.ct-feed-app .ct-search-hit:hover {
	background: rgba(255,255,255,.06);
}

body.ct-feed-app .ct-search-hit small {
	color: var(--clubetop-text-muted);
}

body.ct-feed-app .ct-search-empty {
	color: var(--clubetop-text-muted);
	font-size: 13px;
}

body.ct-feed-app .ct-header .autocomplete-results a,
body.ct-feed-app .ct-header .autocomplete-results .text-dark {
	color: var(--clubetop-text, #F5F5F7) !important;
}

body.ct-feed-app .ct-header .autocomplete-results hr {
	border-top-color: var(--clubetop-border);
	margin: 8px 0;
}

body.ct-feed-app .ct-header .search-topnavi {
	background: var(--clubetop-surface) !important;
	border: 1px solid var(--clubetop-border) !important;
	border-radius: 999px !important;
	color: var(--clubetop-text) !important;
	height: 42px;
	padding-left: 18px;
	font-size: 14px;
}

body.ct-feed-app .ct-header .search-topnavi::placeholder {
	color: var(--clubetop-text-muted);
}

body.ct-feed-app .ct-header .notifc {
	background: var(--clubetop-red, #F43F5E) !important;
}

body.ct-feed-app .ct-icon-action > div > a,
body.ct-feed-app .ct-icon-action a {
	width: 40px;
	height: 40px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: transparent;
	color: var(--clubetop-text-secondary) !important;
	position: relative;
	transition: background .2s ease, color .2s ease;
}

body.ct-feed-app .ct-icon-action a:hover {
	background: rgba(255,255,255,.06);
	color: #fff !important;
}

body.ct-feed-app .ct-icon-action .d-lg-none {
	display: none !important;
}

body.ct-feed-app .ct-coins-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 8px 0 12px;
	border-radius: 999px;
	background: var(--clubetop-surface-2);
	border: 1px solid rgba(214,168,79,.28);
	color: var(--clubetop-champagne) !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}

body.ct-feed-app .ct-coins-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(214,168,79,.18);
	color: #fff !important;
}

body.ct-feed-app .ct-coins-pill i {
	color: var(--clubetop-gold);
}

body.ct-feed-app .ct-coins-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--clubetop-gold-grad);
	color: #1a1205;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
}

body.ct-feed-app .ct-user-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 4px !important;
	border-radius: 999px;
	text-decoration: none !important;
}

body.ct-feed-app .ct-user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid rgba(214,168,79,.35);
}

body.ct-feed-app .ct-user-trigger.dropdown-toggle::after {
	display: none;
}

body.ct-feed-app .ct-user-dropdown,
body.ct-feed-app .ct-user-menu-wrap .dropdown-menu {
	background: #1B2130 !important;
	background-color: #1B2130 !important;
	border: 1px solid rgba(255,255,255,.1) !important;
	border-radius: 14px !important;
	padding: 8px !important;
	min-width: 220px;
	box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
	margin-top: 10px;
	color: #F5F5F7 !important;
}

body.ct-feed-app .ct-user-dropdown .dropdown-item,
body.ct-feed-app .ct-user-menu-wrap .dropdown-item {
	color: #D0D5DD !important;
	border-radius: 10px;
	padding: 10px 12px !important;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent !important;
}

body.ct-feed-app .ct-user-dropdown .dropdown-item i,
body.ct-feed-app .ct-user-menu-wrap .dropdown-item i {
	color: #A6ADBB !important;
	width: 1.1em;
	text-align: center;
}

body.ct-feed-app .ct-user-dropdown .dropdown-item:hover,
body.ct-feed-app .ct-user-dropdown .dropdown-item:focus,
body.ct-feed-app .ct-user-menu-wrap .dropdown-item:hover,
body.ct-feed-app .ct-user-menu-wrap .dropdown-item:focus {
	background: rgba(255,255,255,.08) !important;
	color: #FFFFFF !important;
}

body.ct-feed-app .ct-user-dropdown .dropdown-item:hover i,
body.ct-feed-app .ct-user-menu-wrap .dropdown-item:hover i {
	color: #F0CF82 !important;
}

body.ct-feed-app .ct-user-dropdown .dropdown-divider,
body.ct-feed-app .ct-user-menu-wrap .dropdown-divider {
	border-top-color: rgba(255,255,255,.1) !important;
	margin: 6px 0 !important;
}

body.ct-feed-app .ct-dd-balance {
	margin-left: auto;
	color: var(--clubetop-gold-light);
	font-size: 12px;
	font-weight: 700;
}

/* Non-feed pages: keep new coins/avatar usable but hide legacy only on feed */
body:not(.ct-feed-app) .ct-user-menu-wrap,
body:not(.ct-feed-app) .ct-coins-wrap {
	display: none !important;
}

body.ct-feed-app .ct-bottom-nav {
	background: rgba(8,9,13,.96);
	border-top-color: var(--clubetop-border);
}

body.ct-feed-app .ct-bottom-nav a.is-active,
body.ct-feed-app .ct-bottom-nav .ct-create-pill {
	color: var(--clubetop-gold-light);
}

body.ct-feed-app .ct-create-pill {
	background: var(--clubetop-gold-grad) !important;
	color: #1a1205 !important;
	box-shadow: 0 8px 20px rgba(214,168,79,.35);
}

/* ---------- Layout grid ---------- */
.ct-feed-shell {
	width: 100%;
	padding: 24px 20px 48px;
}

.ct-feed-grid {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
}

.ct-feed-main {
	min-width: 0;
}

.ct-rail {
	position: sticky;
	top: calc(var(--ct-header-h, 68px) + 16px);
}

/* ---------- Left nav ---------- */
.ct-side-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	background: var(--clubetop-surface);
	border: 1px solid var(--clubetop-border);
	border-radius: var(--clubetop-radius);
	box-shadow: var(--clubetop-shadow);
}

.ct-side-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	color: var(--clubetop-text-secondary) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	position: relative;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ct-side-link:hover {
	background: rgba(255,255,255,.04);
	color: #fff !important;
}

.ct-side-link.is-active {
	color: #fff !important;
	background: linear-gradient(90deg, rgba(214,168,79,.16), rgba(214,168,79,.04));
	box-shadow: inset 0 0 0 1px rgba(214,168,79,.12);
}

.ct-side-link.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 4px 4px 0;
	background: var(--clubetop-gold-grad);
	box-shadow: 0 0 12px rgba(214,168,79,.45);
}

.ct-side-link.is-active .ct-side-ico {
	color: var(--clubetop-gold-light);
}

.ct-side-ico {
	width: 22px;
	text-align: center;
	font-size: 15px;
	color: inherit;
}

.ct-side-badge {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--clubetop-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ct-rail-promos {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ct-promo {
	border-radius: var(--clubetop-radius);
	border: 1px solid var(--clubetop-border);
	overflow: hidden;
	padding: 18px;
	background: var(--clubetop-surface-2);
}

.ct-promo-top {
	border-color: rgba(214,168,79,.28);
	background:
		radial-gradient(400px 120px at 100% 0%, rgba(214,168,79,.18), transparent 60%),
		var(--clubetop-surface-2);
}

.ct-promo-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--clubetop-gold-light);
	margin-bottom: 8px;
}

.ct-promo p {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--clubetop-text-secondary);
}

.ct-promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--clubetop-gold-grad);
	color: #1a1205 !important;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform .2s ease, filter .2s ease;
}

.ct-promo-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	color: #1a1205 !important;
}

.ct-promo-creators {
	position: relative;
	min-height: 140px;
	padding: 0;
	background:
		linear-gradient(160deg, rgba(139,92,246,.35), rgba(8,9,13,.2)),
		url('../images/headerbg.jpg') center/cover;
	text-decoration: none !important;
	display: block;
}

.ct-promo-overlay {
	padding: 18px;
	height: 100%;
	background: linear-gradient(180deg, rgba(8,9,13,.15), rgba(8,9,13,.82));
}

.ct-promo-btn-ghost {
	background: rgba(255,255,255,.1) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.18);
}

/* ---------- Feed hero / tabs ---------- */
.ct-feed-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.ct-feed-hero h1 {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: #fff;
}

.ct-feed-hero p {
	margin: 0;
	color: var(--clubetop-text-secondary);
	font-size: 14px;
}

.ct-feed-tabs {
	display: inline-flex;
	padding: 4px;
	background: var(--clubetop-surface);
	border: 1px solid var(--clubetop-border);
	border-radius: 999px;
	gap: 2px;
}

.ct-feed-tab {
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--clubetop-text-muted) !important;
	text-decoration: none !important;
	transition: all .2s ease;
}

.ct-feed-tab.is-active {
	background: var(--clubetop-gold-grad);
	color: #1a1205 !important;
	box-shadow: 0 6px 16px rgba(214,168,79,.25);
}

.ct-feed-tab:not(.is-active):hover {
	color: #fff !important;
	background: rgba(255,255,255,.04);
}

/* ---------- Shared buttons / pills ---------- */
.ct-btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--clubetop-gold-grad);
	color: #1a1205 !important;
	font-weight: 800;
	font-size: 13px;
	text-decoration: none !important;
	border: 0;
	box-shadow: 0 8px 20px rgba(214,168,79,.22);
	transition: transform .2s ease, filter .2s ease;
}

.ct-btn-gold:hover {
	transform: translateY(-1px) scale(1.02);
	filter: brightness(1.06);
	color: #1a1205 !important;
}

.ct-btn-sm { padding: 8px 14px; font-size: 12px; }

.ct-btn-soft {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--clubetop-border);
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	transition: background .2s ease;
}

.ct-btn-soft:hover {
	background: rgba(255,255,255,.1);
	color: #fff !important;
}

.ct-btn-follow {
	border: 1px solid rgba(214,168,79,.35);
	background: transparent;
	color: var(--clubetop-gold-light);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s ease;
}

.ct-btn-follow:hover {
	background: rgba(214,168,79,.12);
}

.ct-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ct-pill-xs { padding: 3px 8px; font-size: 10px; }

.ct-pill-gold {
	background: rgba(214,168,79,.16);
	color: var(--clubetop-gold-light);
	border: 1px solid rgba(214,168,79,.28);
}

.ct-pill-rising {
	background: rgba(244,63,94,.14);
	color: #FDA4AF;
	border: 1px solid rgba(244,63,94,.28);
}

.ct-pill-soft {
	background: rgba(255,255,255,.06);
	color: var(--clubetop-text-secondary);
	border: 1px solid var(--clubetop-border);
}

.ct-pill-lock {
	background: rgba(139,92,246,.14);
	color: #C4B5FD;
	border: 1px solid rgba(139,92,246,.28);
}

.ct-text-gold { color: var(--clubetop-gold-light); }

/* ---------- Composer (Vue card) ---------- */
.ct-composer-wrap #vue-create-post .card,
body.ct-feed-app .ct-composer-wrap .card {
	background: var(--clubetop-surface) !important;
	border: 1px solid var(--clubetop-border) !important;
	border-radius: var(--clubetop-radius) !important;
	box-shadow: var(--clubetop-shadow);
	padding: 20px !important;
	margin-bottom: 20px !important;
	color: var(--clubetop-text) !important;
}

.ct-composer-wrap #createPost,
.ct-composer-wrap textarea.form-control {
	background: var(--clubetop-surface-2) !important;
	border: 1px solid var(--clubetop-border) !important;
	border-radius: 14px !important;
	color: var(--clubetop-text) !important;
	min-height: 56px;
	padding: 14px 16px !important;
	font-size: 15px !important;
	line-height: 1.5;
	resize: none;
}

.ct-composer-wrap #createPost::placeholder {
	color: var(--clubetop-text-muted);
}

.ct-composer-wrap .profilePicSmall img {
	border-radius: 999px;
	border: 2px solid rgba(214,168,79,.3);
}

.ct-composer-wrap .post-uploader-icons {
	width: 28px;
	height: 28px;
	opacity: .9;
	transition: opacity .2s ease, transform .2s ease, filter .2s ease;
	/* SVGs are dark; invert for dark surface */
	filter: invert(1) brightness(1.25);
}

.ct-composer-wrap a:hover .post-uploader-icons {
	opacity: 1;
	transform: translateY(-1px);
}

.ct-composer-wrap .text-333,
body.ct-feed-app .ct-composer-wrap .text-333,
body.ct-feed-app .ct-composer-wrap a.text-333 {
	color: var(--clubetop-text-secondary) !important;
}

.ct-composer-wrap a.text-333:hover {
	color: var(--clubetop-champagne) !important;
}

.ct-composer-wrap .btnBlue,
body.ct-feed-app .ct-composer-wrap a.btnBlue {
	background: var(--clubetop-gold-grad) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #1a1205 !important;
	font-weight: 800 !important;
	padding: 10px 18px !important;
	height: auto !important;
	line-height: 1.2 !important;
	box-shadow: 0 8px 20px rgba(214,168,79,.25) !important;
	transition: transform .2s ease, filter .2s ease;
	display: inline-block !important;
}

.ct-composer-wrap .btnBlue:hover,
body.ct-feed-app .ct-composer-wrap a.btnBlue:hover {
	transform: translateY(-1px) scale(1.02);
	filter: brightness(1.05);
	color: #1a1205 !important;
	background: var(--clubetop-gold-grad) !important;
}

/* ---------- Post cards ---------- */
body.ct-feed-app .ct-post-card,
body.ct-feed-app .postsList > .card,
body.ct-feed-app .ct-posts-stream .card {
	background: var(--clubetop-surface) !important;
	border: 1px solid var(--clubetop-border) !important;
	border-radius: var(--clubetop-radius) !important;
	box-shadow: var(--clubetop-shadow);
	overflow: hidden;
	color: var(--clubetop-text);
	transition: border-color .2s ease, transform .2s ease;
}

body.ct-feed-app .ct-post-card:hover {
	border-color: rgba(255,255,255,.12) !important;
}

.ct-pinned-flag {
	color: var(--clubetop-gold-light);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 8px;
	text-align: right;
}

.ct-post-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 18px 8px;
}

.ct-post-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid rgba(0,0,0,.06);
}

.ct-post-identity { flex: 1; min-width: 0; }

.ct-post-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.ct-post-name {
	font-size: 15px;
	font-weight: 700;
	color: inherit;
	text-decoration: none !important;
}

.ct-verified { color: #D6A84F; font-size: 13px; }

.ct-post-subrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 13px;
	color: #6F7785;
}

.ct-post-handle {
	color: #6F7785 !important;
	text-decoration: none !important;
}

body.ct-feed-app .ct-post-avatar img {
	border-color: rgba(255,255,255,.08);
}

body.ct-feed-app .ct-post-name {
	color: #fff !important;
}

body.ct-feed-app .ct-verified {
	color: var(--clubetop-gold-light);
}

body.ct-feed-app .ct-post-subrow {
	color: var(--clubetop-text-muted);
}

body.ct-feed-app .ct-post-handle {
	color: var(--clubetop-text-secondary) !important;
}

.ct-post-menu-btn {
	padding: 6px 10px !important;
	color: var(--clubetop-text-muted) !important;
	box-shadow: none !important;
}

.ct-post-menu-btn::after { display: none; }

.ct-post-body {
	padding: 4px 18px 12px;
	font-size: 15px;
	line-height: 1.65;
}

body.ct-feed-app .ct-post-body,
body.ct-feed-app .ct-post-body.text-333,
body.ct-feed-app .ct-post-body .text-333 {
	color: var(--clubetop-text) !important;
}

body.ct-feed-app .ct-post-body a {
	color: #93C5FD !important;
}

.ct-post-media {
	padding: 0 12px 8px;
}

.ct-post-media img,
.ct-post-media video,
.ct-post-media .embed-container {
	border-radius: 14px;
	overflow: hidden;
	width: 100%;
}

body.ct-feed-app .ct-post-media video {
	background: #000;
	max-height: 560px;
	object-fit: contain;
}

.ct-post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	padding: 12px 14px 14px;
	border-top: 1px solid rgba(0,0,0,.06) !important;
}

body.ct-feed-app .ct-post-actions {
	border-top-color: var(--clubetop-border) !important;
}

.ct-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease, transform .15s ease;
}

.ct-action:hover {
	background: rgba(0,0,0,.04);
}

body.ct-feed-app .ct-action {
	color: var(--clubetop-text-secondary) !important;
}

body.ct-feed-app .ct-action:hover {
	background: rgba(255,255,255,.05);
	color: #fff !important;
}

body.ct-feed-app .ct-action-like:hover,
body.ct-feed-app .ct-action-like.unlovePost {
	color: var(--clubetop-red) !important;
}

body.ct-feed-app .ct-action-like.unlovePost i {
	animation: ct-heart-pop .22s ease;
}

@keyframes ct-heart-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

body.ct-feed-app .ct-action-save.is-bookmarked,
body.ct-feed-app .ct-action-save.is-bookmarked i {
	color: var(--clubetop-gold-light) !important;
}

.ct-action-tip-wrap .sendTip,
.ct-action-tip-wrap h4 {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	font-size: 13px !important;
}

.ct-action-tip-wrap a {
	color: var(--clubetop-text-secondary) !important;
	padding: 8px 10px;
	border-radius: 10px;
	transition: color .2s ease, background .2s ease;
}

.ct-action-tip-wrap a:hover {
	color: var(--clubetop-gold-light) !important;
	background: rgba(214,168,79,.08);
}

body.ct-feed-app .leave-comment-inp,
body.ct-feed-app .leave-tip .form-control {
	background: var(--clubetop-surface-2) !important;
	border: 1px solid var(--clubetop-border) !important;
	color: #fff !important;
	border-radius: 12px !important;
}

body.ct-feed-app .dropdown-menu {
	background: #1B2130 !important;
	background-color: #1B2130 !important;
	border: 1px solid rgba(255,255,255,.1) !important;
	border-radius: 12px;
	color: #F5F5F7 !important;
}

body.ct-feed-app .dropdown-item {
	color: #D0D5DD !important;
}

body.ct-feed-app .dropdown-item:hover,
body.ct-feed-app .dropdown-item:focus {
	background: rgba(255,255,255,.08) !important;
	color: #fff !important;
}

/* ---------- Locked content ---------- */
.ct-locked {
	position: relative;
	margin: 8px 16px 18px;
	padding: 48px 24px;
	text-align: center;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(180deg, #f7f7f8, #eeeef2);
	border: 1px solid rgba(0,0,0,.06);
}

.ct-locked-glow { display: none; }

.ct-locked-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #B98932;
	background: rgba(214,168,79,.12);
	border: 1px solid rgba(214,168,79,.28);
}

.ct-locked h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
}

.ct-locked p {
	margin: 0 0 18px;
	color: #6F7785;
	font-size: 14px;
}

.ct-locked-tip {
	margin-top: 16px;
}

body.ct-feed-app .ct-locked {
	background:
		radial-gradient(500px 180px at 50% 0%, rgba(139,92,246,.22), transparent 60%),
		var(--clubetop-surface-2);
	border: 1px solid rgba(139,92,246,.22);
}

body.ct-feed-app .ct-locked-glow {
	display: block;
	position: absolute;
	inset: auto 20% -40px;
	height: 80px;
	background: radial-gradient(circle, rgba(214,168,79,.25), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

body.ct-feed-app .ct-locked-icon {
	color: var(--clubetop-champagne);
}

body.ct-feed-app .ct-locked h3 { color: #fff; }

body.ct-feed-app .ct-locked p { color: var(--clubetop-text-secondary); }

/* ---------- Right rail widgets ---------- */
.ct-widget {
	background: var(--clubetop-surface);
	border: 1px solid var(--clubetop-border);
	border-radius: var(--clubetop-radius);
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: var(--clubetop-shadow);
}

.ct-widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.ct-widget-head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}

.ct-widget-head a {
	font-size: 12px;
	font-weight: 700;
	color: var(--clubetop-gold-light) !important;
	text-decoration: none !important;
}

.ct-widget-sub {
	margin: -4px 0 12px;
	font-size: 12px;
	color: var(--clubetop-text-muted);
}

.ct-featured-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ct-creator-card {
	border-radius: 14px;
	overflow: hidden;
	background: var(--clubetop-surface-2);
	border: 1px solid var(--clubetop-border);
	transition: transform .2s ease, border-color .2s ease;
}

.ct-creator-card:hover {
	transform: translateY(-2px);
	border-color: rgba(214,168,79,.28);
}

.ct-creator-cover {
	position: relative;
	height: 96px;
}

.ct-creator-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ct-creator-cover-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 20%, rgba(8,9,13,.75));
}

.ct-creator-cover .ct-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}

.ct-creator-body {
	padding: 0 14px 14px;
	margin-top: -28px;
	position: relative;
	text-align: center;
}

.ct-creator-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 3px solid var(--clubetop-surface-2);
	object-fit: cover;
}

.ct-creator-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none !important;
}

.ct-creator-handle,
.ct-creator-cat {
	display: block;
	font-size: 12px;
	color: var(--clubetop-text-muted);
}

.ct-creator-stats {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 10px 0 12px;
	font-size: 12px;
	color: var(--clubetop-text-secondary);
}

.ct-growth { color: #4ADE80; font-weight: 700; }

.ct-club-banner {
	padding: 4px;
	border-radius: 14px;
	background:
		radial-gradient(280px 120px at 100% 0%, rgba(214,168,79,.25), transparent 55%),
		linear-gradient(145deg, rgba(139,92,246,.35), rgba(17,20,32,.9));
	border: 1px solid rgba(214,168,79,.2);
	padding: 18px;
}

.ct-club-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--clubetop-champagne);
	margin-bottom: 8px;
}

.ct-club-banner h3 {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 800;
	color: #fff;
}

.ct-rising-list,
.ct-reco-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ct-rising-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 12px;
	text-decoration: none !important;
	transition: background .2s ease;
}

.ct-rising-item:hover { background: rgba(255,255,255,.04); }

.ct-rising-item img,
.ct-reco-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
}

.ct-rising-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ct-rising-info strong {
	font-size: 13px;
	color: #fff;
}

.ct-rising-info em {
	font-style: normal;
	font-size: 11px;
	color: #4ADE80;
	font-weight: 700;
}

.ct-reco-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ct-reco-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ct-reco-meta a {
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
}

.ct-inline-form { margin: 0; }

.ct-cat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ct-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--clubetop-surface-2);
	border: 1px solid var(--clubetop-border);
	color: var(--clubetop-text-secondary) !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all .2s ease;
}

.ct-cat-chip:hover,
.ct-cat-chip.is-active {
	border-color: rgba(214,168,79,.35);
	color: var(--clubetop-champagne) !important;
	background: rgba(214,168,79,.08);
}

/* ---------- For you / empty / skeleton ---------- */
.ct-foryou-intro {
	margin-bottom: 18px;
}

.ct-foryou-intro h2 {
	margin: 10px 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.ct-foryou-intro p {
	margin: 0;
	color: var(--clubetop-text-secondary);
}

.ct-foryou-rising {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.ct-foryou-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 160px;
	display: block;
	text-decoration: none !important;
	border: 1px solid var(--clubetop-border);
}

.ct-foryou-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.ct-foryou-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(8,9,13,.88));
}

.ct-foryou-avatar {
	position: absolute;
	left: 14px;
	bottom: 42px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.3);
	object-fit: cover;
	z-index: 1;
}

.ct-foryou-meta {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.ct-foryou-meta strong { color: #fff; font-size: 14px; }
.ct-foryou-meta span { color: #4ADE80; font-size: 12px; font-weight: 700; }

.ct-empty-state,
.ct-empty-end,
.ct-empty-soft {
	text-align: center;
	padding: 40px 24px;
	border-radius: var(--clubetop-radius);
	background: var(--clubetop-surface);
	border: 1px solid var(--clubetop-border);
}

.ct-empty-soft {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ct-empty-illu {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(214,168,79,.12);
	color: var(--clubetop-gold-light);
	font-size: 20px;
}

.ct-empty-state h3,
.ct-empty-end h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
}

.ct-empty-state p,
.ct-empty-end p,
.ct-empty-soft p {
	margin: 0 0 18px;
	color: var(--clubetop-text-secondary);
}

.ct-skel-card {
	height: 180px;
	border-radius: 16px;
	margin-bottom: 14px;
	background: linear-gradient(90deg, var(--clubetop-surface) 25%, var(--clubetop-surface-2) 37%, var(--clubetop-surface) 63%);
	background-size: 400% 100%;
	animation: ct-shimmer 1.2s ease infinite;
}

@keyframes ct-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ---------- Footer ---------- */
body.ct-feed-app .ct-footer {
	background: #06070A !important;
	border-top: 1px solid var(--clubetop-border);
	padding: 40px 0 56px !important;
	margin-top: 24px;
}

body.ct-feed-app .ct-footer-tagline {
	color: var(--clubetop-text-secondary);
	margin-top: 10px;
	font-size: 14px;
}

body.ct-feed-app .ct-footer .nav-link,
body.ct-feed-app .ct-footer-copy {
	color: var(--clubetop-text-muted) !important;
	font-size: 13px;
}

body.ct-feed-app .ct-footer .nav-link:hover {
	color: var(--clubetop-champagne) !important;
}

body.ct-feed-app .ct-footer-lang {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

body.ct-feed-app .ct-footer-lang .ct-lang-link {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--clubetop-text-muted);
	text-decoration: none;
	border: 1px solid transparent;
}

body.ct-feed-app .ct-footer-lang .ct-lang-link.is-active {
	color: #1a1205;
	background: var(--clubetop-gold-grad);
}

body.ct-feed-app .ct-trust span {
	color: var(--clubetop-text-muted);
	font-size: 12px;
}

/* ---------- Creators loop leftovers in feed (hidden - replaced) ---------- */
body.ct-feed-app .ct-rail-discover .creator_box {
	background: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.ct-feed-grid {
		grid-template-columns: 72px minmax(0, 1fr) 280px;
		gap: 16px;
	}
	.ct-side-label,
	.ct-side-badge,
	.ct-rail-promos {
		display: none;
	}
	.ct-side-nav { padding: 6px; }
	.ct-side-link {
		justify-content: center;
		padding: 12px 8px;
	}
	.ct-side-link.is-active::before { display: none; }
}

@media (max-width: 991px) {
	.ct-feed-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.ct-rail-nav {
		display: none;
	}
	.ct-rail-discover {
		position: static;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		order: 3;
	}
	.ct-foryou-rising {
		grid-template-columns: 1fr;
	}
	body.ct-feed-app .ct-coins-wrap {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.ct-feed-shell { padding: 12px 12px 88px; }
	.ct-feed-hero h1 { font-size: 22px; }
	.ct-post-actions .ct-action span:not(.post-likes-count):not(.post-comments-count) {
		display: none;
	}
	body.ct-feed-app .ct-search-wrap { max-width: none; margin: 0 8px; }
	body.ct-feed-app .ct-user-caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}