.hr {
position: relative;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--fg-muted, #a2a8b8);
}
.hr .hr-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: auto;
padding: 5px 10px;
margin: 0;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-pill, 4px);
background: var(--glass-light, rgba(255,255,255,.045));
color: var(--fg-muted, #a2a8b8);
font: inherit;
font-size: 12.5px;
line-height: 1;
cursor: pointer;
transition: color var(--t-fast, .16s), border-color var(--t-fast, .16s),
background var(--t-fast, .16s);
}
.hr .hr-btn b { font-weight: 700; font-size: 12px; }
.hr .hr-btn:disabled { opacity: .5; cursor: progress; }
.hr .hr-up:hover    { color: var(--ok, #32c17a); border-color: rgba(50,193,122,.5); }
.hr .hr-down:hover  { color: var(--accent, #ff2f52); border-color: rgba(255,47,82,.5); }
.hr .hr-up.is-on {
color: #fff;
border-color: transparent;
background: var(--ok, #32c17a);
}
.hr .hr-down.is-on {
color: #fff;
border-color: transparent;
background: var(--accent, #ff2f52);
}
.hr-pct {
font-size: 12.5px;
font-weight: 700;
color: var(--fg, #eef0f5);
white-space: nowrap;
}
.hr-pct:empty { display: none; }
.hr-ico {
display: block;
width: 14px;
height: 14px;
fill: currentColor;
flex: 0 0 auto;
}
.hr-down .hr-ico { transform: rotate(180deg); }
.k-rate-full {
position: static;
display: block;
padding: 0;
margin: 12px 0 0;
height: auto;
min-height: 0;
}
.k-rate-full .hr {
padding: 12px 14px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-md, 14px);
background: var(--glass-light, rgba(255,255,255,.045));
}
.hr:not(.hr-compact) {
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
}
.hr:not(.hr-compact) .hr-btn  { padding: 9px 16px; font-size: 14px; }
.hr:not(.hr-compact) .hr-ico  { width: 16px; height: 16px; }
.hr:not(.hr-compact) .hr-pct  { font-size: 17px; margin-left: 4px; }
.hr:not(.hr-compact) .hr-total { flex: 0 0 auto; margin-left: auto; }
.hr:not(.hr-compact) .hr-bar   { order: 10; }
.hr-bar {
flex: 1 1 100%;
height: 5px;
border-radius: var(--r-xs, 2px);
background: rgba(255,47,82,.35);
overflow: hidden;
}
.hr-bar span {
display: block;
height: 100%;
border-radius: var(--r-xs, 2px);
background: var(--ok, #32c17a);
transition: width var(--t, .26s) var(--e-out, cubic-bezier(.22,.61,.36,1));
}
.hr-total { font-size: 12px; color: var(--fg-dim, #6f7686); white-space: nowrap; }
.hr-total b { color: var(--fg-muted, #a2a8b8); }
.hr-compact { gap: 5px; }
.hr-compact .hr-btn { padding: 4px 8px; font-size: 11.5px; }
.hr-compact .hr-btn i { font-size: 11px; }
.hr-compact .hr-pct { font-size: 11.5px; margin-left: 2px; }
.hr-note {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
z-index: 5;
padding: 5px 9px;
border-radius: var(--r-sm, 10px);
background: var(--glass-strong, rgba(18,20,27,.94));
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
font-size: 11.5px;
white-space: nowrap;
color: var(--fg, #eef0f5);
opacity: 0;
pointer-events: none;
transform: translateY(3px);
transition: opacity var(--t-fast, .16s), transform var(--t-fast, .16s);
}
.hr-note.is-on { opacity: 1; transform: none; }
.k-rate .rating,
.k-rate-full .rating { display: block; }
@media (max-width: 560px) {
.hr-compact .hr-btn { padding: 4px 7px; }
.hr-compact .hr-pct { display: none; }
}
.hpl { color: var(--fg, #eef0f5); }
.hpl-body { transition: opacity var(--t-fast, .16s); }
.hpl-body.is-busy { opacity: .5; pointer-events: none; }
.hpl-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.09));
}
.hpl-title {
margin: 0 0 6px;
font-size: 25px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
}
.hpl-sub {
margin: 0;
max-width: 62ch;
font-size: 13.5px;
line-height: 1.5;
color: var(--fg-muted, #a2a8b8);
}
.hpl-count {
flex: 0 0 auto;
padding: 8px 14px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255,255,255,.045));
font-size: 13px;
color: var(--fg-muted, #a2a8b8);
white-space: nowrap;
}
.hpl-count b { color: var(--fg, #eef0f5); font-size: 15px; }
.hpl-sorts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.hpl-sort {
padding: 8px 15px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-pill, 999px);
font-size: 13px;
font-weight: 600;
color: var(--fg-muted, #a2a8b8);
text-decoration: none;
transition: color var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.hpl-sort:hover { color: var(--fg, #eef0f5); border-color: var(--glass-hi, rgba(255,255,255,.16)); text-decoration: none; }
.hpl-sort.is-on {
color: #fff;
border-color: transparent;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
}
.hpl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.hpl-card {
display: flex;
flex-direction: column;
padding: 14px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-md, 14px);
background: var(--glass-light, rgba(255,255,255,.045));
transition: border-color var(--t-fast, .16s), transform var(--t-fast, .16s);
}
.hpl-card:hover { border-color: var(--glass-hi, rgba(255,255,255,.16)); transform: translateY(-2px); }
.hpl-card-main { flex: 1 1 auto; color: inherit; text-decoration: none; }
.hpl-card-main:hover { text-decoration: none; }
.hpl-cover {
position: relative;
display: flex;
height: 96px;
margin: -14px -14px 12px;
border-radius: var(--r-md, 14px) var(--r-md, 14px) 0 0;
overflow: hidden;
background: rgba(0,0,0,.25);
}
.hpl-cover img {
flex: 1 1 0;
min-width: 0;
height: 100%;
object-fit: cover;
display: block;
}
.hpl-cover img + img { border-left: 1px solid var(--glass-border, rgba(255,255,255,.09)); }
.hpl-cover.is-empty { align-items: center; justify-content: center; }
.hpl-cover-stub { font-size: 20px; color: var(--fg-dim, #6f7686); }
.hpl-card-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.hpl-card:hover .hpl-card-title { color: var(--accent, #ff2f52); }
.hpl-card-descr {
margin: 0 0 10px;
font-size: 12.5px;
line-height: 1.45;
color: var(--fg-muted, #a2a8b8);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hpl-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 11.5px;
color: var(--fg-dim, #6f7686);
}
.hpl-vote {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--glass-border, rgba(255,255,255,.09));
}
.hpl-one-head {
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.09));
}
.hpl-back {
display: inline-block;
margin-bottom: 10px;
font-size: 13px;
color: var(--fg-muted, #a2a8b8);
text-decoration: none;
}
.hpl-back:hover { color: var(--accent, #ff2f52); text-decoration: none; }
.hpl-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 14px 12px;
}
.hpl-item { color: var(--fg, #eef0f5); text-decoration: none; }
.hpl-item:hover { text-decoration: none; }
.hpl-item-img {
aspect-ratio: 2 / 3;
margin-bottom: 7px;
border-radius: var(--r-sm, 10px);
overflow: hidden;
background: var(--glass-light, rgba(255,255,255,.045));
transition: transform var(--t-fast, .16s), box-shadow var(--t-fast, .16s);
}
.hpl-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpl-item:hover .hpl-item-img {
transform: translateY(-3px);
box-shadow: var(--sh-2, 0 6px 18px -6px rgba(0,0,0,.55));
}
.hpl-item-t {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12.5px;
line-height: 1.3;
height: 2.6em;
}
.hpl-item:hover .hpl-item-t { color: var(--accent, #ff2f52); }
.hpl-empty {
padding: 24px 0;
font-size: 14px;
color: var(--fg-dim, #6f7686);
}
.hpl-empty a { color: var(--accent, #ff2f52); }
.hpl-pager {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 20px;
}
.hpl-pg {
min-width: 34px;
padding: 7px 10px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-sm, 10px);
text-align: center;
font-size: 13px;
color: var(--fg-muted, #a2a8b8);
text-decoration: none;
}
.hpl-pg:hover { color: var(--fg, #eef0f5); text-decoration: none; }
.hpl-pg.is-on {
color: #fff;
border-color: transparent;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
}
#cols:has(.playlists-page) { display: block; }
#cols:has(.playlists-page) .col-side { display: none; }
#cols:has(.playlists-page) .col-cont { width: 100% !important; max-width: 100%; }
.col-cont > .playlists-page,
.col-cont > #dle-content > .playlists-page,
.col-cont > #dle-content > .static-page.playlists-page {
padding: 22px 24px 30px !important;
}
@media (max-width: 620px) {
.hpl-title { font-size: 20px; }
.hpl-grid { grid-template-columns: 1fr; }
.col-cont > #dle-content > .static-page.playlists-page { padding: 16px 12px 22px !important; }
}
.hpl-mod {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--glass-border);
}
.hpl-mod__tag {
margin-right: auto;
font-size: 11.5px;
color: var(--fg-dim);
}
.hpl-mod__btn {
min-width: 0;
padding: 5px 12px;
font: inherit;
font-size: 12px;
color: var(--fg);
background: var(--glass-light);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
cursor: pointer;
transition: background var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.hpl-mod__btn:hover { background: var(--glass-hi); border-color: var(--accent); }
.hpl-mod__btn:disabled { opacity: .5; cursor: default; }
.hpl-mod__btn.is-danger { color: #ff8f8f; }
.hpl-mod__btn.is-danger:hover { color: #fff; background: #b3283f; border-color: transparent; }
.hpl-card.is-hidden {
opacity: .62;
border-left: 3px solid var(--warn);
}
.hpl-card.is-hidden .hpl-cover { filter: grayscale(1); }