/**
 * Giveaway — YouTube Connection card.
 *
 * PORTED FROM tradesaber-account, where this sheet leaned on the TradeSaber
 * theme for the card shell (.acct-card), the buttons (.btn-primary,
 * .btn-ghost) and a set of custom properties (--panel-2, --text-dim,
 * --bg-raise, --orange…). PropXConnect defines none of those — it uses
 * --raise, --dim, --act and .btn-pri / .btn-line — so the card arrived here
 * looking broken rather than merely different.
 *
 * Two fixes, both in this block:
 *   1. The old variable names are mapped onto the PropXConnect tokens, so
 *      every rule below works untouched and follows the theme's four colour
 *      schemes automatically.
 *   2. The shell and button classes the markup uses are defined here, so the
 *      plugin renders correctly on ANY theme rather than only on one that
 *      happens to provide them.
 */

.pxg-card,
.acct-youtube {
	/* Old name -> PropXConnect token. Fallbacks keep it sane on a theme that
	   defines neither. */
	--panel-2:   var(--raise, #111C21);
	--bg-raise:  var(--bg-deep, #080F11);
	--text-dim:  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);
}

/* The card shell the markup expects. */
.acct-card {
	background: var(--raise, #111C21);
	border: 1px solid var(--line, #1E3239);
	border-radius: 14px;
	padding: 20px 22px;
	color: var(--text, #EDF3F5);
}
.acct-gap { margin-top: 18px; }
.acct-sub { color: var(--dim, #8FA6AE); font-size: 14px; line-height: 1.5; }
.acct-brand-logo { vertical-align: middle; }

/* Buttons. PropXConnect ships .btn-pri / .btn-line; the ported markup asks
   for .btn-primary / .btn-ghost. Aliased rather than rewritten in the PHP so
   the port stays a faithful copy and diffs against the original stay small. */
.acct-youtube .btn-primary,
.pxgv-page .btn-primary {
	background: var(--act, #EA6D22);
	color: var(--act-ink, #0C1417);
}
.acct-youtube .btn-primary:hover,
.pxgv-page .btn-primary:hover { background: var(--act-hi, #FF8038); }
.acct-youtube .btn-ghost,
.pxgv-page .btn-ghost {
	box-shadow: inset 0 0 0 1px var(--rule, #28414A);
	color: var(--text, #EDF3F5);
	background: transparent;
}
.acct-youtube .btn-ghost:hover,
.pxgv-page .btn-ghost:hover {
	box-shadow: inset 0 0 0 1px var(--act, #EA6D22);
	color: var(--act, #EA6D22);
}

.acct-youtube {
	border-color: color-mix(in srgb, #ff0033 45%, var(--line));
}

.pxg-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.pxg-head h3 {
	margin: 0;
}

.pxg-chip {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--orange-soft);
	color: var(--orange);
	border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
	white-space: nowrap;
}

.pxg-msg {
	font-size: 13px;
	padding: 9px 12px;
	border-radius: 9px;
	margin: 0 0 12px;
	line-height: 1.45;
}

.pxg-msg.is-ok {
	background: color-mix(in srgb, var(--green) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
	color: var(--green);
}

.pxg-msg.is-err {
	background: color-mix(in srgb, var(--red) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
	color: var(--red);
}

.pxg-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
}

.pxg-form input[type="text"] {
	flex: 1 1 190px;
	min-width: 0;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 9px 12px;
	color: var(--text);
	font-family: "IBM Plex Mono", monospace;
	font-size: 13.5px;
}

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

.pxg-form input[type="text"]::placeholder {
	color: var(--text-dim);
	opacity: .65;
}

.pxg-form .btn {
	flex: 0 0 auto;
}

.pxg-hint {
	margin-top: 11px;
	font-size: 12.5px;
	color: var(--text-dim);
	line-height: 1.5;
}

.pxg-hint code {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--panel-2);
}

.pxg-unlink {
	margin-top: 10px;
}

.pxg-unlink-btn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	color: var(--text-dim);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pxg-unlink-btn:hover {
	color: var(--red);
}

/* ---- Current draw block ---- */
.pxg-current {
	margin: 14px 0 16px;
	padding: 15px 17px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--orange) 7%, var(--panel-2));
	border: 1px solid color-mix(in srgb, var(--orange) 26%, var(--line));
}

.pxg-current.is-idle {
	background: var(--panel-2);
	border-color: var(--line);
}

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

.pxg-current.is-idle .pxg-current-label {
	color: var(--text-dim);
}

.pxg-current-title {
	font-size: 15.5px;
	font-weight: 800;
	margin-bottom: 3px;
}

.pxg-current-prize {
	font-size: 13px;
	color: var(--text-dim);
	margin-bottom: 12px;
}

.pxg-watch {
	display: inline-block;
	margin-bottom: 10px;
}

.pxg-current-hint {
	font-size: 12.5px;
	color: var(--text-dim);
	line-height: 1.55;
}

.pxg-current-hint a {
	color: var(--orange);
}

/* ---- Winner state ---- */
.acct-youtube.is-winner {
	border-color: color-mix(in srgb, var(--green) 55%, var(--line));
}

.pxg-chip.is-sim {
	background: color-mix(in srgb, var(--green) 16%, transparent);
	color: var(--green);
	border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.pxg-won {
	margin: 4px 0 18px;
	padding: 18px 20px;
	border-radius: 13px;
	background: color-mix(in srgb, var(--green) 9%, var(--panel-2));
	border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
}

.pxg-won-tag {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--green);
	margin-bottom: 10px;
}

.pxg-won-lead {
	font-size: 15.5px;
	margin: 0 0 8px;
	line-height: 1.5;
}

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

.pxg-won p {
	font-size: 13.5px;
	color: var(--text-dim);
	line-height: 1.6;
	margin: 0 0 8px;
}

.pxg-steps {
	margin: 0 0 10px 18px;
	padding: 0;
	font-size: 13.5px;
	color: var(--text-dim);
	line-height: 1.75;
}

.pxg-won-note {
	font-size: 12.5px !important;
	padding-top: 8px;
	border-top: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
	margin-bottom: 0 !important;
}

.pxg-won-note a {
	color: var(--orange);
}

.pxg-won-cta {
	margin: 14px 0 12px !important;
}

.pxg-won-cta .btn {
	display: inline-block;
}

/* Logo sits inline with the card heading */
.pxg-head .acct-brand-logo {
	height: 22px;
	width: auto;
	flex: 0 0 auto;
	display: block;
}

/* =====================================================================
   THE DRAWS PANEL

   Modelled directly on the rewards dashboard rather than invented again.
   Two earlier passes went wrong the same way: I reached for the marketing
   pages' voice — display face, weight 900, uppercase everything — and applied
   it to a logged-in tool. That voice is right for a headline and wrong for a
   panel somebody reads every day.

   What the rewards dashboard actually does, and what this now copies:
     - Body face throughout. Weight 600 for labels, 800 only on the one big
       number. Nothing uppercase except small tracked eyebrows.
     - Sizes that step calmly: 52 / 19 / 14 / 13.5 / 11.5.
     - Colour carried by small elements — the gem, the step circles, the
       status pills — while text stays --text or --dim.
     - A hero panel with a soft radial glow, then a two-column grid of cards.

   Tokens are aliased once below, as the rewards sheet does, so every rule
   reads the same and all four colour schemes follow.
   ===================================================================== */

.pxg{
	--c-bg:var(--raise,#141f24);--c-deep:var(--bg-deep,#0a1114);--c-line:var(--line,#24363d);
	--c-rule:var(--rule,#28414a);--c-text:var(--text,#edf3f5);--c-dim:var(--dim,#8fa6ae);
	--c-faint:var(--faint,#5a737d);--c-act:var(--act,#ea6d22);--c-ink:var(--act-ink,#0c1417);
	--c-brand:var(--brand,#0fa0cc);--c-glow:var(--glow,#57cdf9);
	--c-pos:var(--pos,#38ce8d);--c-neg:var(--neg,#e85f63);
	display:flex;flex-direction:column;gap:14px;margin-top:18px;
	font-family:var(--body,inherit);
}
.pxg *{box-sizing:border-box}
.pxg-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-faint);display:block}

/* ---- hero ---- */
.pxg-hero{
	position:relative;overflow:hidden;padding:26px 28px;background:var(--c-bg);
	box-shadow:inset 0 0 0 1px var(--c-line);
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.pxg-hero::before{
	content:"";position:absolute;inset:auto -80px -180px auto;width:420px;height:420px;
	background:radial-gradient(closest-side,color-mix(in srgb,var(--c-brand) 22%,transparent),transparent 72%);
	pointer-events:none;
}
.pxg-hero.is-prem::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--c-pos) 20%,transparent),transparent 72%)}
.pxg-hero-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pxg-bal-n{display:flex;align-items:center;gap:14px;margin-top:10px}
.pxg-gem{
	width:34px;height:34px;flex:none;display:block;
	background:linear-gradient(150deg,var(--c-glow),var(--c-brand));
	clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.pxg-hero.is-prem .pxg-gem{background:linear-gradient(150deg,var(--c-pos),color-mix(in srgb,var(--c-pos) 55%,#000))}
.pxg-big{font-size:52px;font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--c-text)}
.pxg-bal-sub{position:relative;margin:10px 0 0;font-size:13px;color:var(--c-dim)}
.pxg-tierbadge{
	position:relative;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
	padding:7px 12px;color:var(--c-brand);box-shadow:inset 0 0 0 1px var(--c-brand);white-space:nowrap;
}
.pxg-tierbadge.is-full{color:var(--c-pos);box-shadow:inset 0 0 0 1px var(--c-pos)}

/* the inset "building for next month" block */
.pxg-inset{
	position:relative;display:flex;align-items:center;gap:18px;margin-top:22px;padding:16px 18px;
	background:color-mix(in srgb,var(--c-deep) 70%,transparent);box-shadow:inset 0 0 0 1px var(--c-line);
}
.pxg-inset-txt{flex:1 1 auto;min-width:0}
.pxg-inset-txt b{display:block;font-size:14px;font-weight:600;color:var(--c-text)}
.pxg-inset-txt p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--c-dim)}
.pxg-inset-n{flex:none;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--c-glow)}

/* progress */
.pxg-prog{position:relative;margin-top:22px}
.pxg-prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.pxg-prog-n{font-size:12px;color:var(--c-faint)}
.pxg-prog-n b{color:var(--c-text);font-size:14px}
.pxg-bar{height:8px;background:var(--c-deep);box-shadow:inset 0 0 0 1px var(--c-line);overflow:hidden}
.pxg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-brand),var(--c-glow));transition:width .5s ease}
.pxg-hero.is-prem .pxg-bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--c-pos) 70%,#000),var(--c-pos))}
.pxg-prog-foot{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.pxg-pct{font-size:15px;font-weight:800;color:var(--c-glow)}
.pxg-hero.is-prem .pxg-pct{color:var(--c-pos)}
.pxg-goal{font-size:13px;font-weight:600;color:var(--c-text)}
.pxg-fresh{
	position:relative;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--c-line);
	font-size:11.5px;line-height:1.55;color:var(--c-faint);
}

/* ---- layout ---- */
.pxg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
@media(max-width:900px){.pxg-grid{grid-template-columns:1fr}}
.pxg-card{
	background:var(--c-bg);box-shadow:inset 0 0 0 1px var(--c-line);padding:24px;
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.pxg-card h3{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--c-text)}
.pxg-card h3.pxg-h3-gap{margin-top:26px}
.pxg-sub{color:var(--c-dim);font-size:13.5px;margin:0 0 18px;line-height:1.55}
.pxg-empty{margin:0;color:var(--c-faint);font-size:13.5px}

/* ---- the follow checklist ---- */
.pxg-checks{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--c-line)}
.pxg-checks li{
	display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:start;
	padding:13px 0;border-bottom:1px solid var(--c-line);
}
.pxg-check{
	width:18px;height:18px;margin-top:1px;border-radius:50%;
	box-shadow:inset 0 0 0 1.5px var(--c-faint);position:relative;
}
.pxg-checks li.is-done .pxg-check{background:var(--c-pos);box-shadow:none}
.pxg-checks li.is-done .pxg-check::after{
	content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;
	border:solid var(--c-ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.pxg-check-t{min-width:0}
.pxg-check-t b{display:block;font-size:13.5px;font-weight:600;color:var(--c-text)}
.pxg-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pxg-links a{font-size:11.5px;color:var(--c-brand)}
.pxg-links a:hover{color:var(--c-glow)}
.pxg-state{display:block;margin-top:5px;font-size:11.5px;font-style:normal}
.pxg-state.s-pending{color:var(--c-act)}
.pxg-state.s-rejected{color:var(--c-neg)}
.pxg-check-v{font-size:12px;font-weight:700;color:var(--c-glow);white-space:nowrap}
.pxg-checks li:not(.is-done) .pxg-check-v{color:var(--c-faint);font-weight:600}

/* ---- upload ---- */
.pxg-upload{margin-top:4px}
.pxg-upload h4{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--c-text)}
.pxg-upload-note{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--c-dim)}
.pxg-upload-limit{margin:0;font-size:13px;color:var(--c-act)}
.pxg-upload-form{display:flex;flex-direction:column;gap:14px}
.pxg-select{display:flex;flex-direction:column;gap:7px}
.pxg-select-l{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--c-text)}
.pxg-select-l::before{
	content:"1";width:20px;height:20px;flex:none;display:grid;place-items:center;
	background:var(--c-brand);color:#fff;font-size:11px;font-weight:700;border-radius:50%;
}
.pxg-select select{
	background:var(--c-deep);border:1px solid var(--c-line);color:var(--c-text);
	padding:12px 13px;font-size:14px;font-family:inherit;width:100%;
}
.pxg-select select:focus{outline:none;border-color:var(--c-brand)}
.pxg-drop-l{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:7px}
.pxg-drop-l::before{
	content:"2";width:20px;height:20px;flex:none;display:grid;place-items:center;
	background:var(--c-brand);color:#fff;font-size:11px;font-weight:700;border-radius:50%;
}
.pxg-drop{
	position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;
	gap:6px;padding:26px 18px;text-align:center;cursor:pointer;
	border:1px dashed var(--c-rule);background:var(--c-deep);transition:.15s;
}
.pxg-drop:hover,.pxg-drop.is-over{border-color:var(--c-brand);background:color-mix(in srgb,var(--c-brand) 7%,var(--c-deep))}
.pxg-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.pxg-drop-icon{width:26px;height:26px;border:2px solid var(--c-faint);border-radius:4px;position:relative}
.pxg-drop-icon::after{
	content:"";position:absolute;left:50%;top:50%;width:2px;height:13px;background:var(--c-faint);
	transform:translate(-50%,-50%);box-shadow:-6px 0 0 -5.5px var(--c-faint);
}
.pxg-drop-t{font-size:13.5px;font-weight:600;color:var(--c-text);word-break:break-all}
.pxg-drop-s{font-size:11px;color:var(--c-faint)}
.pxg-drop.has-file{border-style:solid;border-color:var(--c-pos)}
.pxg-drop.has-file .pxg-drop-icon{border-color:var(--c-pos)}
.pxg-drop.has-file .pxg-drop-icon::after{background:var(--c-pos);box-shadow:-6px 0 0 -5.5px var(--c-pos)}
.pxg-preview{max-height:130px;max-width:100%;margin-top:8px;border:1px solid var(--c-line)}
.pxg-upload-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* THE LABEL HAS TO BEAT `.entry a`.
   The theme colours every link inside page content with var(--act) — the same
   orange as this button's background. A plain `.pxg-btn` loses that contest
   and the text renders orange on orange, invisible until hover flips it. The
   extra selectors outrank it; the plain one stays for buttons outside page
   content. */
.pxg-btn,
.pxg .pxg-btn,
.entry a.pxg-btn,
.entry .pxg-btn{
	display:inline-block;
	background:var(--c-act);color:var(--c-ink);border:0;padding:14px 24px;
	font-weight:800;font-size:14px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;
	font-family:inherit;text-decoration:none;
	clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.pxg-btn:hover,
.pxg .pxg-btn:hover,
.entry a.pxg-btn:hover{filter:brightness(1.1);color:var(--c-ink);text-decoration:none}
.pxg-upload-left{font-size:11.5px;color:var(--c-faint)}
.pxg-upload.is-clear{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--c-dim)}
.pxg-upload-done{
	flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
	background:var(--c-pos);color:var(--c-ink);font-size:12px;font-weight:700;
}

/* ---- draw rows ---- */
.pxg-rows{display:flex;flex-direction:column;border-top:1px solid var(--c-line)}
.pxg-row{
	display:grid;grid-template-columns:8px 62px 1fr auto;gap:12px;align-items:center;
	padding:13px 0;border-bottom:1px solid var(--c-line);font-size:13px;
}
/* THE HIDDEN ATTRIBUTE HAS TO WIN.
   The browser's own [hidden]{display:none} is a UA rule, and any author rule
   setting display beats it. So row.hidden = true marked these rows hidden and
   they carried on showing — the October tab filtered correctly while every
   September row stayed on screen underneath it. */
.pxg-row[hidden]{display:none}
.pxg-dot{width:8px;height:8px;border-radius:50%;background:var(--c-faint)}
.pxg-dot.s-ok{background:var(--c-pos)}
.pxg-dot.s-need{background:var(--c-act);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-act) 22%,transparent)}
.pxg-dot.s-wait{background:var(--c-faint)}
.pxg-when b{display:block;font-size:13.5px;font-weight:700;color:var(--c-text);line-height:1.1}
.pxg-when i{display:block;font-style:normal;font-size:11px;color:var(--c-faint);margin-top:3px}
.pxg-prize{font-weight:600;color:var(--c-text);min-width:0}
.pxg-elig{text-align:right;white-space:nowrap}
.pxg-status{
	display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
	font-style:normal;padding:5px 8px;
}
.pxg-status.s-ok{color:var(--c-pos);box-shadow:inset 0 0 0 1px var(--c-pos)}
.pxg-status.s-need{color:var(--c-act);box-shadow:inset 0 0 0 1px var(--c-act)}
.pxg-status.s-wait{color:var(--c-faint);box-shadow:inset 0 0 0 1px var(--c-rule)}
.pxg-elig em{display:block;font-style:normal;font-size:11.5px;color:var(--c-faint);margin-top:4px}
.pxg-row.is-past{opacity:.8}
@media(max-width:640px){
	.pxg-row{grid-template-columns:8px 1fr;row-gap:8px}
	.pxg-prize,.pxg-elig{grid-column:2/-1;text-align:left}
}

/* ---- how it works ---- */
.pxg-how{background:var(--c-bg);box-shadow:inset 0 0 0 1px var(--c-line);
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.pxg-how summary{
	cursor:pointer;padding:16px 24px;list-style:none;display:flex;align-items:center;gap:10px;
	font-size:14px;font-weight:600;color:var(--c-text);
}
.pxg-how summary::-webkit-details-marker{display:none}
.pxg-how summary::before{
	content:"?";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
	background:var(--c-brand);color:#fff;font-size:11px;font-weight:700;
}
.pxg-how summary::after{content:"\203A";margin-left:auto;color:var(--c-faint);font-size:18px;transition:transform .14s}
.pxg-how[open] summary::after{transform:rotate(90deg)}
.pxg-how-body{padding:0 24px 20px;font-size:13.5px;line-height:1.6;color:var(--c-dim)}
.pxg-how-body p{margin:0 0 12px}
.pxg-how-body ol{margin:0 0 12px;padding-left:20px}
.pxg-how-body li{margin-bottom:8px}
.pxg-how-body b{color:var(--c-text);font-weight:600}
.pxg-fine{font-size:11.5px;color:var(--c-faint);margin:0;line-height:1.55}
.pxg-link-btn{
	display:inline-block;background:#5865F2;color:#fff;padding:7px 12px;
	font-size:11.5px;font-weight:700;white-space:nowrap;
	clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.pxg-link-btn:hover{filter:brightness(1.12);color:#fff}
.pxg-unlink{font-size:11.5px;color:var(--c-faint);text-decoration:underline}
.pxg-unlink:hover{color:var(--c-neg)}
.pxg-soon{font-size:11px;color:var(--c-faint);font-style:italic}

/* ---- the Discord account name, and the value+control stack ---- */
.pxg-as{display:block;margin-top:3px;font-size:11.5px;color:var(--c-brand)}
.pxg-v-stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pxg-v-n{font-size:12px;font-weight:700;color:var(--c-glow)}
.pxg-checks li:not(.is-done) .pxg-v-n{color:var(--c-faint);font-weight:600}

/* ---- the YouTube handle, inline under the follow list ---- */
.pxg-handle{
	margin:0 0 20px;padding:16px 18px;background:var(--c-deep);
	box-shadow:inset 0 0 0 1px var(--c-line);
}
.pxg-handle.is-linked{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-pos) 40%,var(--c-line))}
.pxg-handle-head{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.pxg-handle .pxg-check{margin-top:1px}
.pxg-handle .pxg-check.is-on{background:var(--c-pos);box-shadow:none;position:relative}
.pxg-handle .pxg-check.is-on::after{
	content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;
	border:solid var(--c-ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.pxg-handle-t b{display:block;font-size:13.5px;font-weight:600;color:var(--c-text)}
.pxg-handle-t small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--c-dim)}
.pxg-handle-form{display:flex;margin-top:12px}
.pxg-handle-form input[type=text]{
	flex:1;min-width:0;background:var(--c-bg);border:1px solid var(--c-line);border-right:0;
	color:var(--c-text);padding:11px 13px;font-size:14px;font-family:inherit;
}
.pxg-handle-form input:focus{outline:none;border-color:var(--c-brand)}
.pxg-handle-btn{
	background:var(--c-brand);color:#fff;border:0;padding:11px 20px;cursor:pointer;
	font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.pxg-handle-btn:hover{filter:brightness(1.12)}
.pxg-handle-hint{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--c-faint)}

/* ---- public calendar page ---- */
.pxg-public{gap:14px}
.pxg-monthhead{
	padding:14px 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--c-faint);border-bottom:1px solid var(--c-line);
}
.pxg-rows .pxg-monthhead:first-child{padding-top:0}
.pxg-partner{
	display:inline-block;margin-left:8px;font-style:normal;font-size:10px;letter-spacing:.1em;
	text-transform:uppercase;color:var(--c-act);padding:2px 6px;
	box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-act) 55%,transparent);
}
.pxg-dot.s-out{background:var(--c-rule)}
.pxg-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 0}
.pxg-cta span{font-size:13px;color:var(--c-dim)}

/* ---- the "how do I qualify" info button and card ---- */
.pxg-info{
	background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:11.5px;
	color:var(--c-act);text-align:right;display:inline-flex;align-items:center;gap:5px;
}
.pxg-info:hover{color:var(--c-text)}
.pxg-info span{
	display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
	box-shadow:inset 0 0 0 1px currentColor;font-size:9px;font-weight:700;flex:none;
}
.pxg-modal{
	position:fixed;inset:0;z-index:10050;display:flex;align-items:flex-start;justify-content:center;
	padding:28px 18px;background:rgba(0,0,0,.72);overflow:auto;
}
.pxg-modal[hidden]{display:none}
.pxg-modal-box{
	position:relative;margin:auto;width:100%;max-width:460px;padding:26px 28px;
	background:var(--c-bg,#141f24);box-shadow:inset 0 0 0 1px var(--c-line,#24363d),0 24px 60px -20px #000;
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.pxg-modal-x{
	position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
	font-size:24px;line-height:1;color:var(--c-faint,#5a737d);padding:4px 8px;
}
.pxg-modal-x:hover{color:var(--c-text,#edf3f5)}
.pxg-modal-box h4{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--c-text,#edf3f5)}
.pxg-modal-sub{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--c-dim,#8fa6ae)}
.pxg-modal-img{
	display:block;width:100%;height:auto;margin:0 0 18px;
	border:1px solid var(--c-line,#24363d);background:var(--c-deep,#0a1114);
}
.pxg-modal-steps{margin:0 0 18px;padding-left:20px;font-size:13.5px;line-height:1.65;color:var(--c-dim,#8fa6ae)}
.pxg-modal-steps li{margin-bottom:7px}
.pxg-modal-steps a{color:var(--c-brand,#0fa0cc);word-break:break-all}
.pxg-modal-state{margin:0 0 16px;font-size:13px}
.pxg-modal-state.is-pending{color:var(--c-act,#ea6d22)}
.pxg-modal-state.is-rejected{color:var(--c-neg,#e85f63)}
.pxg-modal-box .pxg-btn{display:inline-block;text-align:center}

/* ---- handle: settled state vs editing ---- */
.pxg-handle-t b{display:flex;align-items:center;gap:8px}
.pxg-info.is-inline{font-size:0;color:var(--c-faint,#5a737d)}
.pxg-info.is-inline span[aria-hidden]{font-size:9px}
.pxg-info.is-inline:hover{color:var(--c-brand,#0fa0cc)}
.pxg-handle-locked{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:11px 14px;
	background:color-mix(in srgb,var(--c-pos,#38ce8d) 8%,var(--c-bg,#141f24));
	box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-pos,#38ce8d) 32%,transparent);
}
.pxg-handle-val{
	flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;color:var(--c-text,#edf3f5);
	word-break:break-all;
}
.pxg-handle-ok{
	font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-pos,#38ce8d);
}
.pxg-handle-change{
	background:none;border:0;cursor:pointer;font:inherit;font-size:12px;
	color:var(--c-brand,#0fa0cc);text-decoration:underline;padding:0;
}
.pxg-handle-change:hover{color:var(--c-glow,#57cdf9)}
.pxg-handle-form[hidden]{display:none}
.pxg-handle-locked[hidden]{display:none}
.pxg-handle-unlink{margin-top:10px}
.pxg-handle-unlink button{
	background:none;border:0;cursor:pointer;font:inherit;font-size:11.5px;
	color:var(--c-faint,#5a737d);text-decoration:underline;padding:0;
}
.pxg-handle-unlink button:hover{color:var(--c-neg,#e85f63)}

/* ---- example image: click to enlarge ---- */
.pxg-zoom{
	display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
	position:relative;margin:0 0 18px;
}
.pxg-zoom .pxg-modal-img{margin:0}
.pxg-zoom-hint{
	position:absolute;right:8px;bottom:8px;padding:4px 8px;
	background:rgba(0,0,0,.72);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
	pointer-events:none;
}
.pxg-zoom:hover .pxg-zoom-hint{background:var(--c-act,#ea6d22);color:var(--c-ink,#0c1417)}
.pxg-zoomwrap{
	position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;
	padding:28px;background:rgba(0,0,0,.9);cursor:zoom-out;
}
.pxg-zoomwrap.is-open{display:flex}
.pxg-zoomwrap img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px -20px #000}
.pxg-winner{color:var(--c-pos,#38ce8d);font-weight:600;font-size:13px}

/* ---- how to earn, on the public page ---- */
.pxg-earn2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}
@media(max-width:640px){.pxg-earn2{grid-template-columns:1fr}}
.pxg-earn2 > div{position:relative;padding-left:36px}
.pxg-earn2-n{
	position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;
	border-radius:50%;background:var(--c-brand,#0fa0cc);color:#fff;font-size:13px;font-weight:700;
}
.pxg-earn2 b{display:block;font-size:15px;font-weight:700;color:var(--c-text,#edf3f5);margin-bottom:5px}
.pxg-earn2 p{margin:0;font-size:13.5px;line-height:1.6;color:var(--c-dim,#8fa6ae)}

/* ---- this month's videos ---- */
.pxg-vids .pxg-sub strong{color:var(--c-act,#ea6d22)}
.pxg-vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.pxg-vid{position:relative;display:block;overflow:hidden;background:var(--c-deep,#0a1114);
	box-shadow:inset 0 0 0 1px var(--c-line,#24363d);transition:.15s}
/* FIXED height, cropped.
   The clip below is "a row and a half", and a row's height has to be known for
   that to mean anything. Left to the image's own aspect ratio it changes with
   the column count — five narrow columns on the public page, two wide ones in
   the dashboard sidebar — so the same max-height would cut at a different
   point on each. A fixed 104px makes a row exactly 116px everywhere. */
.pxg-vid img{display:block;width:100%;height:104px;object-fit:cover;opacity:.82;transition:.15s}
.pxg-vid:hover{box-shadow:inset 0 0 0 1px var(--c-brand,#0fa0cc)}
.pxg-vid:hover img{opacity:1}
.pxg-vid-tag{
	position:absolute;left:0;right:0;bottom:0;padding:7px 9px;
	background:linear-gradient(transparent,rgba(0,0,0,.88));
	font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
	color:var(--c-act,#ea6d22);
}
.pxg-vid.is-done .pxg-vid-tag{color:var(--c-pos,#38ce8d)}
.pxg-vid.is-done img{opacity:.45}
.pxg-vid.is-done{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-pos,#38ce8d) 42%,var(--c-line,#24363d))}

/* ---- tabs on the video / entries card ----------------------------------
   A 2x2 grid of PAIRS, not a row of four:

     August videos    |  September videos
            v         |         v
     September draws  |  October draws

   The pairing is spatial, so nothing has to describe it. Each column is one
   month of videos above the draws those comments feed, with a rule between
   the columns. ------------------------------------------------------------ */
.pxg-tabgrid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	margin:0 0 18px;border-bottom:1px solid var(--c-line,#24363d);
}
.pxg-tabcol{
	display:flex;flex-direction:column;align-items:stretch;gap:2px;
	padding:0 14px 12px;min-width:0;
}
.pxg-tabcol + .pxg-tabcol{border-left:1px solid var(--c-line,#24363d)}
@media(max-width:560px){
	.pxg-tabgrid{grid-template-columns:1fr}
	.pxg-tabcol + .pxg-tabcol{
		border-left:0;border-top:1px solid var(--c-line,#24363d);padding-top:12px;
	}
}

.pxg-tab{
	display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
	padding:10px 12px;cursor:pointer;background:none;border:0;
	font:inherit;font-size:13px;font-weight:600;line-height:1.25;text-align:center;
	color:var(--c-faint,#5a737d);transition:.14s;
	box-shadow:inset 0 0 0 1px transparent;
}
.pxg-tab:hover{color:var(--c-text,#edf3f5)}
.pxg-tab.is-on{
	color:var(--c-text,#edf3f5);
	background:var(--c-deep,#0a1114);
	box-shadow:inset 0 0 0 1px var(--c-act,#ea6d22);
}
.pxg-tab-l{min-width:0}
.pxg-tab-n{
	display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
	background:var(--c-deep,#0a1114);box-shadow:inset 0 0 0 1px var(--c-line,#24363d);
	font-size:11px;font-weight:700;color:var(--c-dim,#8fa6ae);flex:none;
}
.pxg-tab.is-on .pxg-tab-n{background:var(--c-act,#ea6d22);color:var(--c-ink,#0c1417);box-shadow:none}
/* The partner of whichever tab is selected — the other half of the pair. */
.pxg-tab.is-paired{color:var(--c-text,#edf3f5)}
.pxg-tab.is-paired .pxg-tab-n{
	background:transparent;color:var(--c-act,#ea6d22);
	box-shadow:inset 0 0 0 1px var(--c-act,#ea6d22);
}

/* The arrow BETWEEN the pair, always visible — it describes the relationship,
   which is true whether or not either tab happens to be selected. */
.pxg-tabarrow{
	display:block;text-align:center;line-height:1;font-size:13px;
	color:var(--c-rule,#28414a);padding:1px 0;
}
.pxg-tabcol:hover .pxg-tabarrow{color:var(--c-act,#ea6d22)}
.pxg-tabslot.is-empty{display:block;height:41px}

.pxg-filter{
	margin-left:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
	color:var(--c-act,#ea6d22);vertical-align:middle;
}
.pxg-filter[hidden]{display:none}
.pxg-tabpane{display:none}
.pxg-tabpane.is-on{display:block}

/* ---- the grid, clipped to about two and a half rows ---- */
/* 1.5 rows: 104px thumb + 12px gap = 116px a row, so 174px shows one full
   row and half of the next. The half row is the signal that there is more. */
.pxg-vidgrid.is-clipped{
	max-height:174px;overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);
	        mask-image:linear-gradient(180deg,#000 58%,transparent);
}
.pxg-vidgrid.is-clipped.is-open{
	max-height:none;
	-webkit-mask-image:none;mask-image:none;
}
.pxg-more{
	display:block;margin:12px auto 0;padding:8px 18px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
	letter-spacing:.04em;text-transform:uppercase;color:var(--c-brand,#0fa0cc);
	background:none;border:0;box-shadow:inset 0 0 0 1px var(--c-rule,#28414a);
}
.pxg-more:hover{box-shadow:inset 0 0 0 1px var(--c-brand,#0fa0cc);color:var(--c-glow,#57cdf9)}

/* ---- entry breakdown ---- */
.pxg-breakdown{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.pxg-breakdown li{display:flex;flex-direction:column;gap:3px}
.pxg-breakdown b{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-glow,#57cdf9)}
.pxg-breakdown span{font-size:12.5px;color:var(--c-dim,#8fa6ae)}

/* Winners, collapsed on the dashboard. */
.pxg-winners summary::before{content:"\1F3C6";background:none;font-size:14px}
.pxg-sum-n{
	display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;
	border-radius:10px;background:var(--c-deep,#0a1114);box-shadow:inset 0 0 0 1px var(--c-line,#24363d);
	font-size:11px;font-weight:700;color:var(--c-dim,#8fa6ae);
}
.pxg-winners .pxg-rows{margin-top:2px}
.pxg-winners .pxg-row{border-bottom-color:var(--c-line,#24363d)}

/* Winners in the member column, filling the space the upload form leaves. */
.pxg-winblock{margin-top:26px;padding-top:22px;border-top:1px solid var(--c-line,#24363d)}
.pxg-winblock h4{
	margin:0 0 12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--c-faint,#5a737d);font-weight:500;
}
.pxg-winblock .pxg-rows{border-top:0}
.pxg-winblock .pxg-row{grid-template-columns:8px 58px 1fr auto;padding:11px 0}
.pxg-winmore[hidden]{display:none}

/* ---- unclaimed win ---- */
.pxg-won{
	display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
	padding:20px 24px;background:color-mix(in srgb,var(--c-pos,#38ce8d) 12%,var(--c-bg,#141f24));
	box-shadow:inset 0 0 0 1px var(--c-pos,#38ce8d);
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.pxg-won-txt{min-width:0}
.pxg-won-txt b{display:block;font-size:19px;font-weight:800;color:var(--c-pos,#38ce8d);letter-spacing:-.01em}
.pxg-won-txt span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--c-text,#edf3f5)}
.pxg-won-blk{color:var(--c-act,#ea6d22) !important;font-weight:600}
.pxg-claimlink{margin:0 0 14px;font-size:13px;color:var(--c-dim,#8fa6ae)}
.pxg-claimlink a{color:var(--c-brand,#0fa0cc);text-decoration:underline;text-underline-offset:3px}
.pxgv-note.is-warn{
	padding:16px 18px;margin-bottom:18px;
	box-shadow:inset 0 0 0 1px var(--orange,#ea6d22);color:var(--text-dim,#8fa6ae);
}
.pxgv-note.is-warn b{display:block;color:var(--orange,#ea6d22);margin-bottom:8px}
.pxgv-note.is-warn ul{margin:0 0 12px 18px}
.pxgv-note.is-warn li{margin-bottom:4px}

/* ---- the dashboard's own tab bar ---- */
.pxg-toptabs{
	display:flex;gap:2px;flex-wrap:wrap;margin:0 0 4px;
	border-bottom:1px solid var(--c-line,#24363d);
}
.pxg-toptab{
	display:inline-flex;align-items:center;gap:7px;padding:11px 16px;margin-bottom:-1px;
	font-size:13.5px;font-weight:600;color:var(--c-faint,#5a737d);
	border-bottom:2px solid transparent;text-decoration:none;transition:.14s;
}
.pxg-toptab:hover{color:var(--c-text,#edf3f5);text-decoration:none}
.pxg-toptab.is-on{color:var(--c-text,#edf3f5);border-bottom-color:var(--c-act,#ea6d22)}
.pxg-toptab-n{
	display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;border-radius:10px;
	background:var(--c-pos,#38ce8d);color:var(--c-ink,#0c1417);font-size:11px;font-weight:700;
}
/* The giveaway renderers were built for their own page. Embedded on the
   dashboard they keep their own card chrome — that IS the styling — so only
   the page-level tab bar is hidden, since the dashboard has its own. */
.pxg-embed{margin-top:14px}
.pxg-embed .pxgv-tabs{display:none}
/* BOTH CLASSES ARE ON THE SAME ELEMENT.
   Written as a descendant selector this never matched anything, so the pane
   kept the giveaway page's 780px centred width and sat in the middle of the
   dashboard column with dead space either side. */
.pxgv-page.pxg-embed{max-width:none;margin:0}
.pxgv-page.pxg-embed .pxgv-card{max-width:none}

/* ---- the hero, split left / right ---------------------------------
   Live entries and next month's, side by side with a rule between.
   Stacked, the second number read as a footnote to the first; they are
   actually the two halves of how this works.
   ------------------------------------------------------------------ */
.pxg-split{
	position:relative;display:grid;grid-template-columns:1fr 1px 1fr;gap:0 26px;align-items:start;
}
/* EVERY CHILD PLACED EXPLICITLY.
   ::before is the FIRST grid child. With it pinned to column 2 and the halves
   left to auto-placement, the cursor had already passed column 1 by the time
   the first half was placed — so both landed in column 3, stacked, with the
   left side empty. Nothing auto-places in this grid now. */
.pxg-split::before{
	content:"";grid-column:2;grid-row:1;align-self:stretch;width:1px;
	background:linear-gradient(180deg,transparent,var(--c-line,#24363d) 18%,var(--c-line,#24363d) 82%,transparent);
}
.pxg-half{min-width:0;position:relative;grid-row:1}
.pxg-half.is-now{grid-column:1}
.pxg-half.is-next{grid-column:3}
.pxg-half-tag{
	display:inline-block;margin-top:12px;padding:3px 9px;
	font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.pxg-half.is-now .pxg-half-tag{
	color:var(--c-act,#ea6d22);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-act,#ea6d22) 55%,transparent);
}
.pxg-half.is-next .pxg-half-tag{
	color:var(--c-glow,#57cdf9);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-glow,#57cdf9) 45%,transparent);
}
/* The live half leads: its figure is the one that matters today. */
.pxg-half.is-now .pxg-big{color:var(--c-act,#ea6d22)}
.pxg-half.is-next .pxg-big{color:var(--c-glow,#57cdf9)}
.pxg-gem.is-next{background:linear-gradient(150deg,var(--c-glow,#57cdf9),var(--c-brand,#0fa0cc));opacity:.85}
.pxg-split .pxg-tierbadge{position:absolute;top:0;right:0}
@media(max-width:760px){
	.pxg-split{grid-template-columns:1fr;gap:0}
	/* Stacked: rows in reading order, the rule between them. */
	.pxg-half.is-now{grid-column:1;grid-row:1}
	.pxg-split::before{
		grid-column:1;grid-row:2;width:auto;height:1px;margin:20px 0;
		background:linear-gradient(90deg,transparent,var(--c-line,#24363d) 18%,var(--c-line,#24363d) 82%,transparent);
	}
	.pxg-half.is-next{grid-column:1;grid-row:3}
	.pxg-split .pxg-tierbadge{position:static;display:inline-block;margin-top:18px}
}

/* ---- brand marks ---- */
.pxg-icon{
	width:17px;height:auto;flex:none;vertical-align:-2px;margin-right:2px;
}
.pxg-icon.is-discord{color:#5865F2}
.pxg-icon.is-youtube{color:#FF0033}
.pxg-icon.is-instagram{color:#E1306C}
.pxg-icon.is-tiktok{color:var(--c-text,#edf3f5)}
.pxg-icon.is-x{color:var(--c-text,#edf3f5)}
.pxg-checks .pxg-check-t b,
.pxg-handle-t b{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* Dimmed until verified, so the ticked rows read as the done ones. */
.pxg-checks li:not(.is-done) .pxg-icon{opacity:.55}

/* ---- Discord not linked: the one thing blocking every draw ---- */
.pxg-needdiscord{
	display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;
	padding:16px 20px;background:color-mix(in srgb,#5865F2 12%,var(--c-bg,#141f24));
	box-shadow:inset 0 0 0 1px color-mix(in srgb,#5865F2 55%,transparent);
	clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.pxg-needdiscord-i{flex:none;display:grid;place-items:center;width:34px;height:34px}
.pxg-needdiscord-i .pxg-icon{width:26px}
.pxg-needdiscord div{flex:1 1 240px;min-width:0}
.pxg-needdiscord b{display:block;font-size:15px;font-weight:700;color:var(--c-text,#edf3f5)}
.pxg-needdiscord span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--c-dim,#8fa6ae)}