.empty-state {
text-align: center;
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.empty-state-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
color: #000;
letter-spacing: -0.02em;
}
.empty-state-text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
margin: 0 0 32px;
color: #666;
max-width: 500px;
}
.empty-state-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
font-family: 'GeneralSans-Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.2px;
color: #fff;
background: transparent;
background-image: linear-gradient(to bottom right, #7000f4 0%, #2184f9 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: none;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.empty-state-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
padding: 2px;
background: linear-gradient(to bottom right, #7000f4 0%, #2184f9 100%);
-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;
}
.empty-state-button:hover {
background-image: linear-gradient(to bottom right, #7000f4 0%, #2184f9 100%);
transform: translateY(-2px);
color: #fff;
text-decoration: none;
}
@media (max-width: 600px) {
.empty-state {
padding: 60px 20px;
}
.empty-state-title {
font-size: 24px;
}
.empty-state-text {
font-size: 16px;
}
.empty-state-button {
padding: 12px 28px;
font-size: 13px;
}
}