.chapterUnlockDrawerFigma {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.39);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chapterUnlockDrawerFigma.is-open {
    opacity: 1;
}

.chapterUnlockDrawerFigma .chapterUnlockSheetFigma {
    transform: translate3d(0, 100%, 0);
    transition: transform 0.3s ease;
}

.chapterUnlockDrawerFigma.is-open .chapterUnlockSheetFigma {
    transform: translate3d(0, 0, 0);
}

.chapterUnlockSheetFigma {
    position: relative;
    width: 100%;
    max-width: 23.4375rem;
    height: min(50.75rem, 90vh);
    margin: auto auto 0;
    background: #ffffff;
    border-radius: 1.25rem 1.25rem 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chapterUnlockSheetHeaderFigma {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    padding: 1.0625rem 3rem 0.875rem;
    background: #ffffff;
}

.chapterUnlockCloseFigma {
    position: absolute;
    top: 0.9375rem;
    right: 1rem;
    width: 1.375rem;
    height: 1.375rem;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: #d4d7dd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.chapterUnlockHeaderFigma {
    text-align: center;
}

.chapterUnlockHeaderFigma h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: #4a4a4a;
}

.chapterUnlockSheetBodyFigma {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0 0.5rem;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}

.chapterUnlockSheetFooterFigma {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
    padding: 0.75rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    background: #ffffff;
}

.chapterUnlockAccountFigma {
    margin: 0.25rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.chapterUnlockAccountInfoFigma {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.0625rem;
    color: #9ca3af;
}

.chapterUnlockDotFigma {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #2bd4a0;
    flex: 0 0 0.375rem;
}

.chapterUnlockBalanceFigma {
    flex: 0 0 auto;
    min-height: 1.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.4375rem;
    border: 0.0625rem solid #f9ecd8;
    border-radius: 999rem;
    background: #fffaf1;
    color: #9a6a34;
    cursor: pointer;
}

.chapterUnlockBalanceFigma span,
.chapterUnlockBalanceFigma strong,
.chapterUnlockBalanceFigma em {
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1rem;
}

.chapterUnlockBalanceFigma strong {
    color: #1a1a1a;
    font-weight: 400;
}

.chapterUnlockBalanceFigma em {
    min-width: 2.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999rem;
    background: #fff1dd;
    color: #f08a24;
    line-height: 1.25rem;
    text-align: center;
}

.chapterUnlockCoinBadgeFigma {
    width: 0.8125rem;
    height: 0.8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chapterUnlockSectionHeaderFigma {
    margin: 0.75rem 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chapterUnlockSectionHeaderFigma strong,
.chapterUnlockPayTitleFigma {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #1f1f1f;
}

.chapterUnlockSectionHeaderFigma span {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #747474;
}

.chapterUnlockOptionListFigma {
    margin: 0.8125rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chapterUnlockOptionFigma,
.chapterUnlockPayItemFigma,
.chapterUnlockVipPlanFigma {
    width: 100%;
    border: 0.0625rem solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

.chapterUnlockOptionFigma {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 0 0.9375rem;
    border-radius: 0.75rem;
    text-align: left;
}

.chapterUnlockOptionFigma.is-active,
.chapterUnlockPayItemFigma.is-active {
    border-color: #f3a447;
}

.chapterUnlockRadioFigma,
.chapterUnlockPayRadioFigma,
.chapterUnlockVipPlanRadioFigma {
    width: 1.125rem;
    height: 1.125rem;
    border: 0.125rem solid #d6dbe4;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    background: #ffffff;
    flex: 0 0 1.125rem;
}

.chapterUnlockOptionFigma.is-active .chapterUnlockRadioFigma,
.chapterUnlockPayItemFigma.is-active .chapterUnlockPayRadioFigma,
.chapterUnlockVipPlanFigma.is-active .chapterUnlockVipPlanRadioFigma {
    border-color: #e88931;
}

.chapterUnlockOptionFigma.is-active .chapterUnlockRadioFigma::after,
.chapterUnlockPayItemFigma.is-active .chapterUnlockPayRadioFigma::after,
.chapterUnlockVipPlanFigma.is-active .chapterUnlockVipPlanRadioFigma::after {
    content: "";
    position: absolute;
    inset: 0.1875rem;
    border-radius: 50%;
    background: #e88931;
}

.chapterUnlockOptionBodyFigma {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.chapterUnlockOptionBodyFigma strong {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #343434;
}

.chapterUnlockOptionBodyFigma small {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #9a7038;
}

.chapterUnlockOptionFigma:not(.is-active) .chapterUnlockOptionBodyFigma small {
    color: #9b9b9b;
}

.chapterUnlockPriceFigma {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #e88931;
}

.chapterUnlockPriceCoinFigma strong,
.chapterUnlockPriceCashFigma strong {
    font-size: 1.375rem;
    line-height: 1.8125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.chapterUnlockPriceCoinFigma small,
.chapterUnlockPriceCashFigma small {
    font-size: 0.75rem;
    line-height: 1rem;
}

.chapterUnlockTagFigma {
    position: absolute;
    top: -0.0625rem;
    right: -0.0625rem;
    height: 1.1875rem;
    padding: 0 0.4375rem;
    border-radius: 0 0.75rem 0 0.75rem;
    background: #e98d2c;
    font-size: 0.625rem;
    line-height: 1.1875rem;
    color: #ffffff;
}

.chapterUnlockAutoBuyFigma {
    margin: 0.6875rem 1rem 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    color: #949494;
    cursor: pointer;
}

.chapterUnlockAutoCheckboxFigma {
    width: 0.8125rem;
    height: 0.8125rem;
    border-radius: 0.125rem;
    border: 0.0625rem solid #d7dbe2;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.chapterUnlockAutoBuyFigma.is-active .chapterUnlockAutoCheckboxFigma {
    background: #e88931;
    border-color: #e88931;
    color: #ffffff;
}

.chapterUnlockAutoBuyFigma span:last-child {
    font-size: 0.75rem;
    line-height: 1rem;
}

.chapterUnlockVipTitleFigma {
    margin: 1rem 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.8125rem;
}

.chapterUnlockVipTitleFigma span {
    flex: 1;
    height: 0.0625rem;
    background: #ececec;
}

.chapterUnlockVipTitleFigma strong {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    color: #b2b7c3;
}

.chapterUnlockVipCardFigma {
    position: relative;
    margin: 0.6875rem 1rem 0;
    padding: 0.9375rem 1rem 1rem;
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at right top, rgba(88, 101, 135, 0.22) 0, rgba(88, 101, 135, 0.22) 2.7rem, transparent 2.75rem),
        linear-gradient(135deg, #1e2435 0%, #252d40 44%, #1f2434 100%);
    overflow: hidden;
}

.chapterUnlockVipCardFigma::after {
    content: "";
    position: absolute;
    top: -1rem;
    right: 2.2rem;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    transform: rotate(24deg);
}

.chapterUnlockVipIntroFigma {
    position: relative;
    z-index: 1;
    color: #f5d8a3;
}

.chapterUnlockVipHeadlineFigma {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chapterUnlockVipHeadlineFigma strong {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.chapterUnlockVipCrownFigma {
    width: 1.0625rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chapterUnlockVipCrownFigma img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.chapterUnlockVipIntroFigma p {
    margin: 0.375rem 0 0;
    font-size: 0.6875rem;
    line-height: 0.875rem;
    color: #9da4b2;
}

.chapterUnlockVipPlansFigma {
    position: relative;
    z-index: 1;
    margin-top: 0.9375rem;
    display: flex;
    gap: 0.625rem;
}

.chapterUnlockVipPlanFigma {
    position: relative;
    flex: 1;
    min-height: 4.9375rem;
    padding: 0.75rem 1rem 0.6875rem;
    border-radius: 0.5rem;
    border-color: transparent;
    background: #31384b;
    text-align: left;
}

.chapterUnlockVipPlanFigma.is-active {
    border-color: #e88931;
}

.chapterUnlockVipPlanNameFigma {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #969ca7;
}

.chapterUnlockVipPlanPriceFigma {
    display: inline-flex;
    align-items: flex-end;
    margin-top: 0.625rem;
    color: #ffffff;
}

.chapterUnlockVipPlanPriceFigma small {
    font-size: 0.8125rem;
    line-height: 1.0625rem;
    color: #858c99;
}

.chapterUnlockVipPlanPriceFigma strong {
    font-size: 1.375rem;
    line-height: 1.8125rem;
    font-weight: 400;
}

.chapterUnlockVipPlanRadioFigma {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
}

.chapterUnlockVipPlanBadgeFigma {
    position: absolute;
    top: -0.0625rem;
    right: -0.0625rem;
    min-width: 2rem;
    height: 1.1875rem;
    padding: 0 0.375rem;
    border-radius: 0 0.625rem 0 0.625rem;
    background: linear-gradient(90deg, #ff5e57 0%, #ff3a30 100%);
    font-size: 0.625rem;
    line-height: 1.1875rem;
    color: #ffffff;
    text-align: center;
}

.chapterUnlockPayTitleFigma {
    margin: 0.75rem 1rem 0;
}

.chapterUnlockPayListFigma {
    margin: 0.625rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.chapterUnlockPayItemFigma {
    min-height: 3rem;
    padding: 0 0.875rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chapterUnlockPayLogoFigma {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chapterUnlockPayLogoCardFigma {
    width: 1.875rem;
    height: 1rem;
}

.chapterUnlockPayLogoPaypalFigma {
    width: 1.25rem;
    height: 1.5rem;
}

.chapterUnlockPayLabelFigma {
    font-size: 0.875rem;
    line-height: 1.1875rem;
    color: #343434;
}

.chapterUnlockServiceFigma {
    margin-top: 0.6875rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #a6a6a6;
}

.chapterUnlockServiceFigma a {
    margin-left: 0.25rem;
    color: #6d8ff5;
    text-decoration: none;
}

.chapterUnlockSubmitFigma {
    width: 100%;
    height: 3rem;
    border: 0;
    border-radius: 999rem;
    background: #ee8e2a;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.3125rem;
    font-weight: 400;
    cursor: pointer;
}

.chapterUnlockSubmitFigma.is-danger {
    background: linear-gradient(90deg, #ff5248 0%, #eb2424 100%);
    box-shadow:
        0 -0.0625rem 0.375rem rgba(255, 126, 104, 0.14),
        0 0.375rem 0.875rem rgba(233, 72, 52, 0.18),
        0 0.0625rem 0.1875rem rgba(71, 37, 29, 0.06);
}

@media (min-width: 750px) {
    .chapterUnlockDrawerFigma {
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(16, 14, 12, 0.56);
        backdrop-filter: blur(6px);
    }

    .chapterUnlockDrawerFigma .chapterUnlockSheetFigma {
        transform: translate3d(0, 12px, 0) scale(0.97);
    }

    .chapterUnlockDrawerFigma.is-open .chapterUnlockSheetFigma {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .chapterUnlockSheetFigma {
        width: 496px;
        max-width: calc(100vw - 48px);
        height: auto;
        max-height: min(720px, calc(100vh - 48px));
        margin: 0 auto;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(35, 24, 8, 0.16);
    }

    .chapterUnlockSheetHeaderFigma {
        padding: 16px 52px 12px;
    }

    .chapterUnlockCloseFigma {
        top: 16px;
        right: 16px;
        width: 28px;
        height: 28px;
    }

    .chapterUnlockCloseFigma svg {
        width: 13px;
        height: 13px;
    }

    .chapterUnlockHeaderFigma h3 {
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        color: #252525;
    }

    .chapterUnlockSheetBodyFigma {
        padding: 0 0 4px;
    }

    .chapterUnlockSheetFooterFigma {
        padding: 10px 12px 12px;
    }

    .chapterUnlockAccountFigma,
    .chapterUnlockSectionHeaderFigma,
    .chapterUnlockOptionListFigma,
    .chapterUnlockAutoBuyFigma,
    .chapterUnlockVipTitleFigma,
    .chapterUnlockVipCardFigma,
    .chapterUnlockPayTitleFigma,
    .chapterUnlockPayListFigma {
        margin-left: 16px;
        margin-right: 16px;
    }

    .chapterUnlockServiceFigma {
        padding: 0 16px;
        margin-top: 12px;
    }

    .chapterUnlockAccountFigma {
        margin-top: 4px;
        gap: 14px;
    }

    .chapterUnlockAccountInfoFigma {
        font-size: 13px;
        line-height: 18px;
        gap: 8px;
    }

    .chapterUnlockDotFigma {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    .chapterUnlockBalanceFigma {
        min-height: 32px;
        padding: 5px 8px;
        gap: 5px;
        border-width: 1px;
    }

    .chapterUnlockBalanceFigma span,
    .chapterUnlockBalanceFigma strong,
    .chapterUnlockBalanceFigma em {
        font-size: 12px;
        line-height: 17px;
    }

    .chapterUnlockBalanceFigma em {
        min-width: 36px;
        height: 20px;
        line-height: 20px;
    }

    .chapterUnlockCoinBadgeFigma,
    .chapterUnlockCoinBadgeFigma svg {
        width: 14px;
        height: 14px;
    }

    .chapterUnlockSectionHeaderFigma {
        margin-top: 8px;
        gap: 8px;
    }

    .chapterUnlockSectionHeaderFigma strong,
    .chapterUnlockPayTitleFigma {
        font-size: 16px;
        line-height: 24px;
    }

    .chapterUnlockSectionHeaderFigma span {
        font-size: 12px;
        line-height: 17px;
    }

    .chapterUnlockOptionListFigma {
        margin-top: 8px;
        gap: 8px;
    }

    .chapterUnlockOptionFigma {
        min-height: 78px;
        padding: 0 12px;
        gap: 10px;
        border-width: 1px;
        border-radius: 12px;
    }

    .chapterUnlockRadioFigma,
    .chapterUnlockPayRadioFigma,
    .chapterUnlockVipPlanRadioFigma {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        border-width: 2px;
    }

    .chapterUnlockOptionFigma.is-active .chapterUnlockRadioFigma::after,
    .chapterUnlockPayItemFigma.is-active .chapterUnlockPayRadioFigma::after,
    .chapterUnlockVipPlanFigma.is-active .chapterUnlockVipPlanRadioFigma::after {
        inset: 2px;
    }

    .chapterUnlockOptionBodyFigma {
        gap: 3px;
    }

    .chapterUnlockOptionBodyFigma strong {
        font-size: 16px;
        line-height: 23px;
    }

    .chapterUnlockOptionBodyFigma small {
        font-size: 12px;
        line-height: 17px;
    }

    .chapterUnlockPriceCoinFigma strong,
    .chapterUnlockPriceCashFigma strong {
        font-size: 24px;
        line-height: 28px;
    }

    .chapterUnlockPriceCoinFigma small,
    .chapterUnlockPriceCashFigma small {
        font-size: 12px;
        line-height: 17px;
    }

    .chapterUnlockTagFigma {
        top: -1px;
        right: -1px;
        height: 20px;
        padding: 0 8px;
        border-radius: 0 12px 0 12px;
        font-size: 11px;
        line-height: 20px;
    }

    .chapterUnlockAutoBuyFigma {
        margin-top: 10px;
        gap: 8px;
        font-size: 13px;
        line-height: 18px;
    }

    .chapterUnlockAutoCheckboxFigma {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .chapterUnlockAutoCheckboxFigma svg {
        width: 11px;
        height: 11px;
    }

    .chapterUnlockVipTitleFigma {
        margin-top: 14px;
        gap: 10px;
    }

    .chapterUnlockVipTitleFigma strong {
        font-size: 15px;
        line-height: 22px;
    }

    .chapterUnlockVipCardFigma {
        margin-top: 8px;
        padding: 12px 12px 10px;
        border-radius: 12px;
    }

    .chapterUnlockVipHeadlineFigma {
        gap: 8px;
    }

    .chapterUnlockVipHeadlineFigma strong {
        font-size: 15px;
        line-height: 22px;
    }

    .chapterUnlockVipCrownFigma img {
        width: 18px;
        height: 16px;
    }

    .chapterUnlockVipIntroFigma p {
        margin-top: 5px;
        font-size: 12px;
        line-height: 16px;
    }

    .chapterUnlockVipPlansFigma {
        margin-top: 10px;
        gap: 8px;
    }

    .chapterUnlockVipPlanFigma {
        min-height: 82px;
        padding: 11px 12px 9px;
        border-radius: 11px;
    }

    .chapterUnlockVipPlanNameFigma {
        font-size: 15px;
        line-height: 20px;
    }

    .chapterUnlockVipPlanPriceFigma {
        margin-top: 10px;
        gap: 3px;
    }

    .chapterUnlockVipPlanPriceFigma small {
        font-size: 13px;
        line-height: 18px;
    }

    .chapterUnlockVipPlanPriceFigma strong {
        font-size: 27px;
        line-height: 30px;
    }

    .chapterUnlockVipPlanBadgeFigma {
        min-width: 36px;
        padding: 0 7px;
        border-radius: 0 11px 0 11px;
        font-size: 11px;
        line-height: 20px;
    }

    .chapterUnlockPayTitleFigma {
        margin-top: 12px;
    }

    .chapterUnlockPayListFigma {
        margin-top: 8px;
        gap: 8px;
    }

    .chapterUnlockPayItemFigma {
        min-height: 50px;
        padding: 0 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .chapterUnlockPayLogoCardFigma {
        width: 30px;
        height: 16px;
    }

    .chapterUnlockPayLogoPaypalFigma {
        width: 20px;
        height: 24px;
    }

    .chapterUnlockPayLabelFigma {
        font-size: 15px;
        line-height: 20px;
    }

    .chapterUnlockServiceFigma {
        font-size: 12px;
        line-height: 17px;
    }

    .chapterUnlockSubmitFigma {
        height: 48px;
        border-radius: 14px;
        font-size: 16px;
        line-height: 20px;
        box-shadow: 0 10px 20px rgba(242, 138, 36, 0.12);
    }
}