.main-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main-overlay .body{background:linear-gradient(135deg,#242323f2,#10151af2);color:#f8f9fa;border-radius:12px;box-shadow:0 20px 60px #007bff26,0 8px 16px #0003,inset 0 1px #ffffff80;min-width:400px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;position:relative;animation:slideFromTop .4s ease-out;border:2px solid transparent;background-clip:padding-box}.main-overlay .body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:12px;padding:2px;background:linear-gradient(135deg,#007bff,#17a2b8,#6f42c1);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:.6;animation:borderPulse 3s ease-in-out infinite}@keyframes slideFromTop{0%{transform:translateY(-100vh);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes borderPulse{0%,to{opacity:.6}50%{opacity:1}}.main-overlay .header{padding:1.25rem 1.5rem;background:linear-gradient(90deg,#007bff,#17a2b8,#6f42c1,#007bff);background-size:200% auto;color:#fff;display:flex;align-items:center;justify-content:space-between;border-radius:10px 10px 0 0;position:relative;overflow:hidden;animation:gradientShift 6s ease infinite}@keyframes gradientShift{0%{background-position:0% center}50%{background-position:100% center}to{background-position:0% center}}.main-overlay .header:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.main-overlay .title{font-size:1.25rem;font-weight:600;letter-spacing:.5px;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.2)}.main-overlay .close-button{background:#fff3;border:2px solid rgba(255,255,255,.4);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.main-overlay .close-button:hover{background:#ffffff4d;border-color:#fff9;transform:rotate(90deg) scale(1.1);box-shadow:0 4px 12px #0003}.main-overlay .close-button:active{transform:rotate(90deg) scale(.95)}.main-overlay .icon{font-size:1.75rem;line-height:1;color:#fff;font-weight:300;text-shadow:0 2px 4px rgba(0,0,0,.2)}.main-overlay .content{overflow-y:auto;flex:1;position:relative}.main-overlay .content::-webkit-scrollbar{width:8px}.main-overlay .content::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.main-overlay .content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#007bff,#17a2b8);border-radius:4px;transition:background .3s ease}.main-overlay .content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0056b3,#138496)}@media (prefers-color-scheme: dark){.main-overlay .body{background:linear-gradient(135deg,#1e2128fa,#14171efa);box-shadow:0 20px 60px #4dabf733,0 8px 16px #00000080,inset 0 1px #ffffff1a}.main-overlay .body:before{background:linear-gradient(135deg,#4dabf7,#22b8cf,#9775fa)}.main-overlay .header{background:linear-gradient(90deg,#4dabf7,#22b8cf,#9775fa,#4dabf7);background-size:200% auto}.main-overlay .content{color:#f8f9fa}.main-overlay .content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4dabf7,#22b8cf)}.main-overlay .content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#74c0fc,#3bc9db)}}@media (max-width: 768px){.main-overlay .body{min-width:320px;max-width:95vw;max-height:95vh}.main-overlay .header{padding:1rem 1.25rem}.main-overlay .title{font-size:1.1rem}.main-overlay .content{padding:1.5rem 1.25rem}.main-overlay .close-button{width:32px;height:32px}.main-overlay .icon{font-size:1.5rem}}.main-overlay.closing{animation:fadeOut .4s ease-out forwards}.main-overlay.closing .body{animation:slideToTop .4s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideToTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100vh);opacity:0}}