.cxcp-public {
    border: 1px solid #dcdcde;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background: #fff;
}

.cxcp-public h2,
.cxcp-public h3 {
    margin-top: 0;
}

.cxcp-public .cxcp-grid-2,
.cxcp-public .cxcp-grid-3 {
    display: grid;
    gap: 12px;
}

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

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

.cxcp-public input,
.cxcp-public textarea,
.cxcp-public select,
.cxcp-public button {
    width: 100%;
    box-sizing: border-box;
}

.cxcp-public button {
    width: auto;
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid #1d2327;
    background: #1d2327;
    color: #fff;
    cursor: pointer;
}

.cxcp-alert {
    border-radius: 6px;
    padding: 12px;
    margin: 0 0 12px;
}

.cxcp-alert-error {
    background: #fce8e6;
    border: 1px solid #f5c2c0;
}

.cxcp-alert-success {
    background: #e6f6ea;
    border: 1px solid #b8e1c2;
}

.cxcp-status-card {
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 12px;
    margin: 12px 0;
    background: #f6f7f7;
}

.cxcp-timeline {
    margin-left: 18px;
}

.cxcp-timeline .cxcp-time {
    font-size: 12px;
    color: #646970;
    margin-bottom: 4px;
}

.cxcp-timeline .cxcp-note {
    color: #50575e;
    margin-top: 4px;
}

@media (max-width: 782px) {
    .cxcp-public .cxcp-grid-2,
    .cxcp-public .cxcp-grid-3 {
        grid-template-columns: 1fr;
    }
}