.notification-region { position:fixed; z-index:10000; bottom:24px; bottom:max(24px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); }
.app-notification { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 18px; background:#f4f8f4; color:#28513a; border:1px solid #dce8df; border-radius:8px; box-shadow:0 2px 10px #0000000a; font-family:inherit; font-size:14px; line-height:1.5; }
.app-notification-message { min-width:0; overflow-wrap:anywhere; }
.app-notification-icon { flex:none; font-size:14px; line-height:1; }
.app-notification[data-type="error"] { background:#fcf5f4; color:#843b35; border-color:#efddda; }
.app-notification[data-type="warning"] { background:#fcf9ef; color:#71551d; border-color:#ebe3c9; }
.app-notification[data-type="info"] { background:#f3f7fb; color:#365776; border-color:#dce6ef; }
.app-notification-close { flex:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:4px; background:transparent; color:#7b837d; font-size:16px; font-weight:400; cursor:pointer; }
.app-notification-close:hover { color:#3f4a43; background:#00000006; }
.app-notification-close:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }