/**
 * Giveaway member page — [propxconnect_giveaway]
 *
 * Ported from tradesaber-account. The variable names below belong to the
 * TradeSaber theme; they are mapped onto the PropXConnect tokens here so
 * every rule that follows works unchanged and tracks the theme's colour
 * schemes. Fallbacks cover a theme that defines neither.
 */

.pxgv-page {
	--panel:     var(--raise, #111C21);
	--panel-2:   var(--raise, #111C21);
	--bg-raise:  var(--bg-deep, #080F11);
	--text-dim:  var(--dim, #8FA6AE);
	--muted:     var(--dim, #8FA6AE);
	--orange:    var(--act, #EA6D22);
	--orange-soft: color-mix(in srgb, var(--act, #EA6D22) 16%, transparent);
	--green:     var(--pos, #38CE8D);
	--red:       var(--neg, #E85F63);
	--accent:    var(--brand, #0FA0CC);
	--orange-hi: var(--act-hi, #FF8038);
	--btn-text:  var(--act-ink, #0C1417);
}

.pxgv-page {
	max-width: 780px;
	margin: 0 auto;
}

/* ---- Tabs ---- */
.pxgv-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
}

.pxgv-tab {
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dim);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.pxgv-tab:hover {
	color: var(--text);
}

.pxgv-tab.is-active {
	color: var(--orange);
	border-bottom-color: var(--orange);
}

/* ---- Cards ---- */
.pxgv-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 18px;
}

.pxgv-card.is-claimed {
	border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.pxgv-card h3 {
	font-size: 19px;
	font-weight: 800;
	margin: 0 0 6px;
}

.pxgv-card h4 {
	font-size: 14px;
	font-weight: 800;
	margin: 20px 0 8px;
	letter-spacing: .01em;
}

.pxgv-eyebrow {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--orange);
	margin-bottom: 7px;
}

.pxgv-prize {
	font-family: "IBM Plex Mono", monospace;
	font-size: 14px;
	color: var(--orange);
	margin: 0 0 14px;
}

.pxgv-dim {
	color: var(--text-dim);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---- Lists ---- */
.pxgv-steps,
.pxgv-list {
	margin: 12px 0 16px 20px;
	padding: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--text-dim);
}

.pxgv-steps li.done {
	color: var(--green);
}

.pxgv-steps code,
.pxgv-list code {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12.5px;
	background: var(--panel-2);
	padding: 1px 6px;
	border-radius: 4px;
}

/* ---- Buttons ---- */
.pxgv-btn {
	display: inline-block;
	background: var(--orange);
	color: var(--btn-text);
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.pxgv-btn:hover {
	background: var(--orange-hi);
	color: var(--btn-text);
}

/* ---- Notes ---- */
.pxgv-note {
	font-size: 13.5px;
	padding: 12px 15px;
	border-radius: 10px;
	margin: 0 0 16px;
	line-height: 1.55;
}

.pxgv-note.is-ok {
	background: color-mix(in srgb, var(--green) 11%, transparent);
	border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
	color: var(--green);
}

.pxgv-note.is-err {
	background: color-mix(in srgb, var(--red) 11%, transparent);
	border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
	color: var(--red);
}

.pxgv-note a {
	color: inherit;
	text-decoration: underline;
}

/* ---- Skill-testing question ---- */
.pxgv-stq {
	margin-top: 18px;
	padding: 20px;
	border-radius: 12px;
	background: var(--panel-2);
	border: 1px solid var(--line);
}

.pxgv-q {
	margin: 14px 0 16px 20px;
	padding: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 16px;
	font-weight: 600;
	line-height: 2.1;
	color: var(--text);
}

.pxgv-hint {
	margin-bottom: 18px;
	font-size: 13px;
	color: var(--text-dim);
}

.pxgv-hint summary {
	cursor: pointer;
	color: var(--orange);
	font-weight: 600;
	padding: 6px 0;
}

.pxgv-hint ol {
	margin: 10px 0 10px 20px;
	line-height: 1.9;
}

.pxgv-hint p {
	line-height: 1.6;
	margin: 8px 0;
}

.pxgv-answer {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}

.pxgv-answer label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-dim);
}

.pxgv-answer input[type="number"] {
	width: 120px;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 10px 12px;
	color: var(--text);
	font-family: "IBM Plex Mono", monospace;
	font-size: 16px;
}

.pxgv-answer input[type="number"]:focus {
	outline: none;
	border-color: var(--orange);
	box-shadow: 0 0 0 3px var(--orange-soft);
}

.pxgv-meta {
	margin: 14px 0 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11.5px;
	color: var(--text-dim);
	letter-spacing: .03em;
}

/* ---- Verification block ---- */
.pxgv-verify {
	margin-top: 20px;
	padding: 15px 17px;
	border-radius: 11px;
	background: var(--panel-2);
	border: 1px solid var(--line);
}

.pxgv-verify-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--text-dim);
	margin-bottom: 7px;
}

.pxgv-verify code {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	color: var(--text-dim);
	word-break: break-all;
	display: block;
	line-height: 1.7;
}

.pxgv-verify p {
	margin: 10px 0 0;
	font-size: 12.5px;
}

/* ---- Winners table ---- */
.pxgv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	margin: 14px 0;
}

.pxgv-table th {
	text-align: left;
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var(--text-dim);
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
}

.pxgv-table td {
	padding: 11px 10px;
	border-bottom: 1px solid var(--line);
	color: var(--text-dim);
}

.pxgv-table tr:last-child td {
	border-bottom: none;
}

.pxgv-table code {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12.5px;
	color: var(--orange);
}

@media (max-width: 560px) {
	.pxgv-card { padding: 18px; }
	.pxgv-tab { padding: 10px 12px; font-size: 13px; }
	.pxgv-table th:nth-child(3),
	.pxgv-table td:nth-child(3) { display: none; }
}

/* ---- Legal warning ---- */
.pxgv-legal {
	margin: 14px 0;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--text-dim);
	background: color-mix(in srgb, var(--orange) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--line));
}

.pxgv-legal strong {
	color: var(--text);
}

/* ---- Attempt counter ---- */
.pxgv-counter {
	display: inline-block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	padding: 7px 13px;
	border-radius: 7px;
	margin-bottom: 14px;
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--text-dim);
}

.pxgv-counter.is-low {
	background: color-mix(in srgb, var(--red) 12%, transparent);
	border-color: color-mix(in srgb, var(--red) 38%, transparent);
	color: var(--red);
}

/* ---- Prize code ---- */
.pxgv-code {
	margin: 16px 0 4px;
	padding: 20px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--green) 8%, var(--panel-2));
	border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line));
}

.pxgv-code .pxgv-eyebrow {
	color: var(--green);
}

.pxgv-code-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pxgv-code-row code {
	flex: 1 1 220px;
	min-width: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text);
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 13px 15px;
	word-break: break-all;
}

.pxgv-copy {
	flex: 0 0 auto;
	background: var(--green);
	color: #08210f;
	border: none;
	border-radius: 9px;
	padding: 13px 20px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.pxgv-copy:hover {
	filter: brightness(1.08);
}

.pxgv-code-help {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--text-dim);
	margin-bottom: 10px;
}

.pxgv-code-help a {
	color: var(--orange);
}

.pxgv-code-help p {
	margin: 0 0 8px;
}

/* ---- Test-draw badge (admins only) ---- */
.pxgv-card.is-test {
	border-color: color-mix(in srgb, #dba617 50%, var(--line));
}

.pxgv-test-tag {
	display: inline-block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 5px 11px;
	border-radius: 6px;
	margin-bottom: 12px;
	background: color-mix(in srgb, #dba617 16%, transparent);
	border: 1px solid color-mix(in srgb, #dba617 45%, transparent);
	color: #dba617;
}

/* ---- The equation: the thing they actually have to answer ---- */
.pxgv-equation {
	margin: 18px 0;
	padding: 26px 24px;
	border-radius: 14px;
	text-align: center;
	background: var(--bg-raise);
	border: 2px solid var(--orange);
	box-shadow: 0 0 0 4px var(--orange-soft);
}

.pxgv-equation-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--orange);
	margin-bottom: 14px;
}

.pxgv-equation-math {
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(20px, 4.6vw, 30px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--text);
	letter-spacing: .01em;
	word-spacing: .12em;
}

.pxgv-equation-math .pxgv-eq {
	color: var(--orange);
	font-weight: 700;
}

/* ---- Method ---- */
.pxgv-method {
	margin: 18px 0;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--panel);
	border: 1px solid var(--line);
}

.pxgv-method-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--text-dim);
	margin-bottom: 10px;
}

.pxgv-method > p {
	font-size: 13.5px;
	color: var(--text-dim);
	line-height: 1.6;
	margin: 0 0 10px;
}

.pxgv-method .pxgv-q {
	margin: 12px 0 12px 22px;
	font-size: 15px;
	line-height: 2;
}

.pxgv-method-warn {
	margin: 12px 0 0 !important;
	padding-top: 11px;
	border-top: 1px solid var(--line);
	font-size: 12.5px !important;
}

.pxgv-method-warn strong {
	color: var(--orange);
}

/* ---- upcoming draws list ------------------------------------------
   Its OWN class. This was written as .pxgv-list, which the Rules tab
   also uses — so a three-column grid meant for dates and prizes was
   applied to paragraphs of rules text, squeezing every line into the
   96px date column. ------------------------------------------------- */
.pxgv-sched{list-style:none;margin:18px 0;padding:0}
.pxgv-sched li{
	display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:baseline;
	padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.pxgv-sched li.pxgv-month{
	display:block;grid-template-columns:none;border-bottom:0;padding:16px 0 6px;
	font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
}
.pxgv-sched li.pxgv-month:first-child{padding-top:0}
.pxgv-when{font-weight:600;color:var(--text)}
.pxgv-what{color:var(--text);min-width:0}
.pxgv-elig{text-align:right;white-space:nowrap;font-size:12px}
.pxgv-elig b.ok{color:var(--green);font-weight:700}
.pxgv-elig i{font-style:normal;color:var(--text-dim)}
.pxgv-elig i.need{color:var(--orange)}

/* The linking requirement, set apart from the ordinary rules. */
.pxgv-must{
	margin:18px 0 22px;padding:16px 18px;border-radius:12px;
	background:color-mix(in srgb,#5865F2 12%,transparent);
	box-shadow:inset 0 0 0 1px color-mix(in srgb,#5865F2 55%,transparent);
}
.pxgv-must b{display:block;font-size:15px;color:var(--text);margin-bottom:6px}
.pxgv-must p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--text-dim)}
.pxgv-must .pxgv-btn{display:inline-block}