.create-spot-advanced {
    margin: 0.4rem 0 1rem;
    border: 1px solid rgba(31, 35, 72, 0.12);
    border-radius: 0.75rem;
    overflow: hidden;
}

.create-spot-advanced-summary {
    padding: 0.95rem 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style-position: inside;
}

.create-spot-advanced-body {
    padding: 0 1rem 0.25rem;
}

.demo-empty-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Nimiq's nq-button-s owns the button shape, typography, and interaction.
   This modifier only gives Demo Hunt its established purple semantic colour
   and keeps the small button sitting naturally inside the sentence. */
.demo-start-button.nq-button-s {
    margin: 0 0.18rem;
    background: #8f5bd7;
    color: #ffffff !important;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none !important;
}

.demo-start-button.nq-button-s:hover,
.demo-start-button.nq-button-s:focus-visible {
    color: #ffffff !important;
    text-decoration: none !important;
}

.demo-start-button.nq-button-s:focus-visible {
    outline: 3px solid rgba(143, 91, 215, 0.35);
    outline-offset: 2px;
}

html[data-theme="dark"] body.nq-style .demo-start-button.nq-button-s {
    background: #8f5bd7;
    color: #ffffff !important;
}

/* Demo Spots use the same claim-card structure as the other spot kinds, but
   carry their own purple semantic treatment while they are claimable. */
.spot-list-item.is-claim-demo {
    border-color: transparent;
    background: #8f5bd7;
    color: #ffffff;
}

.spot-list-item.is-claim-demo .spot-list-toggle,
.spot-list-item.is-claim-demo .spot-list-detail {
    background: transparent;
}

.spot-list-item.is-claim-demo .spot-list-title,
.spot-list-item.is-claim-demo .spot-list-meta,
.spot-list-item.is-claim-demo .spot-list-chevron,
.spot-list-item.is-claim-demo .spot-detail-description,
.spot-list-item.is-claim-demo .spot-detail-lines {
    color: #ffffff;
}

.spot-claim-button.is-demo {
    color: #8f5bd7 !important;
}

html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo {
    background: #8f5bd7;
    color: #ffffff;
}

html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo .spot-list-title,
html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo .spot-list-meta,
html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo .spot-list-chevron,
html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo .spot-detail-description,
html[data-theme="dark"] body.nq-style .spot-list-item.is-claim-demo .spot-detail-lines {
    color: #ffffff !important;
}

.demo-success-card {
    text-align: center;
}

.demo-success-card h2 {
    margin-top: 0;
}

html[data-theme="dark"] body.nq-style .demo-success-card h2,
html[data-theme="dark"] body.nq-style .demo-success-card p {
    color: var(--nh-text) !important;
}

/* The branded 404 page is rendered through the home shell. Pin its two error
   lines to explicit dark-theme foregrounds so Nimiq/component specificity or
   a stale neutral rule cannot make the otherwise-present error copy disappear. */
html[data-theme="dark"] body.nq-style .home-error-code {
    color: var(--nh-text, #fafafa) !important;
}

html[data-theme="dark"] body.nq-style .home-error-message {
    color: var(--nh-soft-text, #d5d6e0) !important;
}

.demo-success-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}