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