button.hc-view-btn,
button.hc-size-btn,
button.hc-filter-chip,
button.hc-pill-btn,
button.hc-nav-arrow,
button.hc-btn,
button.hc-search-clear,
button.hc-btn-reset-day {
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
font: inherit;
cursor: pointer;
box-sizing: border-box;
}
button.hc-view-btn:focus-visible,
button.hc-size-btn:focus-visible,
button.hc-filter-chip:focus-visible,
button.hc-pill-btn:focus-visible,
button.hc-nav-arrow:focus-visible,
button.hc-btn:focus-visible,
button.hc-btn-reset-day:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg, #161616), 0 0 0 4px var(--accent, #ce1025);
}
.col-cont > #dle-content > .static-page.calendar-page,
.col-cont > #dle-content > .calendar-page,
.static-page.calendar-page,
.calendar-page {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.calendar-module-wrap {
width: 100%;
box-sizing: border-box;
}
.hc-wrap {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
box-sizing: border-box;
}
.hc-wrap,
.hc-app,
.hc-header,
.hc-toolbar,
.hc-nav-section,
.hc-pill-nav,
.hc-calendar-grid-wrap,
.hc-releases-list,
.hc-card,
.hc-card-body {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.hc-app {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
box-sizing: border-box;
animation: hcFadeIn .3s var(--e-out) both;
}
@keyframes hcFadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
.hc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--surface-2, rgba(43, 43, 43, 0.7));
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
border-radius: var(--r-lg, 12px);
box-shadow: var(--sh-1, 0 4px 16px rgba(0, 0, 0, 0.3));
}
.hc-title-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.hc-badge-icon {
width: 44px;
height: 44px;
border-radius: var(--r-md, 10px);
background: rgba(206, 16, 37, 0.15);
color: var(--accent, #ff2a5f);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
border: 1px solid rgba(255, 47, 82, 0.25);
box-shadow: 0 4px 16px rgba(255, 47, 82, 0.18);
}
.hc-title {
margin: 0;
font-size: 20px;
font-weight: 800;
color: var(--fg, #eee);
line-height: 1.25;
letter-spacing: -0.01em;
}
.hc-subtitle {
margin: 4px 0 0 0;
font-size: 13px;
color: var(--fg-dim, #888);
line-height: 1.35;
}
.hc-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.hc-size-controls,
.hc-view-controls {
display: inline-flex;
align-items: center;
background: rgba(0, 0, 0, 0.35);
padding: 4px;
border-radius: var(--r-pill, 999px) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
gap: 4px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
button.hc-size-btn,
button.hc-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 14px;
border-radius: var(--r-pill, 999px) !important;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 30px;
color: var(--fg-dim, #888);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
transition: all 0.2s ease;
}
button.hc-size-btn:hover,
button.hc-view-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
button.hc-size-btn.is-active,
button.hc-view-btn.is-active {
color: #ffffff !important;
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 2px 10px rgba(206, 16, 37, 0.45) !important;
}
.hc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.hc-search-box {
position: relative !important;
flex: 1 1 260px !important;
min-width: 200px !important;
}
.hc-search-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--fg-dim, #888) !important;
font-size: 14px !important;
pointer-events: none !important;
z-index: 2 !important;
}
input.hc-search-input,
.hc-search-input {
width: 100% !important;
height: 38px !important;
line-height: 38px !important;
padding: 0 36px 0 40px !important;
background: var(--surface-2, rgba(43, 43, 43, 0.7)) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)) !important;
border-radius: var(--r-pill, 999px) !important;
color: var(--fg, #eee) !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 500 !important;
box-sizing: border-box !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4) !important;
outline: none !important;
transition: all 0.2s ease !important;
}
input.hc-search-input:focus,
.hc-search-input:focus {
border-color: var(--accent, #ce1025) !important;
box-shadow: 0 0 10px rgba(206, 16, 37, 0.3), inset 0 1px 3px rgba(0,0,0,0.4) !important;
}
input.hc-search-input::placeholder {
color: var(--fg-dim, #777) !important;
}
.hc-search-clear {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 0 !important;
color: var(--fg-dim, #888) !important;
font-size: 14px !important;
cursor: pointer !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.hc-search-clear:hover {
color: #fff !important;
background: var(--accent, #ce1025) !important;
}
.hc-filters {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
button.hc-filter-chip,
.hc-filter-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 36px !important;
line-height: 36px !important;
padding: 0 16px !important;
border-radius: var(--r-pill, 999px) !important;
font-family: inherit !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--fg-dim, #aaa) !important;
background: var(--surface-2, rgba(43, 43, 43, 0.7)) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)) !important;
box-sizing: border-box !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: all 0.2s ease !important;
}
button.hc-filter-chip:hover,
.hc-filter-chip:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
button.hc-filter-chip.is-active,
.hc-filter-chip.is-active {
color: #fff !important;
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 3px 12px rgba(206, 16, 37, 0.45) !important;
}
.hc-month-nav {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 10px !important;
background: var(--surface-2, rgba(43, 43, 43, 0.7)) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)) !important;
border-radius: var(--r-pill, 999px) !important;
box-sizing: border-box !important;
}
button.hc-nav-arrow,
.hc-nav-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)) !important;
color: var(--fg-dim, #888) !important;
font-size: 12px !important;
flex-shrink: 0 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
button.hc-nav-arrow:hover,
.hc-nav-arrow:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.hc-month-pills {
display: flex !important;
align-items: center !important;
gap: 8px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
flex: 1 !important;
padding: 2px 4px !important;
}
button.hc-pill-btn,
.hc-pill-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 34px !important;
line-height: 34px !important;
padding: 0 16px !important;
border-radius: var(--r-pill, 999px) !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--fg-dim, #aaa) !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08)) !important;
white-space: nowrap !important;
gap: 8px !important;
flex-shrink: 0 !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
button.hc-pill-btn:hover,
.hc-pill-btn:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
button.hc-pill-btn.is-active,
.hc-pill-btn.is-active {
color: #fff !important;
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 3px 12px rgba(206, 16, 37, 0.45) !important;
}
.hc-pill-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
line-height: 18px !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 0 6px !important;
border-radius: var(--r-pill, 999px) !important;
background: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
margin-left: 2px !important;
}
button.hc-pill-btn.is-active .hc-pill-count,
.hc-pill-btn.is-active .hc-pill-count {
background: rgba(0, 0, 0, 0.3) !important;
color: #fff !important;
}
.hc-month-headline {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 2px 4px;
}
.hc-month-current-title {
margin: 0;
font-size: 18px;
font-weight: 800;
color: var(--fg);
letter-spacing: -0.01em;
}
.hc-month-stat {
font-size: 13px;
color: var(--fg-dim);
font-weight: 500;
}
.hc-calendar-grid-wrap {
display: flex;
flex-direction: column;
background: var(--glass-strong);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-1);
}
.hc-weekdays-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--surface);
border-bottom: 1px solid var(--glass-border);
text-align: center;
padding: 8px 0;
}
.hc-weekdays-row span {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-dim);
}
.hc-days-matrix {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--glass-border);
}
.hc-day-cell {
position: relative;
min-height: 84px;
padding: 8px 10px;
background: var(--surface-2);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: default;
transition: background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.hc-day-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 4px;
}
.hc-day-cell.is-other-month {
background: var(--surface);
opacity: 0.35;
}
.hc-day-cell.is-cur-month {
background: var(--surface-2);
}
.hc-day-cell.has-releases {
cursor: pointer;
}
.hc-day-cell.has-releases:hover {
background: var(--surface-3);
z-index: 2;
}
.hc-day-cell.is-today {
box-shadow: inset 0 0 0 2px var(--accent);
background: rgba(255, 47, 82, 0.06);
}
.hc-day-cell.is-selected {
box-shadow: inset 0 0 0 2px #fff, 0 0 16px var(--accent-glow);
background: var(--surface-3);
z-index: 3;
}
.hc-day-num {
font-size: 14px;
font-weight: 700;
color: var(--fg);
line-height: 1;
}
.hc-day-cell.is-today .hc-day-num {
color: var(--accent);
}
.hc-day-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: var(--r-pill);
background: var(--accent-grad);
color: #fff;
line-height: 1;
box-shadow: 0 2px 6px var(--accent-glow);
flex-shrink: 0;
}
.hc-day-thumbs {
display: flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 4px;
flex-wrap: wrap;
}
.hc-thumb-avatar {
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
background: var(--surface-3);
border: 1.5px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
flex-shrink: 0;
transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .15s var(--e-out), box-shadow .2s var(--e-out);
}
.hc-thumb-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hc-thumb-avatar:hover {
transform: scale(1.45) translateY(-3px);
border-color: var(--accent);
z-index: 10;
box-shadow: 0 4px 14px var(--accent-glow);
}
.hc-thumb-more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-soft);
border: 1px solid rgba(255, 47, 82, 0.45);
color: var(--accent);
font-size: 9.5px;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.hc-day-dots {
display: flex;
gap: 3px;
align-items: center;
margin-top: auto;
}
.hc-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 4px var(--accent-glow);
}
.hc-day-filter-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: var(--accent-soft);
border: 1px solid rgba(255, 47, 82, 0.24);
border-radius: var(--r-md);
color: var(--fg);
font-size: 13px;
font-weight: 600;
}
.hc-btn-reset-day {
padding: 5px 12px;
background: var(--accent);
color: #fff;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
}
.hc-btn-reset-day:hover {
opacity: 0.9;
}
.hc-releases-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 18px;
transition: all var(--t) var(--e-out);
}
.hc-app[data-active-view="timeline"] .hc-calendar-grid-wrap {
display: none;
}
.hc-app[data-active-view="timeline"] .hc-releases-list {
grid-template-columns: 1fr;
}
.hc-app[data-card-size="large"] .hc-releases-list {
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 20px;
}
.hc-app[data-card-size="large"] .hc-card {
padding: 16px;
gap: 16px;
border-radius: var(--r-xl);
min-height: 180px;
}
.hc-app[data-card-size="large"] .hc-card-poster {
width: 120px;
height: 168px;
border-radius: var(--r-md);
}
.hc-app[data-card-size="large"] .hc-card-title {
font-size: 15.5px;
font-weight: 800;
line-height: 1.35;
margin-bottom: 8px;
}
.hc-app[data-card-size="large"] .hc-card-meta-top {
margin-bottom: 8px;
font-size: 13px;
}
.hc-app[data-card-size="large"] .hc-card-date {
font-size: 13px;
}
.hc-app[data-card-size="large"] .hc-status-tag {
font-size: 11.5px;
padding: 3px 9px;
}
.hc-app[data-card-size="large"] .hc-timer-wrap {
margin-bottom: 12px;
}
.hc-app[data-card-size="large"] .hc-countdown {
padding: 6px 12px;
font-size: 13px;
}
.hc-app[data-card-size="large"] .hc-card-actions {
gap: 10px;
}
.hc-app[data-card-size="large"] .hc-btn {
height: 36px;
padding: 0 16px;
font-size: 12.5px;
gap: 7px;
}
.hc-app[data-card-size="large"] .hc-ep-chip {
font-size: 12px;
padding: 4px 0;
bottom: 7px;
left: 7px;
right: 7px;
}
.hc-app[data-card-size="compact"] .hc-releases-list {
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 14px;
}
.hc-app[data-card-size="compact"] .hc-card {
padding: 12px;
gap: 12px;
border-radius: var(--r-md);
}
.hc-app[data-card-size="compact"] .hc-card-poster {
width: 82px;
height: 115px;
border-radius: var(--r-xs);
}
.hc-app[data-card-size="compact"] .hc-card-title {
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
}
.hc-app[data-card-size="compact"] .hc-card-meta-top {
margin-bottom: 5px;
font-size: 11px;
}
.hc-app[data-card-size="compact"] .hc-card-date {
font-size: 11px;
}
.hc-app[data-card-size="compact"] .hc-status-tag {
font-size: 10px;
padding: 1px 6px;
}
.hc-app[data-card-size="compact"] .hc-timer-wrap {
margin-bottom: 8px;
}
.hc-app[data-card-size="compact"] .hc-countdown {
padding: 4px 8px;
font-size: 11px;
}
.hc-app[data-card-size="compact"] .hc-card-actions {
gap: 6px;
}
.hc-app[data-card-size="compact"] .hc-btn {
height: 29px;
padding: 0 10px;
font-size: 11px;
gap: 5px;
}
.hc-app[data-card-size="compact"] .hc-ep-chip {
font-size: 10px;
padding: 2px 0;
bottom: 5px;
left: 5px;
right: 5px;
}
.hc-card {
display: flex;
gap: 14px;
padding: 14px;
background: var(--glass);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
box-sizing: border-box;
position: relative;
overflow: hidden;
transition: transform var(--t) var(--e-out),
border-color var(--t) var(--e-out),
box-shadow var(--t) var(--e-out);
}
.hc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--glass-border);
transition: background var(--t) var(--e-out);
}
.hc-card.is-released::before {
background: var(--ok);
}
.hc-card.is-today::before {
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.hc-card.is-upcoming::before {
background: var(--info);
}
.hc-card:hover {
transform: translateY(-3px);
border-color: var(--glass-hi);
box-shadow: var(--sh-2);
}
.hc-card-poster {
position: relative;
width: 90px;
height: 125px;
flex-shrink: 0;
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface-3);
box-shadow: var(--sh-1);
}
.hc-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s var(--e-out);
}
.hc-card:hover .hc-card-poster img {
transform: scale(1.06);
}
.hc-poster-stub {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
font-size: 24px;
}
.hc-ep-chip {
position: absolute;
bottom: 6px;
left: 6px;
right: 6px;
padding: 3px 0;
text-align: center;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: var(--r-xs);
font-size: 11px;
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
}
.hc-card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
min-width: 0;
}
.hc-card-meta-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.hc-card-date {
font-size: 12px;
color: var(--fg-dim);
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.hc-card-date i {
font-size: 11px;
}
.hc-status-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--r-pill);
line-height: 1.2;
}
.tag-released {
background: rgba(50, 193, 122, 0.14);
color: var(--ok);
border: 1px solid rgba(50, 193, 122, 0.25);
}
.tag-today {
background: rgba(255, 47, 82, 0.14);
color: var(--accent);
border: 1px solid rgba(255, 47, 82, 0.3);
}
.tag-upcoming {
background: rgba(75, 141, 255, 0.12);
color: var(--info);
border: 1px solid rgba(75, 141, 255, 0.22);
}
.hc-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
animation: hcPulse 1.4s infinite;
}
@keyframes hcPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50%      { opacity: 0.4; transform: scale(0.75); }
}
.hc-card-title {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
color: var(--fg);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--t-fast) var(--e-out);
}
.hc-card-title a:hover {
color: var(--accent);
}
.hc-card-title-en {
font-size: 11.5px;
color: var(--fg-dim);
font-weight: 500;
margin-top: -4px;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 5px;
}
.hc-card-title-en i,
.hc-card-title-en .fa {
font-size: 10px;
opacity: 0.7;
color: var(--accent);
}
.hc-timer-wrap {
margin-bottom: 10px;
}
.hc-countdown {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 10px;
background: var(--surface-2);
border: 1px solid var(--glass-border);
border-radius: var(--r-sm);
font-size: 12px;
font-weight: 600;
color: var(--fg-muted);
}
.hc-timer-icon {
color: var(--accent);
font-size: 12px;
}
.hc-timer-digits {
display: inline-flex;
gap: 4px;
font-variant-numeric: tabular-nums;
}
.hc-t-part b {
font-weight: 700;
color: var(--fg);
}
.hc-timer-text {
color: var(--ok);
font-weight: 600;
}
.hc-card-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.hc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border-radius: var(--r-pill);
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
transition:
color var(--t-fast) var(--e-out),
border-color var(--t) var(--e-out),
background var(--t) var(--e-out),
transform var(--t) var(--e-spring),
box-shadow var(--t) var(--e-out),
filter var(--t) var(--e-out);
}
.hc-btn .fa {
font-size: 12.5px;
line-height: 1;
flex-shrink: 0;
}
.hc-btn-watch {
flex: 1 1 auto;
min-width: 0;
color: #ffffff !important;
background: linear-gradient(135deg, rgba(255, 47, 82, 0.88), rgba(206, 16, 37, 0.96));
border: 1px solid rgba(255, 255, 255, 0.32);
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.5),
inset 0 -1px 2px rgba(0, 0, 0, 0.25),
0 4px 14px -2px var(--accent-glow);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hc-btn-watch::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, #ff416c, #ff4b2b);
opacity: 0;
transform: scale(0.8);
transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.hc-btn-watch:hover {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.55);
transform: translateY(-2px);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.7),
0 8px 22px 0 var(--accent-glow);
filter: brightness(1.1);
}
.hc-btn-watch:hover::before {
opacity: 1;
transform: scale(1);
}
.hc-btn-watch:active {
transform: translateY(0) scale(0.97);
}
.hc-btn-fav {
flex: 1 1 auto;
min-width: 0;
color: var(--fg-muted);
background: var(--glass-light);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow:
inset 0 1px 0 var(--glass-hi),
0 2px 8px rgba(0, 0, 0, 0.25);
}
.hc-btn-fav .fa {
color: var(--fg-dim);
transition: color var(--t-fast) var(--e-out);
}
.hc-btn-fav::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 47, 82, 0.22));
opacity: 0;
transform: scale(0.8);
transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.hc-btn-fav:hover {
color: #ffffff;
border-color: var(--glass-hi);
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.4),
0 6px 18px rgba(0, 0, 0, 0.35);
}
.hc-btn-fav:hover .fa {
color: var(--accent);
}
.hc-btn-fav:hover::before {
opacity: 1;
transform: scale(1);
}
.hc-btn-fav:active {
transform: translateY(0) scale(0.97);
}
.hc-btn-fav.is-added {
color: #ffffff !important;
background: linear-gradient(135deg, rgba(255, 176, 32, 0.88), rgba(220, 130, 10, 0.96));
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.55),
0 4px 16px -2px rgba(255, 176, 32, 0.55);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hc-btn-fav.is-added .fa {
color: #ffffff;
}
.hc-empty-msg {
grid-column: 1 / -1;
padding: 36px 20px;
text-align: center;
background: var(--glass);
border: 1px dashed var(--glass-border);
border-radius: var(--r-lg);
color: var(--fg-dim);
font-size: 14px;
}
.hc-footer-info {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: var(--surface);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
font-size: 12px;
color: var(--fg-dim);
line-height: 1.4;
}
.hc-footer-info i {
color: var(--info);
font-size: 14px;
flex-shrink: 0;
}
.hc-side-widget {
display: flex;
flex-direction: column;
gap: 10px;
}
.hc-side-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.hc-side-item {
display: flex;
gap: 10px;
padding: 8px;
background: var(--surface-2);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: background var(--t-fast) var(--e-out),
border-color var(--t-fast) var(--e-out),
transform var(--t-fast) var(--e-out);
}
.hc-side-item:hover {
background: var(--surface-3);
border-color: var(--glass-hi);
transform: translateX(2px);
}
.hc-side-thumb {
position: relative;
width: 48px;
height: 64px;
flex-shrink: 0;
border-radius: var(--r-xs);
overflow: hidden;
background: var(--surface);
}
.hc-side-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hc-side-thumb-stub {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
font-size: 14px;
}
.hc-side-ep {
position: absolute;
bottom: 2px;
left: 2px;
right: 2px;
padding: 1px 0;
text-align: center;
background: rgba(0, 0, 0, 0.8);
font-size: 9px;
font-weight: 700;
color: #fff;
border-radius: 3px;
}
.hc-side-info {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
min-width: 0;
}
.hc-side-title {
font-size: 12px;
font-weight: 700;
color: var(--fg);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hc-side-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.hc-side-date {
font-size: 11px;
color: var(--fg-dim);
display: flex;
align-items: center;
gap: 4px;
}
.hc-side-timer {
font-size: 11px;
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.hc-side-today-tag {
padding: 1px 5px;
border-radius: var(--r-pill);
background: var(--accent);
color: #fff;
font-size: 9px;
}
.hc-side-footer {
margin-top: 2px;
}
.hc-side-all-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
padding: 9px;
border-radius: var(--r-md);
background: var(--glass);
border: 1px solid var(--glass-border);
color: var(--fg-muted);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.hc-side-all-btn:hover {
color: #fff;
background: var(--surface-3);
border-color: var(--accent);
}
.hc-side-empty {
padding: 14px;
text-align: center;
color: var(--fg-dim);
font-size: 12px;
}
@media (max-width: 768px) {
.hc-header {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 14px;
}
.hc-title-wrap {
width: 100%;
}
.hc-header-actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
flex-wrap: wrap;
}
.hc-size-controls,
.hc-view-controls {
display: inline-flex;
align-items: center;
background: rgba(0, 0, 0, 0.35);
padding: 4px;
border-radius: var(--r-pill, 999px) !important;
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
gap: 4px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
button.hc-size-btn,
button.hc-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 14px;
border-radius: var(--r-pill, 999px) !important;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 30px;
color: var(--fg-dim, #888);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
transition: all 0.2s ease;
}
button.hc-size-btn:hover,
button.hc-view-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
button.hc-size-btn.is-active,
button.hc-view-btn.is-active {
color: #ffffff !important;
background: var(--accent-grad, linear-gradient(135deg, #ff2a5f, #ce1025)) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 2px 10px rgba(206, 16, 37, 0.45) !important;
}
@media (max-width: 768px) {
.hc-app,
.calendar-module-wrap,
.calendar-page,
.hc-calendar-grid-wrap {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.hc-header {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 12px 14px !important;
}
.hc-title-wrap {
width: 100% !important;
}
.hc-header-actions {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin-left: 0 !important;
flex-wrap: wrap !important;
}
.hc-size-controls {
display: none !important;
}
.hc-view-controls {
width: 100% !important;
flex: 1 1 100% !important;
max-width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
box-sizing: border-box !important;
padding: 4px !important;
}
button.hc-view-btn {
flex: 1 1 50% !important;
justify-content: center !important;
padding: 0 12px !important;
font-size: 12.5px !important;
height: 32px !important;
line-height: 32px !important;
}
.hc-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.hc-search-box {
width: 100% !important;
flex: none !important;
}
.hc-filters {
width: 100% !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 2px !important;
gap: 6px !important;
}
.hc-filters::-webkit-scrollbar {
display: none !important;
}
.hc-filter-chip {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.hc-month-nav {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.hc-month-pills {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.hc-weekdays-row {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.hc-days-matrix {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
width: 100% !important;
gap: 2px !important;
box-sizing: border-box !important;
}
.hc-day-cell {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
min-height: 42px !important;
padding: 3px 2px !important;
}
.hc-day-thumbs {
display: none !important;
}
.hc-day-dots {
display: flex !important;
justify-content: center !important;
gap: 2px !important;
margin-top: auto !important;
}
.hc-releases-list {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
.hc-admin-control {
position: relative;
display: inline-flex;
align-items: center;
}
button.hc-admin-plus-btn,
.hc-admin-plus-btn {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: var(--r-pill) !important;
background: var(--accent-soft) !important;
border: 1px solid var(--accent-glow) !important;
color: var(--accent) !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
font-size: 13px !important;
transition: all var(--t) var(--e-out) !important;
box-shadow: 0 2px 10px -2px var(--accent-soft) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
}
.hc-admin-plus-btn:hover {
background: var(--accent-grad) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: var(--sh-glow) !important;
transform: scale(1.08) rotate(90deg) !important;
}
.hc-admin-plus-btn[aria-expanded="true"] {
background: var(--accent-grad) !important;
color: #fff !important;
transform: rotate(45deg) !important;
}
.hc-admin-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 230px;
z-index: 1050;
background: var(--glass-strong);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--r-md);
padding: 6px;
box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
animation: hcDropFade .18s var(--e-out);
}
@keyframes hcDropFade {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
button.hc-admin-drop-btn,
.hc-admin-drop-btn {
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 12px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--fg) !important;
border-radius: var(--r-sm) !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
text-align: left !important;
transition: all var(--t-fast) var(--e-out) !important;
height: auto !important;
line-height: 1.3 !important;
}
.hc-admin-drop-btn i {
font-size: 13px;
color: var(--accent);
transition: transform var(--t-fast);
}
.hc-admin-drop-btn:hover {
background: var(--glass-light) !important;
color: #fff !important;
}
.hc-admin-drop-btn:hover i {
transform: scale(1.15);
}
.hc-admin-drop-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.hc-modal-backdrop {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.78);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: hcFadeIn .2s ease-out;
}
@keyframes hcFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.hc-modal {
width: 100%;
max-width: 500px;
background: var(--surface);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3), 0 0 40px rgba(0,0,0,0.8), inset 0 1px 0 var(--glass-hi);
overflow: hidden;
animation: hcModalZoom .22s var(--e-out);
}
@keyframes hcModalZoom {
from { opacity: 0; transform: scale(0.95) translateY(10px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}
.hc-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--surface-2);
border-bottom: 1px solid var(--glass-border);
}
.hc-modal-title-wrap {
display: flex;
align-items: center;
gap: 9px;
}
.hc-modal-icon {
color: var(--accent);
font-size: 17px;
}
.hc-modal-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #fff;
}
button.hc-modal-close,
.hc-modal-close {
background: transparent !important;
border: 0 !important;
color: var(--fg-dim) !important;
font-size: 24px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
width: 28px !important;
height: 28px !important;
display: grid !important;
place-items: center !important;
border-radius: var(--r-pill) !important;
transition: all var(--t-fast) !important;
}
.hc-modal-close:hover {
color: #fff !important;
background: var(--glass-light) !important;
}
.hc-modal-form {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.hc-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.hc-form-row {
display: flex;
gap: 12px;
}
.hc-col-6 {
flex: 1;
}
.hc-form-label {
font-size: 12px;
font-weight: 600;
color: var(--fg-muted);
}
.hc-req {
color: var(--accent);
}
.hc-form-input {
width: 100%;
height: 38px;
background: var(--surface-2);
border: 1px solid var(--glass-border);
border-radius: var(--r-sm);
padding: 0 12px;
font-size: 13px;
font-weight: 500;
color: #fff;
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
box-sizing: border-box;
}
.hc-form-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.hc-file-upload-box {
margin-top: 6px;
position: relative;
}
.hc-file-label {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--surface-2);
border: 1px dashed var(--glass-border);
border-radius: var(--r-sm);
font-size: 12px;
font-weight: 500;
color: var(--fg-muted);
cursor: pointer;
transition: all var(--t-fast);
}
.hc-file-label:hover {
border-color: var(--accent);
color: #fff;
background: var(--glass-light);
}
.hc-file-label i {
color: var(--accent);
font-size: 14px;
}
.hc-file-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.hc-modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid var(--glass-border);
}
button.hc-modal-btn-cancel,
.hc-modal-btn-cancel {
padding: 8px 16px !important;
border-radius: var(--r-pill) !important;
background: var(--surface-2) !important;
border: 1px solid var(--glass-border) !important;
color: var(--fg-muted) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all var(--t-fast) !important;
height: 36px !important;
}
.hc-modal-btn-cancel:hover {
color: #fff !important;
background: var(--surface-3) !important;
}
button.hc-modal-btn-submit,
.hc-modal-btn-submit {
padding: 8px 20px !important;
border-radius: var(--r-pill) !important;
background: var(--accent-grad) !important;
border: 0 !important;
color: #fff !important;
font-size: 12.5px !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: var(--sh-glow) !important;
transition: all var(--t-fast) !important;
height: 36px !important;
}
.hc-modal-btn-submit:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}
.hc-modal-btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.hc-toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 100000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.hc-toast {
pointer-events: auto;
padding: 12px 18px;
border-radius: var(--r-md);
background: var(--glass-strong);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--glass-border);
color: #fff;
font-size: 13px;
font-weight: 600;
box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(12px);
transition: all var(--t) var(--e-out);
max-width: 380px;
}
.hc-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.hc-toast--success {
border-left: 4px solid var(--ok);
}
.hc-toast--success .hc-toast-icon {
color: var(--ok);
}
.hc-toast--error {
border-left: 4px solid var(--accent);
}
.hc-toast--error .hc-toast-icon {
color: var(--accent);
}
.hc-toast--info {
border-left: 4px solid var(--info);
}
.hc-toast--info .hc-toast-icon {
color: var(--info);
}
}




.ho-app,
.ho-promo,
.ho-modal-back {
--ho-line:  var(--glass-border, rgba(255,255,255,.09));
--ho-card:  var(--glass, rgba(28,31,40,.62));
--ho-txt:   var(--fg, #eef0f5);
--ho-mut:   var(--fg-muted, #a2a8b8);
--ho-dim:   var(--fg-dim, #6f7686);
--ho-acc:   var(--accent, #ff2f52);
--ho-ok:    var(--ok, #32c17a);
--ho-warn:  var(--warn, #ffb020);
--ho-r:     var(--r-md, 14px);
}



.ho-promo {
position: relative;
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
padding: 14px 14px 14px 12px;
margin: 0 0 14px;
border: 1px solid rgba(255, 47, 82, .28);
border-radius: var(--r-lg, 20px);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 47, 82, .20) 0%, rgba(255, 47, 82, 0) 62%),
var(--glass-strong, rgba(18,20,27,.86));
color: var(--ho-txt);
text-decoration: none;
box-shadow: var(--sh-2, 0 6px 18px -6px rgba(0,0,0,.55));
transition: transform var(--t, .26s) var(--e-out, cubic-bezier(.22,.61,.36,1)),
border-color var(--t, .26s), box-shadow var(--t, .26s);
}

.ho-promo:hover {
transform: translateY(-2px);
border-color: rgba(255, 47, 82, .55);
box-shadow: var(--sh-glow, 0 8px 30px -8px rgba(255,47,82,.42));
text-decoration: none;
}


.ho-promo-glow {
position: absolute;
inset: -40% -60%;
pointer-events: none;
background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
transform: translateX(-60%);
transition: transform var(--t-slow, .46s) var(--e-out, cubic-bezier(.22,.61,.36,1));
}
.ho-promo:hover .ho-promo-glow { transform: translateX(60%); }

.ho-promo-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--r-sm, 10px);
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
color: #fff;
font-size: 19px;
box-shadow: 0 4px 14px -4px rgba(255,47,82,.6);
}

.ho-promo-body { flex: 1 1 auto; min-width: 0; }

.ho-promo-title {
display: block;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
letter-spacing: -.01em;
}

.ho-promo-text {
display: block;
margin-top: 3px;
font-size: 11.5px;
line-height: 1.35;
color: var(--ho-mut);
}

.ho-promo-stats {
display: flex;
align-items: center;
gap: 7px;
margin-top: 7px;
font-size: 11px;
color: var(--ho-dim);
}
.ho-promo-stat b { color: var(--ho-acc); font-weight: 700; }
.ho-promo-sep { opacity: .5; }

.ho-promo-arrow {
flex: 0 0 auto;
color: var(--ho-dim);
font-size: 20px;
transition: transform var(--t, .26s) var(--e-out, cubic-bezier(.22,.61,.36,1)),
color var(--t, .26s);
}
.ho-promo:hover .ho-promo-arrow { transform: translateX(3px); color: var(--ho-acc); }



#cols:has(.offer-page),
.cols:has(.offer-page) {
display: block;
}

#cols:has(.offer-page) .col-side,
.cols:has(.offer-page) .col-side {
display: none;
}

#cols:has(.offer-page) .col-cont,
.cols:has(.offer-page) .col-cont {
width: 100% !important;
max-width: 100%;
}


.col-cont > .offer-page,
.col-cont > #dle-content > .offer-page,
.col-cont > #dle-content > .static-page.offer-page {
padding-left: 0 !important;
padding-right: 0 !important;
}

.offer-module-wrap { padding: 22px 24px 30px; }

@media (max-width: 760px) {
.offer-module-wrap { padding: 16px 12px 22px; }
}



.ho-app { color: var(--ho-txt); }

.ho-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--ho-line);
}

.ho-head-main { flex: 1 1 320px; min-width: 0; }

.ho-title {
margin: 0 0 6px;
font-size: 26px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
}

.ho-sub {
margin: 0;
max-width: 62ch;
font-size: 13.5px;
line-height: 1.5;
color: var(--ho-mut);
}

.ho-wallet {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
border: 1px solid var(--ho-line);
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255,255,255,.045));
font-size: 13px;
white-space: nowrap;
}
.ho-wallet i { color: var(--ho-acc); }
.ho-wallet b { font-size: 16px; font-weight: 700; }
.ho-wallet span { color: var(--ho-mut); }



.ho-rules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 18px;
}

.ho-rule {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
border: 1px solid var(--ho-line);
border-radius: var(--r-sm, 10px);
background: var(--glass-light, rgba(255,255,255,.045));
}

.ho-rule-num {
flex: 0 0 auto;
min-width: 44px;
font-size: 17px;
font-weight: 800;
text-align: center;
letter-spacing: -.02em;
color: var(--ho-mut);
}
.ho-rule.is-good .ho-rule-num { color: var(--ho-ok); }
.ho-rule.is-bad  .ho-rule-num { color: var(--ho-acc); }

.ho-rule-txt { font-size: 11.5px; line-height: 1.35; color: var(--ho-mut); }

.ho-rules-bounty { margin-bottom: 14px; }



.ho-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ho-tabs::-webkit-scrollbar { display: none; }

.ho-app .ho-tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: auto;
padding: 10px 16px;
margin: 0;
border: 1px solid var(--ho-line);
border-radius: var(--r-pill, 999px);
background: transparent;
color: var(--ho-mut);
font: inherit;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color var(--t-fast, .16s), border-color var(--t-fast, .16s),
background var(--t-fast, .16s);
}
.ho-app .ho-tab:hover { color: var(--ho-txt); border-color: var(--glass-hi, rgba(255,255,255,.16)); }

.ho-app .ho-tab.is-active {
color: #fff;
border-color: transparent;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
box-shadow: var(--sh-glow, 0 8px 30px -8px rgba(255,47,82,.42));
}

.ho-tab-count {
min-width: 20px;
padding: 1px 6px;
border-radius: var(--r-pill, 999px);
background: rgba(0,0,0,.28);
font-size: 11px;
font-weight: 700;
}

.ho-pane { display: none; }
.ho-pane.is-active { display: block; }

.ho-pane-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.ho-pane-note { font-size: 12.5px; color: var(--ho-mut); }
.ho-pane-note b { color: var(--ho-txt); }



.ho-msg {
padding: 11px 14px;
margin-bottom: 14px;
border-radius: var(--r-sm, 10px);
border-left: 3px solid var(--ho-ok);
background: rgba(50, 193, 122, .10);
font-size: 13px;
line-height: 1.45;
}
.ho-msg.is-error {
border-left-color: var(--ho-acc);
background: var(--accent-soft, rgba(255,47,82,.14));
}
.ho-msg[hidden] { display: none; }



.ho-list { display: flex; flex-direction: column; gap: 14px; }

.ho-empty {
padding: 34px 18px;
border: 1px dashed var(--ho-line);
border-radius: var(--ho-r);
color: var(--ho-dim);
font-size: 13.5px;
text-align: center;
}

.ho-card {
display: flex;
gap: 16px;
padding: 14px;
border: 1px solid var(--ho-line);
border-radius: var(--r-lg, 20px);
background: var(--ho-card);
box-shadow: var(--sh-2, 0 6px 18px -6px rgba(0,0,0,.55));
}
.ho-card.is-bounty { border-left: 3px solid var(--ho-warn); }

.ho-card-poster {
position: relative;
flex: 0 0 132px;
width: 132px;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: var(--r-sm, 10px);
background: var(--surface-2, #1a1d25);
}
.ho-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ho-poster-stub {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--ho-dim);
font-size: 26px;
}

.ho-bounty-chip {
position: absolute;
left: 6px;
bottom: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--r-pill, 999px);
background: rgba(0,0,0,.72);
color: var(--ho-warn);
font-size: 12px;
font-weight: 700;
}

.ho-card-body { flex: 1 1 auto; min-width: 0; }

.ho-card-title {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
}
.ho-card-alt {
margin-top: 2px;
font-size: 12px;
color: var(--ho-dim);
}

.ho-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
margin: 9px 0;
font-size: 11.5px;
color: var(--ho-mut);
}
.ho-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.ho-meta-item i { opacity: .7; }
.ho-meta-item.is-warn { color: var(--ho-warn); }

.ho-card-descr {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: var(--ho-mut);
}


.ho-card-fields {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px 12px;
margin: 0 0 10px;
font-size: 12px;
}
.ho-card-fields dt { color: var(--ho-dim); }
.ho-card-fields dd { margin: 0; color: var(--ho-txt); min-width: 0; overflow-wrap: anywhere; }

.ho-card-players {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 10px;
font-size: 11.5px;
}
.ho-players-label { color: var(--ho-dim); }
.ho-player-chip {
padding: 2px 8px;
border: 1px solid var(--ho-line);
border-radius: var(--r-pill, 999px);
color: var(--ho-mut);
}



.ho-genres {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}

.ho-app .ho-genre,
.ho-app .ho-genre-add {
display: inline-flex;
align-items: center;
gap: 6px;
height: auto;
padding: 4px 9px;
margin: 0;
border: 1px dashed var(--ho-line);
border-radius: var(--r-pill, 999px);
background: transparent;
color: var(--ho-mut);
font: inherit;
font-size: 11.5px;
cursor: pointer;
transition: border-color var(--t-fast, .16s), color var(--t-fast, .16s);
}
.ho-app .ho-genre:hover:not(:disabled),
.ho-app .ho-genre-add:hover { border-color: var(--ho-acc); color: var(--ho-txt); }

.ho-app .ho-genre:disabled { cursor: default; opacity: .75; }
.ho-app .ho-genre.is-voted { border-style: solid; border-color: var(--ho-ok); color: var(--ho-ok); }

.ho-genre-count {
padding: 0 5px;
border-radius: var(--r-pill, 999px);
background: rgba(255,255,255,.07);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}

.ho-app .ho-genre-add { border-color: var(--ho-acc); color: var(--ho-acc); }



.ho-vote-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.ho-progress {
position: relative;
flex: 1 1 160px;
min-width: 140px;
height: 26px;
overflow: hidden;
border-radius: var(--r-pill, 999px);
background: rgba(255,255,255,.06);
}
.ho-progress-bar {
height: 100%;
border-radius: inherit;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
transition: width var(--t-slow, .46s) var(--e-out, cubic-bezier(.22,.61,.36,1));
}
.ho-progress-txt {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.ho-hint { font-size: 12px; color: var(--ho-dim); }



.ho-admin-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 11px;
margin-top: 11px;
border-top: 1px dashed var(--ho-line);
}
.ho-admin-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--ho-dim);
text-transform: uppercase;
letter-spacing: .06em;
}




:is(.ho-app, .ho-modal-back) .ho-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: auto;
min-height: 38px;
padding: 9px 16px;
margin: 0;
border: 1px solid transparent;
border-radius: var(--r-sm, 10px);
background: var(--glass-light, rgba(255,255,255,.045));
color: var(--ho-txt);
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform var(--t-fast, .16s), background var(--t-fast, .16s),
border-color var(--t-fast, .16s), opacity var(--t-fast, .16s);
}
:is(.ho-app, .ho-modal-back) .ho-btn:hover { transform: translateY(-1px); text-decoration: none; }
:is(.ho-app, .ho-modal-back) .ho-btn:active { transform: none; }

:is(.ho-app, .ho-modal-back) .ho-btn:disabled {
cursor: default;
opacity: .45;
transform: none;
}

:is(.ho-app, .ho-modal-back) .ho-btn-main {
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
color: #fff;
box-shadow: var(--sh-glow, 0 8px 30px -8px rgba(255,47,82,.42));
}

:is(.ho-app, .ho-modal-back) .ho-btn-ghost {
background: transparent;
border-color: var(--ho-line);
color: var(--ho-mut);
}
:is(.ho-app, .ho-modal-back) .ho-btn-ghost:hover { border-color: var(--glass-hi, rgba(255,255,255,.16)); color: var(--ho-txt); }

:is(.ho-app, .ho-modal-back) .ho-btn-vote { border-color: var(--ho-line); }
:is(.ho-app, .ho-modal-back) .ho-btn-vote:hover:not(:disabled) { border-color: var(--ho-ok); color: var(--ho-ok); }

:is(.ho-app, .ho-modal-back) .ho-btn-mini {
min-height: 30px;
padding: 5px 11px;
border-color: var(--ho-line);
background: transparent;
font-size: 12px;
font-weight: 500;
color: var(--ho-mut);
}
:is(.ho-app, .ho-modal-back) .ho-btn-mini:hover { color: var(--ho-txt); border-color: var(--glass-hi, rgba(255,255,255,.16)); }
:is(.ho-app, .ho-modal-back) .ho-btn-mini.is-danger:hover { color: var(--ho-acc); border-color: var(--ho-acc); }


:is(.ho-app, .ho-modal-back) .ho-btn.is-busy { opacity: .6; cursor: progress; }




html.ho-locked {
overflow: hidden;
padding-right: var(--ho-sbw, 0px);
}


.ho-modal-back {
position: fixed;
inset: 0;
z-index: 100000;
color: var(--ho-txt);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
background: rgba(4, 5, 8, .74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ho-modal-back[hidden] { display: none; }

.ho-modal {
width: 100%;
max-width: 780px;

margin: 0 auto;
border: 1px solid var(--ho-line);
border-radius: var(--r-lg, 20px);
background: var(--surface, #14161c);
box-shadow: var(--sh-3, 0 18px 44px -14px rgba(0,0,0,.72));
}
.ho-modal-sm { max-width: 420px; }

.ho-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--ho-line);
}
.ho-modal-title { margin: 0; font-size: 17px; font-weight: 700; }

:is(.ho-app, .ho-modal-back) .ho-modal-close {
height: auto;
padding: 0;
margin: 0;
width: 32px;
line-height: 32px;
border: 0;
border-radius: var(--r-xs, 6px);
background: transparent;
color: var(--ho-mut);
font: inherit;
font-size: 26px;
cursor: pointer;
transition: color var(--t-fast, .16s), background var(--t-fast, .16s);
}
:is(.ho-app, .ho-modal-back) .ho-modal-close:hover { color: var(--ho-txt); background: var(--glass-light, rgba(255,255,255,.045)); }

.ho-form { padding: 18px; }

.ho-form-cost {
padding: 10px 13px;
margin-bottom: 16px;
border-radius: var(--r-sm, 10px);
background: var(--accent-soft, rgba(255,47,82,.14));
font-size: 12.5px;
line-height: 1.45;
}
.ho-form-cost:empty { display: none; }

.ho-fg { margin-bottom: 14px; }

.ho-lb {
display: block;
margin-bottom: 5px;
font-size: 12.5px;
font-weight: 600;
color: var(--ho-mut);
}
.ho-lb b { color: var(--ho-acc); }

:is(.ho-app, .ho-modal-back) .ho-in {
display: block;
box-sizing: border-box;
width: 100%;
height: auto;
min-height: 40px;
padding: 9px 12px;
margin: 0;
border: 1px solid var(--ho-line);
border-radius: var(--r-sm, 10px);
background: var(--bg-deep, #08090c);
color: var(--ho-txt);
font: inherit;
font-size: 13.5px;
transition: border-color var(--t-fast, .16s), box-shadow var(--t-fast, .16s);
}
:is(.ho-app, .ho-modal-back) .ho-in:focus {
outline: none;
border-color: var(--ho-acc);
box-shadow: 0 0 0 3px var(--accent-soft, rgba(255,47,82,.14));
}
:is(.ho-app, .ho-modal-back) .ho-ta { min-height: 92px; resize: vertical; line-height: 1.5; }

:is(.ho-app, .ho-modal-back) select.ho-in {
appearance: none;
-webkit-appearance: none;
padding-right: 34px;

background-image: linear-gradient(45deg, transparent 50%, var(--ho-mut) 50%),
linear-gradient(135deg, var(--ho-mut) 50%, transparent 50%);
background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}

:is(.ho-app, .ho-modal-back) .ho-file {
display: block;
width: 100%;
font-size: 12.5px;
color: var(--ho-mut);
}

.ho-help {
margin-top: 5px;
font-size: 11.5px;
line-height: 1.4;
color: var(--ho-dim);
}
.ho-help-hosts { margin: 0 0 12px; overflow-wrap: anywhere; }

.ho-fs {
padding: 14px;
margin: 0 0 16px;
border: 1px solid var(--ho-line);
border-radius: var(--ho-r);
background: var(--glass-light, rgba(255,255,255,.045));
}
.ho-fs[hidden] { display: none; }
.ho-fs legend {
padding: 0 8px;
font-size: 12px;
font-weight: 700;
color: var(--ho-mut);
text-transform: uppercase;
letter-spacing: .05em;
}

.ho-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0 14px;
}

.ho-prow { margin-bottom: 8px; }

.ho-form-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--ho-line);
}



.ho-players {
margin: 16px 0;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-radius: var(--r-md, 14px);
background: var(--glass, rgba(28,31,40,.62));
overflow: hidden;
}

.ho-ptabs {
display: flex;
gap: 2px;
padding: 8px;
overflow-x: auto;
border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.09));
scrollbar-width: none;
}
.ho-ptabs::-webkit-scrollbar { display: none; }

.ho-players .ho-ptab {
height: auto;
padding: 7px 14px;
margin: 0;
border: 0;
border-radius: var(--r-xs, 6px);
background: transparent;
color: var(--fg-muted, #a2a8b8);
font: inherit;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color var(--t-fast, .16s), background var(--t-fast, .16s);
}
.ho-players .ho-ptab:hover { color: var(--fg, #eef0f5); background: rgba(255,255,255,.05); }
.ho-players .ho-ptab.is-active {
color: #fff;
background: var(--accent, #ff2f52);
}

.ho-ppane { display: none; }
.ho-ppane.is-active { display: block; }


.ho-ppane {
position: relative;
}
.ho-ppane.is-active {
aspect-ratio: 16 / 9;
}
.ho-ppane iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}



@media (max-width: 760px) {
.ho-title { font-size: 21px; }

.ho-card { flex-direction: column; gap: 12px; }
.ho-card-poster { flex: 0 0 auto; width: 108px; }

.ho-pane-top { flex-direction: column; align-items: stretch; }
.ho-app .ho-pane-top .ho-btn { width: 100%; }

.ho-card-fields { grid-template-columns: 1fr; gap: 0; }
.ho-card-fields dt { margin-top: 6px; }

.ho-modal-back { padding: 12px 10px; }
.ho-form-foot { flex-direction: column-reverse; }
.ho-app .ho-form-foot .ho-btn { width: 100%; }
}

@media (max-width: 420px) {
.ho-rules { grid-template-columns: 1fr; }
.ho-promo { padding: 12px; }
.ho-promo-text { display: none; }
}


@media (prefers-reduced-motion: reduce) {
.ho-promo,
.ho-promo-glow,
.ho-promo-arrow,
.ho-progress-bar,
.ho-app .ho-btn { transition: none; }
.ho-promo:hover { transform: none; }
.ho-app .ho-btn:hover { transform: none; }
}


.ho-dim { color: var(--ho-dim); }
.hp-profile {
--hp-line: var(--glass-border, rgba(255,255,255,.09));
--hp-txt:  var(--fg, #eef0f5);
--hp-mut:  var(--fg-muted, #a2a8b8);
--hp-dim:  var(--fg-dim, #6f7686);
--hp-acc:  var(--accent, #ff2f52);
--hp-ok:   var(--ok, #32c17a);
position: relative;
margin-top: 18px;
padding: 20px;
border: 1px solid var(--hp-line);
border-radius: var(--r-lg, 20px);
background: var(--glass, rgba(69,69,69,.62));
color: var(--hp-txt);
overflow: hidden;
}
.hp-head {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--hp-line);
}
.hp-ava {
position: relative;
flex: 0 0 auto;
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
background: var(--glass-light, rgba(255,255,255,.045));
display: grid;
place-items: center;
}
.hp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-ava-stub { font-size: 38px; font-weight: 800; color: var(--hp-dim); }
.hp-head-main { flex: 1 1 260px; min-width: 0; }
.hp-name {
margin: 0 0 4px;
font-size: 25px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
}
.hp-group { font-size: 13px; color: var(--hp-mut); margin-bottom: 10px; }
.hp-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--hp-mut); }
.hp-stat b { color: var(--hp-txt); font-size: 15px; font-weight: 700; margin-right: 4px; }
.hp-wallet {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
border: 1px solid var(--hp-line);
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255,255,255,.045));
font-size: 13px;
white-space: nowrap;
}
.hp-wallet i { color: var(--hp-acc); }
.hp-wallet b { font-size: 17px; font-weight: 700; }
.hp-wallet span { color: var(--hp-mut); }
.hp-tabs {
position: relative;
z-index: 1;
display: flex;
gap: 8px;
margin-bottom: 18px;
overflow-x: auto;
scrollbar-width: none;
}
.hp-tabs::-webkit-scrollbar { display: none; }
.hp-profile .hp-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: auto;
padding: 9px 15px;
margin: 0;
border: 1px solid var(--hp-line);
border-radius: var(--r-pill, 999px);
background: transparent;
color: var(--hp-mut);
font: inherit;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.hp-profile .hp-tab:hover { color: var(--hp-txt); border-color: var(--glass-hi, rgba(255,255,255,.16)); }
.hp-profile .hp-tab.is-active {
color: #fff;
border-color: transparent;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
}
.hp-tab-count {
min-width: 19px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(255,255,255,.14);
font-size: 11px;
font-weight: 700;
}
.hp-pane { display: none; position: relative; z-index: 1; }
.hp-pane.is-active { display: block; }
.hp-sub-title {
margin: 20px 0 10px;
font-size: 14px;
font-weight: 700;
color: var(--hp-mut);
}
.hp-sub-title:first-child { margin-top: 0; }
.hp-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--hp-mut); }
.hp-note.is-warn { color: var(--warn, #ffb020); }
.hp-empty { color: var(--hp-dim); font-size: 13px; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hp-grid-lists { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.hp-grid-cos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hp-award {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 12px;
border: 1px solid var(--hp-line);
border-radius: var(--r-md, 14px);
background: var(--glass-light, rgba(255,255,255,.045));
opacity: .5;
}
.hp-award.is-earned { opacity: 1; border-color: rgba(50,193,122,.35); }
.hp-award-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--r-sm, 10px);
background: rgba(255,255,255,.06);
color: var(--hp-dim);
font-size: 17px;
}
.hp-award.is-earned .hp-award-ico {
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
color: #fff;
}
.hp-award-body { min-width: 0; }
.hp-award-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.hp-award-descr { font-size: 11.5px; line-height: 1.35; color: var(--hp-mut); }
.hp-bar {
margin-top: 7px;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.hp-bar span { display: block; height: 100%; background: var(--hp-acc); border-radius: 999px; }
.hp-list {
padding: 14px 12px;
border: 1px solid var(--hp-line);
border-radius: var(--r-md, 14px);
background: var(--glass-light, rgba(255,255,255,.045));
text-align: center;
}
.hp-list-n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.hp-list-t { margin-top: 3px; font-size: 12px; color: var(--hp-mut); }
.hp-cos {
padding: 12px;
border: 1px solid var(--hp-line);
border-radius: var(--r-md, 14px);
background: var(--glass-light, rgba(255,255,255,.045));
text-align: center;
}
.hp-cos.is-on { border-color: var(--hp-ok); }
.hp-cos-demo { display: grid; place-items: center; height: 64px; margin-bottom: 9px; }
.hp-cos-demo span {
display: block;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255,255,255,.12);
}
.hp-demo-b span { width: 100%; height: 46px; border-radius: var(--r-sm, 10px); }
.hp-cos-name  { font-size: 13px; font-weight: 600; }
.hp-cos-price { margin: 3px 0 8px; font-size: 12px; color: var(--hp-mut); }
.hp-cos-until { margin: 3px 0 8px; font-size: 11.5px; color: var(--hp-ok); }
.hp-profile .hp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: auto;
padding: 9px 16px;
margin: 0;
border: 1px solid var(--hp-line);
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255,255,255,.045));
color: var(--hp-txt);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.hp-profile .hp-btn:hover { transform: translateY(-1px); }
.hp-profile .hp-btn:active { transform: none; }
.hp-profile .hp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.hp-profile .hp-btn-main {
border-color: transparent;
background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
color: #fff;
}
.hp-profile .hp-btn-mini { width: 100%; padding: 7px 12px; font-size: 12px; }
.hp-fg { margin-bottom: 12px; max-width: 380px; }
.hp-profile .hp-file { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.hp-profile .hp-file::file-selector-button {
margin-right: 10px;
padding: 6px 12px;
border: 1px solid var(--hp-line);
border-radius: var(--r-pill, 999px);
background: var(--glass-light, rgba(255,255,255,.045));
color: var(--hp-txt);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.hp-lb { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; }
.hp-help { margin-top: 5px; font-size: 11.5px; color: var(--hp-dim); }
.hp-profile .hp-in {
width: 100%;
height: auto;
padding: 10px 13px;
border: 1px solid var(--hp-line);
border-radius: var(--r-sm, 10px);
background: rgba(0,0,0,.22);
color: var(--hp-txt);
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.hp-profile .hp-in:focus { outline: none; border-color: var(--hp-acc); }
.hp-msg {
position: relative;
z-index: 1;
padding: 10px 14px;
margin-bottom: 14px;
border-radius: var(--r-sm, 10px);
font-size: 13px;
}
.hp-msg.is-ok    { background: rgba(50,193,122,.12); color: var(--hp-ok); }
.hp-msg.is-error { background: rgba(255,47,82,.12);  color: var(--hp-acc); }
[class*="hp-frame-"] { position: relative; }
[class*="hp-frame-"]::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid transparent;
pointer-events: none;
}
.hp-frame-steel::after  { border-color: #9aa4b2; }
.hp-frame-gold::after   { border-color: #e8b44a; box-shadow: 0 0 14px -2px rgba(232,180,74,.65); }
.hp-frame-ember::after  { border-color: #ff6a3c; box-shadow: 0 0 14px -2px rgba(255,106,60,.65); }
.hp-frame-ice::after    { border-color: #6fd4ff; box-shadow: 0 0 14px -2px rgba(111,212,255,.6); }
.hp-frame-orchid::after { border-color: #c86bff; box-shadow: 0 0 16px -2px rgba(200,107,255,.65); }
.hp-frame-prism::after {
border: 0;
padding: 3px;
background: conic-gradient(from 0deg, #ff2f52, #ffb020, #32c17a, #6fd4ff, #c86bff, #ff2f52);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
[class*="hp-glow-"] { position: relative; border-radius: var(--r-md, 14px); }
.hp-glow-soft    { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 18px -6px rgba(255,255,255,.35); }
.hp-glow-crimson { box-shadow: 0 0 0 1px rgba(255,47,82,.45),   0 0 22px -6px rgba(255,47,82,.6); }
.hp-glow-mint    { box-shadow: 0 0 0 1px rgba(50,193,122,.45),  0 0 22px -6px rgba(50,193,122,.6); }
.hp-glow-violet  { box-shadow: 0 0 0 1px rgba(200,107,255,.45), 0 0 22px -6px rgba(200,107,255,.6); }
.hp-glow-solar   { box-shadow: 0 0 0 1px rgba(255,176,32,.5),   0 0 26px -6px rgba(255,176,32,.7); }
[class*="hp-bg-"] { position: relative; }
[class*="hp-bg-"]::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
}
.hp-bg-dusk::before   { background: linear-gradient(160deg, rgba(94,60,150,.30), transparent 62%); }
.hp-bg-aurora::before { background: radial-gradient(120% 90% at 12% 0%, rgba(50,193,122,.26), transparent 60%),
radial-gradient(100% 80% at 88% 10%, rgba(111,212,255,.22), transparent 62%); }
.hp-bg-sakura::before { background: radial-gradient(120% 90% at 85% 0%, rgba(255,140,180,.26), transparent 62%); }
.hp-bg-abyss::before  { background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 58%); }
.hp-bg-noise::before  {
opacity: .28;
background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.hp-demo-b span {
width: 100%;
height: 46px;
border-radius: var(--r-sm, 10px);
background: rgba(255,255,255,.06);
}
.user-inner { display: none; }
#userinfo .fieldtr:has(input[name="image"]),
#userinfo .fieldtr:has(input[name="del_foto"]) { display: none; }
@media (max-width: 620px) {
.hp-profile { padding: 14px; }
.hp-head { gap: 12px; }
.hp-ava { width: 68px; height: 68px; }
.hp-name { font-size: 20px; }
.hp-wallet { width: 100%; justify-content: center; }
}
.hs-skin-switch input:checked + .hs-skin-slider {
background: var(--accent, #ff2a5f) !important;
border-color: var(--accent, #ff2a5f) !important;
}
.hs-skin-slider::before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: #fff;
border-radius: 50%;
transition: transform .25s var(--e-out, ease-out);
box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.hs-skin-switch input:checked + .hs-skin-slider::before {
transform: translateX(24px);
}
.comm-wrap, #dle-comments-list { }
.comm-item {
display: flex;
gap: 14px;
float: none;
padding: 16px;
margin: 0 0 12px;
border: 1px solid var(--glass-border, rgba(255,255,255,.09));
border-bottom: 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));
font-size: 14px;
color: var(--fg, #eef0f5);
transition: border-color var(--t-fast, .16s);
}
.comm-item:hover { border-color: var(--glass-hi, rgba(255,255,255,.16)); }
.comm-item:last-child { margin-bottom: 0; }
.comm-left {
flex: 0 0 auto;
float: none;
width: 44px;
height: 44px;
margin: 0;
border-radius: 50%;
overflow: hidden;
background: var(--glass, rgba(28,31,40,.62));
}
.comm-left img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
display: block;
}
.comm-right {
flex: 1 1 auto;
float: none;
width: auto;
min-width: 0;
padding: 0;
}
.comm-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 5px 10px;
margin-bottom: 7px;
padding: 0;
}
.comm-author {
float: none;
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--fg, #eef0f5);
}
.comm-author a { color: inherit; text-decoration: none; }
.comm-author a:hover { color: var(--accent, #ff2f52); }
.comm-group {
padding: 2px 8px;
border-radius: var(--r-pill, 999px);
background: rgba(255,255,255,.07);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--fg-muted, #a2a8b8);
}
.comm-group:empty { display: none; }
.comm-date {
float: none;
margin-left: auto;
font-size: 12px;
color: var(--fg-dim, #6f7686);
white-space: nowrap;
}
.comm-text { margin: 0; min-height: 0; }
.comm-body {
font-size: 14px;
line-height: 1.6;
color: var(--fg, #eef0f5);
overflow-wrap: anywhere;
}
.comm-body a { color: var(--accent, #ff2f52); }
.comm-body img { max-width: 100%; height: auto; border-radius: var(--r-sm, 10px); }
.signature {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--glass-border, rgba(255,255,255,.09));
font-size: 12px;
line-height: 1.45;
color: var(--fg-dim, #6f7686);
}
.comm-actions {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 10px;
opacity: 0;
transition: opacity var(--t-fast, .16s);
}
.comm-item:hover .comm-actions,
.comm-item:focus-within .comm-actions { opacity: 1; }
.comm-act { font-size: 12px; color: var(--fg-dim, #6f7686); }
.comm-act:empty { display: none; }
.comm-act a { color: var(--fg-muted, #a2a8b8); text-decoration: none; }
.comm-act a:hover { color: var(--fg, #eef0f5); }
.comm-act.is-danger a:hover { color: var(--accent, #ff2f52); }
.comm-act i { margin-right: 5px; }
.comm-item + #dle-comments-form,
#dle-comments-form { margin-top: 18px; }
.last-comm-link {
margin-bottom: 8px;
font-size: 12.5px;
color: var(--fg-muted, #a2a8b8);
}
.last-comm-link a { color: var(--accent, #ff2f52); }
@media (hover: none) {
.comm-actions { opacity: 1; }
}
@media (max-width: 560px) {
.comm-item { padding: 12px; gap: 10px; }
.comm-left { width: 36px; height: 36px; }
.comm-date { margin-left: 0; width: 100%; }
.comm-body { font-size: 13.5px; }
}