@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.notification-toast{animation:slideInRight .4s cubic-bezier(.68,-.55,.265,1.55);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);font-family:Phetsarath,Inter,system-ui,sans-serif;max-width:420px;min-width:300px}.notification-toast.success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.notification-toast.error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.notification-toast.warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.notification-toast.info{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.notification-preview{animation:fadeIn .5s ease-out;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.1);overflow:hidden;position:relative}.notification-preview:before{animation:shimmer 2s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);content:"";height:100%;left:-200px;position:absolute;top:0;width:200px}.notification-form-input{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#e2e8f0,#cbd5e1) border-box;border:2px solid transparent;font-family:Phetsarath,Inter,system-ui,sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1)}.notification-form-input:focus{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#3b82f6,#8b5cf6) border-box;border-color:transparent;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.notification-button{overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.notification-button:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.notification-button:hover:before{left:100%}.notification-button:active{transform:scale(.98)}.status-indicator{align-items:center;display:inline-flex;gap:8px;position:relative}.status-indicator.connected:before{animation:pulse 2s infinite;background:#10b981;border-radius:50%;box-shadow:0 0 0 0 rgba(16,185,129,.7);content:"";height:8px;width:8px}.status-indicator.disconnected:before{background:#6b7280;border-radius:50%;content:"";height:8px;width:8px}.notification-spinner{animation:spin 1s ease-in-out infinite;border-radius:50%;border:2px solid hsla(0,0%,100%,.3);border-top-color:#fff;height:20px;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.gradient-text{background:linear-gradient(135deg,#3b82f6,#8b5cf6 50%,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.notification-card{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.notification-card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);transform:translateY(-2px)}@media (max-width:768px){.notification-toast{margin:0 16px;max-width:calc(100vw - 32px);min-width:0;min-width:auto}.notification-card{margin:0 8px}}@media (prefers-color-scheme:dark){.notification-preview{background:linear-gradient(135deg,#1f2937,#111827);border-color:#374151;color:#f9fafb}.notification-form-input{background:linear-gradient(#374151,#374151) padding-box,linear-gradient(135deg,#4b5563,#6b7280) border-box;color:#f9fafb}.notification-form-input:focus{background:linear-gradient(#374151,#374151) padding-box,linear-gradient(135deg,#3b82f6,#8b5cf6) border-box}}@media (prefers-reduced-motion:reduce){.notification-button,.notification-card,.notification-preview,.notification-toast{animation:none;transition:none}}@media (prefers-contrast:high){.notification-toast{border:3px solid}.notification-form-input{border:2px solid}}