/* X growth (share, referral lookup, $CM reward, pinned post). Uses the site's tokens. */
.xg { display: grid; gap: 14px; }
.xg-box { display: grid; gap: 10px; align-content: start; }
.xg-box .x-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.xg-box h3 { margin: 0; }
.xg-box .tp-note, .xg-box .fineprint { margin: 0; }
.xg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xg-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.xg-row .x-input { flex: 1 1 200px; }
.xg-row .btn { flex: 0 0 auto; justify-content: center; min-height: var(--tap, 44px); }
.xg-btns .btn { flex: 1 1 140px; }
.xg-out { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m, 14px); border: 1px solid var(--stroke-secondary); background: #2ee6c90a; }
.xg-who { margin: 0; font: var(--weight-regular, 400) 12px / 1.5 var(--x-mono, monospace); color: var(--text-secondary); overflow-wrap: anywhere; }
.xg-link { font-family: var(--x-mono, monospace); font-size: 13px; }
.xg-xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.xg-xbtn.is-off { opacity: .6; }
.xg-xlogo { font-weight: 700; font-size: 1.05em; line-height: 1; }
.xg-steps { list-style: none; counter-reset: xg; margin: 0; padding: 0; display: grid; gap: 8px; }
.xg-steps li { counter-increment: xg; display: flex; align-items: center; gap: 10px; min-height: var(--tap, 44px); padding: 6px 8px 6px 6px; border-radius: var(--r-m, 14px); border: 1px solid var(--stroke-secondary); background: var(--fill-tertiary); }
.xg-steps li::before { content: counter(xg); flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #2ee6c914; color: var(--x-teal); font: 600 13px/1 var(--x-mono, monospace); }
.xg-steps li span { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.xg-steps li .btn { flex: 0 0 auto; min-height: 38px; padding: 0 14px; }
.xg-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 10px; align-items: end; }
.xg-form .x-field { display: grid; gap: 4px; min-width: 0; }
.xg-form label { font-size: 13px; color: var(--text-secondary); }
.xg-form .btn { min-height: var(--tap, 44px); justify-content: center; }
@media (max-width: 640px) { .xg-form { grid-template-columns: 1fr; } }
.xg-minted { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: var(--r-m, 14px); border: 1px solid var(--x-teal); background: #2ee6c90f; }
.xg-minted p { margin: 0; font-size: 14px; }
.xg-embed { min-height: 120px; display: grid; justify-items: center; }
.xg-embed .twitter-tweet { margin: 0 !important; }
.xg-embed blockquote.twitter-tweet { font-size: 14px; color: var(--text-secondary); }
.xg-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-m, 14px); border: 1px solid var(--stroke-primary); background: var(--fill-tertiary); color: var(--text-primary); text-decoration: none; }
.xg-card .xg-xlogo { font-size: 26px; color: var(--x-teal); }
.xg-card span { display: grid; gap: 2px; }
.xg-card small { color: var(--text-secondary); font-size: 13px; }
.xg-card:hover { border-color: var(--x-teal); }
.cm-foot .xg-foot { display: flex; justify-content: center; margin: 4px 0 8px; }
/* reward panel v2: connect X · tasks with status chips · manual proof · wallet · waiting for launch */
.xg-rw-flow { display: grid; gap: 10px; }
.xg-rw-flow[hidden], .xg-done[hidden], .xg-box [hidden] { display: none !important; }
.xg-step { display: grid; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-m, 14px); border: 1px solid var(--stroke-secondary); background: var(--fill-tertiary); }
.xg-step__h { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 14px; }
.xg-num { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #2ee6c914; color: var(--x-teal); font: 600 13px/1 var(--x-mono, monospace); }
.xg-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.xg-conn { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.xg-conn__who { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.xg-conn__who[data-on="1"] { color: var(--text-primary); }
.xg-conn .btn { min-height: var(--tap, 44px); flex: 0 0 auto; }
.xg-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xg-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "c b" "k k"; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--stroke-secondary); }
.xg-task__t { grid-area: t; }
.xg-task .xg-chip { grid-area: c; justify-self: start; }
.xg-task .btn { grid-area: b; }
.xg-task .xg-check { grid-area: k; margin-top: 4px; }
.xg-task:first-child { border-top: 0; }
.xg-task__t { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.xg-task .btn { min-height: 38px; padding: 0 12px; }
.xg-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); cursor: pointer; }
.xg-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--x-teal); }
.xg-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--stroke-primary); font: 600 11px/1 var(--x-mono, monospace); letter-spacing: .02em; white-space: nowrap; color: var(--text-secondary); }
.xg-chip[data-s="verified"], .xg-chip[data-s="approved"] { border-color: var(--x-teal); color: var(--x-teal); background: #2ee6c914; }
.xg-chip[data-s="in_review"] { border-color: #f5b94a; color: #f5b94a; background: #f5b94a14; }
.xg-chip[data-s="self_declared"] { border-color: #8fa7ff; color: #8fa7ff; background: #8fa7ff14; }
.xg-chip[data-s="rejected"] { border-color: #ff6b6b; color: #ff6b6b; }
#xg-verify { min-height: var(--tap, 44px); justify-content: center; }
.xg-form2 { display: grid; gap: 10px; }
.xg-form2 .x-field { display: grid; gap: 4px; min-width: 0; margin-top: 2px; }
.xg-form2 label { font-size: 13px; color: var(--text-secondary); }
.xg-form2 label small { font-size: 12px; opacity: .8; }
.xg-form2 .x-input { width: 100%; min-width: 0; box-sizing: border-box; }
.xg-form2 .btn { min-height: var(--tap, 44px); justify-content: center; }
/* manual proof: low-key text link under Connect X, collapsed by default */
.xg-alt { min-width: 0; }
.xg-alt > summary { display: block; list-style: none; cursor: pointer; padding: 6px 0 2px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.xg-alt > summary::-webkit-details-marker { display: none; }
.xg-alt__cta { color: var(--x-teal); text-decoration: underline; text-decoration-color: #2ee6c966; text-underline-offset: 3px; white-space: nowrap; }
.xg-alt__cta::after { content: "▾"; display: inline-block; margin-left: 4px; font-size: 11px; transition: transform .15s; }
.xg-alt:not([open]) .xg-alt__cta::after { transform: rotate(-90deg); }
.xg-alt > summary:hover .xg-alt__cta { text-decoration-color: var(--x-teal); }
.xg-alt__body { display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--stroke-secondary); }
.xg-done { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m, 14px); border: 1px solid var(--x-teal); background: #2ee6c90a; }
.xg-done__h { margin: 0; font-weight: 700; font-size: 16px; color: var(--x-teal); }
.xg-done__who { margin: 0; font: 400 13px/1.5 var(--x-mono, monospace); color: var(--text-secondary); overflow-wrap: anywhere; }
.xg-done__tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xg-done__tasks li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.xg-claim { display: grid; justify-items: center; gap: 2px; min-height: 52px; width: 100%; opacity: .6; cursor: not-allowed; }
.xg-claim small { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.xg-xbtn.is-off { pointer-events: auto; cursor: not-allowed; }
