.page-genres {
    --vg-movies: #c9ccd2;
    --vg-cartoons: #c4a46a;
    --vg-series: #7f9bc0;
    --vg-anime: #b58aa6;
    --vg-games: #84ab95;
}

.vg-head .v-head-row { align-items: flex-end; }

.vg-filter {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 100%;
}

.vg-filter-ico {
    position: absolute;
    left: 15px;
    color: var(--v-muted);
    font-size: 14px;
    pointer-events: none;
    transition: color 0.18s ease;
}

.vg-filter-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--v-line-2);
    border-radius: 10px;
    outline: 0;
    background: var(--v-surface);
    color: var(--v-ink);
    font-family: var(--v-sans);
    font-size: 15px;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.vg-filter-input::placeholder { color: #626976; opacity: 1; }
.vg-filter-input:hover { border-color: #3d424c; }

.vg-filter-input:focus,
.vg-filter-input:focus-visible {
    outline: none;
    border-color: #6a717e;
    background: var(--v-surface-2);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.vg-filter:focus-within .vg-filter-ico { color: var(--v-ink); }

.vg-page { padding-top: 30px; }

.vg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) { .vg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .vg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vg-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--v-line);
    border-radius: 14px;
    background: var(--v-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vg-tile:hover { border-color: var(--v-line-2); }
.vg-tile.hidden { display: none; }

.vg-tile-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 12px;
    color: inherit;
    text-decoration: none;
}

.vg-tile-head:hover { color: inherit; }

.vg-name {
    margin: 0;
    overflow: hidden;
    color: var(--v-ink);
    font-family: var(--v-display);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vg-arrow {
    margin-top: 6px;
    color: var(--v-muted);
    font-size: 13px;
    transition: transform 0.25s var(--v-ease), color 0.18s ease;
}

.vg-tile-head:hover .vg-arrow,
.vg-tile-head:focus-visible .vg-arrow { color: var(--v-ink); transform: translateX(3px); }

.vg-total {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    color: var(--v-muted);
    font-size: 13.5px;
}

.vg-total b {
    color: var(--v-ink);
    font-family: var(--v-display);
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vg-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    margin: 16px 0 14px;
    overflow: hidden;
    border-radius: 2px;
}

.vg-bar-seg {
    flex: var(--n) 1 0;
    min-width: 4px;
    border-radius: 2px;
    transform-origin: left center;
    animation: vg-grow 0.8s var(--v-ease) both;
    animation-delay: calc(var(--i, 0) * 35ms + 120ms);
}

@keyframes vg-grow {
    from { transform: scaleX(0); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

.vg-c-movies { background: var(--vg-movies); }
.vg-c-cartoons { background: var(--vg-cartoons); }
.vg-c-series { background: var(--vg-series); }
.vg-c-anime { background: var(--vg-anime); }
.vg-c-games { background: var(--vg-games); }

.vg-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vg-type {
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    color: var(--v-body);
    font-size: 12.5px;
}

.vg-type b {
    color: var(--v-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vg-type:hover b { color: inherit; }

.vg-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
}

.vg-empty { display: none; }

@media (max-width: 767.98px) {
    .vg-head .v-head-row { align-items: stretch; }
    .vg-filter { width: 100%; }
    .vg-filter-input { font-size: 16px; }
}

@media (max-width: 575.98px) {
    .vg-page { padding-top: 22px; }
    .vg-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .vg-tile { padding: 14px 16px 14px; border-radius: 12px; }
    .vg-tile-head { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
    .vg-name { font-size: 22px; }
    .vg-arrow { display: none; }
    .vg-total { grid-column: auto; gap: 5px; font-size: 13px; }
    .vg-total b { font-size: 26px; }
    .vg-bar { margin: 12px 0 12px; }
    .vg-types { gap: 6px; }
}