/* ============================================================

   UNE Discovery Fallback View - v2

   Aspirational + urgent + civic blend.

   Theme-aware via CSS vars, no inline styles, no Google Fonts.

   ============================================================ */



.dx-page {

    max-width: 1080px;

    margin: 0 auto;

    padding: 64px 32px 96px;

    color: var(--nw-text-primary, #0f172a);

}



/* ---------- Hero ---------- */



.dx-hero {

    text-align: center;

    padding: 56px 32px 48px;

    background: linear-gradient(180deg,

        var(--nw-bg-card, #ffffff) 0%,

        var(--nw-bg-secondary, #f8fafc) 100%);

    border: 1px solid var(--nw-border, #e2e8f0);

    border-radius: 16px;

    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);

}



.dx-eyebrow {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--nw-text-muted, #64748b);

    margin-bottom: 20px;

}



.dx-domain {

    font-family: 'Courier New', Courier, monospace;

    font-size: 56px;

    font-weight: 700;

    letter-spacing: -1px;

    line-height: 1.1;

    margin: 0 0 24px 0;

    color: var(--nw-text-primary, #0f172a);

    word-break: break-all;

}



.dx-status-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 20px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 28px;

}



.dx-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: currentColor;

    box-shadow: 0 0 0 4px rgba(currentColor, 0.15);

    animation: dx-pulse 2.5s ease-in-out infinite;

}



@keyframes dx-pulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.6; transform: scale(1.15); }

}



.dx-status-available {

    background: #d1fae5;

    color: #047857;

}



.dx-status-reserved {

    background: #fef3c7;

    color: #b45309;

}



.dx-status-claimed {

    background: #dbeafe;

    color: #1d4ed8;

}



.dx-status-retired,

.dx-status-superseded,

.dx-status-other {

    background: #f1f5f9;

    color: #475569;

}



.dx-headline {

    font-size: 32px;

    font-weight: 700;

    line-height: 1.25;

    margin: 0 auto 16px;

    max-width: 720px;

    color: var(--nw-text-primary, #0f172a);

}



.dx-subline {

    font-size: 17px;

    line-height: 1.6;

    color: var(--nw-text-secondary, #475569);

    max-width: 600px;

    margin: 0 auto 32px;

}



.dx-entity-strip {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 10px 20px;

    background: var(--nw-bg-secondary, #f1f5f9);

    border-radius: 8px;

    margin-bottom: 32px;

    font-size: 14px;

}



.dx-entity-label {

    color: var(--nw-text-muted, #64748b);

    font-weight: 500;

}



.dx-entity-value {

    color: var(--nw-text-primary, #0f172a);

    font-weight: 700;

}



/* ---------- CTA ---------- */



.dx-cta-wrap {

    margin-top: 8px;

}



.dx-cta-primary {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 18px 40px;

    background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);

    color: #ffffff;

    text-decoration: none;

    border-radius: 10px;

    font-weight: 700;

    font-size: 17px;

    letter-spacing: 0.3px;

    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.3);

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.dx-cta-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.4);

    color: #ffffff;

}



.dx-cta-arrow {

    font-size: 22px;

    line-height: 1;

    transition: transform 0.15s ease;

}



.dx-cta-primary:hover .dx-cta-arrow {

    transform: translateX(4px);

}



.dx-cta-foot {

    margin-top: 16px;

    font-size: 13px;

    color: var(--nw-text-muted, #64748b);

    font-weight: 500;

}



/* ---------- Value Props ---------- */



.dx-props {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin-top: 48px;

}



.dx-prop {

    padding: 28px 24px;

    background: var(--nw-bg-card, #ffffff);

    border: 1px solid var(--nw-border, #e2e8f0);

    border-radius: 12px;

    transition: border-color 0.15s ease, transform 0.15s ease;

}



.dx-prop:hover {

    border-color: #b8860b;

    transform: translateY(-2px);

}



.dx-prop-num {

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

    color: #b8860b;

    margin-bottom: 8px;

}



.dx-prop-unit {

    font-size: 16px;

    font-weight: 600;

    color: var(--nw-text-muted, #64748b);

    margin-left: 4px;

    letter-spacing: 0;

}



.dx-prop-label {

    font-size: 14px;

    font-weight: 700;

    color: var(--nw-text-primary, #0f172a);

    margin-bottom: 6px;

}



.dx-prop-desc {

    font-size: 13px;

    line-height: 1.5;

    color: var(--nw-text-secondary, #64748b);

}



/* ---------- Live Stats ---------- */



.dx-stats {

    margin-top: 56px;

    padding: 40px 32px;

    background: var(--nw-text-primary, #0f172a);

    color: #f8fafc;

    border-radius: 16px;

    text-align: center;

}



.dx-stats-eyebrow {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.55);

    margin-bottom: 28px;

}



.dx-stats-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

}



.dx-stat {

    padding: 8px 0;

}



.dx-stat-value {

    font-size: 32px;

    font-weight: 800;

    line-height: 1.1;

    color: #ffffff;

    margin-bottom: 6px;

    letter-spacing: -0.5px;

}



.dx-stat-label {

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.65);

}



/* ---------- Civic Pull Quote ---------- */



.dx-civic {

    margin-top: 56px;

    padding: 40px 32px;

    text-align: center;

    border-top: 1px solid var(--nw-border, #e2e8f0);

    border-bottom: 1px solid var(--nw-border, #e2e8f0);

}



.dx-civic-quote {

    font-size: 22px;

    font-weight: 500;

    font-style: italic;

    line-height: 1.4;

    color: var(--nw-text-primary, #0f172a);

    margin-bottom: 12px;

}



.dx-civic-attrib {

    font-size: 13px;

    color: var(--nw-text-muted, #64748b);

    letter-spacing: 0.5px;

}



/* ---------- Footer ---------- */



.dx-foot {

    margin-top: 40px;

    text-align: center;

    font-size: 14px;

    color: var(--nw-text-muted, #64748b);

}



.dx-back-link,

.dx-foot-link {

    color: var(--nw-text-muted, #64748b);

    text-decoration: none;

    font-weight: 500;

    transition: color 0.15s ease;

}



.dx-back-link:hover,

.dx-foot-link:hover {

    color: #b8860b;

}



.dx-foot-sep {

    margin: 0 12px;

    color: var(--nw-border, #cbd5e1);

}



/* ---------- Responsive ---------- */



@media (max-width: 900px) {

    .dx-props {

        grid-template-columns: repeat(2, 1fr);

    }

    .dx-stats-row {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 600px) {

    .dx-page {

        padding: 32px 16px 64px;

    }

    .dx-hero {

        padding: 40px 20px 32px;

    }

    .dx-domain {

        font-size: 36px;

    }

    .dx-headline {

        font-size: 24px;

    }

    .dx-subline {

        font-size: 15px;

    }

    .dx-cta-primary {

        padding: 16px 28px;

        font-size: 15px;

    }

    .dx-props,

    .dx-stats-row {

        grid-template-columns: 1fr;

    }

    .dx-prop-num,

    .dx-stat-value {

        font-size: 32px;

    }

    .dx-foot-sep {

        display: block;

        margin: 8px 0;

        opacity: 0;

        height: 0;

    }

}



/* ---------- Dark theme accent (if shell sets data-theme='dark') ---------- */



[data-theme='dark'] .dx-hero {

    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);

    border-color: #334155;

}



[data-theme='dark'] .dx-prop {

    background: #1e293b;

    border-color: #334155;

}



[data-theme='dark'] .dx-civic {

    border-color: #334155;

}



[data-theme='dark'] .dx-stats {

    background: #020617;

}