.wg-container { font-family: Arial, sans-serif; } .wg-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.wg-tab {
background: #1c1c1c;
border: none;
color: #ccc; border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: background .2s, color .2s;
}
.wg-tab:hover  { background: #333; color: #fff; }
.wg-tab.active { background: #7c3aed; color: #fff; } .wg-grid {
display: grid;
gap: 8px;
justify-content: start;
} .wg-cols-2,
.wg-cols-3,
.wg-cols-4,
.wg-cols-5,
.wg-cols-6 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 600px) {
.wg-cols-3,
.wg-cols-4,
.wg-cols-5,
.wg-cols-6 { grid-template-columns: repeat(3, 1fr); }
} @media (min-width: 900px) {
.wg-cols-4,
.wg-cols-5,
.wg-cols-6 { grid-template-columns: repeat(4, 1fr); }
} @media (min-width: 1100px) {
.wg-cols-5,
.wg-cols-6 { grid-template-columns: repeat(5, 1fr); }
} @media (min-width: 1400px) {
.wg-cols-6 { grid-template-columns: repeat(6, 1fr); }
} .wg-card {
border-radius: 14px;
overflow: hidden;
background: #111;
cursor: pointer;
position: relative;
aspect-ratio: 9 / 16;
}
.wg-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s;
}
.wg-card:hover img { transform: scale(1.04); } .wg-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,.88);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 99999;
}
.wg-popup-box {
width: 100%;
max-width: 320px;
background: #1a1a1a;
border-radius: 16px;
padding: 18px;
text-align: center;
position: relative;
box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.wg-close {
position: absolute;
top: 10px; right: 12px;
background: #ef4444;
border: none; color: #fff;
width: 26px; height: 26px;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
line-height: 26px;
}
.wg-popup-img {
width: 100%;
border-radius: 12px;
margin-bottom: 12px;
max-height: 300px;
object-fit: cover;
} .wg-ad-box {
background: #252525;
border: 1px dashed #444;
border-radius: 8px;
padding: 14px;
font-size: 12px;
color: #888;
margin: 10px 0;
} .wg-bar {
width: 100%;
height: 6px;
background: #333;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.wg-fill {
height: 100%;
width: 0%;
background: #7c3aed;
transition: width .1s linear;
}
.wg-percent {
margin-top: 8px;
font-size: 13px;
color: #aaa;
}