:root {
    --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cc-bg: #ffffff;
    --cc-text: #2f3a44;
    --cc-text-secondary: #6b7785;
    --cc-primary: #27c7c5;
    --cc-primary-hover: #20b2b0;
    --cc-border: #e7eef3;
    --cc-shadow: 0 18px 45px rgba(24, 43, 65, 0.15);
    --cc-radius: 18px;
}

.cm,
.pm {
    font-family: var(--cc-font-family);
}

.cm {
    max-width: 460px;
}

.cm__body,
.pm__body {
    background: var(--cc-bg);
    color: var(--cc-text);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}

.cm__title,
.pm__title {
    color: var(--cc-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
}

.cm__desc,
.pm__section-desc {
    color: var(--cc-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.cm__desc a,
.pm__section-desc a {
    color: var(--cc-primary);
    text-decoration: none;
    font-weight: 600;
}

.cm__desc a:hover,
.pm__section-desc a:hover {
    text-decoration: underline;
}

.cm__footer,
.pm__footer {
    border-top: 1px solid var(--cc-border);
    padding-top: 18px;
    margin-top: 20px;
}

.cm__btn,
.pm__btn {
    height: 46px;
    border-radius: 10px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color .25s ease,
        color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
}

.cm__btn:hover,
.pm__btn:hover {
    transform: translateY(-1px);
}

.cm__btn:active,
.pm__btn:active {
    transform: translateY(0);
}

.cm__btn--primary,
.pm__btn--primary {
    background: var(--cc-primary);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(39, 199, 197, .28);
}

.cm__btn--primary:hover,
.pm__btn--primary:hover {
    background: var(--cc-primary-hover);
}

.cm__btn--secondary,
.pm__btn--secondary {
    background: #f5f8fb;
    color: var(--cc-text);
    border: 1px solid var(--cc-border);
}

.cm__btn--secondary:hover,
.pm__btn--secondary:hover {
    background: #eef5f8;
}

.pm__close-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    transition: background .25s ease;
}

.pm__close-btn:hover {
    background: #f5f8fb;
}

.pm__section {
    padding: 18px 0;
    border-top: 1px solid var(--cc-border);
}

.pm__section:first-child {
    border-top: 0;
}

.pm__section-title {
    color: var(--cc-text);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.pm__toggle {
    background: #dfe8ee;
    border-radius: 999px;
    transition: background .25s ease;
}

.pm__toggle:checked,
.pm__toggle--enabled {
    background: var(--cc-primary);
}

.pm__toggle-knob {
    transition: transform .25s ease;
}

.pm__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edfdfc;
    color: var(--cc-primary);
    font-size: 12px;
    font-weight: 700;
}

.pm__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    overflow: hidden;
}

.pm__table th {
    background: #f7fbfc;
    color: var(--cc-text);
    text-align: left;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--cc-border);
}

.pm__table td {
    padding: 12px 14px;
    color: var(--cc-text-secondary);
    font-size: 14px;
    border-bottom: 1px solid var(--cc-border);
}

.pm__table tr:last-child td {
    border-bottom: 0;
}

.pm__overlay {
    backdrop-filter: blur(4px);
    background: rgba(24, 35, 47, .45);
}

@media (max-width: 768px) {

    .cm {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px;
    }

    .cm__body,
    .pm__body {
        border-radius: 16px;
    }

    .cm__title,
    .pm__title {
        font-size: 21px;
    }

    .cm__btn,
    .pm__btn {
        width: 100%;
    }

    .cm__footer,
    .pm__footer {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pm__table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    .cm {
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto;
    }

    .cm__body,
    .pm__body {
        padding: 18px;
    }

    .cm__title,
    .pm__title {
        font-size: 19px;
    }

    .cm__desc,
    .pm__section-desc {
        font-size: 14px;
    }
}