.analytics-actions {
    margin: 15px 0 26px;
}


.analytics-project {
    padding: 20px;

    margin-bottom: 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(202,168,93,.045),
            transparent
        ),
        var(--surface);

    cursor: pointer;
}


.analytics-project:hover {
    border-color:
        rgba(220,184,100,.30);
}


.analytics-project-top {
    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.analytics-project-name {
    font-size: 16px;

    font-weight: 620;
}


.analytics-project-info {
    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}


.analytics-stats {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    margin-top: 16px;
}


.analytics-stat {
    padding: 11px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);
}


.analytics-stat-value {
    font-size: 14px;

    font-weight: 620;
}


.analytics-stat-label {
    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


/* =====================================
   SIGNALS
===================================== */

.signal-card {
    margin-bottom: 9px;

    padding: 15px;

    border-radius: 15px;

    border:
        1px solid
        rgba(255,255,255,.05);

    background:
        rgba(255,255,255,.022);
}


.signal-title {
    font-size: 12px;

    font-weight: 620;
}


.signal-text {
    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.5;
}


.signal-card.positive {
    border-color:
        rgba(88,217,154,.20);
}


.signal-card.negative {
    border-color:
        rgba(233,120,120,.20);
}


.signal-card.warning {
    border-color:
        rgba(202,168,93,.28);
}


/* =====================================
   COMPETITORS
===================================== */

.competitor-card {
    padding: 18px;

    margin-bottom: 10px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background:
        var(--surface);

    cursor: pointer;
}


.competitor-name {
    color: var(--gold-light);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.competitor-title {
    margin-top: 7px;

    font-size: 15px;

    font-weight: 620;
}


.competitor-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 14px;
}


.competitor-value {
    padding: 10px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.022);
}


.competitor-value strong {
    display: block;

    font-size: 14px;
}


.competitor-value span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}


/* =====================================
   DELTAS
===================================== */

.delta-board {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 9px;

    margin-bottom: 10px;
}


.delta-card {
    padding: 16px;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            transparent
        ),
        var(--surface);
}


.delta-label {
    color: var(--muted);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.delta-values {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 10px;

    font-size: 14px;

    font-weight: 620;
}


.delta-arrow {
    color: var(--muted);
}


.delta-change {
    margin-top: 7px;

    font-size: 10px;

    font-weight: 600;
}


.delta-change.good {
    color: var(--green);
}


.delta-change.bad {
    color: var(--red);
}


.delta-change.warning {
    color: var(--gold-light);
}


.delta-change.flat {
    color: var(--muted);
}


/* =====================================
   INSIGHT
===================================== */

.insight-card {
    position: relative;

    overflow: hidden;

    padding: 21px;

    margin-top: 12px;

    border-radius: 20px;

    border:
        1px solid
        rgba(220,184,100,.22);

    background:
        linear-gradient(
            145deg,
            rgba(202,168,93,.09),
            rgba(10,10,10,.96) 48%
        );
}


.insight-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    top: -120px;

    border-radius: 50%;

    border:
        1px solid
        rgba(234,211,155,.08);
}


.insight-label {
    color: var(--gold);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .22em;

    margin-bottom: 10px;
}


.insight-title {
    max-width: 520px;

    font-size: 18px;

    font-weight: 620;

    line-height: 1.3;
}


.insight-summary {
    margin-top: 10px;

    max-width: 620px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.7;
}


.insight-points {
    margin-top: 16px;

    display: grid;

    gap: 7px;
}


.insight-point {
    padding: 10px 12px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);

    color: #c9c5bc;

    font-size: 10px;

    line-height: 1.5;
}


.insight-warning {
    margin-top: 13px;

    color: #756f65;

    font-size: 8px;

    line-height: 1.5;
}


.insight-card.positive {
    border-color:
        rgba(88,217,154,.17);
}


.insight-card.warning {
    border-color:
        rgba(202,168,93,.30);
}


.insight-card.negative {
    border-color:
        rgba(233,120,120,.20);
}


.insight-action {
    width: 100%;

    margin-top: 17px;

    padding: 13px;

    border-radius: 12px;

    border:
        1px solid
        rgba(220,184,100,.28);

    background:
        linear-gradient(
            135deg,
            rgba(202,168,93,.18),
            rgba(202,168,93,.055)
        );

    color: var(--gold-light);

    font-size: 10px;

    font-weight: 650;

    cursor: pointer;
}


/* =====================================
   HYPOTHESIS
===================================== */

.hypothesis-preview {
    margin-top: 12px;

    padding: 13px;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        rgba(202,168,93,.045);

    color: #cbc5b8;

    font-size: 10px;

    line-height: 1.6;
}


select.preflight-select {
    width: 100%;

    padding: 13px 14px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,.07);

    outline: none;

    background:
        #151515;

    color: var(--text);

    font-size: 13px;
}


select.preflight-select:focus {
    border-color:
        rgba(220,184,100,.35);
}


/* =====================================
   MODALS
===================================== */

.analytics-modal {
    z-index: 1300;
}


.toggle-field {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 7px;
}


.toggle-field input {
    width: 18px;
    height: 18px;
}


/* =====================================
   MOBILE
===================================== */

@media (
    max-width: 640px
) {

    .analytics-stats {
        grid-template-columns:
            1fr 1fr;
    }


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


    .delta-board {
        grid-template-columns:
            1fr;
    }
}