.backup-site-notice {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(10, 7, 9, .8);
    backdrop-filter: blur(8px);
    overscroll-behavior: contain;
}

.backup-site-notice__card {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 32px 28px 20px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 28px;
    background: radial-gradient(ellipse at top, rgba(255, 94, 135, .09), transparent 65%), #211d1f;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
    text-align: center;
    font-family: inherit;
    color: #fff;
}

.backup-site-notice__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border: 1px solid rgba(255, 94, 135, .2);
    border-radius: 20px;
    background: rgba(255, 94, 135, .12);
    color: #ff6e96;
}

.backup-site-notice__icon svg { width: 30px; height: 30px; }
.backup-site-notice svg, .backup-site-notice svg path { fill: none; }
.backup-site-notice__eyebrow { display: block; margin-bottom: 10px; color: #ff91af; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.backup-site-notice h2 { margin: 0 0 14px; outline: none; font-size: 25px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.backup-site-notice p { margin: 0 0 26px; color: #c9c1c5; font-size: 15px; line-height: 1.65; }

.backup-site-notice__link,
.backup-site-notice__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border: 0;
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
}

.backup-site-notice__link { background: #ff5288; color: #fff; text-decoration: none; }
.backup-site-notice__link:hover { background: #f63e77; color: #fff; }
.backup-site-notice__link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.backup-site-notice__continue { margin-top: 6px; background: transparent; color: #c9c1c5; }
.backup-site-notice__continue:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.backup-site-notice__continue:disabled { opacity: .55; cursor: wait; }
.backup-site-notice a:focus-visible, .backup-site-notice button:focus-visible { outline: 2px solid #ff91af; outline-offset: 3px; }
.backup-site-footer-link { display: inline-block; margin: 8px 0; }
#incognitoPopup .custom-popup-card { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
#incognitoNoticeText:focus { outline: none; }

body.light .backup-site-notice__card, body.system-light .backup-site-notice__card { background: radial-gradient(ellipse at top, rgba(255, 94, 135, .06), transparent 65%), #fff; border-color: rgba(0, 0, 0, .06); color: #241d21; }
body.light .backup-site-notice p, body.system-light .backup-site-notice p { color: #655d62; }
body.light .backup-site-notice__eyebrow, body.system-light .backup-site-notice__eyebrow { color: #c12e60; }
body.light .backup-site-notice__continue, body.system-light .backup-site-notice__continue { color: #655d62; }
body.light .backup-site-notice__continue:hover, body.system-light .backup-site-notice__continue:hover { background: rgba(0, 0, 0, .04); color: #241d21; }

@media (max-width: 360px) {
    .backup-site-notice__card { padding: 26px 20px 16px; border-radius: 24px; }
    .backup-site-notice h2 { font-size: 23px; }
}