.notifal-onpage-preview-banner{position:fixed;bottom:0;left:0;right:0;z-index:999998;padding:0;background-color:var(--notifal-primary, #7e2bd2);color:#fff;font-size:.875rem;box-shadow:0 -4px 20px #0003}.notifal-onpage-preview-banner-inner{max-width:1200px;margin:0 auto;padding:12px 24px 14px}.notifal-onpage-preview-banner-row-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px}.notifal-onpage-preview-banner-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}.notifal-onpage-preview-banner-title{font-weight:600;font-size:.9375rem}.notifal-onpage-preview-banner-status{display:inline-flex;align-items:center;padding:3px 8px;border-radius:4px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.notifal-onpage-preview-banner-status--live{background-color:#ffffff47;color:#fff}.notifal-onpage-preview-banner-status--draft{background-color:#ffffff2e;color:#fffffff2}.notifal-onpage-preview-banner-divider{width:1px;height:14px;background-color:#fff6;flex-shrink:0}.notifal-onpage-preview-banner-text{flex:1;min-width:180px;opacity:.92;font-size:.8125rem;line-height:1.35}.notifal-onpage-preview-banner-link{color:#fff;text-decoration:none;font-weight:600;font-size:.8125rem;padding:6px 12px;border-radius:4px;background-color:#ffffff26;white-space:nowrap;flex-shrink:0}.notifal-onpage-preview-banner-link:hover{background-color:#ffffff40;color:#fff}.notifal-onpage-preview-banner-devices{display:flex;align-items:center;gap:2px;flex-shrink:0}.notifal-onpage-preview-banner-device{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:6px;background:transparent;color:#ffffffd9;cursor:pointer;transition:background-color .15s ease,color .15s ease}.notifal-onpage-preview-banner-device:hover{background-color:#ffffff26;color:#fff}.notifal-onpage-preview-banner-device--active{background-color:#ffffff38;color:#fff}.notifal-onpage-preview-banner-device-icon{display:inline-flex;align-items:center;justify-content:center}.notifal-onpage-preview-banner-device-icon svg{display:block;width:20px;height:20px}.notifal-onpage-preview-banner-row-bottom{padding-top:10px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:center}.notifal-onpage-preview-banner-custom-page{display:flex;flex-direction:column;gap:6px;max-width:520px}.notifal-onpage-preview-banner-label{font-size:.75rem;font-weight:600;opacity:.95;text-transform:uppercase;letter-spacing:.03em;color:#fff}.notifal-onpage-preview-banner-url-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}.notifal-onpage-preview-banner-input{flex:1!important;min-width:0!important;padding:8px 12px!important;font-size:.8125rem!important;border-radius:6px!important;border:1px solid rgba(255,255,255,.5)!important;background-color:#ffffff1f!important;color:#fff!important;transition:border-color .15s ease,box-shadow .15s ease!important}.notifal-onpage-preview-banner-input::placeholder{color:#ffffffb3}.notifal-onpage-preview-banner-input:focus{outline:none;border-color:#ffffffe6;box-shadow:0 0 0 2px #fff3}.notifal-onpage-preview-banner-btn{flex-shrink:0;padding:8px 14px;font-size:.8125rem;font-weight:600;border-radius:6px;border:1px solid rgba(255,255,255,.9);background-color:#fffffff2;color:var(--notifal-primary, #7e2bd2);cursor:pointer;transition:background-color .15s ease,transform .1s ease}.notifal-onpage-preview-banner-btn:hover{background-color:#fff}.notifal-onpage-preview-banner-btn:active{transform:scale(.98)}.notifal-onpage-preview-banner-error{margin:0;font-size:.75rem;color:#fecaca}@media(max-width:768px){.notifal-onpage-preview-banner-inner{padding:12px 16px 14px}.notifal-onpage-preview-banner-row-top{margin-bottom:10px}.notifal-onpage-preview-banner-divider{display:none}.notifal-onpage-preview-banner-text{min-width:100%;order:3}.notifal-onpage-preview-banner-url-row{flex-wrap:wrap}.notifal-onpage-preview-banner-btn{width:100%}}.notifal-onpage-preview-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,sans-serif;background-color:var(--notifal-bg-secondary, #f5f5f5);color:var(--notifal-text-dark, #1e1e1e)}.notifal-onpage-preview-wrapper{min-height:100vh;display:flex;flex-direction:column}.notifal-onpage-preview-header{flex-shrink:0;padding:16px 24px;background-color:var(--notifal-white, #fff);border-bottom:1px solid var(--notifal-border, #e0e0e0);box-shadow:0 1px 3px #0000000f}.notifal-onpage-preview-header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.notifal-onpage-preview-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--notifal-text-dark, #1e1e1e)}.notifal-onpage-preview-status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;font-size:.8125rem;font-weight:500}.notifal-onpage-preview-status--live{background-color:#22c55e1f;color:#16a34a}.notifal-onpage-preview-status--draft{background-color:#6b72801f;color:#6b7280}.notifal-onpage-preview-edit-link{margin-left:auto;font-size:.875rem;color:var(--notifal-primary, #7e2bd2);text-decoration:none}.notifal-onpage-preview-edit-link:hover{text-decoration:underline;color:var(--notifal-primary-hover, #6d28d9)}.notifal-onpage-preview-note{margin:12px 0 0;padding:10px 12px;font-size:.8125rem;line-height:1.45;color:var(--notifal-text-muted, #666);background-color:var(--notifal-bg-secondary, #f5f5f5);border-radius:4px;border-left:3px solid var(--notifal-primary, #7e2bd2)}.notifal-onpage-preview-main{flex:1;position:relative}.notifal-onpage-preview-main .notifal-onpage-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999999}.notifal-onpage-preview-main .notifal-onpage-notification-wrapper{pointer-events:auto}