﻿:root {
    --cc-bg-1: #0b1220;
    --cc-bg-2: #111827;
    --cc-card: rgba(15, 23, 42, 0.8);
    --cc-card-soft: rgba(18, 27, 46, 0.68);
    --cc-border: rgba(148, 163, 184, 0.18);
    --cc-border-strong: rgba(96, 165, 250, 0.35);
    --cc-text: #ecf4ff;
    --cc-muted: #9fb1cf;
    --cc-blue: #60a5fa;
    --cc-violet: #8b5cf6;
    --cc-green: #34d399;
    --cc-pink: #f472b6;
    --cc-amber: #fbbf24;
    --cc-red: #fb7185;
    --cc-slate: #94a3b8;
    --cc-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
}

.campaign-center-shell {
    padding: 1.5rem;
    color: var(--cc-text);
    display: grid;
    gap: 1.5rem;
}

.campaign-center-hero,
.cc-panel,
.cc-kpi-card,
.cc-launch-card {
    border: 1px solid var(--cc-border);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), linear-gradient(135deg, rgba(96,165,250,0.08), rgba(139,92,246,0.06)), var(--cc-card);
    box-shadow: var(--cc-shadow);
}

.campaign-center-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .9fr);
    gap: 1.5rem;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}

    .campaign-center-hero::after {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 260px;
        height: 260px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(96,165,250,.15), transparent 70%);
        pointer-events: none;
    }

.campaign-center-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--cc-muted);
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 1rem;
}

    .campaign-center-back:hover {
        color: #fff;
    }

.campaign-center-hero__eyebrow,
.cc-panel__eyebrow {
    color: var(--cc-blue);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .55rem;
}

.campaign-center-hero__title {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
    margin: 0 0 .8rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.campaign-center-hero__subtitle,
.cc-panel__subtitle,
.cc-empty-state,
.cc-muted {
    color: var(--cc-muted);
    line-height: 1.7;
}

.campaign-center-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.15rem;
}

.cc-chip,
.cc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    font-size: .78rem;
    font-weight: 800;
}

.cc-chip--blue {
    background: rgba(96,165,250,.14);
    color: #dbeafe;
}

.cc-chip--violet {
    background: rgba(139,92,246,.14);
    color: #ede9fe;
}

.cc-chip--green {
    background: rgba(52,211,153,.14);
    color: #d1fae5;
}

.cc-chip--slate {
    background: rgba(148,163,184,.14);
    color: #e2e8f0;
}

.cc-launch-card {
    padding: 1.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cc-launch-card__title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .9rem;
}

.cc-launch-card__grid {
    display: grid;
    gap: .9rem;
}

.cc-launch-item {
    padding: .85rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

.cc-launch-item__label,
.cc-kpi-card__label,
.cc-mini-card__label,
.cc-signal-card__label,
.cc-campaign-row__label,
.cc-run-metric__label,
.cc-health-alert__label {
    color: var(--cc-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}

.cc-launch-item__value,
.cc-health-alert__title {
    font-size: 1rem;
    font-weight: 800;
    margin-top: .25rem;
}

.cc-launch-item__sub {
    color: var(--cc-muted);
    font-size: .86rem;
    margin-top: .2rem;
}

.cc-launch-card__actions {
    margin-top: 1rem;
}

.cc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.cc-kpi-card {
    padding: 1.15rem;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cc-kpi-card__value {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.1;
}

.cc-kpi-card__value--pill {
    font-size: 1rem;
}

.cc-kpi-card__sub {
    color: var(--cc-muted);
    font-size: .88rem;
}

.cc-kpi-card--blue {
    background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(96,165,250,.04)), var(--cc-card);
}

.cc-kpi-card--violet {
    background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.04)), var(--cc-card);
}

.cc-kpi-card--green {
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(52,211,153,.04)), var(--cc-card);
}

.cc-kpi-card--slate {
    background: linear-gradient(135deg, rgba(148,163,184,.12), rgba(148,163,184,.04)), var(--cc-card);
}

.cc-kpi-card--amber {
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.04)), var(--cc-card);
}

.cc-kpi-card--pink {
    background: linear-gradient(135deg, rgba(244,114,182,.12), rgba(244,114,182,.04)), var(--cc-card);
}

.cc-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 1.5rem;
}

.cc-main-left,
.cc-main-right {
    display: grid;
    gap: 1.5rem;
}

.cc-panel {
    padding: 1.4rem;
}

.cc-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.cc-panel__title {
    font-size: 1.15rem;
    font-weight: 850;
    margin: 0 0 .2rem;
}

.cc-empty-panel {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-empty-panel__actions {
    margin-top: 1.15rem;
}

.cc-spotlight-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cc-spotlight-name,
.cc-campaign-row__name,
.cc-run-card__title {
    font-size: 1.08rem;
    font-weight: 900;
}

.cc-spotlight-key,
.cc-campaign-row__key,
.cc-run-card__sub,
.cc-campaign-row__sub,
.cc-run-metric__text,
.cc-health-alert__text {
    color: var(--cc-muted);
    font-size: .88rem;
}

.cc-spotlight-schedule {
    text-align: right;
}

.cc-spotlight-schedule__label {
    color: var(--cc-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cc-spotlight-schedule__value {
    font-weight: 800;
}

.cc-spotlight-schedule__sub {
    color: var(--cc-muted);
    font-size: .86rem;
}

.cc-spotlight-grid,
.cc-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.cc-mini-card,
.cc-signal-card,
.cc-insight-strip,
.cc-health-alert,
.cc-campaign-row,
.cc-run-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

.cc-mini-card,
.cc-signal-card {
    padding: .95rem 1rem;
}

.cc-mini-card__value,
.cc-signal-card__value {
    font-size: 1rem;
    font-weight: 800;
    margin-top: .25rem;
}

.cc-mini-card__sub-inline,
.cc-campaign-row__sub-inline {
    color: var(--cc-muted);
    font-size: .86rem;
    font-weight: 600;
}

.cc-signal-card--green {
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(52,211,153,.04));
}

.cc-signal-card--blue {
    background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(96,165,250,.04));
}

.cc-signal-card--violet {
    background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(139,92,246,.04));
}

.cc-signal-card--slate {
    background: linear-gradient(135deg, rgba(148,163,184,.12), rgba(148,163,184,.04));
}

.cc-insight-strip {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.cc-insight-strip__text {
    margin-top: .35rem;
    color: #dbe7fb;
    font-size: .93rem;
}

.cc-spotlight-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: end;
}

.cc-spotlight-footer__time {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .cc-spotlight-footer__time span {
        color: var(--cc-muted);
        font-size: .8rem;
    }

.cc-health-list {
    display: grid;
    gap: .7rem;
}

.cc-health-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.cc-health-alert {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(244,114,182,.08), rgba(251,113,133,.08));
}

.cc-card-stack,
.cc-run-stack {
    display: grid;
    gap: 1rem;
}

.cc-campaign-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 110px;
    gap: 1rem;
    padding: 1rem;
}

.cc-campaign-row__status,
.cc-campaign-row__actions {
    display: flex;
    align-items: start;
    gap: .45rem;
    flex-direction: column;
}

.cc-campaign-row__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.cc-campaign-row__meta {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    color: var(--cc-muted);
    font-size: .88rem;
}

.cc-campaign-row__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}

.cc-campaign-row__value {
    font-weight: 800;
    margin-top: .15rem;
}

.cc-campaign-row__stop {
    margin-top: .8rem;
    padding: .8rem .95rem;
    border-radius: 16px;
    background: rgba(251,113,133,.08);
    border: 1px solid rgba(251,113,133,.12);
    font-size: .9rem;
}

.cc-run-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.cc-run-card__status {
    margin-top: .7rem;
}

.cc-run-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}

.cc-run-stop,
.cc-run-summary,
.cc-run-error {
    margin-top: .8rem;
    padding: .8rem .95rem;
    border-radius: 16px;
    font-size: .9rem;
}

.cc-run-stop {
    background: rgba(251,191,36,.08);
    border: 1px solid rgba(251,191,36,.12);
}

.cc-run-summary {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: #dde9fc;
}

.cc-run-error {
    background: rgba(251,113,133,.08);
    border: 1px solid rgba(251,113,133,.12);
    color: #fecdd3;
    white-space: pre-wrap;
    word-break: break-word;
}

.cc-btn {
    min-height: 46px;
    padding: 0 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 800;
    transition: .18s ease;
}

.cc-btn--primary {
    background: linear-gradient(135deg, var(--cc-blue), var(--cc-violet));
    color: white;
    box-shadow: 0 14px 28px rgba(96,165,250,.22);
}

    .cc-btn--primary:hover {
        filter: brightness(1.05);
    }

.cc-btn--ghost {
    background: rgba(255,255,255,.03);
    color: #d7e4fb;
}

    .cc-btn--ghost:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

.cc-btn--sm {
    min-height: 40px;
    padding: 0 .9rem;
    font-size: .9rem;
}

.cc-pill--active,
.cc-pill--promote,
.cc-pill--completed {
    background: rgba(52,211,153,.14);
    color: #d1fae5;
    border-color: rgba(52,211,153,.25);
}

.cc-pill--scheduled,
.cc-pill--running {
    background: rgba(96,165,250,.14);
    color: #dbeafe;
    border-color: rgba(96,165,250,.25);
}

.cc-pill--paused,
.cc-pill--review {
    background: rgba(251,191,36,.14);
    color: #fef3c7;
    border-color: rgba(251,191,36,.25);
}

.cc-pill--failed,
.cc-pill--reject,
.cc-pill--stopped {
    background: rgba(251,113,133,.14);
    color: #ffe4e6;
    border-color: rgba(251,113,133,.25);
}

.cc-pill--draft,
.cc-pill--neutral {
    background: rgba(148,163,184,.14);
    color: #e2e8f0;
    border-color: rgba(148,163,184,.25);
}

@media (max-width: 1600px) {
    .cc-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cc-run-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1400px) {
    .campaign-center-hero,
    .cc-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .cc-spotlight-grid,
    .cc-signal-grid,
    .cc-campaign-row__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-campaign-row,
    .cc-run-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cc-kpi-grid,
    .cc-spotlight-grid,
    .cc-signal-grid,
    .cc-campaign-row__grid,
    .cc-run-grid {
        grid-template-columns: 1fr;
    }

    .campaign-center-shell {
        padding: 1rem;
    }
}
