.challenge-dialog { width: min(680px, calc(100vw - 32px)); border: 0; border-radius: 24px; padding: 0; background: var(--panel, #141722); color: var(--text, #f5f7fb); box-shadow: 0 24px 80px rgba(0,0,0,.42); }
.challenge-dialog::backdrop { background: rgba(4, 6, 12, .76); backdrop-filter: blur(8px); }
.challenge-dialog form, .challenge-landing { padding: 28px; }
.challenge-dialog h2, .challenge-landing h2 { margin: 8px 0 18px; }
.challenge-source-preview, .challenge-landing-source { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line, #2b3140); border-radius: 14px; background: rgba(255,255,255,.04); }
.challenge-source-preview span, .challenge-landing-source span, .challenge-list-item small { color: var(--muted, #9ba3b5); }
.challenge-target-tabs { display: flex; gap: 8px; margin: 18px 0 12px; }
.challenge-target-tab, .challenge-user-result { border: 1px solid var(--line, #2b3140); border-radius: 999px; padding: 9px 14px; background: transparent; color: inherit; cursor: pointer; }
.challenge-target-tab.active, .challenge-user-result.active { border-color: var(--accent, #ff7a59); background: rgba(255,122,89,.14); }
.challenge-user-results { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.challenge-source-video { display: block; width: 100%; max-height: 52vh; border-radius: 16px; background: #05060a; }
.challenge-source-placeholder { display: grid; place-items: center; min-height: 180px; border-radius: 16px; background: rgba(255,255,255,.06); color: var(--muted, #9ba3b5); }
.challenge-status { display: inline-flex; margin: 18px 0 12px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); }
.challenge-status.match_created { color: #8ff0b0; background: rgba(69, 207, 119, .14); }
.challenge-status.response_rejected, .challenge-status.declined, .challenge-status.expired, .challenge-status.revoked { color: #ff9d9d; background: rgba(255, 80, 80, .12); }
.challenge-actions, .challenge-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.challenge-success { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(80, 210, 130, .12); }
.challenge-success code { overflow-wrap: anywhere; color: #a9f5c1; }
.my-challenges { margin-top: 24px; }
.challenge-list-item { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line, #2b3140); }
.challenge-list-item > div { display: flex; justify-content: space-between; gap: 12px; }
.challenge-list-item button { justify-self: start; }
@media (max-width: 600px) { .challenge-dialog form, .challenge-landing { padding: 20px; } .challenge-list-item > div { display: grid; } }