.bg-majo { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-100; background:#fff; overflow:hidden; pointer-events:none }
.bg-majo::before { content:""; position:absolute; inset:0; backdrop-filter:blur(80px); z-index:10 }
.blob { position:absolute; z-index:1; width:300px; height:300px; background:#ffd700; border-radius:50%; filter:blur(60px); opacity:.4; animation: a1 12s infinite alternate ease-in-out }
.blob:nth-child(2) { background:#e31b23; width:400px; height:400px; left:50%; animation-delay:-4s; animation-duration:15s }
.blob:nth-child(3) { background:#0045a0; bottom:0; right:0; animation-delay:-2s; animation-duration:10s }
@keyframes a1 { 0% { transform:translate(-10%,-10%) scale(1); opacity:.3 } 50% { transform:translate(20%,15%) scale(1.3); opacity:.6 } 100% { transform:translate(-5%,20%) scale(.9); opacity:.3 } }
.library-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
max-height: 460px;
overflow-y: auto;
padding: 0.75rem;
background: rgba(249, 250, 251, 0.5);
border-radius: 1.25rem;
border: 1px solid #f0f0f0;
}
.library-container::-webkit-scrollbar { width: 6px; }
.library-container::-webkit-scrollbar-thumb { background: #0045a0; border-radius: 10px; }
.theme-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
cursor: pointer;
border: 2px solid transparent;
transition: none;
}
.theme-card.active {
border-color: #0045a0;
background: #f0f7ff;
}
.theme-card img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.theme-card p {
font-size: 10px;
font-weight: 800;
text-align: center;
padding: 6px;
margin: 0;
color: #1e293b;
text-transform: uppercase;
}
.section-tab {
background: rgba(255,255,255,0.8);
border-radius: 2rem;
padding: 6px 18px;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
font-size: 0.85rem;
}
.section-tab.active {
background: #E31B23;
color: white;
box-shadow: 0 2px 6px rgba(227,27,35,0.2);
}
.search-input {
width: 100%;
max-width: 220px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #e2e8f0;
font-size: 0.75rem;
background: white;
outline: none;
}
.search-input:focus { border-color: #E31B23; }
.wa-notification {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 1.5rem;
padding: 10px 18px;
margin-bottom: 10px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
min-width: 260px;
max-width: 90vw;
border: 1px solid rgba(227,27,35,0.1);
animation: a3 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
pointer-events: auto;
}
.wa-notification.fade-out { animation: a4 0.25s ease forwards; }
@keyframes a3 { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes a4 { to { transform:scale(0.9); opacity:0; } }
.wa-icon {
width: 32px;
height: 32px;
background: #e31b23;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.wa-title { font-size: 11px; font-weight: 800; color: #e31b23; }
.wa-message { font-size: 10px; color: #4b5563; font-weight: 500; }
.skeleton {
background: linear-gradient(90deg,#f3f4f6 25%,#ffd70044 50%,#f3f4f6 75%);
background-size: 200% 100%;
animation: a2 1.2s infinite;
}
@keyframes a2 { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
@keyframes explode {
0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2); opacity: 0; }
}