/* ── Shared CSS for compress-to-50kb / compress-to-100kb tools ── */
:root {
    --primary-color: #031D36;
    --accent-color:  #0A49A6;
}

.ct-target-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10,73,166,.1);
    color: var(--accent-color);
    border: 1px solid rgba(10,73,166,.2);
    border-radius: 30px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.ct-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}

.ct-stat {
    flex: 1;
    min-width: 90px;
    background: var(--secondary-color, #F8F8F8);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    border: 1px solid rgba(3,29,54,.08);
}

.ct-stat-val {
    font-size: 19px;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
}

.ct-stat-label {
    font-size: 11px;
    color: #6b7a8d;
    margin-top: 3px;
}

.ct-savings-badge {
    display: inline-block;
    background: rgba(74,222,128,.15);
    color: #166534;
    border: 1px solid rgba(74,222,128,.3);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 14px;
    font-weight: 700;
}

.ct-progress-wrap {
    margin: 12px 0;
    background: rgba(3,29,54,.08);
    border-radius: 30px;
    height: 8px;
    overflow: hidden;
}

.ct-progress-bar {
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--accent-color), #4ade80);
    transition: width .4s ease;
    width: 0%;
}

.ct-result-block {
    display: none;
    margin-top: 18px;
    padding: 18px 20px;
    background: rgba(74,222,128,.06);
    border: 1px solid rgba(74,222,128,.22);
    border-radius: 14px;
}

.ct-result-block.show { display: block; }

.ct-warning-block {
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.3);
}

.ct-warning-block .ct-savings-badge {
    background: rgba(251,191,36,.15);
    color: #92400e;
    border-color: rgba(251,191,36,.35);
}