.demo-dashboard {
    --demo-cyan: #00d9ff;
    --demo-orange: #ff9d00;
    --demo-panel: rgba(10, 3, 18, .92);
    overflow-x: hidden;
}

.demo-dashboard .demo-hero h1 span,
.demo-dashboard .demo-conversion-panel h2 span {
    color: var(--green);
}

.demo-dashboard .demo-hero {
    min-height: 360px;
}

.demo-dashboard .demo-hero .lead {
    max-width: 760px;
}

.demo-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 4px;
}

.demo-pill {
    border-color: var(--demo-cyan) !important;
    color: var(--demo-cyan) !important;
    box-shadow: 0 0 14px rgba(0, 217, 255, .25);
}

.demo-disclosure {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin: 8px 0 12px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 217, 255, .55);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0, 217, 255, .1), rgba(208, 44, 255, .08));
    color: #dceeff;
}

.demo-disclosure strong {
    color: var(--demo-cyan);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.demo-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.demo-kpis .overview-kpi b {
    font-variant-numeric: tabular-nums;
}

.demo-feature-modules .panel {
    padding: 10px 16px 14px;
}

.demo-feature-modules .section-head {
    justify-content: center;
}

.demo-feature-modules .quick-actions {
    display: grid;
    grid-template-columns: repeat(9, minmax(100px, 1fr));
    gap: 14px;
}

.demo-feature-modules .btn.vampire {
    border-color: #ff334f;
    color: #ff8999;
    box-shadow: inset 0 0 18px rgba(255, 25, 61, .08), 0 0 14px rgba(255, 25, 61, .12);
}

.demo-vampire {
    padding: 22px 0;
}

.demo-vampire > .section-head {
    margin-bottom: 12px;
}

.vampire-pill {
    border-color: #ff334f !important;
    color: #ff8999 !important;
}

.demo-privacy-note {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 51, 79, .5);
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(255, 22, 57, .12), rgba(17, 2, 15, .82));
}

.demo-privacy-note b,
.demo-vampire .label {
    color: #ff637a;
}

.demo-vampire-kpis,
.demo-vampire-grid,
.demo-vampire-workflow {
    margin-bottom: 12px;
}

.demo-vampire .panel,
.demo-vampire .card {
    border-color: rgba(255, 51, 79, .38);
    background: radial-gradient(circle at 100% 0, rgba(255, 25, 61, .08), transparent 32%), var(--demo-panel);
}

.demo-vampire h3 {
    margin: 6px 0 8px;
}

.watchtower-dashboard.demo-dashboard main.dashboard .table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(255, 99, 122, .8) rgba(18, 4, 20, .8);
}

.demo-vampire-grid > .panel {
    min-width: 0;
}

.demo-vampire-tag {
    display: inline-flex;
    margin-right: 6px;
    padding: 2px 7px;
    border: 1px solid #ff334f;
    border-radius: 999px;
    color: #ff8797;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.demo-feature-modules .btn {
    min-height: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.demo-location-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-location-grid .location-card {
    min-width: 0;
}

.demo-map-section {
    border: 1px solid rgba(208, 44, 255, .55);
    border-radius: 8px;
    padding: 8px;
    background: rgba(6, 0, 10, .72);
}

.demo-map-source-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid rgba(0, 217, 255, .38);
    border-radius: 6px;
    background: rgba(0, 23, 31, .72);
    color: #dceeff;
    font-size: .78rem;
}

.demo-map-source-note b {
    color: var(--demo-cyan);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.demo-map-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
}

.demo-map-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(208, 44, 255, .45);
    border-radius: 7px;
    background: var(--demo-panel);
}

.demo-map-card h3 {
    margin: 0;
    text-align: center;
    font-size: 1rem;
}

.demo-map-summary {
    min-height: 32px;
    margin: 4px 0 8px;
    text-align: center;
    font-size: .78rem;
}

.demo-map-tile {
    position: relative;
    width: min(100%, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(104, 255, 18, .5);
    border-radius: 5px;
    background-color: #1c3d25;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .35);
    aspect-ratio: 1 / 1 !important;
}

.demo-map-tile::after {
    content: "OFFICIAL SL MAP / DEMO DOTS";
    position: absolute;
    right: 6px;
    bottom: 5px;
    z-index: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: rgba(255, 255, 255, .75);
    font-size: 8px;
    letter-spacing: .08em;
    pointer-events: none;
}

.demo-map-dot {
    position: absolute;
    z-index: 3;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1.5px solid #050505;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--demo-cyan);
    box-shadow: 0 0 8px currentColor;
    color: var(--demo-cyan);
    cursor: pointer;
}

.demo-map-dot.parcel {
    color: #68ff12;
    background: #68ff12;
}

.demo-map-dot.owned {
    color: #00d9ff;
    background: #00d9ff;
}

.demo-map-dot.region {
    color: #d02cff;
    background: #d02cff;
}

.demo-map-dot.terminal {
    z-index: 5;
    width: 15px;
    height: 15px;
    color: var(--demo-orange);
    background: var(--demo-orange);
    border-width: 2px;
    box-shadow: 0 0 5px #000, 0 0 15px var(--demo-orange);
}

.demo-map-dot:focus-visible,
.demo-map-dot:hover {
    z-index: 9;
    outline: 2px solid #fff;
    outline-offset: 2px;
    transform: translate(-50%, -50%) scale(1.5);
}

.demo-map-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: .75rem;
}

.demo-map-slurl {
    color: var(--demo-cyan);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.demo-map-detail {
    min-height: 82px;
    margin: 10px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(0, 217, 255, .4);
    border-radius: 6px;
    background: rgba(0, 14, 22, .68);
}

.demo-map-detail h3,
.demo-map-detail p {
    margin: 0;
}

.demo-map-detail dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 0;
}

.demo-map-detail dl div {
    padding: 7px;
    border: 1px solid rgba(0, 217, 255, .22);
    border-radius: 5px;
}

.demo-map-detail dt {
    color: var(--demo-cyan);
    font-size: .7rem;
    text-transform: uppercase;
}

.demo-map-detail dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.legend-dot.owned {
    background: var(--demo-cyan);
    box-shadow: 0 0 8px var(--demo-cyan);
}

.demo-period-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 14px;
}

.demo-period-tabs .btn {
    min-width: 150px;
}

.demo-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.demo-history-summary article {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(208, 44, 255, .38);
    border-radius: 6px;
    background: rgba(6, 1, 12, .76);
}

.demo-history-summary span {
    color: #c9bfd3;
    font-size: .75rem;
    text-transform: uppercase;
}

.demo-history-summary b {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.demo-chart-wrap {
    position: relative;
    height: 330px;
    padding: 12px;
    border: 1px solid rgba(0, 217, 255, .25);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(0, 19, 29, .62), rgba(8, 0, 15, .76));
}

.demo-chart-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.demo-chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    color: #d5ccdc;
    font-size: .78rem;
}

.demo-line {
    display: inline-block;
    width: 22px;
    height: 3px;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--green);
    box-shadow: 0 0 8px currentColor;
}

.demo-line.visitors { color: var(--green); background: var(--green); }
.demo-line.visits { color: var(--demo-cyan); background: var(--demo-cyan); }
.demo-line.peak { color: var(--purple); background: var(--purple); }

.demo-dashboard code {
    color: #d9c8ed;
    font-size: .75rem;
}

.demo-conversion-panel .panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px;
    border-color: rgba(104, 255, 18, .55);
    background: radial-gradient(circle at 80% 20%, rgba(104, 255, 18, .11), transparent 35%), var(--demo-panel);
}

.demo-conversion-panel h2 {
    margin: 5px 0 7px;
}

.demo-text-cta {
    min-width: 150px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1450px) {
    .demo-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-feature-modules .quick-actions { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
    .demo-location-grid,
    .demo-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
    .demo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-map-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-conversion-panel .panel { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .demo-disclosure { grid-template-columns: 1fr; }
    .demo-kpis,
    .demo-feature-modules .quick-actions,
    .demo-location-grid,
    .demo-map-grid,
    .demo-history-summary { grid-template-columns: minmax(0, 1fr) !important; }
    .demo-map-tile { width: min(100%, 360px) !important; }
    .demo-period-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-period-tabs .btn { min-width: 0; }
    .demo-chart-wrap { height: 260px; padding: 5px; }
    .demo-map-detail dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-map-dot { transition: none; }
}

/* Keep the enlarged dashboard buttons inside the public-demo hero. */
.demo-dashboard main.dashboard > .demo-hero {
    height: auto !important;
    min-height: 500px !important;
    max-height: none !important;
}

html body.watchtower-dashboard.demo-dashboard main.dashboard.shell > section.hero.demo-hero > .actions.overview-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 214px)) !important;
    gap: 16px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 18px !important;
}

html body.watchtower-dashboard.demo-dashboard main.dashboard.shell > section.hero.demo-hero > .actions.overview-hero-actions > .image-btn.has-image {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

@media (max-width: 1050px) {
    .demo-dashboard main.dashboard > .demo-hero {
        min-height: 0 !important;
    }

    html body.watchtower-dashboard.demo-dashboard main.dashboard.shell > section.hero.demo-hero > .actions.overview-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 280px)) !important;
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    html body.watchtower-dashboard.demo-dashboard main.dashboard.shell > section.hero.demo-hero > .actions.overview-hero-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}