.mcu-payment-shell,
.mcu-receipt {
    color: #172033;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(22, 34, 51, 0.08);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 24px auto;
    max-width: 980px;
    padding: 24px;
}

.mcu-payment-header {
    border-bottom: 1px solid #e6edf3;
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.mcu-payment-header p,
.mcu-receipt-head p {
    color: #607089;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.mcu-payment-header h2,
.mcu-receipt h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
}

.mcu-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mcu-payment-form label,
.mcu-settings label,
.mcu-panel label {
    display: grid;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
}

.mcu-payment-form input,
.mcu-payment-form select,
.mcu-payment-form textarea {
    background: #fbfdff;
    border: 1px solid #cbd8e4;
    border-radius: 6px;
    color: #172033;
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.mcu-payment-form input:focus,
.mcu-payment-form select:focus,
.mcu-payment-form textarea:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
    outline: 0;
}

.mcu-full {
    margin-top: 16px;
}

.mcu-hp {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.mcu-form-footer {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 20px;
}

.mcu-form-footer button,
.mcu-receipt button {
    background: #0f766e;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    min-height: 44px;
    padding: 10px 18px;
}

.mcu-form-message {
    color: #38516b;
    margin: 0;
}

.mcu-form-message.is-error {
    color: #b42318;
}

.mcu-receipt-head {
    align-items: flex-start;
    border-bottom: 1px solid #e6edf3;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.mcu-receipt dl {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.mcu-receipt dl div {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
}

.mcu-receipt dt {
    color: #607089;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.mcu-receipt dd {
    font-weight: 700;
    margin: 0;
}

.mcu-receipt-verify {
    border-top: 1px solid #e6edf3;
    margin-top: 18px;
    padding-top: 16px;
}

.mcu-qr {
    background: repeating-linear-gradient(45deg, #172033 0 4px, #fff 4px 8px);
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px #d9e2ec;
    color: transparent;
    height: 112px;
    width: 112px;
}

@media (prefers-color-scheme: dark) {
    .mcu-payment-shell,
    .mcu-receipt {
        background: #111827;
        border-color: #314158;
        color: #f8fafc;
    }

    .mcu-payment-form input,
    .mcu-payment-form select,
    .mcu-payment-form textarea,
    .mcu-receipt dl div {
        background: #172033;
        border-color: #40516b;
        color: #f8fafc;
    }
}

@media (max-width: 720px) {
    .mcu-grid,
    .mcu-receipt dl {
        grid-template-columns: 1fr;
    }

    .mcu-form-footer,
    .mcu-receipt-head {
        align-items: stretch;
        flex-direction: column;
    }
}

@media print {
    .mcu-receipt button {
        display: none;
    }
}