.bkbg-mtg-app {
    font-family: inherit;
}

.bkbg-mtg-card {
    max-width: 680px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
}

.bkbg-mtg-app h2.bkbg-mtg-title,
.bkbg-mtg-app .bkbg-mtg-title {
    font-family: var(--bkbg-mtg-tt-font-family, inherit);
    font-size: var(--bkbg-mtg-tt-font-size-d, 26px);
    font-weight: var(--bkbg-mtg-tt-font-weight, 800);
    font-style: var(--bkbg-mtg-tt-font-style, normal);
    line-height: var(--bkbg-mtg-tt-line-height-d, 1.2);
    letter-spacing: var(--bkbg-mtg-tt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-mtg-tt-word-spacing-d, normal);
    text-decoration: var(--bkbg-mtg-tt-text-decoration, none);
    text-transform: var(--bkbg-mtg-tt-text-transform, none);
    text-align: center;
    color: #1e1b4b;
    margin-top: 0;
    margin-bottom: 8px;
}

.bkbg-mtg-subtitle {
    font-family: var(--bkbg-mtg-st-font-family, inherit);
    font-size: var(--bkbg-mtg-st-font-size-d, 14px);
    font-weight: var(--bkbg-mtg-st-font-weight, normal);
    font-style: var(--bkbg-mtg-st-font-style, normal);
    line-height: var(--bkbg-mtg-st-line-height-d, 1.5);
    letter-spacing: var(--bkbg-mtg-st-letter-spacing-d, normal);
    word-spacing: var(--bkbg-mtg-st-word-spacing-d, normal);
    text-decoration: var(--bkbg-mtg-st-text-decoration, none);
    text-transform: var(--bkbg-mtg-st-text-transform, none);
    text-align: center;
    color: #6b7280;
    margin-top: 0;
    margin-bottom: 24px;
}

.bkbg-mtg-field {
    margin-bottom: 14px;
}

.bkbg-mtg-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.bkbg-mtg-input,
.bkbg-mtg-select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    color: #374151;
    transition: border-color 0.15s;
    appearance: auto;
}

.bkbg-mtg-input:focus,
.bkbg-mtg-select:focus {
    border-color: #6c3fb5;
}

.bkbg-mtg-result {
    background: #f5f3ff;
    border: 1.5px solid #ede9fe;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.bkbg-mtg-result-label {
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.bkbg-mtg-monthly {
    font-family: var(--bkbg-mtg-rs-font-family, inherit);
    font-size: var(--bkbg-mtg-rs-font-size-d, 52px);
    font-weight: var(--bkbg-mtg-rs-font-weight, 800);
    font-style: var(--bkbg-mtg-rs-font-style, normal);
    line-height: var(--bkbg-mtg-rs-line-height-d, 1);
    letter-spacing: var(--bkbg-mtg-rs-letter-spacing-d, normal);
    word-spacing: var(--bkbg-mtg-rs-word-spacing-d, normal);
    text-decoration: var(--bkbg-mtg-rs-text-decoration, none);
    text-transform: var(--bkbg-mtg-rs-text-transform, none);
    color: #6c3fb5;
    margin-bottom: 4px;
}

.bkbg-mtg-per-month {
    font-size: 13px;
    color: #9ca3af;
}

.bkbg-mtg-pmi-note {
    margin-top: 8px;
    font-size: 13px;
    color: #f59e0b;
}

.bkbg-mtg-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 500px) {
    .bkbg-mtg-breakdown {
        grid-template-columns: 1fr;
    }
}

.bkbg-mtg-stat {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 14px 12px;
    border: 1.5px solid #e5e7eb;
}

.bkbg-mtg-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 4px;
}

.bkbg-mtg-stat-val {
    font-size: 18px;
    font-weight: 800;
}

.bkbg-mtg-ltv {
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
    color: #374151;
}

.bkbg-mtg-table-wrap {
    overflow-x: auto;
}

.bkbg-mtg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bkbg-mtg-table th {
    padding: 10px 8px;
    font-weight: 700;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    text-align: right;
    background: #fafafa;
}

.bkbg-mtg-table th:first-child {
    text-align: left;
}

.bkbg-mtg-table td {
    padding: 9px 8px;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
}

.bkbg-mtg-table td:first-child {
    text-align: left;
    color: #374151;
}

.bkbg-mtg-table tr:last-child td {
    font-weight: 700;
}

@media (max-width: 1024px) {
    .bkbg-mtg-app h2.bkbg-mtg-title,
    .bkbg-mtg-app .bkbg-mtg-title {
        font-size: var(--bkbg-mtg-tt-font-size-t, var(--bkbg-mtg-tt-font-size-d, 26px));
        line-height: var(--bkbg-mtg-tt-line-height-t, var(--bkbg-mtg-tt-line-height-d, 1.2));
        letter-spacing: var(--bkbg-mtg-tt-letter-spacing-t, var(--bkbg-mtg-tt-letter-spacing-d, normal));
        word-spacing: var(--bkbg-mtg-tt-word-spacing-t, var(--bkbg-mtg-tt-word-spacing-d, normal));
    }
    .bkbg-mtg-subtitle {
        font-size: var(--bkbg-mtg-st-font-size-t, var(--bkbg-mtg-st-font-size-d, 14px));
        line-height: var(--bkbg-mtg-st-line-height-t, var(--bkbg-mtg-st-line-height-d, 1.5));
        letter-spacing: var(--bkbg-mtg-st-letter-spacing-t, var(--bkbg-mtg-st-letter-spacing-d, normal));
        word-spacing: var(--bkbg-mtg-st-word-spacing-t, var(--bkbg-mtg-st-word-spacing-d, normal));
    }
    .bkbg-mtg-monthly {
        font-size: var(--bkbg-mtg-rs-font-size-t, var(--bkbg-mtg-rs-font-size-d, 52px));
        line-height: var(--bkbg-mtg-rs-line-height-t, var(--bkbg-mtg-rs-line-height-d, 1));
        letter-spacing: var(--bkbg-mtg-rs-letter-spacing-t, var(--bkbg-mtg-rs-letter-spacing-d, normal));
        word-spacing: var(--bkbg-mtg-rs-word-spacing-t, var(--bkbg-mtg-rs-word-spacing-d, normal));
    }
}
@media (max-width: 767px) {
    .bkbg-mtg-app h2.bkbg-mtg-title,
    .bkbg-mtg-app .bkbg-mtg-title {
        font-size: var(--bkbg-mtg-tt-font-size-m, var(--bkbg-mtg-tt-font-size-t, var(--bkbg-mtg-tt-font-size-d, 22px)));
        line-height: var(--bkbg-mtg-tt-line-height-m, var(--bkbg-mtg-tt-line-height-t, var(--bkbg-mtg-tt-line-height-d, 1.2)));
        letter-spacing: var(--bkbg-mtg-tt-letter-spacing-m, var(--bkbg-mtg-tt-letter-spacing-t, var(--bkbg-mtg-tt-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-mtg-tt-word-spacing-m, var(--bkbg-mtg-tt-word-spacing-t, var(--bkbg-mtg-tt-word-spacing-d, normal)));
    }
    .bkbg-mtg-subtitle {
        font-size: var(--bkbg-mtg-st-font-size-m, var(--bkbg-mtg-st-font-size-t, var(--bkbg-mtg-st-font-size-d, 13px)));
        line-height: var(--bkbg-mtg-st-line-height-m, var(--bkbg-mtg-st-line-height-t, var(--bkbg-mtg-st-line-height-d, 1.5)));
        letter-spacing: var(--bkbg-mtg-st-letter-spacing-m, var(--bkbg-mtg-st-letter-spacing-t, var(--bkbg-mtg-st-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-mtg-st-word-spacing-m, var(--bkbg-mtg-st-word-spacing-t, var(--bkbg-mtg-st-word-spacing-d, normal)));
    }
    .bkbg-mtg-monthly {
        font-size: var(--bkbg-mtg-rs-font-size-m, var(--bkbg-mtg-rs-font-size-t, var(--bkbg-mtg-rs-font-size-d, 42px)));
        line-height: var(--bkbg-mtg-rs-line-height-m, var(--bkbg-mtg-rs-line-height-t, var(--bkbg-mtg-rs-line-height-d, 1)));
        letter-spacing: var(--bkbg-mtg-rs-letter-spacing-m, var(--bkbg-mtg-rs-letter-spacing-t, var(--bkbg-mtg-rs-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-mtg-rs-word-spacing-m, var(--bkbg-mtg-rs-word-spacing-t, var(--bkbg-mtg-rs-word-spacing-d, normal)));
    }
}