.pwa-sync-modal { position: fixed; inset: 0; z-index: 1000003; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(5,5,13,.82); backdrop-filter: blur(12px); box-sizing: border-box; }
.pwa-sync-modal[hidden] { display: none !important; }
.pwa-sync-card { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 36px); overflow: auto; box-sizing: border-box; padding: 42px 32px 28px; border: 1px solid rgba(255,205,48,.25); border-radius: 22px; background: #191927; box-shadow: 0 28px 80px rgba(0,0,0,.55); text-align: center; }
.pwa-sync-card h2 { margin: 0 0 20px; color: #fff; font: 900 24px/1.25 'Montserrat', sans-serif; letter-spacing: -.4px; text-wrap: balance; }
.pwa-sync-card h2:focus { outline: none; }
.pwa-sync-icon { width: 44px; height: 44px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,205,48,.1); color: #ffcd30; font-size: 24px; }
.pwa-sync-copy { display: grid; gap: 20px; }
.pwa-sync-copy p { margin: 0; color: #b6b6c5; font: 500 13px/1.65 'Montserrat', sans-serif; text-wrap: pretty; }
.pwa-sync-modal:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.pwa-sync-actions { display: grid; gap: 5px; margin: 24px auto 12px; max-width: 330px; }
.pwa-sync-card button { font-family: 'Montserrat', sans-serif; cursor: pointer; }
.pwa-sync-primary { min-height: 46px; padding: 12px 16px; border: none; border-radius: 14px; background: #ffcd30; color: #121221; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.pwa-sync-primary:hover { background: #ffda5c; }
.pwa-sync-later { min-height: 44px; padding: 10px 16px; border: none; background: transparent; color: #b6b6c5; font-size: 12px; font-weight: 600; }
.pwa-sync-later:hover { color: #fff; }
.pwa-sync-close { position: absolute; top: 7px; right: 7px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #a6a6b8; font-size: 25px; font-weight: 400; }
.pwa-sync-card button:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.pwa-sync-card button:disabled { opacity: .6; cursor: wait; }
.pwa-sync-privacy { display: inline-block; max-width: 100%; color: #ffcd30; font: 600 12px/1.5 'Montserrat', sans-serif; text-decoration: underline; text-underline-offset: 2px; }
.pwa-sync-auth { margin: 24px 0 18px; }
.pwa-sync-auth .cloud-sync-auth { text-align: left; }
.pwa-sync-auth .cloud-sync-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pwa-sync-auth .cloud-sync-provider { min-width: 0; min-height: 46px; }
.pwa-sync-auth .cloud-sync-email { flex-direction: column; }
.pwa-sync-auth .cloud-sync-email input { min-width: 0; font-size: 16px; }
.pwa-sync-error { margin: 12px 0; color: #fca5a5; font: 500 13px/1.5 'Montserrat', sans-serif; }
.pwa-sync-toast[data-kind="error"] { color: #fca5a5; }
.pwa-sync-toast { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1000004; max-width: calc(100% - 40px); box-sizing: border-box; padding: 14px 22px; border: 1px solid rgba(255,205,48,.3); border-radius: 14px; background: #191927; color: #ffcd30; box-shadow: 0 10px 30px rgba(0,0,0,.35); font: 700 13px/1.5 'Montserrat', sans-serif; text-align: center; }
@media (max-width: 520px) { .pwa-sync-card { padding: 40px 22px 24px; border-radius: 20px; } .pwa-sync-card h2 { font-size: 21px; } }
@media (max-width: 360px) { .pwa-sync-card { padding-inline: 18px; } .pwa-sync-card h2 { font-size: 19px; } .pwa-sync-copy p { font-size: 12px; } }