/**
 * Game Toplist - frontend styles
 * Dark "gaming portal" theme inspired by classic server toplist sites.
 */

/* ---------- Theme tokens ---------- */
.gtl-wrap,
.gtl-vote-page {
	--gtl-bg: #14172a;
	--gtl-bg-2: #1b1f36;
	--gtl-panel: #232845;
	--gtl-panel-2: #2b3158;
	--gtl-border: #343b66;
	--gtl-text: #e7e9f5;
	--gtl-muted: #9aa0c4;
	--gtl-gold: #f5c518;
	--gtl-gold-2: #ffb300;
	--gtl-accent: #5b8cff;
	--gtl-accent-2: #3f6fe0;
	--gtl-link: #5b8cff;
	--gtl-link-hover: #f5c518;
	--gtl-addbtn: #f5c518;
	--gtl-addbtn-text: #1a1300;
	--gtl-addbtn-hover: #ffb300;
	--gtl-danger: #ff5c6c;
	--gtl-ok: #36d18a;
	--gtl-radius: 12px;
	--gtl-shadow: 0 10px 30px rgba(0,0,0,.35);
	--gtl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Full-page mode reset ---------- */
html, body.gtl-fullpage {
	margin: 0 !important;
	padding: 0 !important;
}

/* Themeable link colors for prose/content (components set their own) */
.gtl-legal-body a, .gtl-note a, .gtl-detail-desc a { color: var(--gtl-link); }
.gtl-legal-body a:hover, .gtl-note a:hover, .gtl-detail-desc a:hover { color: var(--gtl-link-hover); }
body.gtl-fullpage {
	background: #14172a;
	overflow-x: hidden;
}

/* ---------- Shell / layout ---------- */
.gtl-wrap {
	background: var(--gtl-bg);
	color: var(--gtl-text);
	font-family: var(--gtl-font);
	line-height: 1.5;
	min-height: 100vh;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}
.gtl-wrap *,
.gtl-vote-page * { box-sizing: border-box; }

.gtl-shell {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) 200px;
	gap: 22px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 26px 20px 60px;
	align-items: start;
}
/* When the right rail isn't rendered (non-list views) keep two columns tidy. */
.gtl-shell:not(:has(.gtl-rail)) { grid-template-columns: 250px minmax(0, 1fr); }

/* ---------- Header ---------- */
.gtl-header {
	background: linear-gradient(180deg, #11142a 0%, var(--gtl-bg-2) 100%);
	border-bottom: 1px solid var(--gtl-border);
	box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.gtl-header-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.gtl-logo {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .3px;
	color: #fff;
	text-decoration: none;
}
.gtl-logo:hover { color: var(--gtl-gold); }
.gtl-logo-img { max-height: 40px; height: auto; width: auto; display: block; }
.gtl-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.gtl-nav a {
	color: var(--gtl-text);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: background .15s, color .15s;
}
.gtl-nav a:hover { background: var(--gtl-panel); color: #fff; }
.gtl-nav-ghost { color: var(--gtl-muted) !important; }

/* ---------- Buttons ---------- */
.gtl-btn {
	display: inline-block;
	background: var(--gtl-panel-2);
	color: #fff;
	text-decoration: none;
	border: 1px solid var(--gtl-border);
	padding: 9px 16px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: transform .08s, background .15s, box-shadow .15s;
	line-height: 1.2;
}
.gtl-btn:hover { background: var(--gtl-panel-2); transform: translateY(-1px); }
.gtl-btn-primary {
	background: linear-gradient(180deg, var(--gtl-gold) 0%, var(--gtl-gold-2) 100%);
	color: #1a1300;
	border-color: var(--gtl-gold-2);
}
.gtl-btn-primary:hover { background: var(--gtl-gold); color: #1a1300; box-shadow: 0 6px 18px rgba(245,197,24,.3); }
/* "Add Site" button — independently themeable color + hover */
.gtl-btn-add {
	background: var(--gtl-addbtn);
	color: var(--gtl-addbtn-text);
	border-color: var(--gtl-addbtn);
}
.gtl-btn-add:hover { background: var(--gtl-addbtn-hover); border-color: var(--gtl-addbtn-hover); color: var(--gtl-addbtn-text); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.gtl-btn-vote {
	background: linear-gradient(180deg, var(--gtl-accent) 0%, var(--gtl-accent-2) 100%);
	border-color: var(--gtl-accent-2);
	width: 100%;
	text-align: center;
	margin-top: 8px;
}
.gtl-btn-vote:hover { background: var(--gtl-accent-2); box-shadow: 0 6px 18px rgba(91,140,255,.35); }

/* ---------- Sidebar (categories) ---------- */
.gtl-sidebar {
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	border-radius: var(--gtl-radius);
	padding: 16px 12px;
	position: sticky;
	top: 16px;
}
.gtl-side-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 12px;
	padding: 4px 6px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: default;
}
.gtl-side-caret { display: none; }
.gtl-side-body { display: block; }
.gtl-cat-search {
	position: relative;
	margin: 0 6px 12px;
}
.gtl-cat-search-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gtl-muted);
	pointer-events: none;
}
.gtl-cat-filter {
	width: 100%;
	background: var(--gtl-bg);
	border: 1px solid var(--gtl-border);
	color: var(--gtl-text);
	border-radius: 8px;
	padding: 9px 12px 9px 32px;
	font-size: 14px;
}
.gtl-cat-filter::placeholder { color: var(--gtl-muted); }
.gtl-cat-filter:focus { outline: none; border-color: var(--gtl-accent); box-shadow: 0 0 0 3px rgba(91,140,255,.2); }
.gtl-cat-noresult { color: var(--gtl-muted); font-size: 13px; padding: 4px 12px; }
.gtl-cats { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; }
.gtl-cats li { margin: 0; }
.gtl-cats a {
	display: block;
	padding: 9px 12px;
	color: var(--gtl-muted);
	text-decoration: none;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	transition: background .12s, color .12s;
}
.gtl-cats a:hover { background: var(--gtl-panel); color: #fff; }
.gtl-cats a.is-active { background: var(--gtl-panel-2); color: #fff; box-shadow: inset 3px 0 0 var(--gtl-gold); }
.gtl-cat-group {
	margin: 14px 0 4px; padding: 6px 12px 4px;
	font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none;
	color: var(--gtl-gold); border-bottom: 1px solid var(--gtl-border);
}
.gtl-cat-group:first-of-type { margin-top: 6px; }

/* ---------- Main column ---------- */
.gtl-main { min-width: 0; }
.gtl-list-head { text-align: center; margin-bottom: 22px; }
.gtl-list-title {
	font-size: 30px;
	font-weight: 800;
	font-style: italic;
	color: #fff;
	margin: 0 0 4px;
}
.gtl-list-sub { color: var(--gtl-gold); font-weight: 600; margin: 0 0 16px; }
.gtl-search {
	display: flex;
	gap: 8px;
	justify-content: center;
	max-width: 460px;
	margin: 0 auto;
}
.gtl-search input[type="search"] {
	flex: 1;
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	color: var(--gtl-text);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
}
.gtl-search input::placeholder { color: var(--gtl-muted); }

/* ---------- Listings ---------- */
.gtl-listings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gtl-card {
	display: grid;
	grid-template-columns: 64px minmax(0,1fr) 130px;
	gap: 16px;
	background: var(--gtl-panel);
	border: 1px solid var(--gtl-border);
	border-radius: var(--gtl-radius);
	padding: 16px;
	align-items: center;
	position: relative;
	transition: border-color .15s, box-shadow .15s, transform .08s;
}
.gtl-card:hover { border-color: #4a5392; transform: translateY(-1px); box-shadow: var(--gtl-shadow); }
.gtl-card.is-gold {
	border: 1px solid var(--gtl-gold);
	border-left: 4px solid var(--gtl-gold);
	background: linear-gradient(180deg, rgba(245,197,24,.12), rgba(245,197,24,.015)), var(--gtl-panel);
	box-shadow: 0 0 18px rgba(245,197,24,.16), var(--gtl-shadow);
}
.gtl-card.is-gold:hover { border-color: var(--gtl-gold); box-shadow: 0 0 24px rgba(245,197,24,.24), var(--gtl-shadow); }
.gtl-rank { text-align: center; }
.gtl-rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	font-weight: 800;
	font-size: 18px;
	color: #fff;
}
.gtl-card.is-gold .gtl-rank-num { border-color: var(--gtl-gold); color: var(--gtl-gold); }
.gtl-rank-details { display: block; margin-top: 8px; font-size: 12px; color: var(--gtl-muted); text-decoration: none; }
.gtl-rank-details:hover { color: var(--gtl-gold); }

.gtl-card-body { min-width: 0; }
.gtl-card-banner { display: block; margin-bottom: 10px; }
.gtl-card-banner img { width: 468px; max-width: 100%; height: auto; border-radius: 6px; display: block; border: 1px solid var(--gtl-border); }
.gtl-card-title { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtl-card-title a { color: var(--gtl-gold); text-decoration: none; font-weight: 800; }
.gtl-card-title a:hover { text-decoration: underline; }
.gtl-card-desc { color: var(--gtl-muted); font-size: 13.5px; line-height: 1.5; }

.gtl-gold-badge {
	display: inline-block;
	background: linear-gradient(180deg, #ffe27a 0%, #f5c518 45%, #d99e00 100%);
	color: #2a1d00;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .4px;
	padding: 3px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(255,255,255,.35);
	box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.25);
}

.gtl-card-votes {
	text-align: center;
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	border-radius: 10px;
	padding: 10px 8px;
}
.gtl-card.is-gold .gtl-card-votes { border-color: rgba(245,197,24,.45); }
.gtl-medal { font-size: 22px; color: var(--gtl-gold); line-height: 1; margin-bottom: 2px; }
.gtl-votes-label { font-size: 11px; color: var(--gtl-muted); text-transform: uppercase; letter-spacing: .5px; }
.gtl-votes-num { font-size: 24px; font-weight: 800; color: var(--gtl-gold); line-height: 1.1; }
.gtl-card-votes .gtl-btn-vote { display: block; margin-top: 8px; padding: 7px 10px; }

.gtl-empty {
	text-align: center;
	color: var(--gtl-muted);
	background: var(--gtl-panel);
	border: 1px dashed var(--gtl-border);
	border-radius: var(--gtl-radius);
	padding: 40px 20px;
}

/* ---------- Pagination ---------- */
.gtl-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 22px; }
.gtl-page {
	min-width: 38px;
	text-align: center;
	padding: 8px 10px;
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	border-radius: 8px;
	color: var(--gtl-text);
	text-decoration: none;
	font-weight: 600;
}
.gtl-page:hover { background: var(--gtl-panel); }
.gtl-page.is-active { background: var(--gtl-gold); color: #1a1300; border-color: var(--gtl-gold-2); }

/* ---------- Right rail (featured banners) ---------- */
.gtl-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.gtl-rail-banner { display: block; border: 1px solid var(--gtl-border); border-radius: 8px; overflow: hidden; }
.gtl-rail-banner img { width: 100%; height: auto; display: block; }

/* ---------- Details page ---------- */
.gtl-detail { background: var(--gtl-panel); border: 1px solid var(--gtl-border); border-radius: var(--gtl-radius); padding: 22px; }
.gtl-back { color: var(--gtl-muted); text-decoration: none; font-weight: 600; display: inline-block; margin-bottom: 12px; }
.gtl-back:hover { color: var(--gtl-gold); }
.gtl-detail-title { margin: 0 0 14px; font-size: 26px; color: #fff; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gtl-detail-banner { margin-bottom: 16px; }
.gtl-detail-banner img { max-width: 100%; height: auto; border-radius: 8px; }
.gtl-detail-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.gtl-detail-meta span { color: var(--gtl-muted); }
.gtl-detail-meta strong { color: var(--gtl-gold); font-size: 18px; }
.gtl-detail-desc { color: var(--gtl-text); }
.gtl-detail-desc p { margin: 0 0 12px; }

/* ---------- Auth + forms ---------- */
.gtl-auth-card {
	background: var(--gtl-panel);
	border: 1px solid var(--gtl-border);
	border-radius: var(--gtl-radius);
	padding: 26px;
	max-width: 440px;
	margin: 0 auto;
}
.gtl-auth-card.gtl-auth-wide { max-width: 720px; }
.gtl-auth-card h1 { margin: 0 0 18px; font-size: 24px; color: #fff; }
.gtl-sub { color: var(--gtl-muted); font-size: 14px; margin: -10px 0 18px; }
.gtl-auth-foot { margin-top: 16px; color: var(--gtl-muted); font-size: 14px; }
.gtl-auth-foot a { color: var(--gtl-gold); text-decoration: none; }
.gtl-auth-foot a:hover { text-decoration: underline; }

.gtl-form label { display: block; margin: 0 0 14px; font-weight: 600; color: var(--gtl-text); font-size: 14px; }
.gtl-form input[type="text"],
.gtl-form input[type="email"],
.gtl-form input[type="url"],
.gtl-form input[type="password"],
.gtl-form select,
.gtl-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	background: var(--gtl-bg-2);
	border: 1px solid var(--gtl-border);
	color: var(--gtl-text);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
}
.gtl-form textarea { min-height: 120px; resize: vertical; }
.gtl-form input:focus,
.gtl-form select:focus,
.gtl-form textarea:focus { outline: none; border-color: var(--gtl-accent); box-shadow: 0 0 0 3px rgba(91,140,255,.2); }
.gtl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.gtl-check { display: flex !important; align-items: center; gap: 8px; }
.gtl-check input { width: auto !important; margin: 0 !important; }
.gtl-hint { color: var(--gtl-muted); font-size: 12.5px; font-weight: 400; margin-top: 4px; }
.gtl-note { color: var(--gtl-muted); font-size: 14px; }

/* ---------- Notices ---------- */
.gtl-notice {
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 14px;
	border: 1px solid var(--gtl-border);
	background: var(--gtl-panel-2);
}
.gtl-notice-success { border-color: rgba(54,209,138,.5); background: rgba(54,209,138,.12); color: #b6f4d6; }
.gtl-notice-error { border-color: rgba(255,92,108,.5); background: rgba(255,92,108,.12); color: #ffc6cc; }
.gtl-notice-info { border-color: rgba(91,140,255,.5); background: rgba(91,140,255,.12); color: #cfdcff; }

/* ---------- Dashboard ---------- */
.gtl-dashboard { background: var(--gtl-panel); border: 1px solid var(--gtl-border); border-radius: var(--gtl-radius); padding: 8px 22px 26px; }
.gtl-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--gtl-border); padding: 14px 0; margin-bottom: 22px; }
.gtl-tab {
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--gtl-muted);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}
.gtl-tab:hover { background: var(--gtl-bg-2); color: #fff; }
.gtl-tab.is-active { background: var(--gtl-panel-2); color: #fff; box-shadow: inset 0 -2px 0 var(--gtl-gold); }
.gtl-tab-logout { margin-left: auto; color: var(--gtl-danger); }
.gtl-tab-body h2 { margin-top: 0; color: #fff; }

.gtl-kv { width: 100%; border-collapse: collapse; }
.gtl-kv th, .gtl-kv td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gtl-border); vertical-align: top; }
.gtl-kv th { color: var(--gtl-muted); font-weight: 600; width: 180px; }

/* code / shortcode boxes */
.gtl-code {
	width: 100%;
	background: #0e1022;
	border: 1px solid var(--gtl-border);
	color: #cfe3ff;
	border-radius: 8px;
	padding: 12px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
}

/* ---------- Gold tab ---------- */
.gtl-gold-perks { background: var(--gtl-bg-2); border: 1px solid rgba(245,197,24,.35); border-radius: 10px; padding: 16px 18px; margin: 14px 0; }
.gtl-gold-perks ul { margin: 8px 0 0; padding-left: 18px; }
.gtl-gold-perks li { margin: 4px 0; color: var(--gtl-text); }
.gtl-gold-buy { margin-top: 18px; }
.gtl-inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gtl-paypal-form { margin-top: 14px; }
.gtl-btn-pay { background: linear-gradient(180deg,#ffc439,#f0ba2d); color:#1a1300; border-color:#f0ba2d; }

/* ---------- Postback help ---------- */
.gtl-postback-help { margin-top: 18px; color: var(--gtl-muted); font-size: 14px; }
.gtl-postback-help code { background:#0e1022; border:1px solid var(--gtl-border); padding:2px 6px; border-radius:5px; color:#cfe3ff; }

/* ---------- Vote confirmation standalone page ---------- */
.gtl-vote-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(1200px 600px at 50% -10%, #20264a 0%, var(--gtl-bg) 60%);
	color: var(--gtl-text);
	font-family: var(--gtl-font);
	padding: 20px;
}
.gtl-vote-card {
	background: var(--gtl-panel);
	border: 1px solid var(--gtl-border);
	border-radius: 16px;
	padding: 40px 36px;
	text-align: center;
	max-width: 440px;
	width: 100%;
	box-shadow: var(--gtl-shadow);
}
.gtl-vote-card h1 { font-size: 22px; margin: 8px 0 6px; color: #fff; }
.gtl-vote-sub { color: var(--gtl-muted); margin: 0 0 20px; }
.gtl-vote-icon {
	width: 64px; height: 64px;
	margin: 0 auto 10px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 32px; font-weight: 700;
}
.gtl-vote-card.is-success .gtl-vote-icon { background: rgba(54,209,138,.15); color: var(--gtl-ok); }
.gtl-vote-card.is-error .gtl-vote-icon { background: rgba(255,92,108,.15); color: var(--gtl-danger); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.gtl-shell,
	.gtl-shell:not(:has(.gtl-rail)) { grid-template-columns: 1fr; }
	.gtl-sidebar, .gtl-rail { position: static; }
	.gtl-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; }
	.gtl-rail-banner { max-width: 240px; }
}
@media (max-width: 620px) {
	.gtl-card { grid-template-columns: 48px minmax(0,1fr); }
	.gtl-card-votes { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--gtl-border); padding-top: 12px; }
	.gtl-btn-vote { width: auto; margin-top: 0; }
	.gtl-grid-2 { grid-template-columns: 1fr; }
	.gtl-list-title { font-size: 24px; }
}

/* ---------- Footer ---------- */
.gtl-footer {
	border-top: 1px solid var(--gtl-border);
	background: var(--gtl-bg-2);
	margin-top: 30px;
}
.gtl-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	flex-wrap: wrap;
}
.gtl-footer-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.gtl-footer-nav a { color: var(--gtl-muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.gtl-footer-nav a:hover { color: var(--gtl-gold); }
.gtl-reset { color: var(--gtl-muted); font-size: 14px; }
.gtl-reset strong { color: var(--gtl-text); }
.gtl-reset-val { color: var(--gtl-gold); font-weight: 700; }
.gtl-copy { color: var(--gtl-muted); font-size: 12.5px; width: 100%; padding-top: 6px; border-top: 1px solid var(--gtl-border); }

/* ---------- Legal / contact pages ---------- */
.gtl-legal { background: var(--gtl-panel); border: 1px solid var(--gtl-border); border-radius: var(--gtl-radius); padding: 24px; }
.gtl-legal-body { color: var(--gtl-text); font-size: 14.5px; line-height: 1.7; }
.gtl-legal-body p { margin: 0 0 14px; }
.gtl-legal-body a { color: var(--gtl-gold); }

/* ---------- Vote challenge form ---------- */
.gtl-vote-form { margin: 8px 0 6px; }
.gtl-vote-page .gtl-back { display: inline-block; margin-top: 14px; color: var(--gtl-muted); text-decoration: none; }
.gtl-vote-page .gtl-back:hover { color: var(--gtl-gold); }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
	.gtl-shell { gap: 16px; padding: 20px 16px 50px; }
}
@media (max-width: 900px) {
	.gtl-header-inner { padding: 14px 16px; }
	.gtl-logo { font-size: 20px; }
	.gtl-nav a { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 768px) {
	.gtl-footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
	.gtl-detail-title { font-size: 22px; }
	.gtl-list-title { font-size: 22px; }
	.gtl-auth-card { padding: 20px; }

	/* Collapsible categories on mobile: closed by default, opens on tap, closes on navigate. */
	.gtl-sidebar { padding: 6px 10px; position: static; }
	.gtl-side-title {
		margin: 0;
		padding: 12px 6px;
		cursor: pointer;
		border-radius: 8px;
	}
	.gtl-side-caret {
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
		opacity: .8;
	}
	.gtl-sidebar.is-open .gtl-side-caret { transform: rotate(-135deg); }
	.gtl-side-body { display: none; padding-bottom: 8px; }
	.gtl-sidebar.is-open .gtl-side-body { display: block; }
}
@media (max-width: 480px) {
	.gtl-header-inner { gap: 8px; }
	.gtl-nav { width: 100%; justify-content: flex-start; }
	.gtl-shell { padding: 14px 12px 40px; }
	.gtl-card { padding: 12px; gap: 10px; }
	.gtl-rank-num { width: 38px; height: 38px; font-size: 16px; }
	.gtl-card-title { font-size: 16px; }
	.gtl-votes-num { font-size: 20px; }
	.gtl-vote-card { padding: 28px 20px; }
	.gtl-tabs { gap: 2px; }
	.gtl-tab { padding: 8px 10px; font-size: 13px; }
}

/* ---------- Vote button gating ---------- */
.gtl-btn[disabled], .gtl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.gtl-vote-hint { color: var(--gtl-muted); font-size: 12.5px; margin: 10px 0 0; }

/* ---------- Rank 1/2/3 medals ---------- */
.gtl-rank { position: relative; }
.gtl-rank-top .gtl-rank-num { font-size: 26px; }
.gtl-rank-label {
	position: absolute; top: -4px; right: 6px;
	font-size: 11px; font-weight: 800; color: #1a1300;
	background: var(--gtl-gold); border-radius: 999px; padding: 1px 6px;
}
.gtl-card.rank-1 { border-color: rgba(245,197,24,.7); box-shadow: 0 0 0 1px rgba(245,197,24,.25), var(--gtl-shadow); }
.gtl-card.rank-1 .gtl-rank-num { color: #f5c518; text-shadow: 0 0 14px rgba(245,197,24,.5); }
.gtl-card.rank-2 .gtl-rank-num { color: #cfd6e6; }
.gtl-card.rank-2 .gtl-rank-label { background: #cfd6e6; }
.gtl-card.rank-3 .gtl-rank-num { color: #e8a06a; }
.gtl-card.rank-3 .gtl-rank-label { background: #e8a06a; }

/* ---------- Impersonation bar ---------- */
.gtl-imp-bar {
	background: #d63638; color: #fff; text-align: center;
	padding: 8px 14px; font-size: 13px; font-weight: 600;
}
.gtl-imp-bar a { color: #fff; text-decoration: underline; }

/* ---------- Litecoin payment ---------- */
.gtl-ltc { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gtl-border); }
.gtl-ltc h3 { margin: 0 0 10px; color: #fff; }
.gtl-ltc-pay { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.gtl-ltc-qr { border-radius: 10px; background: #fff; padding: 6px; }
.gtl-ltc-info { flex: 1; min-width: 260px; }
.gtl-ltc-info p { margin: 0 0 6px; }
.gtl-ltc-info p:first-child { font-size: 18px; font-weight: 800; color: var(--gtl-gold); }

/* ---------- Sidebar ads ---------- */
.gtl-ad-rail { position: relative; }
.gtl-ad-rail .gtl-ad img { width: 100%; height: auto; display: block; border-radius: 8px; }
.gtl-ad-label { display: block; text-align: center; color: var(--gtl-muted); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; margin-top: 4px; opacity: .7; }

/* ---------- Hero header banner ---------- */
.gtl-hero {
	position: relative; display: block; width: 100%;
	height: var(--gtl-hero-h, 160px);
	background-size: cover; background-position: center; background-repeat: no-repeat;
	overflow: hidden;
}
.gtl-hero-overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px;
	text-align: center; padding: 0 16px; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.gtl-hero-title {
	font-size: clamp(24px, 4.5vw, 54px); font-weight: 900; letter-spacing: 1px;
	color: #fff; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.7); margin: 0;
}
.gtl-hero-sub {
	font-size: clamp(12px, 2vw, 22px); font-weight: 700;
	color: var(--gtl-gold); text-shadow: 0 2px 12px rgba(0,0,0,.7); margin: 0;
}
@media (max-width: 768px) {
	.gtl-hero { height: calc(var(--gtl-hero-h, 160px) * 0.62); }
}

/* ---------- Back to top ---------- */
.gtl-totop {
	position: fixed; bottom: 24px;
	border: none; border-radius: 12px; cursor: pointer;
	color: #1a1300; font-size: 22px; font-weight: 800; line-height: 1;
	box-shadow: 0 8px 22px rgba(0,0,0,.4);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 9999;
}
.gtl-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.gtl-totop:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
	.gtl-totop { bottom: 16px; }
}

/* Owner dashboard — stats cards */
.gtl-mystats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 12px; }
.gtl-mystat {
	background: var(--gtl-panel); border: 1px solid var(--gtl-border);
	border-radius: var(--gtl-radius); padding: 16px; text-align: center;
}
.gtl-mystat-num { display: block; font-size: 26px; font-weight: 800; color: var(--gtl-gold); line-height: 1.1; }
.gtl-mystat-label { display: block; margin-top: 6px; font-size: 12px; color: var(--gtl-muted); }

/* Get HTML code — button preview */
.gtl-code-preview {
	display: inline-block; padding: 14px 18px; margin: 4px 0 8px;
	background: var(--gtl-bg2); border: 1px dashed var(--gtl-border); border-radius: var(--gtl-radius);
}
.gtl-code-preview img { display: block; width: 88px; height: 51px; object-fit: fill; }

/* Gold status — dashboard strip + Gold tab box */
.gtl-gold-strip {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 16px; padding: 10px 14px;
	background: linear-gradient(180deg, rgba(245,197,24,.16), rgba(245,197,24,.04)), var(--gtl-panel);
	border: 1px solid var(--gtl-gold); border-left: 4px solid var(--gtl-gold);
	border-radius: var(--gtl-radius); color: var(--gtl-text); font-weight: 600;
}
.gtl-gold-strip a { margin-left: auto; color: var(--gtl-gold); font-weight: 700; text-decoration: none; }
.gtl-gold-strip a:hover { text-decoration: underline; }
.gtl-gold-status {
	display: flex; align-items: center; gap: 12px;
	margin: 6px 0 16px; padding: 14px 16px;
	background: linear-gradient(180deg, rgba(245,197,24,.14), rgba(245,197,24,.03)), var(--gtl-panel);
	border: 1px solid var(--gtl-gold); border-radius: var(--gtl-radius);
}
.gtl-gold-status-icon { font-size: 26px; color: var(--gtl-gold); line-height: 1; }
.gtl-gold-status-text { display: flex; flex-direction: column; gap: 2px; }
.gtl-gold-status-text strong { color: var(--gtl-gold); }
.gtl-gold-status-text small { color: var(--gtl-muted); }

/* ---------- Responsive: recent components (tablet + mobile) ---------- */
@media (max-width: 768px) {
	.gtl-mystats { grid-template-columns: repeat(2, 1fr); }
	.gtl-tabs { flex-wrap: wrap; gap: 4px; }
	.gtl-tab { padding: 8px 10px; font-size: 13px; }
	.gtl-gold-strip { font-size: 13px; }
	.gtl-gold-strip a { margin-left: 0; }
	.gtl-code-preview { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
	.gtl-mystats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.gtl-mystat { padding: 12px; }
	.gtl-mystat-num { font-size: 22px; }
	.gtl-gold-status { flex-direction: row; align-items: center; padding: 12px; }
	.gtl-gold-status-icon { font-size: 22px; }
	.gtl-code { font-size: 12px; }
	.gtl-detail-meta { flex-direction: column; align-items: stretch; }
	.gtl-detail-meta .gtl-btn { width: 100%; text-align: center; }
}

/* Country + online status pills */
.gtl-country { font-size: 12px; color: var(--gtl-muted); font-weight: 600; }
.gtl-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.gtl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.gtl-status.is-on { color: #7ee29b; background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.4); }
.gtl-status.is-on::before { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.gtl-status.is-off { color: #ff9a9a; background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.4); }
.gtl-status.is-off::before { background: #e74c3c; }

/* Crypto order expiry countdown */
.gtl-expiry { color: #ffb454; font-weight: 700; font-size: 13px; margin: 6px 0; }

/* Crypto coin chooser tabs */
.gtl-coin-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.gtl-coin-tab { background: var(--gtl-bg-2); color: var(--gtl-muted); border: 1px solid var(--gtl-border); border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; transition: all .15s; }
.gtl-coin-tab:hover { color: #fff; border-color: #4a5392; }
.gtl-coin-tab.is-active { background: var(--gtl-gold); color: #1a1300; border-color: var(--gtl-gold); }