/* Cleaned CSS: duplicate declarations collapsed; unused selectors pruned by project reference scan. */
:root {
    --wow-bg: #0b0f1a;
    --wow-card: rgba(255,255,255,.06);
    --wow-card2: rgba(255,255,255,.09);
    --wow-border: rgba(255,255,255,.10);
    --wow-text: rgba(255,255,255,.92);
    --wow-muted: rgba(255,255,255,.62);
    --wow-red: #ff2d55;
    --wow-red2: #ff4d2d;
    --wow-cyan: #35d1ff;
    --wow-violet: #8b5cf6;
}

.insights-hero {
    position: relative;
    min-height: 100vh;
    color: var(--wow-text);
}

.insights-hero__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 700px at 15% 10%, rgba(255,45,85,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 30%, rgba(53,209,255,.28), transparent 60%),
    radial-gradient(1000px 700px at 50% 90%, rgba(139,92,246,.18), transparent 65%),
    linear-gradient(180deg, #070a12 0%, #0b1020 50%, #070a12 100%);
    filter: saturate(120%);
}

.insights-hero__content {
    position: relative;
    padding: 36px 16px 70px;
}

.insights-titlebar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.insights-title {
    font-size: 38px;
    letter-spacing: -.02em;
    margin: 0;
}

.insights-subtitle {
    color: var(--wow-muted);
    margin-top: 6px;
}

.insights-badge {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.insights-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wow-red);
    box-shadow: 0 0 18px rgba(255,45,85,.9);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.35); opacity:1 } }

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin: 18px 0 18px;
}

@media (max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 560px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    position: relative;
    border: 1px solid var(--wow-border);
    border-radius: 18px;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.kpi-card--glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(420px 180px at 15% 0%, rgba(53,209,255,.22), transparent 60%),
              radial-gradient(420px 180px at 85% 0%, rgba(139,92,246,.20), transparent 60%);
    opacity: .85;
    pointer-events: none;
}

.kpi-card--red::before {
    background: radial-gradient(520px 220px at 10% 0%, rgba(255,45,85,.30), transparent 60%),
              radial-gradient(460px 220px at 90% 10%, rgba(255,77,45,.20), transparent 60%);
}

.kpi-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kpi-label {
    font-weight: 700;
    color: rgba(255,255,255,.86);
}

.kpi-chip {
    font-size: 12px;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.12);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.18);
}

.kpi-value {
    position: relative;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 10px;
}

.kpi-mini {
    position: relative;
    margin-top: 6px;
    color: var(--wow-muted);
    font-size: 13px;
}

.kpi-card--ring .ring-wrap {
    margin-top: 6px;
}

.ring-caption {
    color: var(--wow-muted);
    font-size: 12px;
    margin-top: 8px;
}

.insights-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 14px;
}

@media (max-width: 1100px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }
}

.panel {
    border: 1px solid var(--wow-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.panel--wide {
    grid-column: 1 / -1;
}

.panel-head {
    padding: 16px 16px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.panel-title {
    font-weight: 800;
    letter-spacing: -.01em;
}

.panel-sub {
    color: var(--wow-muted);
    font-size: 13px;
    margin-top: 4px;
}

.panel-pills {
    display: flex;
    gap: 8px;
}

.pill {
    font-size: 12px;
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.14);
    color: rgba(255,255,255,.72);
}

.pill--red {
    border-color: rgba(255,45,85,.35);
    box-shadow: 0 0 18px rgba(255,45,85,.18) inset;
}

.panel-body {
    padding: 12px 14px 16px;
}

.chart {
    min-height: 280px;
}

.tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .tables {
        grid-template-columns: 1fr;
    }
}

.table-block {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 12px;
    background: rgba(0,0,0,.10);
}

.table-title {
    font-weight: 800;
    margin-bottom: 10px;
}

.table-subtitle {
    color: var(--wow-muted);
    font-size: 12px;
    margin: -4px 0 10px;
}

.table-block--wide {
    grid-column: 1 / -1;
}

.wow-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wow-table th, .wow-table td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wow-table th {
    color: rgba(255,255,255,.78);
    font-weight: 700;
}

.wow-table tr:hover td {
    background: rgba(255,45,85,.06);
}

.muted {
    color: var(--wow-muted);
}

.wow-table-wrap {
    width: 100%;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .wow-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wow-table {
        min-width: 760px;
        width: max-content;
    }
}

tr.wow-row {
    cursor: pointer;
}

tr.wow-row:hover {
    background: rgba(255,255,255,.04);
}

/* JD mobile Insights badge fit: keep LIVE on one line and prevent the compact badge from clipping. */
@media (max-width: 560px) {
    .insights-titlebar {
        align-items: center;
        gap: 10px;
    }

    .insights-titlebar > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .insights-badge {
        flex: 0 0 auto;
        min-width: 72px;
        height: 54px;
        padding: 0 13px;
        gap: 8px;
        justify-content: center;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
        line-height: 1;
        box-sizing: border-box;
    }

    .insights-badge > span:last-child {
        display: inline-block;
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .insights-badge .dot {
        flex: 0 0 8px;
    }
}