.top-demo-note{color:#ff3b4d!important;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;text-align:center;line-height:1.25}
.demo-disabled{opacity:.58;cursor:not-allowed!important;pointer-events:none!important}
.demo-version-footer{color:#ff3b4d!important;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;margin:10px 14px}

.top-demo-note{color:#ff3b4d!important;font-weight:800!important}
.nav-health.good{color:#43d17a!important}


/* 2026-08-04 demo refinement */
.overview-analytics-table-compact{
    max-height:330px;
    overflow:auto;
}
.overview-analytics-table-compact table{
    margin-bottom:0;
}

.seo-page-report-demo{
    margin-top:22px!important;
    margin-bottom:22px!important;
}
.seo-page-report-grid{
    display:grid;
    gap:10px;
}
.seo-page-report-grid>div{
    display:grid;
    grid-template-columns:minmax(130px,auto) auto minmax(0,1fr);
    align-items:baseline;
    column-gap:14px;
    row-gap:5px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    background:rgba(255,255,255,.02);
}
.seo-page-report-grid>div>span,
.seo-page-report-grid>div>strong,
.seo-page-report-grid>div>small{
    display:block;
}
.seo-page-report-grid>div>small{
    color:#7f8a9e;
}

.component-chart{
    margin-top:6px;
    padding:8px 0 2px;
}
.component-chart-scale{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    margin:0 54px 8px 170px;
    color:#647187;
    font-size:10px;
}
.component-chart-scale span:nth-child(2){text-align:center}
.component-chart-scale span:nth-child(3){text-align:right}
.component-chart-row{
    display:grid;
    grid-template-columns:155px minmax(170px,1fr) 48px;
    align-items:center;
    gap:12px;
    min-height:40px;
}
.component-chart-row>span{
    color:#aeb8c7;
    font-size:12px;
}
.component-chart-row>strong{
    color:#eef3f8;
    font-size:12px;
    text-align:right;
}
.component-chart-track{
    position:relative;
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.05);
}
.component-chart-track:before,
.component-chart-track:after{
    content:"";
    position:absolute;
    top:-2px;
    bottom:-2px;
    width:1px;
    background:rgba(255,255,255,.055);
}
.component-chart-track:before{left:50%}
.component-chart-track:after{right:0}
.component-chart-track i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(59,130,246,.65), rgba(59,130,246,.95));
    box-shadow:0 0 16px rgba(59,130,246,.16);
}
@media(max-width:760px){
    .seo-page-report-grid>div{grid-template-columns:auto auto}
    .seo-page-report-grid>div>small{grid-column:1/-1}
    .component-chart-scale{display:none}
    .component-chart-row{grid-template-columns:1fr 46px}
    .component-chart-row>span{grid-column:1/-1}
}


/* Final demo polish: all navigation status indicators are intentionally shown healthy/green. */
.sidebar-status,
.nav-status,
.menu-status,
.sidebar .status,
.sidebar-nav .status,
.sidebar-meta,
.nav-meta,
.sidebar-status *,
.nav-status *,
.menu-status *,
.sidebar .status *,
.sidebar-nav .status *,
.sidebar-meta *,
.nav-meta *{
    color:#22c55e!important;
}

.sidebar-status::before,
.nav-status::before,
.menu-status::before,
.sidebar .status::before,
.sidebar-nav .status::before,
.sidebar-meta::before,
.nav-meta::before,
.sidebar-status .dot,
.nav-status .dot,
.menu-status .dot,
.sidebar .status .dot,
.sidebar-nav .status .dot,
.sidebar-meta .dot,
.nav-meta .dot{
    background:#22c55e!important;
    border-color:#22c55e!important;
    box-shadow:0 0 0 3px rgba(34,197,94,.12),0 0 10px rgba(34,197,94,.25)!important;
}