:root{
    --v22-bg:#f5f7fb;
    --v22-surface:#ffffff;
    --v22-text:#18202a;
    --v22-muted:#697386;
    --v22-line:#e4e8f0;
    --v22-blue:#4f6ef7;
    --v22-violet:#7c5ce7;
    --v22-teal:#18a6a6;
    --v22-coral:#ef6f61;
    --v22-amber:#e5a13a;
    --v22-green:#3ca66a;
    --v22-slate:#7d8797;
    --v22-shadow:0 10px 30px rgba(29,36,50,.06);
}

/* Global shell */
html,body{background:var(--v22-bg)}
body{color:var(--v22-text)}
.app-shell{grid-template-columns:230px minmax(0,1fr)}
.sidebar{
    background:#fff;
    color:var(--v22-text);
    border-right:1px solid var(--v22-line);
    padding:22px 14px;
    box-shadow:2px 0 18px rgba(31,38,52,.035);
}
.brand{border-bottom:1px solid var(--v22-line);padding:0 10px 20px}
.brand-name{color:var(--v22-text)}
.brand-subtitle{color:var(--v22-muted)}
.nav-group-title{color:#98a1b2}
.nav-link{color:#4f5969;padding:9px 10px}
.nav-link:hover{background:#f5f7fb;color:#202938;text-decoration:none}
.nav-link.active{
    background:#eef1ff;
    color:#4054d6;
    font-weight:700;
    box-shadow:inset 3px 0 0 #5d6df2;
}
.sidebar-user{border-top:1px solid var(--v22-line)}
.sidebar-user span{color:var(--v22-muted)}
.sidebar-user .link-button{color:#667085}
.content{max-width:1540px;padding:32px 36px 56px}
a{color:#4a5fd7}
.button{border-radius:10px}
.button.primary{background:#5267ee;border-color:#5267ee;color:#fff}
.button.primary:hover{background:#4256dc;border-color:#4256dc}
.button.secondary{background:#fff;border-color:#d9dee8;color:#344054}
.panel,.metric-card{
    background:#fff;
    border-color:var(--v22-line);
    box-shadow:0 8px 24px rgba(29,36,50,.04);
}

/* Header */
.v22-head,.v22-section-title,.v22-card-head,.v22-progress-copy{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}
.v22-head{align-items:flex-end;margin-bottom:28px}
.v22-head h1{font-size:38px;line-height:1.05;letter-spacing:-.04em;margin:4px 0 7px}
.v22-head p{margin:0;color:var(--v22-muted)}
.v22-head-actions{display:flex;gap:10px;flex-wrap:wrap}
.v22-kicker{
    display:block;
    color:#7c8798;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em;
}
.v22-section{display:grid;gap:18px}
.v22-section-title{align-items:end}
.v22-section-title h2{margin:5px 0 0;font-size:23px;letter-spacing:-.025em}
.v22-cutoff{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:32px;
    padding:0 11px;
    border:1px solid var(--v22-line);
    border-radius:999px;
    background:#fff;
    color:#667085;
    font-size:12px;
    font-weight:700;
}
.v22-cutoff.stale{background:#fff7ed;border-color:#fed7aa;color:#9a5a12}

/* KPI */
.v22-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.v22-kpi{
    position:relative;
    overflow:hidden;
    min-height:130px;
    padding:18px 18px 16px;
    border:1px solid var(--v22-line);
    border-radius:17px;
    background:#fff;
    box-shadow:var(--v22-shadow);
}
.v22-kpi:before{
    content:"";
    position:absolute;
    left:0;top:0;right:0;
    height:4px;
    background:var(--tone);
}
.v22-kpi span,.v22-kpi small{display:block}
.v22-kpi span{color:#697386;font-size:12px;font-weight:700}
.v22-kpi strong{display:block;margin-top:14px;font-size:27px;line-height:1;letter-spacing:-.04em}
.v22-kpi small{margin-top:9px;color:#8b95a5;font-size:11px}
.v22-kpi.blue{--tone:var(--v22-blue)}
.v22-kpi.violet{--tone:var(--v22-violet)}
.v22-kpi.teal{--tone:var(--v22-teal)}
.v22-kpi.slate{--tone:var(--v22-slate)}
.v22-kpi.coral{--tone:var(--v22-coral)}

/* Annual progress */
.v22-progress-card,.v22-card{
    border:1px solid var(--v22-line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--v22-shadow);
}
.v22-progress-card{padding:20px 22px}
.v22-progress-copy{align-items:end}
.v22-progress-copy>div:first-child span{display:block;color:#697386;font-size:12px;font-weight:700}
.v22-progress-copy>div:first-child strong{display:block;margin-top:3px;font-size:28px;letter-spacing:-.035em}
.v22-progress-values{display:flex;gap:18px;flex-wrap:wrap}
.v22-progress-values span{color:#7a8495;font-size:11px}
.v22-progress-values b{display:block;margin-top:2px;color:#2f3847;font-size:12px}
.v22-progress-track{
    height:15px;
    margin-top:18px;
    border-radius:999px;
    overflow:hidden;
    display:flex;
    background:#eef1f5;
}
.v22-progress-track i{display:block;height:100%;animation:v22Grow .65s ease both}
.v22-progress-track .actual{background:var(--v22-blue)}
.v22-progress-track .contracted{background:var(--v22-violet)}
.v22-progress-track .gap{background:#e8ebf0}
.v22-legend,.v22-mini-legend{display:flex;gap:14px;flex-wrap:wrap;color:#7a8495;font-size:11px}
.v22-legend{margin-top:10px}
.v22-mini-legend{align-items:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.dot.actual{background:var(--v22-blue)}
.dot.contracted{background:var(--v22-violet)}
.dot.gap{background:#cfd5df}
.v22-note{
    margin-top:14px;
    padding:10px 12px;
    border-radius:10px;
    background:#f8f9fc;
    color:#657083;
    font-size:11px;
}
.v22-note.small{margin-top:14px}

/* BI grid */
.v22-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.9fr);gap:16px}
.v22-card{padding:20px;min-width:0}
.v22-card.wide{min-height:360px}
.v22-card-head{align-items:flex-start;margin-bottom:18px}
.v22-card-head h3{margin:4px 0 0;font-size:16px;letter-spacing:-.015em}
.v22-card-head>a{font-size:12px;font-weight:700}
.v22-big-number{margin-bottom:10px}
.v22-big-number strong{display:block;font-size:31px;letter-spacing:-.04em}
.v22-big-number span{color:#7a8495;font-size:12px}
.v22-badge{
    display:inline-flex;
    padding:5px 8px;
    border-radius:999px;
    background:#fff5dd;
    color:#8a611b;
    font-size:11px;
    font-weight:700;
}

/* Monthly columns */
.v22-month-chart{
    height:285px;
    display:grid;
    grid-template-columns:repeat(12,minmax(34px,1fr));
    gap:9px;
    align-items:end;
    padding:18px 8px 0;
    border-radius:14px;
    background:
        repeating-linear-gradient(
            to top,
            #fff 0,
            #fff 54px,
            #eef1f5 55px
        );
    overflow-x:auto;
}
.v22-month{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:34px}
.v22-month-stack{
    width:min(36px,72%);
    height:225px;
    display:flex;
    flex-direction:column-reverse;
    justify-content:flex-start;
    overflow:hidden;
    border-radius:8px 8px 3px 3px;
}
.v22-month-stack i{display:block;width:100%;min-height:2px;animation:v22Rise .65s ease both}
.v22-month-stack .billed{background:linear-gradient(180deg,#6780ff,#4f6ef7)}
.v22-month-stack .contracted{background:linear-gradient(180deg,#9177ef,#7256db)}
.v22-month>span{font-size:10px;color:#7f899a;font-weight:700}

/* Horizontal BI bars */
.v22-hbars,.v22-account-bars{display:grid;gap:13px;margin-top:18px}
.v22-hbar>div:first-child,.v22-account-bars a>div:first-child{
    display:flex;justify-content:space-between;gap:14px;align-items:center;
    font-size:11px;
}
.v22-hbar>div:first-child span,.v22-account-bars a span{color:#5f6979}
.v22-hbar>div:first-child b,.v22-account-bars a b{color:#2b3441;font-size:11px}
.v22-hbar small{display:block;margin-top:4px;color:#98a1af;font-size:10px}
.track{height:8px;margin-top:5px;border-radius:999px;background:#edf0f5;overflow:hidden}
.track i{display:block;height:100%;border-radius:999px;animation:v22Grow .7s ease both}
.track i.blue{background:var(--v22-blue)}
.track i.violet{background:var(--v22-violet)}
.track i.teal{background:var(--v22-teal)}
.track i.amber{background:var(--v22-amber)}
.track i.coral{background:var(--v22-coral)}
.track i.slate{background:var(--v22-slate)}
.v22-won{
    margin-top:18px;padding-top:14px;border-top:1px solid var(--v22-line);
    display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end
}
.v22-won span{color:#6f798a;font-size:11px}
.v22-won strong{font-size:18px;color:var(--v22-green)}
.v22-won small{grid-column:1/-1;color:#98a1af;font-size:10px}
.v22-account-bars a{display:block;color:inherit}
.v22-account-bars a:hover{text-decoration:none}
.v22-account-bars .track i{background:var(--v22-blue)}
.v22-account-bars a:nth-child(2) .track i{background:var(--v22-violet)}
.v22-account-bars a:nth-child(3) .track i{background:var(--v22-teal)}
.v22-account-bars a:nth-child(4) .track i{background:var(--v22-amber)}
.v22-account-bars a:nth-child(5) .track i{background:#63a6ea}
.v22-account-bars a:nth-child(6) .track i{background:#9a7ad8}

/* Priority action list */
.v22-actions{display:grid;gap:8px}
.v22-actions>a{
    display:flex;justify-content:space-between;gap:16px;
    padding:11px 12px;
    border:1px solid #edf0f5;
    border-radius:12px;
    color:inherit;background:#fbfcfe;
}
.v22-actions>a:hover{border-color:#d6ddea;text-decoration:none;background:#fff}
.v22-actions>a.overdue{border-left:3px solid var(--v22-coral)}
.v22-actions>a>div:first-child{min-width:0}
.v22-actions>a>div:last-child{text-align:right;flex:0 0 auto}
.v22-actions span,.v22-actions small,.v22-actions time,.v22-actions b{display:block}
.v22-actions span{color:#6d7788;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.v22-actions strong{display:block;margin-top:2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.v22-actions small{margin-top:3px;color:#7c8696;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.v22-actions b{font-size:10px;color:#576174}
.v22-actions time{margin-top:5px;color:#9099a8;font-size:9px}

/* Legacy operations preserved but deprioritized */
.v22-legacy{
    margin-top:20px;
    border:1px solid var(--v22-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(29,36,50,.035);
}
.v22-legacy>summary{
    list-style:none;
    cursor:pointer;
    padding:16px 18px;
    font-size:13px;
    font-weight:750;
    color:#4b5566;
}
.v22-legacy>summary::-webkit-details-marker{display:none}
.v22-legacy>summary:after{content:"+";float:right;color:#8b94a3}
.v22-legacy[open]>summary:after{content:"–"}
.v22-legacy-body{padding:0 18px 18px}
.v22-legacy-body>.page-header,
.v22-legacy-body>.metric-grid{display:none}
.v22-legacy-body .dashboard-grid{margin-top:0}

/* Existing statuses stay semantic, but remove green-heavy feel */
.status-contracted{background:#eaf8f2;color:#247054}
.status-opportunity{background:#fff4dd;color:#936315}
.status-investigate{background:#eef2ff;color:#4c5fb3}

@keyframes v22Grow{from{transform:scaleX(.02);transform-origin:left}to{transform:scaleX(1)}}
@keyframes v22Rise{from{transform:scaleY(.03);transform-origin:bottom;opacity:.25}to{transform:scaleY(1);opacity:1}}

@media(max-width:1180px){
    .v22-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .v22-grid{grid-template-columns:1fr}
    .v22-card.wide{min-height:330px}
}
@media(max-width:900px){
    .content{padding:24px 18px 42px}
    .v22-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .v22-head,.v22-section-title,.v22-progress-copy{align-items:flex-start;flex-direction:column}
    .v22-progress-values{gap:12px}
}
@media(max-width:720px){
    .app-shell{display:block}
    .sidebar{background:#fff}
    .v22-kpis{grid-template-columns:1fr}
    .v22-month-chart{grid-template-columns:repeat(12,38px);justify-content:start}
    .v22-actions>a{flex-direction:column}
    .v22-actions>a>div:last-child{text-align:left}
}

/* =========================================================
   V22.1A - semántica financiera
   ========================================================= */

.dot.sura {
    background: var(--v22-violet);
}

.dot.other {
    background: var(--v22-blue);
}

.v22-account-bars .track i,
.v22-account-bars a:nth-child(2) .track i,
.v22-account-bars a:nth-child(3) .track i,
.v22-account-bars a:nth-child(4) .track i,
.v22-account-bars a:nth-child(5) .track i,
.v22-account-bars a:nth-child(6) .track i {
    background: var(--v22-blue);
}

.v22-account-bars .track i.sura {
    background: var(--v22-violet);
}

.v22-account-bars .track i.other {
    background: var(--v22-blue);
}

.v22-won strong {
    color: var(--v22-teal);
}


/* =========================================================
   V22.1B - chart BI interactivo
   ========================================================= */

.v22-reconcile-note {
    margin-top: 14px;
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px 14px;
    border:
        1px solid #f0d49d;
    border-radius: 12px;
    background: #fffaf0;
}

.v22-reconcile-note > div {
    display: grid;
    gap: 2px;
}

.v22-reconcile-label {
    color: #a16d18;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.v22-reconcile-note strong {
    color: #624815;
    font-size: 13px;
}

.v22-reconcile-note p {
    margin: 0;
    color: #7c6b4e;
    font-size: 11px;
    line-height: 1.45;
}


.v22-card-subtitle {
    margin: 5px 0 0;
    color: var(--v22-muted);
    font-size: 11px;
    line-height: 1.45;
}


.v22-chart-controls {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;
}


.v22-segmented {
    display: inline-flex;
    padding: 3px;
    border:
        1px solid #dfe4ec;
    border-radius: 10px;
    background: #f5f7fb;
}


.v22-segmented button {
    appearance: none;
    border: 0;
    border-radius: 7px;
    padding: 6px 11px;
    background: transparent;
    color: #6b7585;
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}


.v22-segmented button.active {
    background: #fff;
    color: #293444;
    box-shadow:
        0 1px 5px
        rgba(31,40,56,.11);
}


.v22-reference-key {
    display: inline-block;
    width: 13px;
    height: 2px;
    margin:
        0 5px 3px 0;
    background: #97a1b1;
}


.v22-month-chart {
    position: relative;
    isolation: isolate;
}


.v22-month {
    outline: none;
}


.v22-month-stack {
    position: relative;
    overflow: visible;
}


.v22-month-stack i.billed,
.v22-month-stack i.contracted {
    transition:
        height .3s ease;
}


.v22-prev-marker {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 2px !important;
    min-height: 2px !important;
    border-radius: 999px;
    background: #98a2b3 !important;
    z-index: 5;
    opacity: .95;
}


.v22-chart-tooltip {
    position: absolute;
    z-index: 30;
    min-width: 215px;
    max-width: 250px;
    padding: 11px 12px;
    border-radius: 12px;
    background:
        rgba(20,28,40,.96);
    color: #fff;
    box-shadow:
        0 14px 36px
        rgba(25,34,48,.20);
    pointer-events: none;
    font-size: 10px;
}


.v22-chart-tooltip strong {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
}


.v22-chart-tooltip span {
    display: flex;
    justify-content:
        space-between;
    gap: 16px;
    margin-top: 3px;
}


.v22-chart-tooltip em {
    color: #d6dce7;
    font-style: normal;
}


.v22-chart-tooltip b {
    color: #fff;
}


@media (max-width: 900px) {

    .v22-chart-controls {
        align-items:
            flex-start;

        justify-content:
            flex-start;
    }

    .v22-reconcile-note {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   V22.1B.1 - responsive desktop / tablet
   ========================================================= */

.main,
.content,
.v22-section,
.v22-kpis,
.v22-progress-card,
.v22-grid,
.v22-card,
.v22-card-head,
.v22-chart-controls {
    min-width: 0;
}

.content {
    width: 100%;
}


/*
 * En portátiles y ventanas intermedias no intentamos
 * sostener cinco KPI y dos columnas BI simultáneamente.
 */
@media (max-width: 1400px) {

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

    .v22-kpi strong {
        font-size: 24px;
    }

    .v22-grid {
        grid-template-columns: 1fr;
    }

    .v22-card.wide {
        min-height: 340px;
    }

    .v22-chart-controls {
        flex-wrap: wrap;
    }
}


/*
 * Portátil pequeño.
 */
@media (max-width: 1180px) {

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

    .content {
        padding:
            28px
            26px
            48px;
    }
}


/*
 * Tablet.
 */
@media (max-width: 900px) {

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

    .v22-card-head,
    .v22-chart-controls {
        align-items:
            flex-start;
    }

    .v22-chart-controls {
        justify-content:
            flex-start;
    }

    .v22-progress-copy {
        align-items:
            flex-start;
    }
}


/*
 * Mobile.
 */
@media (max-width: 720px) {

    .v22-kpis {
        grid-template-columns:
            1fr;
    }

    .content {
        padding:
            20px
            14px
            36px;
    }

    .v22-progress-card,
    .v22-card {
        border-radius: 14px;
    }
}

/* =========================================================
   V22.1C-1 - Estrategia como análisis del negocio
   ========================================================= */

.v22-strategy-dashboard {
    display: grid;
    gap: 16px;
    margin: 18px 0 26px;
}

.v22-strategy-kpis {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap: 12px;
}

.v22-strategy-grid {
    display: grid;
    grid-template-columns:
        minmax(0,1.45fr)
        minmax(320px,.75fr);
    gap: 16px;
}

.v22-history-list,
.v22-concentration-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.v22-history-row {
    display: grid;
    grid-template-columns:
        44px
        minmax(0,1fr)
        86px;
    gap: 12px;
    align-items: center;
}

.v22-history-year {
    color: #667085;
    font-size: 11px;
    font-weight: 750;
}

.v22-history-row strong {
    text-align: right;
    font-size: 11px;
    color: #344054;
}

.v22-history-track,
.v22-concentration-track {
    height: 10px;
    border-radius: 999px;
    background: #edf0f5;
    overflow: hidden;
    display: flex;
}

.v22-history-track i,
.v22-concentration-track i {
    display: block;
    height: 100%;
}

.v22-history-track i.billed {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}

.v22-history-track i.contracted {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}

.v22-history-legend {
    margin-top: 16px;
}

.v22-concentration-row {
    display: grid;
    gap: 6px;
}

.v22-concentration-copy {
    display: flex;
    justify-content:
        space-between;
    gap: 12px;
    font-size: 11px;
}

.v22-concentration-copy span {
    color: #475467;
}

.v22-concentration-copy b {
    color: #1d2939;
}

.v22-concentration-row small {
    color: #98a2b3;
    font-size: 10px;
}

.v22-concentration-track i.sura {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}

.v22-concentration-track i.auna {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}

.v22-concentration-track i.postobon {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}

.v22-concentration-track i.amway {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}

.v22-concentration-track i.other {
    background: #aab3c2;
}

.v22-strategy-reading {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap: 12px;
}

.v22-insight {
    min-width: 0;
    padding: 16px;
    border:
        1px solid
        #e2e7ef;
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 6px 20px
        rgba(
            31,
            41,
            55,
            .035
        );
}

.v22-insight::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 13px;
    border-radius: 999px;
    background: #98a2b3;
}

.v22-insight.violet::before {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}

.v22-insight.coral::before {
    background:
        var(
            --v22-coral,
            #ef6a5b
        );
}

.v22-insight.amber::before {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}

.v22-insight.teal::before {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}

.v22-insight > span {
    display: block;
    color: #7b8494;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.v22-insight > strong {
    display: block;
    margin-top: 6px;
    color: #182230;
    font-size: 18px;
    line-height: 1.15;
}

.v22-insight > p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
}


@media (
    max-width: 1400px
) {

    .v22-strategy-kpis,
    .v22-strategy-reading {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}


@media (
    max-width: 1100px
) {

    .v22-strategy-grid {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 720px
) {

    .v22-strategy-kpis,
    .v22-strategy-reading {
        grid-template-columns:
            1fr;
    }

    .v22-history-row {
        grid-template-columns:
            38px
            minmax(0,1fr);
    }

    .v22-history-row strong {
        grid-column: 2;
        text-align: left;
    }
}


/* =========================================================
   V22.1C-2 - Crecimiento como centro de ejecución
   ========================================================= */

.v22-growth-dashboard {
    display: grid;
    gap: 16px;
    margin: 18px 0 28px;
}


.v22-growth-focus {
    display: grid;
    grid-template-columns:
        minmax(0,1.4fr)
        minmax(380px,.8fr);
    gap: 26px;
    align-items: center;
    padding: 22px 24px;
    border:
        1px solid #d9e8e1;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            #f7f8ff 100%
        );
}


.v22-growth-focus-main h2 {
    margin: 5px 0 7px;
    color: #182230;
    font-size: 21px;
    letter-spacing: -.025em;
}


.v22-growth-focus-main p {
    margin: 0;
    max-width: 780px;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}


.v22-growth-focus-stats {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap: 10px;
}


.v22-growth-focus-stats > div {
    min-width: 0;
    padding: 12px;
    border:
        1px solid
        rgba(111,124,146,.16);
    border-radius: 12px;
    background:
        rgba(255,255,255,.72);
}


.v22-growth-focus-stats span,
.v22-growth-focus-stats strong {
    display: block;
}


.v22-growth-focus-stats span {
    color: #7b8494;
    font-size: 9px;
    font-weight: 750;
}


.v22-growth-focus-stats strong {
    margin-top: 5px;
    color: #182230;
    font-size: 16px;
}


.v22-growth-motors {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap: 12px;
}


.v22-growth-motor {
    position: relative;
    min-width: 0;
    padding: 16px;
    border:
        1px solid #e1e6ee;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}


.v22-growth-motor::before {
    content: "";
    position: absolute;
    inset:
        0 0 auto 0;
    height: 3px;
    background: #98a2b3;
}


.v22-growth-motor.blue::before {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}


.v22-growth-motor.teal::before {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}


.v22-growth-motor.amber::before {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}


.v22-growth-motor.violet::before {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}


.v22-growth-motor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    margin-bottom: 12px;
    border-radius: 7px;
    background: #f3f5f9;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
}


.v22-growth-motor > span,
.v22-growth-motor > strong,
.v22-growth-motor > small {
    display: block;
}


.v22-growth-motor > span {
    color: #667085;
    font-size: 10px;
    font-weight: 750;
}


.v22-growth-motor > strong {
    margin-top: 5px;
    color: #182230;
    font-size: 22px;
    line-height: 1.15;
}


.v22-growth-motor > small {
    margin-top: 7px;
    color: #8a94a4;
    font-size: 10px;
    line-height: 1.45;
}


.v22-growth-layout {
    display: grid;
    grid-template-columns:
        minmax(0,1.55fr)
        minmax(330px,.75fr);
    gap: 16px;
    align-items: start;
}


.v22-growth-side {
    display: grid;
    gap: 16px;
}


.v22-count-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f0f2f6;
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}


.v22-action-list {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}


.v22-action {
    position: relative;
    display: grid;
    grid-template-columns:
        4px
        minmax(0,1fr)
        auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border:
        1px solid #e5e8ee;
    border-radius: 11px;
    background: #fafbfc;
    color: #182230;
}


.v22-action:hover {
    border-color: #cfd6e2;
    background: #fff;
    text-decoration: none;
}


.v22-action > i {
    align-self: stretch;
    min-height: 42px;
    border-radius: 999px;
    background: #98a2b3;
}


.v22-action.tone-coral > i {
    background:
        var(
            --v22-coral,
            #ef6a5b
        );
}


.v22-action.tone-amber > i {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}


.v22-action.tone-teal > i {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}


.v22-action.tone-blue > i {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}


.v22-action.tone-violet > i {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}


.v22-action.tone-slate > i {
    background: #98a2b3;
}


.v22-action-copy {
    min-width: 0;
}


.v22-action-copy > span {
    display: block;
    color: #7b8494;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.v22-action-copy > strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #182230;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.v22-action-copy > p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 10px;
    line-height: 1.4;
}


.v22-action-meta {
    min-width: 120px;
    text-align: right;
}


.v22-action-meta strong,
.v22-action-meta time {
    display: block;
}


.v22-action-meta strong {
    color: #344054;
    font-size: 10px;
}


.v22-action-meta time {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 9px;
}


.v22-growth-account-list {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}


.v22-growth-account-list > a {
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom:
        1px solid #edf0f4;
    color: #182230;
}


.v22-growth-account-list > a:last-child {
    border-bottom: 0;
}


.v22-growth-account-list > a:hover {
    text-decoration: none;
}


.v22-growth-account-list strong,
.v22-growth-account-list span {
    display: block;
}


.v22-growth-account-list strong {
    font-size: 11px;
}


.v22-growth-account-list span {
    margin-top: 3px;
    color: #7d8797;
    font-size: 9px;
}


.v22-growth-account-list b {
    flex: 0 0 auto;
    color:
        var(
            --v22-blue,
            #526ff5
        );
    font-size: 11px;
}


@media (max-width: 1400px) {

    .v22-growth-motors {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .v22-growth-focus {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 1100px) {

    .v22-growth-layout {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 760px) {

    .v22-growth-motors,
    .v22-growth-focus-stats {
        grid-template-columns:
            1fr;
    }

    .v22-action {
        grid-template-columns:
            4px
            minmax(0,1fr);
    }

    .v22-action-meta {
        grid-column: 2;
        min-width: 0;
        text-align: left;
    }
}


/* =========================================================
   PIPELINE V22
   ========================================================= */

.opp-v22-page {
    display: grid;
    gap: 16px;
}


.opp-v22-header {
    align-items: flex-end;
}


.opp-v22-kpis {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );
    gap: 12px;
}


.opp-v22-kpi {
    position: relative;
    min-width: 0;
    padding: 16px;
    border:
        1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}


.opp-v22-kpi::before {
    content: "";
    position: absolute;
    inset:
        0 0 auto 0;
    height: 3px;
    background: #98a2b3;
}


.opp-v22-kpi.blue::before {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}


.opp-v22-kpi.violet::before {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}


.opp-v22-kpi.amber::before {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}


.opp-v22-kpi.coral::before {
    background:
        var(
            --v22-coral,
            #ef6a5b
        );
}


.opp-v22-kpi.teal::before {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}


.opp-v22-kpi > span,
.opp-v22-kpi > strong,
.opp-v22-kpi > small {
    display: block;
}


.opp-v22-kpi > span {
    color: #667085;
    font-size: 10px;
    font-weight: 750;
}


.opp-v22-kpi > strong {
    margin-top: 7px;
    color: #182230;
    font-size: 23px;
    letter-spacing: -.03em;
}


.opp-v22-kpi > small {
    margin-top: 6px;
    color: #8b95a5;
    font-size: 10px;
    line-height: 1.4;
}


.opp-v22-toolbar {
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    gap: 16px;
    padding: 9px;
    border:
        1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
}


.opp-v22-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}


.opp-v22-tabs a,
.opp-v22-view-switch a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #667085;
    font-size: 10px;
    font-weight: 750;
}


.opp-v22-tabs a:hover,
.opp-v22-view-switch a:hover {
    text-decoration: none;
    background: #f5f7fa;
}


.opp-v22-tabs a.active,
.opp-v22-view-switch a.active {
    background: #edf1ff;
    color:
        var(
            --v22-blue,
            #526ff5
        );
}


.opp-v22-tabs span {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background:
        rgba(
            82,
            111,
            245,
            .09
        );
    font-size: 9px;
}


.opp-v22-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


.opp-v22-search {
    display: flex;
    align-items: center;
    gap: 6px;
}


.opp-v22-search input {
    width: 230px;
    min-height: 34px;
    padding: 7px 10px;
    border:
        1px solid #dce2eb;
    border-radius: 9px;
    background: #fafbfc;
    font: inherit;
    font-size: 10px;
}


.opp-v22-search button {
    min-height: 34px;
    padding: 7px 10px;
    border:
        1px solid #dce2eb;
    border-radius: 9px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}


.opp-v22-view-switch {
    display: inline-flex;
    padding: 3px;
    border:
        1px solid #dfe4ec;
    border-radius: 10px;
    background: #f5f7fa;
}


.opp-v22-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns:
        minmax(235px,1fr);
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}


.opp-v22-column {
    min-width: 235px;
    border:
        1px solid #e1e6ed;
    border-radius: 14px;
    background: #f4f6f9;
    overflow: hidden;
}


.opp-v22-column > header {
    position: relative;
    display: flex;
    justify-content:
        space-between;
    gap: 10px;
    padding: 13px 13px 11px;
    border-bottom:
        1px solid #e1e5eb;
    background:
        rgba(
            255,
            255,
            255,
            .85
        );
}


.opp-v22-column > header::before {
    content: "";
    position: absolute;
    inset:
        0 0 auto 0;
    height: 3px;
    background: #98a2b3;
}


.opp-v22-column.stage-blue > header::before {
    background:
        var(
            --v22-blue,
            #526ff5
        );
}


.opp-v22-column.stage-teal > header::before {
    background:
        var(
            --v22-teal,
            #16a3a3
        );
}


.opp-v22-column.stage-violet > header::before {
    background:
        var(
            --v22-violet,
            #7b5ce7
        );
}


.opp-v22-column.stage-amber > header::before {
    background:
        var(
            --v22-amber,
            #e79a2d
        );
}


.opp-v22-column.stage-coral > header::before {
    background:
        var(
            --v22-coral,
            #ef6a5b
        );
}


.opp-v22-column.stage-green > header::before {
    background:
        var(
            --v22-green,
            #37a66a
        );
}


.opp-v22-column.stage-red > header::before {
    background: #d95656;
}


.opp-v22-column > header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}


.opp-v22-column > header span {
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}


.opp-v22-column > header b {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #edf0f5;
    color: #667085;
    font-size: 9px;
}


.opp-v22-column > header small {
    color: #7f8998;
    font-size: 9px;
    font-weight: 700;
}


.opp-v22-column-body {
    display: grid;
    gap: 9px;
    padding: 9px;
}


.opp-v22-empty {
    padding: 22px 10px;
    color: #98a2b3;
    text-align: center;
    font-size: 10px;
}


.opp-v22-card {
    display: block;
    min-width: 0;
    padding: 12px;
    border:
        1px solid #e0e5ec;
    border-radius: 11px;
    background: #fff;
    color: #182230;
    box-shadow:
        0 3px 10px
        rgba(
            30,
            40,
            55,
            .025
        );
}


.opp-v22-card:hover {
    border-color: #cbd3df;
    box-shadow:
        0 8px 20px
        rgba(
            30,
            40,
            55,
            .06
        );
    text-decoration: none;
}


.opp-v22-card-top {
    display: flex;
    align-items: flex-start;
    justify-content:
        space-between;
    gap: 8px;
}


.opp-v22-client {
    color: #667085;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}


.opp-v22-type {
    color: #8a94a4;
    font-size: 8px;
    text-align: right;
}


.opp-v22-title {
    display: -webkit-box;
    margin-top: 7px;
    overflow: hidden;
    color: #182230;
    font-size: 11px;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.opp-v22-value {
    margin-top: 10px;
    color: #344054;
    font-size: 15px;
    font-weight: 800;
}


.opp-v22-next {
    display: -webkit-box;
    margin: 9px 0 0;
    overflow: hidden;
    color: #667085;
    font-size: 9px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.opp-v22-next.muted {
    color: #98a2b3;
}


.opp-v22-card-bottom {
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    gap: 8px;
    margin-top: 11px;
    padding-top: 9px;
    border-top:
        1px solid #edf0f4;
}


.opp-v22-follow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 750;
}


.opp-v22-follow.overdue {
    background: #fff0ee;
    color: #bf4e43;
}


.opp-v22-follow.missing {
    background: #fff7e9;
    color: #9f6915;
}


.opp-v22-follow.scheduled {
    background: #edf8f4;
    color: #218366;
}


.opp-v22-owner {
    color: #98a2b3;
    font-size: 8px;
    text-align: right;
}


.opp-v22-close {
    display: block;
    margin-top: 8px;
    color: #98a2b3;
    font-size: 8px;
}


.opp-v22-list-card {
    border:
        1px solid #e0e5ed;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}


.opp-v22-table-wrap {
    overflow-x: auto;
}


.opp-v22-table {
    width: 100%;
    border-collapse: collapse;
}


.opp-v22-table th {
    padding: 10px 12px;
    border-bottom:
        1px solid #e1e5eb;
    background: #f8f9fb;
    color: #7d8797;
    text-align: left;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}


.opp-v22-table td {
    padding: 12px;
    border-bottom:
        1px solid #edf0f4;
    color: #475467;
    font-size: 10px;
    vertical-align: top;
}


.opp-v22-table tr:last-child td {
    border-bottom: 0;
}


.opp-v22-table td > strong,
.opp-v22-table td > span {
    display: block;
}


.opp-v22-table td > span {
    margin-top: 3px;
    color: #7f8998;
}


.opp-v22-table td > small {
    margin-top: 5px;
}


.opp-v22-stage-pill {
    display: inline-flex !important;
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef1f5;
    color: #667085 !important;
    font-size: 8px;
    font-weight: 750;
}


.opp-v22-stage-pill.tone-blue {
    background: #edf1ff;
    color: #4663db !important;
}


.opp-v22-stage-pill.tone-teal {
    background: #eaf8f6;
    color: #178574 !important;
}


.opp-v22-stage-pill.tone-violet {
    background: #f2efff;
    color: #6852c4 !important;
}


.opp-v22-stage-pill.tone-amber {
    background: #fff6e8;
    color: #9c691c !important;
}


.opp-v22-stage-pill.tone-coral,
.opp-v22-stage-pill.tone-red {
    background: #fff0ee;
    color: #bd5148 !important;
}


.opp-v22-stage-pill.tone-green {
    background: #edf8f1;
    color: #2b8854 !important;
}


.opp-v22-table-empty {
    padding: 30px !important;
    text-align: center;
    color: #98a2b3 !important;
}


@media (max-width: 1400px) {

    .opp-v22-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .opp-v22-toolbar {
        align-items:
            flex-start;
        flex-direction: column;
    }

    .opp-v22-toolbar-right {
        width: 100%;
        justify-content:
            space-between;
    }
}


@media (max-width: 900px) {

    .opp-v22-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .opp-v22-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .opp-v22-toolbar-right {
        align-items:
            stretch;
        flex-direction: column;
    }

    .opp-v22-search {
        width: 100%;
    }

    .opp-v22-search input {
        width: 100%;
    }

    .opp-v22-view-switch {
        width: fit-content;
    }
}


@media (max-width: 640px) {

    .opp-v22-kpis {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   SHOWCASE HUB V1.2C
   ========================================================= */

.showcase-hub-page {
    display: grid;
    gap: 18px;
}

.showcase-hub-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding: 25px;
    border: 1px solid #e1e6ed;
    border-radius: 16px;
    background:
        linear-gradient(
            120deg,
            #fff,
            #f7f8ff
        );
}

.showcase-hub-back {
    display: inline-flex;
    margin-bottom: 18px;
    color: #7d8898;
    font-size: 12px;
    text-decoration: none;
}

.showcase-hub-hero > div > span {
    color: #7c8797;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.showcase-hub-hero h1 {
    margin: 8px 0 0;
    color: #182230;
    font-size: 32px;
    letter-spacing: -.04em;
}

.showcase-hub-hero p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
}

.showcase-hub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.showcase-hub-meta > span {
    padding: 6px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: #667085;
    font-size: 10px;
}

.showcase-hub-open-base {
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid #dce2ea;
    border-radius: 9px;
    background: #fff;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.showcase-hub-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.showcase-hub-kpis article {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #e1e6ed;
    border-radius: 12px;
    background: #fff;
}

.showcase-hub-kpis article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #98a2b3;
}

.showcase-hub-kpis article.blue::before {
    background: var(--v22-blue,#526fff);
}

.showcase-hub-kpis article.teal::before {
    background: var(--v22-teal,#0ca7a5);
}

.showcase-hub-kpis article.violet::before {
    background: var(--v22-violet,#7b5cf5);
}

.showcase-hub-kpis article.amber::before {
    background: var(--v22-amber,#eda038);
}

.showcase-hub-kpis span,
.showcase-hub-kpis strong,
.showcase-hub-kpis small {
    display: block;
}

.showcase-hub-kpis span {
    color: #667085;
    font-size: 11px;
}

.showcase-hub-kpis strong {
    margin-top: 7px;
    color: #182230;
    font-size: 25px;
}

.showcase-hub-kpis small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 10px;
}

.showcase-hub-layout {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(310px,.65fr);
    gap: 13px;
}

.showcase-hub-main,
.showcase-hub-side {
    display: grid;
    gap: 13px;
    align-content: start;
}

.showcase-hub-panel {
    padding: 18px;
    border: 1px solid #e1e6ed;
    border-radius: 14px;
    background: #fff;
}

.showcase-hub-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.showcase-hub-panel-head span,
.showcase-hub-panel.guidance > span {
    color: #8a94a4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.showcase-hub-panel-head h2 {
    margin: 5px 0 0;
    color: #253041;
    font-size: 18px;
}

.showcase-hub-panel-head p {
    max-width: 600px;
    margin: 5px 0 0;
    color: #7b8697;
    font-size: 11px;
    line-height: 1.5;
}

.showcase-hub-panel-head > b {
    display: grid;
    min-width: 29px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    background: #f1f3f6;
    color: #667085;
    font-size: 11px;
}

.showcase-hub-create {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 9px;
    align-items: end;
    margin-top: 16px;
}

.showcase-hub-create label {
    display: grid;
    gap: 5px;
}

.showcase-hub-create label > span {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.showcase-hub-create select,
.showcase-hub-create input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #dce2ea;
    border-radius: 8px;
    background: #fafbfc;
    color: #344054;
    font-size: 11px;
}

.showcase-hub-create > button {
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: var(--v22-blue,#526fff);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.showcase-hub-note,
.showcase-hub-identity-note {
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 9px;
    background: #f7f8fa;
    color: #667085;
    font-size: 10px;
    line-height: 1.5;
}

.showcase-hub-note strong,
.showcase-hub-note span {
    display: block;
}

.showcase-hub-note span {
    margin-top: 3px;
}

.showcase-hub-links {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.showcase-hub-link {
    padding: 13px;
    border: 1px solid #e2e7ee;
    border-radius: 11px;
    background: #fff;
}

.showcase-hub-link.inactive {
    opacity: .68;
    background: #fafbfc;
}

.showcase-hub-link-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.showcase-hub-link-top > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.showcase-hub-link-top strong {
    color: #253041;
    font-size: 12px;
}

.showcase-hub-link-top small {
    color: #8a94a4;
    font-size: 9px;
}

.showcase-hub-link-top time {
    color: #98a2b3;
    font-size: 9px;
    white-space: nowrap;
}

.showcase-hub-status {
    display: inline-flex;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.showcase-hub-status.active {
    background: #eaf8f5;
    color: #218572;
}

.showcase-hub-status.inactive {
    background: #eff1f4;
    color: #7b8492;
}

.showcase-hub-link-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px;
    margin-top: 12px;
}

.showcase-hub-link-stats > div {
    padding: 8px;
    border-radius: 8px;
    background: #f8f9fb;
}

.showcase-hub-link-stats span,
.showcase-hub-link-stats strong {
    display: block;
}

.showcase-hub-link-stats span {
    color: #8a94a4;
    font-size: 8px;
}

.showcase-hub-link-stats strong {
    margin-top: 3px;
    color: #475467;
    font-size: 10px;
}

.showcase-hub-url-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 6px;
    margin-top: 10px;
}

.showcase-hub-url-row input {
    min-width: 0;
    min-height: 35px;
    padding: 0 9px;
    border: 1px solid #dfe4eb;
    border-radius: 7px;
    background: #fafbfc;
    color: #667085;
    font-size: 9px;
}

.showcase-hub-url-row button,
.showcase-hub-url-row a,
.showcase-hub-link-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 0 10px;
    border: 1px solid #dce2ea;
    border-radius: 7px;
    background: #fff;
    color: #475467;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.showcase-hub-url-row button {
    border-color: #cfd7fb;
    color: #5265cb;
}

.showcase-hub-link-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 9px;
}

.showcase-hub-link-footer > span {
    color: #98a2b3;
    font-size: 8px;
}

.showcase-hub-link-footer form {
    margin: 0;
}

.showcase-hub-link-footer button {
    min-height: 28px;
    color: #7b8493;
}

.showcase-hub-empty {
    display: grid;
    gap: 4px;
    margin-top: 15px;
    padding: 20px;
    border: 1px dashed #d8dee7;
    border-radius: 10px;
    text-align: center;
}

.showcase-hub-empty strong {
    color: #475467;
    font-size: 11px;
}

.showcase-hub-empty span {
    color: #98a2b3;
    font-size: 9px;
}

.showcase-hub-empty.compact {
    padding: 14px;
}

.showcase-hub-timeline {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.showcase-hub-event {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f4;
}

.showcase-hub-event:last-child {
    border-bottom: 0;
}

.showcase-hub-event > i {
    width: 8px;
    height: 8px;
    margin-top: 3px;
    border-radius: 50%;
    background: #98a2b3;
}

.showcase-hub-event > i.showcase_open {
    background: var(--v22-blue,#526fff);
}

.showcase-hub-event > i.demo_open {
    background: var(--v22-violet,#7b5cf5);
}

.showcase-hub-event > i.demo_action,
.showcase-hub-event > i.filter_change,
.showcase-hub-event > i.preset_change {
    background: var(--v22-teal,#0ca7a5);
}

.showcase-hub-event strong,
.showcase-hub-event span,
.showcase-hub-event time {
    display: block;
}

.showcase-hub-event strong {
    color: #344054;
    font-size: 10px;
}

.showcase-hub-event span {
    margin-top: 3px;
    color: #7d8899;
    font-size: 9px;
}

.showcase-hub-event time {
    margin-top: 3px;
    color: #a0a8b4;
    font-size: 8px;
}

.showcase-hub-panel.guidance {
    background:
        linear-gradient(
            135deg,
            #111722,
            #1b2230
        );
    color: #fff;
}

.showcase-hub-panel.guidance > strong {
    display: block;
    margin-top: 7px;
    font-size: 14px;
}

.showcase-hub-panel.guidance p {
    margin: 8px 0 0;
    color: #9ba6b6;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 1100px) {

    .showcase-hub-layout {
        grid-template-columns: 1fr;
    }

    .showcase-hub-kpis {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 720px) {

    .showcase-hub-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .showcase-hub-create,
    .showcase-hub-kpis,
    .showcase-hub-link-stats {
        grid-template-columns: 1fr;
    }

    .showcase-hub-url-row {
        grid-template-columns: 1fr 1fr;
    }

    .showcase-hub-url-row input {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   SHOWCASE HUB V1.2C-3
   Pipeline integration
   ========================================================= */

.showcase-hub-back {
    display: flex;
    width: max-content;
}


.opp-v22-card-shell {
    display: grid;
    gap: 6px;
}


.opp-v22-card-shell .opp-v22-card {
    width: 100%;
}


.opp-v22-showcase-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #e0e5ec;
    border-radius: 9px;
    background: #fff;
    color: #667085;
    text-decoration: none;
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.opp-v22-showcase-action:hover {
    border-color: #ccd4df;
    background: #fafbfc;
    transform: translateY(-1px);
    text-decoration: none;
}


.opp-v22-showcase-action > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-size: 9px;
    font-weight: 750;
}


.opp-v22-showcase-action > span::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a4acb8;
}


.opp-v22-showcase-action > strong {
    color: #7f8998;
    font-size: 8px;
    font-weight: 750;
}


.opp-v22-showcase-action.state-ready > span::before,
.opp-v22-row-showcase.state-ready::before {
    background: var(
        --v22-blue,
        #526fff
    );
}


.opp-v22-showcase-action.state-opened > span::before,
.opp-v22-row-showcase.state-opened::before {
    background: var(
        --v22-teal,
        #0ca7a5
    );
}


.opp-v22-showcase-action.state-demo > span::before,
.opp-v22-row-showcase.state-demo::before {
    background: var(
        --v22-violet,
        #7b5cf5
    );
}


.opp-v22-showcase-action.state-inactive > span::before,
.opp-v22-row-showcase.state-inactive::before {
    background: #98a2b3;
}


.opp-v22-showcase-action.state-opened {
    border-color:
        rgba(
            12,
            167,
            165,
            .22
        );

    background:
        rgba(
            12,
            167,
            165,
            .028
        );
}


.opp-v22-showcase-action.state-demo {
    border-color:
        rgba(
            123,
            92,
            245,
            .24
        );

    background:
        rgba(
            123,
            92,
            245,
            .035
        );
}


.opp-v22-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


.opp-v22-row-actions > a {
    text-decoration: none;
}


.opp-v22-row-showcase {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #52606f;
    font-size: 11px;
    font-weight: 700;
}


.opp-v22-row-showcase::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a4acb8;
}


.opp-v22-row-showcase > span {
    padding: 3px 5px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #8490a0;
    font-size: 8px;
    font-weight: 700;
}


.opp-v22-row-showcase.state-ready > span {
    background: #eef1ff;
    color: #5266ce;
}


.opp-v22-row-showcase.state-opened > span {
    background: #eaf8f5;
    color: #218572;
}


.opp-v22-row-showcase.state-demo > span {
    background: #f1edff;
    color: #6a54c5;
}


@media (max-width: 720px) {

    .opp-v22-showcase-action {
        min-height: 38px;
    }


    .opp-v22-row-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
   SHOWCASE HUB V1.3A-2B
   ========================================================== */

.showcase-hub-create .showcase-v13-wide {
    grid-column: 1 / -1;
}

.showcase-hub-create textarea {
    width: 100%;
    min-height: 112px;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d9dee7;
    border-radius: 8px;
    background: #fff;
    color: #20242c;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.showcase-hub-create textarea:focus {
    outline: none;
    border-color: #aeb8c8;
    box-shadow: 0 0 0 3px rgba(74, 92, 130, .08);
}

.showcase-v13-help {
    display: block;
    margin-top: 7px;
    color: #777f8d;
    font-size: 12px;
    line-height: 1.45;
}

.showcase-v13-link-config {
    display: grid;
    gap: 10px;
    margin: 14px 0 3px;
    padding: 12px 14px;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    background: #fafbfc;
}

.showcase-v13-focus-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.showcase-v13-focus {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid #dce1ea;
    border-radius: 999px;
    background: #f2f4f8;
    color: #313744;
    font-size: 12px;
    font-weight: 750;
}

.showcase-v13-focus-description {
    color: #6e7684;
    font-size: 12px;
}

.showcase-v13-internal-name,
.showcase-v13-message {
    display: grid;
    gap: 3px;
}

.showcase-v13-internal-name > span,
.showcase-v13-message > span {
    color: #8a909b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.showcase-v13-internal-name strong {
    color: #343a46;
    font-size: 13px;
}

.showcase-v13-message p {
    margin: 0;
    max-width: 780px;
    color: #555e6d;
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 760px) {

    .showcase-hub-create .showcase-v13-wide {
        grid-column: auto;
    }

}