/* Design: see new-design-php/docs/design-system.md + page-patterns.md */
/* ==========================================================================
   HOTPIC — global page theme (new-design)
   Loaded on every page after chrome.css. It restyles the existing Bootstrap
   markup used by the old pages (cards, buttons, forms, modals, tables, etc.)
   WITHOUT touching their PHP/JS — APIs, AJAX, pagination and uploads run
   exactly as before. Page-specific designs (index.php, feed pages) build on
   top of this.
   ========================================================================== */

:root {
    --hp-accent: var(--hp-color-accent);
    --hp-accent-deep: var(--hp-color-accent-deep);
    --hp-line: var(--hp-color-border-soft);
    --hp-line-strong: var(--hp-color-border-strong);
    --hp-surface: rgba(var(--hp-color-white-rgb), 0.035);
    --hp-surface-2: rgba(var(--hp-color-white-rgb), 0.06);
    --hp-muted: var(--hp-color-text-muted);
    --hp-soft: var(--hp-color-text-soft);
}

body {
    background-color: var(--hp-color-canvas) !important;
    color: var(--hp-color-white);
}

body .container {
    max-width: 1320px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--hp-color-white);
    letter-spacing: -0.015em;
}

a {
    color: var(--hp-color-accent-soft);
}

a:hover {
    color: var(--hp-color-white);
}

hr {
    border-color: var(--hp-line) !important;
    opacity: 1;
}

p,
li,
label,
small,
.form-text {
    color: rgba(var(--hp-color-white-rgb), 0.62);
}

/* headings used by feeds */
.title-size {
    font-size: clamp(17px, 2.2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ---------- buttons ---------- */
.btn {
    --bs-btn-border-radius: 12px;
    border-radius: 12px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.btn.rounded-pill {
    border-radius: 999px !important;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-outline-danger {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-line) !important;
    color: var(--hp-soft) !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover {
    background: var(--hp-surface-2) !important;
    border-color: var(--hp-line-strong) !important;
    color: var(--hp-color-white) !important;
}

.btn-secondary,
.btn-dark {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-line) !important;
    color: var(--hp-color-white) !important;
}

.btn-primary {
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 48%, var(--hp-color-accent-deep) 100%) !important;
    border: 0 !important;
    color: var(--hp-color-white) !important;
    box-shadow: 0 8px 20px rgba(var(--hp-color-accent-deep-rgb), 0.3);
}

.btn-danger {
    background: linear-gradient(180deg, var(--hp-color-danger-bright), var(--hp-color-danger-deep)) !important;
    border: 0 !important;
}

.btn-sm {
    padding: 0.25rem 0.7rem;
}

/* card overlay chips (heart/views/date/tags on album cards) */
.icon-background {
    background: rgba(var(--hp-color-canvas-rgb), 0.6) !important;
    border: 1px solid var(--hp-color-border-on-glass) !important;
    border-radius: 10px !important;
    padding: 3px 7px !important;
    font-size: 11px;
    line-height: 1.5;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    color: rgba(var(--hp-color-white-rgb), 0.88) !important;
}

.icon-background.btn,
.icon-background .btn {
    padding: 3px 7px !important;
}

.icon-background img {
    vertical-align: -2px;
}

/* album / model / tag cards */
.hover-border,
.shadow-sm.rounded {
    position: relative;
    border: 1px solid var(--hp-line) !important;
    border-radius: 16px !important;
    background: var(--hp-color-surface);
    box-shadow: none !important;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s ease, box-shadow 0.2s ease;
}

.hover-border:hover,
.shadow-sm.rounded:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
    box-shadow: 0 18px 40px rgba(var(--hp-color-black-rgb), 0.45) !important;
}

.hover-border img,
.shadow-sm.rounded img {
    display: block;
}

.hover-border .play-icon,
.play-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    border-radius: 999px;
    padding: 5px;
    background: rgba(var(--hp-color-canvas-rgb), 0.6);
    border: 1px solid var(--hp-color-border-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* the likes/views overlay: hover-only on desktop, always visible on touch */
.hide-data {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.hover-border:hover .hide-data,
.shadow-sm.rounded:hover .hide-data {
    opacity: 1;
}

@media (hover: none) {
    .hide-data {
        opacity: 1;
    }
}

.max {
    max-width: 100%;
}

.tag-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--hp-color-white-rgb), 0.18) transparent;
}

.tag-scroll::-webkit-scrollbar {
    height: 4px;
}

.tag-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--hp-color-white-rgb), 0.18);
    border-radius: 4px;
}

/* horizontal carousel arrows on feed pages */
.scroll-button {
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    background: rgba(var(--hp-color-canvas-rgb), 0.75) !important;
    border: 1px solid var(--hp-line-strong) !important;
    color: var(--hp-color-white) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    z-index: 3;
}

.scroll-button:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.25) !important;
}

.scroll-button .svg-icon {
    fill: var(--hp-color-accent-soft);
}

/* ---------- forms ---------- */
.form-control,
.form-select,
.form-control-lg,
.form-select-lg {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: 12px !important;
    color: var(--hp-color-white) !important;
    min-height: 46px;
    font-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-control-lg {
    min-height: 52px;
}

.form-control::placeholder {
    color: var(--hp-color-text-faint) !important;
}

.form-control:focus,
.form-select:focus {
    background: rgba(var(--hp-color-accent-rgb), 0.07) !important;
    border-color: rgba(var(--hp-color-accent-rgb), 0.75) !important;
    box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), 0.18) !important;
    color: var(--hp-color-white) !important;
}

.form-select option {
    background: var(--hp-color-surface);
    color: var(--hp-color-white);
}

.form-check-input {
    background-color: rgba(var(--hp-color-white-rgb), 0.08);
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.22);
}

.form-check-input:checked {
    background-color: var(--hp-accent);
    border-color: var(--hp-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), 0.18);
}

.form-check-label {
    color: var(--hp-soft);
}

.input-group-text {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-line) !important;
    color: var(--hp-muted) !important;
    border-radius: 12px !important;
}

/* ---------- cards ---------- */
.card {
    background: linear-gradient(180deg, rgba(var(--hp-color-white-rgb), 0.045), rgba(var(--hp-color-white-rgb), 0.018)) !important;
    border: 1px solid var(--hp-line) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    color: var(--hp-color-white) !important;
}

.card-header,
.card-footer {
    background: rgba(var(--hp-color-white-rgb), 0.03) !important;
    border-color: var(--hp-line) !important;
}

.card-body {
    color: rgba(var(--hp-color-white-rgb), 0.72);
}

/* ---------- alerts ---------- */
.alert {
    border: 1px solid var(--hp-line) !important;
    border-left: 3px solid var(--hp-accent) !important;
    border-radius: 14px !important;
    background: rgba(var(--hp-color-white-rgb), 0.045) !important;
    color: var(--hp-soft) !important;
    font-size: 13px;
}

.alert-info {
    border-left-color: var(--hp-color-accent) !important;
    background: rgba(var(--hp-color-accent-rgb), 0.08) !important;
}

.alert-warning {
    border-left-color: var(--hp-color-warning) !important;
    background: rgba(var(--hp-color-warning-rgb), 0.07) !important;
    color: var(--hp-color-warning-text) !important;
}

.alert-danger {
    border-left-color: var(--hp-color-danger) !important;
    background: rgba(var(--hp-color-danger-rgb), 0.08) !important;
    color: var(--hp-color-danger-text-soft) !important;
}

.alert-success {
    border-left-color: var(--hp-color-success) !important;
    background: rgba(var(--hp-color-success-rgb), 0.08) !important;
    color: var(--hp-color-success-text-soft) !important;
}

.alert a {
    color: var(--hp-color-accent-soft) !important;
}

.alert .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.55;
}

/* ---------- modals ---------- */
.modal-content {
    background: rgba(var(--hp-color-overlay-soft-rgb), 0.98) !important;
    border: 1px solid var(--hp-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 80px rgba(var(--hp-color-black-rgb), 0.6) !important;
    color: var(--hp-color-white) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--hp-line) !important;
}

.modal-body {
    color: rgba(var(--hp-color-white-rgb), 0.75);
}

.modal-backdrop.show {
    opacity: 0.72;
    background: var(--hp-color-ink);
}

.btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.55;
}

.btn-close:hover {
    opacity: 1;
}

/* ---------- dropdowns ---------- */
.dropdown-menu {
    background: rgba(var(--hp-color-overlay-soft-rgb), 0.98) !important;
    border: 1px solid var(--hp-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 60px rgba(var(--hp-color-black-rgb), 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    padding: 6px;
}

.dropdown-item {
    color: var(--hp-soft) !important;
    border-radius: 8px;
    font-size: 13px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--hp-color-accent-rgb), 0.14) !important;
    color: var(--hp-color-white) !important;
}

.dropdown-divider {
    border-color: var(--hp-line) !important;
}

/* ---------- tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: rgba(var(--hp-color-white-rgb), 0.75);
    --bs-table-border-color: var(--hp-line);
    color: rgba(var(--hp-color-white-rgb), 0.75);
}

.table> :not(caption)>*>* {
    background: transparent;
    border-color: var(--hp-line);
}

.table thead th {
    color: rgba(var(--hp-color-white-rgb), 0.55) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.table-hover>tbody>tr:hover>* {
    background: rgba(var(--hp-color-white-rgb), 0.04) !important;
}

/* ---------- pagination ---------- */
.pagination {
    gap: 4px;
}

.page-link {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-line) !important;
    color: var(--hp-soft) !important;
    border-radius: 10px !important;
    min-width: 38px;
    text-align: center;
}

.page-link:hover {
    background: var(--hp-surface-2) !important;
    color: var(--hp-color-white) !important;
}

.page-item.active .page-link {
    background: linear-gradient(180deg, var(--hp-color-accent), var(--hp-color-accent-deep)) !important;
    border-color: transparent !important;
    color: var(--hp-color-white) !important;
}

.page-item.disabled .page-link {
    opacity: 0.4;
}

/* ---------- nav tabs / pills ---------- */
.nav-tabs {
    border-color: var(--hp-line) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--hp-muted) !important;
    border: 0 !important;
    border-radius: 10px;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: rgba(var(--hp-color-white-rgb), 0.07) !important;
    color: var(--hp-color-white) !important;
}

/* ---------- badges ---------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 5px 9px;
    letter-spacing: 0.02em;
}

/* ---------- footer ---------- */
.footer {
    background: transparent !important;
    border-top: 1px solid var(--hp-line) !important;
    color: rgba(var(--hp-color-white-rgb), 0.45) !important;
}

.footer a {
    color: rgba(var(--hp-color-white-rgb), 0.55) !important;
    text-decoration: none;
}

.footer a:hover {
    color: var(--hp-color-white) !important;
}

/* ---------- info / static pages ---------- */
.container>h1,
.container h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.container p {
    color: rgba(var(--hp-color-white-rgb), 0.62);
    font-size: 14px;
    line-height: 1.7;
}

.container h2,
.container h3 {
    margin-top: 1.2em;
}

/* ---------- login / signup pages ---------- */
.login-container {
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-top-rgb), 0.66) 0%,
            rgba(var(--hp-color-overlay-mid-rgb), 0.76) 60%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.84) 100%) !important;
    border: 1px solid var(--hp-color-border-on-glass) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 48px rgba(var(--hp-color-black-rgb), 0.42) !important;
    -webkit-backdrop-filter: blur(28px) saturate(135%);
    backdrop-filter: blur(28px) saturate(135%);
}

.login-btn {
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 48%, var(--hp-color-accent-deep) 100%) !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--hp-color-white) !important;
    font-weight: 700 !important;
}

.social-login-btn,
.social-signup-btn {
    background: var(--hp-surface) !important;
    border: 1px solid var(--hp-line) !important;
    border-radius: 12px !important;
    color: var(--hp-color-white) !important;
}

/* ---------- misc ---------- */
.bg-dark {
    background-color: var(--hp-color-canvas) !important;
}

.border-secondary {
    border-color: var(--hp-line) !important;
}

.text-secondary {
    color: rgba(var(--hp-color-white-rgb), 0.5) !important;
}

.text-muted {
    color: rgba(var(--hp-color-white-rgb), 0.45) !important;
}

.progress {
    background: rgba(var(--hp-color-white-rgb), 0.08);
    border-radius: 999px;
}

.progress-bar {
    background: linear-gradient(90deg, var(--hp-color-accent), var(--hp-color-accent-soft));
}

/* mobile page gutters (header is fixed, chrome.css handles the offsets) */
@media screen and (max-width: 767px) {
    body .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================================================
   PAGE SHELL (injected by the redesign pass into every page)
   ========================================================================== */
.hp-page-container {
    padding-top: 14px;
    padding-bottom: 28px;
}

@media screen and (min-width: 768px) {
    .hp-page-container {
        padding-top: 22px;
        padding-bottom: 40px;
    }
}

/* feed family pages also use the feed design system */
.container.hp-feed {
    max-width: 1320px;
}

.hp-feed .fd-toolbar {
    margin: 0 0 14px;
}

.hp-feed .fd-title {
    line-height: 1.1;
}
/* ==========================================================================
   SITE FOOTER (new design)
   ========================================================================== */
.hp-site-footer {
    margin-top: 44px;
    border-top: 1px solid rgba(var(--hp-color-white-rgb), 0.08);
    background: linear-gradient(180deg, rgba(var(--hp-color-white-rgb), 0.02) 0%, transparent 70%);
}

.hp-site-footer__inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px 16px 16px;
}

.hp-site-footer__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.hp-site-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hp-site-footer__logo img {
    display: block;
    width: 132px;
    height: auto;
}

.hp-site-footer__tag {
    padding-left: 12px;
    border-left: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
    color: var(--hp-color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hp-site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 18px;
    margin-left: auto;
}

.hp-site-footer__nav a {
    color: var(--hp-color-text-soft);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s ease;
}

.hp-site-footer__nav a:hover {
    color: var(--hp-color-white);
}

.hp-site-footer__social {
    display: flex;
    gap: 8px;
}

.hp-site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hp-site-footer__social a:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    background: rgba(var(--hp-color-accent-rgb), 0.12);
}

.hp-site-footer__social img {
    width: 15px;
    height: 15px;
    opacity: 0.8;
}

.hp-site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--hp-color-white-rgb), 0.06);
    color: var(--hp-color-text-muted);
    font-size: 11.5px;
}

@media screen and (max-width: 767px) {
    .hp-site-footer {
        margin-top: 32px;
    }

    .hp-site-footer__inner {
        padding: 18px 16px 14px;
    }

    .hp-site-footer__row {
        align-items: flex-start;
        gap: 12px;
    }

    .hp-site-footer__tag {
        font-size: 11px;
    }

    .hp-site-footer__nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        gap: 2px 14px;
    }

    .hp-site-footer__nav a {
        font-size: 12px;
    }

    .hp-site-footer__bottom {
        margin-top: 14px;
        font-size: 11px;
    }
}

/* ==========================================================================
   ALBUM DETAIL (/album/) — new design
   Palette tokens only (see assets/css/palette.css).
   ========================================================================== */
.hp-album {
    padding-bottom: 8px;
}

/* ---------- hero card ---------- */
.hp-album .hp-album-head {
    position: relative;
    margin: 6px 0 18px;
    padding: 24px 18px 20px;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-2xl);
    background:
        radial-gradient(120% 140% at 50% -30%,
            rgba(var(--hp-color-accent-rgb), 0.22) 0%,
            rgba(var(--hp-color-accent-rgb), 0) 60%),
        linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.05) 0%,
            rgba(var(--hp-color-white-rgb), 0.015) 100%);
    color: var(--hp-color-text);
    text-align: center;
    overflow: hidden;
}

.hp-album-head__title h1,
.hp-album-head .display-6 {
    margin: 0;
    color: var(--hp-color-text);
    font-size: clamp(22px, 4.6vw, 34px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.025em;
}

/* description text passed through the legacy .tags wrapper */
.hp-album-head .tags {
    max-height: none;
    overflow: visible;
    color: var(--hp-color-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- tag / model / site chips ---------- */
.hp-album-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    max-height: none;
    overflow: visible;
}

.hp-album-tags .btn,
.hp-album-tags .btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.12) !important;
    border-radius: var(--hp-radius-pill) !important;
    background: rgba(var(--hp-color-white-rgb), 0.05) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-transform: capitalize;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hp-album-tags .btn img {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8;
}

.hp-album-tags .btn:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.18) !important;
    border-color: rgba(var(--hp-color-accent-rgb), 0.42) !important;
    color: var(--hp-color-white) !important;
}

/* ---------- uploader / stats meta row ---------- */
.hp-album-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    margin: 16px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid var(--hp-color-border);
    color: var(--hp-color-text-muted);
    font-size: 12.5px;
}

.hp-album-meta .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.hp-album-meta a {
    color: var(--hp-color-accent-soft);
    font-weight: 600;
}

.hp-album-meta img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 3px;
    opacity: 0.7;
    vertical-align: -3px;
}

.hp-album-meta .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10) !important;
    border-radius: var(--hp-radius-pill) !important;
    background: rgba(var(--hp-color-white-rgb), 0.04) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 11.5px !important;
}

.hp-album-meta .btn img {
    width: 14px !important;
    height: 14px !important;
}

/* ---------- action buttons ---------- */
.hp-album-actions {
    margin: 18px 0 20px !important;
}

.hp-album-actions > .d-flex,
.hp-album-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;
    gap: 8px;
}

.hp-album-tools {
    margin-top: 16px !important;
}

.hp-album-actions .btn,
.hp-i-actions .btn,
.hp-album-tools .btn,
.hp-comments .btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 12px !important;
    min-height: 40px;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: var(--hp-radius-md) !important;
    background: rgba(var(--hp-color-white-rgb), 0.05) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hp-album-actions .btn img,
.hp-i-actions .btn img,
.hp-album-tools .btn img {
    width: 17px !important;
    height: 17px !important;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.hp-album-actions .btn:hover,
.hp-i-actions .btn:hover,
.hp-album-tools .btn:hover,
.hp-comments .btn-outline-secondary:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.2) !important;
    border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
    color: var(--hp-color-white) !important;
}

.hp-album-actions .btn .fw-light {
    color: inherit !important;
}

/* ---------- media grid ---------- */
.hp-album-grid {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
}

.hp-album-grid > .fd-cell > a:not(.position-absolute) {
    display: block;
    overflow: hidden;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    background: rgba(var(--hp-color-white-rgb), 0.04);
}

.hp-album-grid img,
.hp-album-grid video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.25s var(--hp-ease);
}

.hp-album-grid > .fd-cell > a:not(.position-absolute):hover img {
    transform: scale(1.03);
}

/* play badge on video items — always dead-centre, never styled like a tile */
.hp-album-grid > .fd-cell > a.position-absolute,
.hp-album-grid > .fd-cell > span.position-absolute {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    background: transparent;
}

/* keep the poster readable: the legacy 50% black wash is too heavy */
.hp-album-grid .position-relative > .bg-dark.bg-opacity-50 {
    background-color: rgba(var(--hp-color-black-rgb), 0.28) !important;
}

.hp-album-grid .position-absolute.translate-middle img {
    width: 34px !important;
    height: 34px !important;
    opacity: 0.9;
}

/* video play badge (inline Lucide icon) — 44px glass circle, dead-centre */
.hp-album-grid > .fd-cell > a.position-absolute .hp-icon,
.hp-album-grid > .fd-cell > span.position-absolute .hp-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--hp-color-border-strong);
    border-radius: 50%;
    background: rgba(var(--hp-color-black-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    color: var(--hp-color-white);
    fill: var(--hp-color-white);
    opacity: 1;
}

/* ---------- comments ---------- */
.hp-comments {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-2xl);
    background: linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.035) 0%,
            rgba(var(--hp-color-white-rgb), 0.012) 100%);
}

.hp-comments h2 {
    margin-bottom: 14px !important;
    color: var(--hp-color-text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.hp-comments #commentsSection > .mb-4 {
    margin-bottom: 0 !important;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--hp-color-white-rgb), 0.07);
}

.hp-comments #commentsSection img.rounded-circle {
    width: 34px;
    height: 34px;
    object-fit: cover;
}

.hp-comments .media-body {
    color: var(--hp-color-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

.hp-comments #commentForm {
    margin-top: 16px;
}

.hp-comments .form-control {
    background: rgba(var(--hp-color-white-rgb), 0.05);
    border-color: var(--hp-color-border);
    color: var(--hp-color-text);
}

.hp-comments .form-control:focus {
    border-color: rgba(var(--hp-color-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), 0.16);
}

.hp-comments button[type="submit"] {
    margin-top: 4px;
    padding: 9px 18px !important;
    border: 0 !important;
    background: linear-gradient(180deg,
            var(--hp-color-accent) 0%,
            var(--hp-color-accent-mid) 48%,
            var(--hp-color-accent-deep) 100%) !important;
    color: var(--hp-color-white) !important;
    box-shadow: 0 8px 20px rgba(var(--hp-color-accent-deep-rgb), 0.3);
}

@media screen and (max-width: 767px) {
    .hp-album .hp-album-head {
        padding: 20px 14px 18px;
        border-radius: var(--hp-radius-xl);
    }

    .hp-album-actions .btn {
        padding: 8px 10px !important;
        min-height: 38px;
    }

    .hp-album-grid img,
    .hp-album-grid video {
        aspect-ratio: 1 / 1;
    }
}


/* ==========================================================================
   IMAGE DETAIL (/i/) — new design
   Palette tokens only (see assets/css/palette.css).
   ========================================================================== */
.hp-i {
    padding-bottom: 8px;
}

/* ---------- breadcrumb ---------- */
.hp-i .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 14px;
    padding: 0;
    background: none;
}

.hp-i .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hp-color-text-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.hp-i .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0;
    color: var(--hp-color-text-faint);
}

.hp-i .breadcrumb-item a {
    padding: 5px 10px;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-pill);
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text-soft);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hp-i .breadcrumb-item a:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.16);
    border-color: rgba(var(--hp-color-accent-rgb), 0.4);
    color: var(--hp-color-white);
}

.hp-i .breadcrumb-item:last-child a {
    border-color: rgba(var(--hp-color-accent-soft-rgb), 0.28);
    background: rgba(var(--hp-color-accent-rgb), 0.12);
    color: var(--hp-color-accent-soft);
}

/* ---------- media panel ---------- */
.hp-i-media {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-2xl);
    background: linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.045) 0%,
            rgba(var(--hp-color-white-rgb), 0.015) 100%);
}

.hp-i-media .show-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
}

/* legacy fixed-height wrappers must grow with the media */
.hp-i-media #td-image,
.hp-i-media .image-outer {
    height: auto !important;
}

.hp-i-media .image-outer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hp-i-media img#main-image,
.hp-i-media video#main-gif {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: var(--hp-radius-xl);
    background: var(--hp-color-canvas);
    object-fit: contain;
}

/* prev / next: glass circles instead of the default bootstrap arrows */
/* old bootstrap wrappers must not affect placement.
   .carousel-control had a transform in the legacy sheet, which made it the
   containing block for the absolute arrows — reset it so they resolve against
   .image-outer (the media box) instead. */
.hp-i-media .carousel-control,
.hp-i-media .carousel-control-prev,
.hp-i-media .carousel-control-next {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    opacity: 1;
}

/* place the two circles directly against the media edges, vertically centred */
.hp-i-media .carousel-control-prev-icon,
.hp-i-media .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    margin: 0;
}

.hp-i-media .carousel-control-prev-icon { left: 14px; }
.hp-i-media .carousel-control-next-icon { right: 14px; }

.hp-i-media .carousel-control-prev-icon,
.hp-i-media .carousel-control-next-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hp-color-border-strong);
    border-radius: 50%;
    background: rgba(var(--hp-color-canvas-rgb), 0.62);
    background-image: none !important;
    -webkit-backdrop-filter: var(--hp-glass-blur);
    backdrop-filter: var(--hp-glass-blur);
    color: var(--hp-color-white);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.9;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.hp-i-media .carousel-control-prev-icon::before,
.hp-i-media .carousel-control-next-icon::before {
    content: none;
}

/* Lucide chevrons — grid-centred, so they sit optically dead-centre */
.hp-i-media .carousel-control-prev-icon .hp-icon,
.hp-i-media .carousel-control-next-icon .hp-icon {
    width: 18px !important;
    height: 18px !important;
    display: block;
    stroke-width: 2.4;
}

.hp-i-media .carousel-control-prev-icon:hover,
.hp-i-media .carousel-control-next-icon:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.32);
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
    opacity: 1;
}

/* ---------- title ---------- */
.hp-i-title {
    max-width: 54rem;
    margin: 18px auto 4px;
    color: var(--hp-color-text);
    font-size: clamp(15px, 2.4vw, 20px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---------- actions / codes ---------- */
.hp-i-actions {
    margin: 14px 0 22px;
}

.hp-i-actions > .d-flex {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px;
}

.hp-i-codes {
    max-width: 860px;
    margin: 0 auto 24px !important;
    padding: 16px;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-2xl);
    background: linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.035) 0%,
            rgba(var(--hp-color-white-rgb), 0.012) 100%);
}

.hp-i-codes .row {
    margin-bottom: 8px;
}

.hp-i-codes .control-label,
.hp-i-codes .col-form-label {
    color: var(--hp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.hp-i-codes .form-control {
    background: rgba(var(--hp-color-white-rgb), 0.05) !important;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: var(--hp-radius-md) 0 0 var(--hp-radius-md) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 12px;
}

.hp-i-codes .btn {
    border: 1px solid var(--hp-color-border) !important;
    border-left: 0 !important;
    border-radius: 0 var(--hp-radius-md) var(--hp-radius-md) 0 !important;
    background: rgba(var(--hp-color-white-rgb), 0.06) !important;
    color: var(--hp-color-text-soft) !important;
}

.hp-i-codes .btn:hover {
    background: rgba(var(--hp-color-accent-rgb), 0.22) !important;
    color: var(--hp-color-white) !important;
}

/* ---------- related albums ---------- */
.hp-i-related {
    --bs-gutter-y: 8px;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .hp-i-media {
        padding: 6px;
        border-radius: var(--hp-radius-xl);
    }

    .hp-i-media img#main-image,
    .hp-i-media video#main-gif {
        max-height: 70vh;
        border-radius: var(--hp-radius-lg);
    }

    .hp-i-media .carousel-control-prev { left: 8px; }
    .hp-i-media .carousel-control-next { right: 8px; }

    .hp-i-media .carousel-control-prev-icon,
    .hp-i-media .carousel-control-next-icon {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .hp-i-title {
        font-size: 14px;
        margin-top: 14px;
    }
}


/* ==========================================================================
   ALBUM COMMENTS — one design for desktop and mobile
   The .comments-section-wrap is the panel itself, so the same rules apply
   inside the desktop rail and in the mobile stacked flow.
   ========================================================================== */
.comments-section-wrap {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--hp-color-border);
    border-radius: 16px;
    background: rgba(var(--hp-color-white-rgb), 0.035);
}

/* in the rail the wrapper replaces the card chrome, so the sidebar card is
   transparent and the panel renders identically to mobile */
.hp-album-side__card:has(.comments-section-wrap) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.comments-section-wrap .hp-comments {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.comments-section-wrap .hp-comments h2 {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--hp-color-text);
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}

.comments-section-wrap .commentsSection {
    display: block !important;
}

.comments-section-wrap .commentsSection > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.comments-section-wrap #commentsSection > div {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(var(--hp-color-white-rgb), 0.07);
}

.comments-section-wrap #commentsSection > div:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
}

.comments-section-wrap #commentsSection img.rounded-circle {
    width: 24px !important;
    height: 24px !important;
}

.comments-section-wrap #commentsSection h5 {
    margin: 0 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.comments-section-wrap #commentsSection small {
    color: var(--hp-color-text-dim) !important;
    font-size: 10px !important;
}

.comments-section-wrap .media-body {
    margin-left: 32px !important;
    color: var(--hp-color-text-soft);
    font-size: 11.5px !important;
    line-height: 1.45;
}

.comments-section-wrap p.text-white-50 {
    margin: 0 0 10px !important;
    color: var(--hp-color-text-dim) !important;
    font-size: 12px !important;
    line-height: 1.45;
}

.comments-section-wrap .btn {
    padding: 7px 12px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
}

.comments-section-wrap form {
    margin: 0 !important;
}

.comments-section-wrap textarea.form-control,
.comments-section-wrap input.form-control {
    padding: 8px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 11.5px;
    line-height: 1.4;
}

.comments-section-wrap input.form-control[readonly] {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    color: var(--hp-color-text-soft);
    background: rgba(var(--hp-color-white-rgb), 0.03);
    border-color: rgba(var(--hp-color-white-rgb), 0.07) !important;
    font-size: 11px;
}

.comments-section-wrap textarea.form-control {
    min-height: 68px;
    resize: vertical;
}

.comments-section-wrap .form-text {
    display: block;
    margin: 4px 0 0;
    color: var(--hp-color-text-dim) !important;
    font-size: 10px;
}

.comments-section-wrap button[type="submit"] {
    width: 100%;
    margin-top: 8px;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 55%, var(--hp-color-accent-deep) 100%) !important;
    color: var(--hp-color-white) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   ALBUM META STATS — videos / photos / views (same look for button and span)
   ========================================================================== */
.hp-album-meta__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
}

.hp-stat {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hp-color-text-soft);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.hp-stat img {
    display: block;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex-shrink: 0;
    opacity: 0.75;
}

.hp-stat__value {
    color: var(--hp-color-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.hp-stat__label {
    display: none;
    color: var(--hp-color-text-dim);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
}

/* ==========================================================================
   ALBUM DETAIL — sidebar (server-rendered, no JS layout shift)
   Desktop: two columns (media | album meta + actions + comments).
   Mobile/tablet: wrappers flatten with display:contents + order, giving the
   original stacked order: head -> actions -> media -> comments.
   ========================================================================== */
.hp-album-layout {
    display: flex;
    flex-direction: column;
}

.hp-album-side,
.hp-album-main,
.hp-album-side__card {
    display: contents;
}

.hp-album-side__label {
    display: none;
}

/* report form sits right under the action buttons on mobile (it is a direct
   child of the flattened actions card, so without an order it would land first) */
.hp-album-layout #reportForm {
    order: 3;
}

/* ==========================================================================
   FLAG ALBUM REPORT FORM — one design for desktop and mobile
   Identical panel, radio rows, fields and full-width accent Submit.
   ========================================================================== */
#reportForm.collapse:not(.show) {
    display: none !important;
}

#reportForm {
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--hp-color-border);
    border-radius: 16px;
    background: rgba(var(--hp-color-white-rgb), 0.035);
}

#reportForm > h5 {
    margin: 0 0 12px !important;
    color: var(--hp-color-accent-soft);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.2;
}

#reportForm form.reportForm {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
}

#reportForm .form-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding: 6px 0 !important;
    border-radius: 8px;
    line-height: 1.3;
    transition: background 0.15s ease;
}

#reportForm .form-check:hover {
    background: rgba(var(--hp-color-white-rgb), 0.04);
}

#reportForm .form-check-input {
    float: none !important;
    flex: 0 0 auto;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    border-color: rgba(var(--hp-color-white-rgb), 0.3) !important;
    background-color: transparent !important;
    cursor: pointer;
}

#reportForm .form-check-input:checked {
    background-color: var(--hp-color-accent) !important;
    border-color: var(--hp-color-accent) !important;
}

#reportForm .form-check-label {
    margin: 0 !important;
    color: var(--hp-color-text-soft);
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

#reportForm label[for="optional"] {
    display: block;
    margin: 12px 0 6px;
    color: var(--hp-color-text-dim);
    font-size: 12px;
}

#reportForm textarea.form-control {
    min-height: 78px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 10px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 13px;
    line-height: 1.4;
}

#reportForm .btn {
    width: 100%;
    margin: 12px 0 0 !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-mid) 55%, var(--hp-color-accent-deep) 100%) !important;
    color: var(--hp-color-white) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#reportForm .btn:hover {
    filter: brightness(1.08);
}

/* while the report form is open in the desktop rail, tuck the comments panel
   away so the taller form never forces a sidebar scrollbar */
@media screen and (min-width: 1200px) {
    .hp-album-side:has(#reportForm.show) .comments-section-wrap {
        display: none !important;
    }
}

/* mobile stacked order (DOM order is aside -> main, so order fixes it) */
.hp-album-layout > .hp-album-head,
.hp-album-layout .hp-album-head {
    order: 1;
}

.hp-album-layout .hp-album-actions {
    order: 2;
}

.hp-album-layout .hp-album-grid {
    order: 3;
}

.hp-album-layout .hp-album-tools {
    order: 4;
}

.hp-album-layout .comments-section-wrap {
    order: 5;
}

.hp-album-layout .hp-album-main > * {
    order: 10;
}

.hp-album-layout .hp-album-main > .hp-album-grid {
    order: 3;
}

.hp-album-layout .hp-album-main > .hp-album-tools {
    order: 4;
}

@media screen and (min-width: 1200px) {
    /* match preview/album-sidebar-preview.html */
    .hp-page-container.hp-album {
        max-width: 1320px !important;
    }

    .hp-album-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 22px;
        align-items: start;
    }

    /* real CSS grid (matches the approved preview: 5 columns, 10px gaps) */
    .hp-album-grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .hp-album-grid > .fd-cell {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
    }

    .hp-album-grid img,
    .hp-album-grid video {
        aspect-ratio: 1 / 1;
    }

    .hp-album-grid > .fd-cell > a:not(.position-absolute) {
        border-radius: 14px;
    }

    .hp-album-grid > .fd-cell > a.position-absolute .hp-icon,
    .hp-album-grid > .fd-cell > span.position-absolute .hp-icon {
        width: 38px !important;
        height: 38px !important;
        padding: 11px;
    }

    .hp-album-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 18px;
        max-height: calc(100vh - 36px);
        overflow: auto;
        /* scrollable but with no visible scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hp-album-side::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .hp-album-main {
        display: block;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .hp-album-side__card {
        display: block;
        padding: 16px;
        border: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
        border-radius: 18px;
        background: linear-gradient(180deg,
                rgba(var(--hp-color-overlay-top-rgb), 0.72) 0%,
                rgba(var(--hp-color-overlay-mid-rgb), 0.84) 60%,
                rgba(var(--hp-color-overlay-bottom-rgb), 0.92) 100%);
        box-shadow: 0 18px 48px rgba(var(--hp-color-black-rgb), 0.42);
        -webkit-backdrop-filter: blur(28px) saturate(135%);
        backdrop-filter: blur(28px) saturate(135%);
    }

    .hp-album-side__label {
        display: block;
        margin: 0 0 10px;
        color: var(--hp-color-accent-soft);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    /* compact the moved album pieces inside the narrow column */
    .hp-album-side .hp-album-head {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
    }

    .hp-album-side .hp-album-head__title h1 {
        font-size: 16px !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    .hp-album-side .hp-album-tags {
        margin: 10px 0 0 !important;
        justify-content: flex-start !important;
        gap: 5px !important;
    }

    .hp-album-side .hp-album-tags .btn {
        padding: 4px 8px !important;
        font-size: 10.5px !important;
    }

    .hp-album-side .hp-album-meta {
        margin: 12px 0 0 !important;
        padding-top: 12px !important;
        justify-content: flex-start !important;
        gap: 8px 12px !important;
        font-size: 11.5px !important;
    }

    .hp-album-side .hp-album-meta > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .hp-album-side .hp-album-meta__who {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--hp-color-text-dim);
        font-size: 10.5px;
        line-height: 1.3;
    }

    .hp-album-side .hp-album-meta__who img {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50%;
        opacity: 0.8;
        flex-shrink: 0;
    }

    .hp-album-side .hp-album-meta__who a {
        color: var(--hp-color-accent-soft);
        font-weight: 600;
        text-decoration: none;
    }

    .hp-album-side .hp-album-meta__stats {
        gap: 0 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hp-album-side .hp-album-meta__stats .hp-stat {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 4px;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        color: var(--hp-color-text-soft) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        cursor: default;
    }

    .hp-album-side .hp-album-meta__stats button.hp-stat {
        cursor: pointer;
    }

    .hp-album-side .hp-album-meta__stats button.hp-stat:hover {
        color: var(--hp-color-accent-soft) !important;
    }

    .hp-album-side .hp-album-meta__stats .hp-stat + .hp-stat {
        position: relative;
        padding-left: 10px !important;
    }

    .hp-album-side .hp-album-meta__stats .hp-stat + .hp-stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 1px;
        height: 10px;
        transform: translateY(-50%);
        background: rgba(var(--hp-color-white-rgb), 0.14);
    }

    .hp-album-side .hp-album-meta__stats .hp-stat img {
        width: 14px !important;
        height: 14px !important;
        opacity: 0.7;
    }

    .hp-album-side .hp-album-meta__stats .hp-stat__value {
        color: var(--hp-color-text) !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }

    .hp-album-side .hp-album-meta__stats .hp-stat__label {
        display: inline !important;
        color: var(--hp-color-text-dim) !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
    }

    /* ---------- Actions: one row, like is the wide primary ---------- */
    .hp-album-side .hp-album-actions.row,
    .hp-album-side .hp-album-actions {
        margin: 0 !important;
    }

    /* the toast host is fixed-position page chrome, not part of the card */
    /* toast container lives inside the actions card markup but toasts are fixed-position: keep it visible */
.hp-album-side__card--actions > .toast-container {
    display: flex !important;
}

    .hp-album-side .hp-album-actions > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 6px !important;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    .hp-album-side .hp-album-actions > div > div {
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* like button gets ~45% of the row */
    /* desktop: the like tile fills the remaining width (icon tiles stay 44px) */
    .hp-album-side .hp-album-actions > div > div:has(.options) {
        flex: 1 1 0;
    }

    /* invisible/removed actions must not take a slot */
    .hp-album-side .hp-album-actions > div > div:not(:has(*)),
    .hp-album-side .hp-album-actions > div > div:has(.d-sm-none) {
        display: none !important;
    }

    .hp-album-side .hp-album-actions .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border: 1px solid rgba(var(--hp-color-white-rgb), 0.09) !important;
        border-radius: 10px !important;
        background: rgba(var(--hp-color-white-rgb), 0.04) !important;
        color: var(--hp-color-text-soft) !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.1;
        overflow: hidden;
        white-space: nowrap;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .hp-album-side .hp-album-actions .btn img {
        width: 15px !important;
        height: 15px !important;
        margin: 0 !important;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .hp-album-side .hp-album-actions .btn > span {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-transform: capitalize;
    }

    .hp-album-side .hp-album-actions .btn:hover {
        border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
        background: rgba(var(--hp-color-accent-rgb), 0.14) !important;
        color: var(--hp-color-white) !important;
    }

    /* primary like tile */
    .hp-album-side .hp-album-actions .btn.options {
        color: var(--hp-color-text) !important;
        border-color: rgba(var(--hp-color-accent-rgb), 0.35) !important;
        background: rgba(var(--hp-color-accent-rgb), 0.10) !important;
    }

    .hp-album-side .hp-album-actions .btn.options:hover {
        background: rgba(var(--hp-color-accent-rgb), 0.20) !important;
    }

    /* the Comments section sits right below in the same rail: drop the shortcut */
    .hp-album-side .hp-album-actions > div > div:has(a[href="#commentsSection"]) {
        display: none !important;
    }
}


/* ==========================================================================
   ALBUM STATS — mobile parity
   The photo/video counts are <button class="btn ..."> while views is a <span>.
   Strip the Bootstrap button chrome so all three render identically outside
   the desktop rail (the rail has its own explicit styling).
   ========================================================================== */
.hp-album-meta__stats .hp-stat,
.hp-album-meta__stats .hp-stat.btn,
.hp-album-meta__stats .hp-stat.btn.btn-outline-secondary {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    vertical-align: middle;
    text-transform: none;
}

.hp-album-meta__stats .hp-stat.btn:hover,
.hp-album-meta__stats .hp-stat.btn:focus,
.hp-album-meta__stats .hp-stat.btn:active,
.hp-album-meta__stats .hp-stat.btn:focus-visible {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--hp-color-text) !important;
    outline: none !important;
}

.hp-album-meta__stats .hp-stat.btn img {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}


/* ==========================================================================
   ALBUM ICON SIZING (inline Lucide SVG — single icon system)
   ========================================================================== */
.hp-album-tags .btn .hp-icon {
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px;
    flex-shrink: 0;
}

.hp-album-meta__who .hp-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    opacity: 0.85;
}

.hp-album-meta__stats .hp-icon,
.hp-stat .hp-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    opacity: 0.75;
}

.hp-album-actions .hp-icon {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    opacity: 0.9;
}

.hp-album-actions .hp-icon.is-liked,
.fd-card__action .hp-icon.is-liked {
    color: var(--hp-color-accent-soft);
    fill: currentColor;
}

/* button labels were .fw-light (300) outside the rail — normalise the weight */
.hp-album-actions .fw-light {
    font-weight: 600 !important;
}

.comments-section-wrap .btn .hp-icon {
    width: 14px !important;
    height: 14px !important;
}

.hp-album-tools .btn .hp-icon,
.hp-album-tools .hp-icon {
    width: 16px !important;
    height: 16px !important;
}

.hp-play-glyph {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor;
    stroke: none;
    color: #fff;
}

.fd-card__badge .hp-icon {
    width: 11px !important;
    height: 11px !important;
    margin-right: 2px;
    vertical-align: -1px;
}

.fd-card__action .hp-icon {
    width: 14px !important;
    height: 14px !important;
    vertical-align: -2px;
}

.fd-card__meta .hp-icon {
    width: 12px !important;
    height: 12px !important;
    margin-right: 2px;
    vertical-align: -1px;
}

.fd-card__tag .hp-icon {
    width: 11px !important;
    height: 11px !important;
    margin-right: 2px;
    vertical-align: -1px;
}

.icon-background .hp-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    opacity: 0.9;
}


/* ==========================================================================
   ALBUM TEXT TOKENS — one token per role on both breakpoints
   ========================================================================== */
.hp-album-meta__who {
    color: var(--hp-color-text-muted) !important;
}

.hp-album-meta__who a {
    color: var(--hp-color-accent-soft) !important;
    font-weight: 600 !important;
    text-decoration: none;
}

/* the like tile reads as the primary action in both layouts */
.hp-album-actions .options,
.hp-album-actions .options .fw-light {
    color: var(--hp-color-text) !important;
}

/* shared secondary label weight for every action button */
.hp-album-actions .btn .fw-light {
    font-weight: 600 !important;
}


/* ==========================================================================
   ICON ↔ LABEL SPACING — one rule set (the flex gap already spaces them, so
   icon margins must be zero or the gap doubles up)
   ========================================================================== */
.hp-album-tags .btn {
    gap: 3px !important;
}

.hp-album-tags .btn .hp-icon {
    margin-right: 0 !important;
}

.hp-album-actions .btn {
    gap: 4px !important;
}

.hp-album-actions .btn .hp-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.hp-album-meta__who {
    gap: 5px !important;
}

.hp-album-meta__who .hp-icon {
    margin-right: 0 !important;
}

.comments-section-wrap .btn,
.hp-album-tools .btn {
    gap: 5px !important;
}

.comments-section-wrap .btn .hp-icon,
.hp-album-tools .btn .hp-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.fd-card__tag,
.fd-card__badge,
.fd-card__meta a,
.fd-card__meta span {
    gap: 3px !important;
}

.fd-card__tag .hp-icon,
.fd-card__badge .hp-icon,
.fd-card__meta .hp-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.hp-album-meta__stats .hp-stat {
    gap: 4px !important;
}


/* ==========================================================================
   HERO → SECTION SPACING (tag / model / site pages)
   The tag hero is followed by a <script> before the first section, so use the
   general sibling combinator; every section head then shares the rhythm.
   ========================================================================== */
.fd-tag-hero ~ .fd-section-head {
    margin-top: 28px !important;
}

@media screen and (max-width: 767px) {
    .fd-tag-hero ~ .fd-section-head {
        margin-top: 22px !important;
    }
}


/* ==========================================================================
   IMAGE PAGE (/i/) — same rail as the album page.
   Desktop: media column + sticky rail.
   Mobile:  the SAME rail cards stack under the image (no flattening).
   ========================================================================== */
.hp-i-layout {
    display: flex;
    flex-direction: column;
}

.hp-i-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 2;
}

.hp-i-side__card {
    display: block;
    padding: 16px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-top-rgb), 0.72) 0%,
            rgba(var(--hp-color-overlay-mid-rgb), 0.84) 60%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.92) 100%);
    box-shadow: 0 18px 48px rgba(var(--hp-color-black-rgb), 0.42);
    -webkit-backdrop-filter: blur(28px) saturate(135%);
    backdrop-filter: blur(28px) saturate(135%);
}

.hp-i-side__label {
    display: none;
}

/* title + meta (same typography on desktop and mobile) */
.hp-i-layout .hp-i-title {
    margin: 0 0 10px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    text-align: left !important;
}

.hp-i-layout .hp-i-title span {
    display: block;
}

.hp-i-layout .hp-i-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--hp-color-white-rgb), 0.09);
}

.hp-i-layout .hp-i-meta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hp-color-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-i-layout .hp-i-meta a:hover {
    color: var(--hp-color-accent-soft);
}

.hp-i-layout .hp-i-meta .hp-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    opacity: 0.8;
}

/* action tiles — identical in both layouts */
.hp-i-layout .container-top {
    margin: 0 !important;
}

.hp-i-layout .hp-i-actions {
    margin: 0 !important;
}

.hp-i-layout .hp-i-actions > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.hp-i-layout .hp-i-actions .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.09) !important;
    border-radius: 10px !important;
    background: rgba(var(--hp-color-white-rgb), 0.04) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hp-i-layout .hp-i-actions .btn .hp-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    opacity: 0.9;
}

.hp-i-layout .hp-i-actions .btn span {
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

.hp-i-layout .hp-i-actions .btn:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
    background: rgba(var(--hp-color-accent-rgb), 0.14) !important;
    color: var(--hp-color-white) !important;
}

/* mobile stacking order: image first, then the rail cards, then extras */
.hp-i-layout > .hp-i-media {
    order: 1;
}

.hp-i-layout > .fd-section-head {
    order: 4;
}

.hp-i-layout > .hp-i-related {
    order: 5;
}

.hp-i-layout > .row {
    order: 6;
}

@media screen and (min-width: 1200px) {
    .hp-i-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 22px;
        align-items: start;
    }

    .hp-i-side {
        order: 0;
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: 18px;
        max-height: calc(100vh - 36px);
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hp-i-side::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .hp-i-layout > .hp-i-media {
        grid-column: 1;
        grid-row: 1;
        margin: 0 !important;
    }

    .hp-i-layout > .fd-section-head {
        grid-column: 1;
        grid-row: 3;
        margin-top: 28px !important;
    }

    .hp-i-layout > .hp-i-related {
        grid-column: 1;
        grid-row: 4;
    }

    .hp-i-layout > .row {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   IMAGE PAGE — in-rail panels (image codes, keybindings)
   Same language as the album report panel: caps label, divider, fields.
   ========================================================================== */
/* panels use the same bordered panel design as the album Flag Album /
   Gallery Codes panels */
.hp-i-panel {
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--hp-color-border) !important;
    border-radius: 16px !important;
    background: rgba(var(--hp-color-white-rgb), 0.035) !important;
}

#sharecode[hidden],
#shortcutsPanel[hidden],
#linksForm[hidden],
.hp-i-layout .hp-i-panel[hidden],
.hp-album-side .hp-i-panel[hidden] {
    display: none !important;
}

.hp-i-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
}

.hp-i-panel__label {
    color: var(--hp-color-accent-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hp-i-panel__close {
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--hp-color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.hp-i-panel__close:hover {
    color: var(--hp-color-white);
}

.hp-i-field {
    margin: 0 0 10px;
}

.hp-i-field:last-child {
    margin-bottom: 0;
}

.hp-i-field__label {
    display: block;
    margin: 0 0 5px;
    color: var(--hp-color-text-dim);
    font-size: 10.5px;
}

.hp-i-field__row {
    display: flex;
    gap: 6px;
}

.hp-i-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 11px;
    text-overflow: ellipsis;
}

.hp-i-input:focus {
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
}

.hp-i-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text-soft);
    cursor: pointer;
}

.hp-i-copy .hp-icon {
    width: 15px !important;
    height: 15px !important;
}

.hp-i-copy:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    background: rgba(var(--hp-color-accent-rgb), 0.14);
    color: var(--hp-color-white);
}

.hp-i-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--hp-color-white-rgb), 0.06);
    color: var(--hp-color-text-soft);
    font-size: 11px;
}

.hp-i-key:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hp-i-key__keys {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.hp-i-key kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.14);
    border-radius: 6px;
    background: rgba(var(--hp-color-white-rgb), 0.06);
    color: var(--hp-color-white);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
}

.hp-i-key__action {
    color: var(--hp-color-text-muted);
    text-align: right;
}


.hp-i-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 6px 30px 6px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background-color: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 11px;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.hp-i-select:focus {
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
}

.hp-i-textarea {
    display: block;
    width: 100%;
    min-height: 74px;
    padding: 8px 10px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 9px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    line-height: 1.45;
    resize: vertical;
}

.hp-i-textarea:focus {
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
}


/* secondary action tiles are icon-only (no clipped labels) */
.hp-album-side .hp-album-actions .btn:not(.options) .fw-light,
.hp-album-side .hp-album-actions .btn:not(.options) .fav-btn-label {
    display: none !important;
}

.hp-album-side .hp-album-actions .btn:not(.options) {
    padding: 0 !important;
}

.hp-album-side .hp-album-actions .btn:not(.options) .hp-icon {
    margin: 0 !important;
}


/* ==========================================================================
   ALBUM ACTIONS ROW — same tile language on mobile and desktop
   (icons only for secondary actions; like keeps its count)
   ========================================================================== */
.hp-album-actions {
    margin: 0 !important;
}

.hp-album-actions > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 6px !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
}

.hp-album-actions > div > div {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.hp-album-actions > div > div:has(.options) {
    flex: 1 1 auto;
}

.hp-album-actions > div > div:not(:has(*)) {
    display: none !important;
}

.hp-album-actions .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.09) !important;
    border-radius: 10px !important;
    background: rgba(var(--hp-color-white-rgb), 0.04) !important;
    color: var(--hp-color-text-soft) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hp-album-actions .btn .hp-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0;
    opacity: 0.9;
}

.hp-album-actions .btn:not(.options) {
    width: 44px !important;
    min-width: 44px;
    padding: 0 !important;
}

.hp-album-actions .btn:not(.options) .fw-light,
.hp-album-actions .btn:not(.options) .fav-btn-label {
    display: none !important;
}

.hp-album-actions .btn.options {
    color: var(--hp-color-text) !important;
    border-color: rgba(var(--hp-color-accent-rgb), 0.35) !important;
    background: rgba(var(--hp-color-accent-rgb), 0.10) !important;
}

.hp-album-actions .btn:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45) !important;
    background: rgba(var(--hp-color-accent-rgb), 0.14) !important;
    color: var(--hp-color-white) !important;
}


/* mobile album flow: breathing room around the media grid */
@media screen and (max-width: 1199px) {
    .hp-album-layout .hp-album-grid {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* 28px rhythm between the comments card and the related section */
    .hp-album-layout .comments-section-wrap {
        margin-bottom: 0 !important;
    }

    .hp-album-layout .fd-section-head {
        margin-top: 28px !important;
    }
}


/* ==========================================================================
   GALLERY CODES PANEL — same bordered panel as the Flag Album form
   ========================================================================== */
/* mobile: open right under the action buttons (same slot as the report form) */
.hp-album-layout #linksForm {
    order: 3;
}

#linksForm.hp-i-panel {
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid var(--hp-color-border) !important;
    border-top: 1px solid var(--hp-color-border) !important;
    border-radius: 16px !important;
    background: rgba(var(--hp-color-white-rgb), 0.035) !important;
}

#linksForm .hp-i-panel__head {
    margin: 0 0 12px;
}

#linksForm .hp-i-panel__label {
    font-size: 11px;
    font-weight: 700;
}

#linksForm .hp-i-field {
    margin: 0 0 10px;
}


/* ==========================================================================
   ALBUM META ORDER — stats first, uploader line second (both breakpoints)
   ========================================================================== */
.hp-album-meta {
    display: flex !important;
    flex-wrap: wrap;
}

.hp-album-meta__stats {
    order: 1;
}

.hp-album-meta__who {
    order: 2;
}


/* ==========================================================================
   IMAGE PAGE — action buttons: four tiles on a single line (all breakpoints)
   ========================================================================== */
.hp-i-layout .hp-i-actions > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.hp-i-layout .hp-i-actions > div > .btn {
    flex: 1 1 0 !important;
    min-width: 0;
    flex-direction: column;
    gap: 3px !important;
    min-height: 52px !important;
    padding: 7px 4px !important;
}

.hp-i-layout .hp-i-actions > div > .btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px !important;
    line-height: 1.15;
}


/* ==========================================================================
   PROFILE HERO (/u/) — cover banner + overlapping avatar
   ========================================================================== */
.fd-profile-hero {
    position: relative;
    margin: 8px 0 18px;
    border: 1px solid var(--hp-color-border);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-top-rgb), 0.72) 0%,
            rgba(var(--hp-color-overlay-mid-rgb), 0.84) 60%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.92) 100%);
    box-shadow: 0 18px 48px rgba(var(--hp-color-black-rgb), 0.42);
}

.fd-profile-hero__banner {
    position: relative;
    height: 172px;
    background:
        radial-gradient(120% 190% at 8% 130%, rgba(var(--hp-color-accent-rgb), 0.55) 0%, rgba(var(--hp-color-accent-rgb), 0) 60%),
        radial-gradient(90% 170% at 55% 140%, rgba(var(--hp-color-accent-mid-rgb), 0.55) 0%, rgba(var(--hp-color-accent-mid-rgb), 0) 62%),
        radial-gradient(80% 160% at 92% 135%, rgba(var(--hp-color-accent-soft-rgb, 255, 143, 163), 0.35) 0%, rgba(255, 143, 163, 0) 58%),
        linear-gradient(180deg, #1a0710 0%, #2a0a18 55%, #12060c 100%);
    border-bottom: 1px solid rgba(var(--hp-color-white-rgb), 0.06);
}

/* soft wave highlights */
.fd-profile-hero__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 120% at 30% 108%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(48% 110% at 72% 106%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.fd-profile-hero__share {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.16);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.45);
    color: var(--hp-color-white);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.fd-profile-hero__share .hp-icon {
    width: 15px !important;
    height: 15px !important;
}

.fd-profile-hero__share:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.55);
    background: rgba(var(--hp-color-accent-rgb), 0.22);
}

.fd-profile-hero__body {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: -64px;
    padding: 0 24px 22px;
}

.fd-profile-hero__avatar {
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #0f0f14;
    box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), 0.55), 0 16px 36px rgba(0, 0, 0, 0.55);
    background: #141418;
}

.fd-profile-hero__info {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 72px;
}

.fd-profile-hero__name {
    margin: 0;
    color: var(--hp-color-white);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fd-profile-hero__verified {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fd-profile-hero__handle {
    margin: 4px 0 0;
    color: var(--hp-color-text-muted);
    font-size: 13px;
}

.fd-profile-hero__bio {
    margin: 10px 0 0;
    max-width: 560px;
    color: var(--hp-color-text-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

.fd-profile-hero__joined {
    margin: 10px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hp-color-text-muted);
    font-size: 12px;
}

.fd-profile-hero__joined .hp-icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8;
}

.fd-profile-hero__right {
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding-top: 72px;
}

.fd-profile-hero__stats {
    display: flex;
    align-items: center;
    gap: 18px;
}

.fd-profile-hero__stat {
    text-align: center;
    min-width: 64px;
}

.fd-profile-hero__stat + .fd-profile-hero__stat {
    padding-left: 18px;
    border-left: 1px solid rgba(var(--hp-color-white-rgb), 0.14);
}

.fd-profile-hero__stat b {
    display: block;
    color: var(--hp-color-white);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.fd-profile-hero__stat span {
    display: block;
    margin-top: 4px;
    color: var(--hp-color-text-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fd-profile-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.fd-profile-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 10px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
}

.fd-profile-hero__btn .hp-icon {
    width: 15px !important;
    height: 15px !important;
}

.fd-profile-hero__btn:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    background: rgba(var(--hp-color-accent-rgb), 0.14);
    color: var(--hp-color-white);
}

.fd-profile-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 20px;
}

.fd-profile-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hp-color-accent-soft);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.fd-profile-hero__link .hp-icon {
    width: 14px !important;
    height: 14px !important;
}

.fd-profile-hero__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    background: rgba(var(--hp-color-white-rgb), 0.05);
}

.fd-profile-hero__chip:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.45);
    background: rgba(var(--hp-color-accent-rgb), 0.16);
}

@media screen and (max-width: 767px) {
    .fd-profile-hero {
        border-radius: 18px;
    }

    .fd-profile-hero__banner {
        height: 118px;
    }

    .fd-profile-hero__share {
        top: 10px;
        right: 10px;
        padding: 7px 11px;
        font-size: 11px;
    }

    .fd-profile-hero__body {
        flex-wrap: wrap;
        margin-top: -46px;
        gap: 12px;
        padding: 0 16px 18px;
    }

    .fd-profile-hero__avatar {
        width: 92px;
        height: 92px;
    }

    .fd-profile-hero__info {
        flex: 1 1 150px;
        padding-top: 54px;
    }

    .fd-profile-hero__name {
        font-size: 20px;
    }

    .fd-profile-hero__right {
        flex: 1 1 100%;
        align-items: flex-start;
        padding-top: 4px;
        gap: 10px;
    }

    .fd-profile-hero__stats {
        gap: 14px;
    }

    .fd-profile-hero__stat + .fd-profile-hero__stat {
        padding-left: 14px;
    }

    .fd-profile-hero__actions {
        justify-content: flex-start;
    }

    .fd-profile-hero__meta {
        padding: 0 16px 16px;
    }
}

/* ==========================================================================
   PROFILE CONTENT — section heads (albums / favorites)
   ========================================================================== */
.fd-section-head__icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px;
    vertical-align: -3px;
    color: var(--hp-color-accent-soft);
}

.fd-section-head__count {
    flex-shrink: 0;
    color: var(--hp-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .fd-section-head__count {
        font-size: 11px;
    }
}


/* profile content container (no bootstrap tab classes needed) */
.profile-content {
    margin-top: 0;
    padding-top: 12px;
}

.profile-pane[hidden] {
    display: none !important;
}


/* ==========================================================================
   AUTH PAGES (/login/ /signup/ /forgetpassword/) — shared centered layout
   ========================================================================== */
.hp-auth {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 64px;
}

.hp-auth__card {
    width: 100%;
    max-width: 440px;
    padding: 30px 28px 26px;
    border: 1px solid var(--hp-color-border);
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(var(--hp-color-accent-rgb), 0.16) 0%, rgba(var(--hp-color-accent-rgb), 0) 60%),
        rgba(var(--hp-color-white-rgb), 0.03);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.hp-auth__title {
    margin: 0 0 6px;
    color: var(--hp-color-white);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hp-auth__sub {
    margin: 0 0 22px;
    color: var(--hp-color-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.hp-auth__alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.4;
}

.hp-auth__alert--error {
    border: 1px solid rgba(255, 84, 112, 0.35);
    background: rgba(255, 84, 112, 0.12);
    color: #ff9cae;
}

.hp-auth__alert--ok {
    border: 1px solid rgba(64, 214, 140, 0.35);
    background: rgba(64, 214, 140, 0.12);
    color: #7fe6b0;
}

.hp-auth__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
    border-radius: 11px;
    background: rgba(var(--hp-color-white-rgb), 0.06);
    color: var(--hp-color-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.hp-auth__social:hover {
    border-color: rgba(var(--hp-color-accent-rgb), 0.5);
    background: rgba(var(--hp-color-accent-rgb), 0.14);
}

.hp-auth__social img {
    width: 18px;
    height: 18px;
    display: block;
}

.hp-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--hp-color-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hp-auth__divider::before,
.hp-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(var(--hp-color-white-rgb), 0.10);
}

.hp-auth__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-field__label {
    color: var(--hp-color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.hp-field__input {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 10px;
    background: rgba(var(--hp-color-white-rgb), 0.04);
    color: var(--hp-color-text);
    font-size: 13.5px;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.hp-field__input::placeholder {
    color: rgba(var(--hp-color-white-rgb), 0.32);
}

.hp-field__input:focus {
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.6);
    background: rgba(var(--hp-color-white-rgb), 0.06);
}

.hp-auth__check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--hp-color-text-soft);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}

.hp-auth__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--hp-color-accent);
    cursor: pointer;
}

.hp-auth__submit {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 11px 16px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--hp-color-accent) 0%, rgba(var(--hp-color-accent-rgb), 0.72) 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.12s ease;
}

.hp-auth__submit:hover {
    filter: brightness(1.12);
}

.hp-auth__submit:active {
    transform: translateY(1px);
}

.hp-auth__submit:disabled {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

.hp-auth__links {
    margin-top: 14px;
    text-align: right;
}

.hp-auth__links a,
.hp-auth__alt a,
.hp-auth__terms a {
    color: var(--hp-color-accent-soft);
    font-weight: 600;
    text-decoration: none;
}

.hp-auth__links a:hover,
.hp-auth__alt a:hover,
.hp-auth__terms a:hover {
    color: var(--hp-color-white);
}

.hp-auth__links a {
    font-size: 12.5px;
}

.hp-auth__alt {
    margin: 14px 0 0;
    color: var(--hp-color-text-muted);
    font-size: 12.5px;
    text-align: center;
}

.hp-auth__terms {
    margin: 12px 0 0;
    color: var(--hp-color-text-dim, #b0b0b0);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .hp-auth {
        padding: 26px 14px 40px;
        align-items: flex-start;
    }

    .hp-auth__card {
        padding: 22px 18px 20px;
        border-radius: 18px;
    }

    .hp-auth__title {
        font-size: 22px;
    }
}
/* ==========================================================================
   FILTER DROPDOWN — one shared component (/videos tiktok + nsfw feeds)
   Compact glass pill trigger + trigger-width glass menu with centred labels.
   ========================================================================== */
.filter-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-top-rgb), 0.66) 0%,
            rgba(var(--hp-color-overlay-mid-rgb), 0.76) 60%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.84) 100%) !important;
    border: 1px solid var(--hp-color-border-on-glass) !important;
    -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
    backdrop-filter: blur(28px) saturate(135%) !important;
    box-shadow:
        inset 0 1px 0 rgba(var(--hp-color-white-rgb), 0.08),
        0 8px 20px rgba(var(--hp-color-black-rgb), 0.25) !important;
    color: var(--hp-color-white) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.filter-btn:hover,
.filter-btn:focus {
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-strong-rgb), 0.88) 0%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.94) 100%) !important;
    border-color: rgba(var(--hp-color-white-rgb), 0.24) !important;
    color: var(--hp-color-white) !important;
}

.filter-btn .hp-icon {
    width: 16px;
    height: 16px;
}

.filter-btn .menu-text {
    font-size: 13px;
    font-weight: 600;
}

.filter-btn::after {
    margin-left: 6px;
    border-top-color: rgba(var(--hp-color-white-rgb), 0.7);
}

.dropdown-menu.simple-menu.fd-menu {
    min-width: 0 !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    margin-top: 0 !important;
    padding: 5px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-overlay-top-rgb), 0.78) 0%,
            rgba(var(--hp-color-overlay-mid-rgb), 0.88) 60%,
            rgba(var(--hp-color-overlay-bottom-rgb), 0.94) 100%) !important;
    border: 1px solid var(--hp-color-border-on-glass) !important;
    -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
    backdrop-filter: blur(28px) saturate(135%) !important;
    box-shadow:
        0 18px 48px rgba(var(--hp-color-black-rgb), 0.45),
        inset 0 1px 0 rgba(var(--hp-color-white-rgb), 0.06) !important;
}

.dropdown-menu.simple-menu.fd-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center !important;
    text-align: center !important;
    height: 34px !important;
    min-height: 34px;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(var(--hp-color-white-rgb), 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

/* kill the old bullet dot (videos.css) and the arrow (feed.css) */
.dropdown-menu.simple-menu.fd-menu .dropdown-item::before,
.dropdown-menu.simple-menu.fd-menu .dropdown-item::after {
    content: none !important;
}

.dropdown-menu.simple-menu.fd-menu .dropdown-item:hover,
.dropdown-menu.simple-menu.fd-menu .dropdown-item:focus {
    background: linear-gradient(180deg,
            rgba(var(--hp-color-accent-rgb), 0.26) 0%,
            rgba(var(--hp-color-accent-mid-rgb), 0.16) 100%) !important;
    color: var(--hp-color-white) !important;
    box-shadow: inset 0 1px 0 var(--hp-color-border-on-glass);
}

.dropdown-menu.simple-menu.fd-menu .fd-menu__head {
    display: none;
}
/* ==========================================================================
   MODAL CLOSE — .hp-modal-close (used by the nsfw sort/filter modals)
   The class only had layout tweaks; without appearance rules the browser drew
   a default white button. Circular glass close, matching the nav/pill language.
   ========================================================================== */
.hp-modal-close {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.14);
    border-radius: 50%;
    background: rgba(var(--hp-color-white-rgb), 0.06);
    color: rgba(var(--hp-color-white-rgb), 0.78);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hp-modal-close:hover,
.hp-modal-close:focus-visible {
    background: rgba(var(--hp-color-accent-rgb), 0.2);
    border-color: rgba(var(--hp-color-accent-rgb), 0.42);
    color: var(--hp-color-white);
}

.hp-modal-close:active {
    transform: scale(0.94);
}
/* ==========================================================================
   Site footer: match the solid elevated header — no translucent gradient
   ========================================================================== */
.hp-site-footer {
    background: rgb(var(--hp-color-surface-2-rgb)) !important;
    border-top: 1px solid rgba(var(--hp-color-white-rgb), 0.07) !important;
    box-shadow: 0 -10px 28px rgba(var(--hp-color-black-rgb), 0.45) !important;
}

.hp-site-footer__logo img {
    opacity: 0.9;
}
/* footer bottom: copyright line + tagline line (long right-hand text removed) */
.hp-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.hp-site-footer__tagline {
    color: var(--hp-color-text-muted);
    font-size: 11.5px;
}
/* footer: copyright + tagline sit next to the logo */
.hp-site-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
    border-left: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
}

.hp-site-footer__copyright {
    color: var(--hp-color-text-soft);
    font-size: 12px;
    white-space: nowrap;
}

.hp-site-footer__meta .hp-site-footer__tagline {
    font-size: 11px;
}
/* ==========================================================================
   INFO / STATIC PAGES — about, faq, terms, privacy, guidelines, contact
   (replaces the retired assets/css/info-pages.css)
   ========================================================================== */
.hp-info-page {
    max-width: 1320px;
    padding-top: 28px;
    padding-bottom: 64px;
}

.hp-info-page .page-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--hp-color-white-rgb), 0.08);
}

.hp-info-page .page-header h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hp-color-white);
}

.hp-info-page .page-header p {
    margin: 0;
    max-width: 70ch;
    color: rgba(var(--hp-color-white-rgb), 0.62);
    font-size: 14.5px;
    line-height: 1.6;
}

.hp-info-page a {
    color: var(--hp-color-accent-soft);
}

.hp-info-page .info-card {
    position: relative;
    margin: 0 0 14px;
    padding: 20px 22px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.045) 0%,
            rgba(var(--hp-color-white-rgb), 0.015) 100%);
}

.hp-info-page .info-card > p,
.hp-info-page .info-card > div > p {
    margin: 0 0 10px;
    color: rgba(var(--hp-color-white-rgb), 0.72);
    font-size: 13.8px;
    line-height: 1.65;
}

.hp-info-page .info-card > p:last-child,
.hp-info-page .info-card > div > p:last-child {
    margin-bottom: 0;
}

.hp-info-page .section-title,
.hp-info-page .subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--hp-color-white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hp-info-page .section-title svg,
.hp-info-page .subsection-title svg,
.hp-info-page .section-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--hp-color-accent-soft);
}

.hp-info-page .info-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.hp-info-page .info-list li {
    position: relative;
    padding-left: 18px;
    color: rgba(var(--hp-color-white-rgb), 0.7);
    font-size: 13.5px;
    line-height: 1.6;
}

.hp-info-page .info-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--hp-color-accent-rgb), 0.85);
}

/* FAQ */
.hp-info-page .faq-item {
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg,
            rgba(var(--hp-color-white-rgb), 0.04) 0%,
            rgba(var(--hp-color-white-rgb), 0.015) 100%);
}

.hp-info-page .faq-question {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--hp-color-white);
    font-size: 14.5px;
    font-weight: 700;
}

.hp-info-page .faq-question svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--hp-color-accent-soft);
}

.hp-info-page .faq-item p,
.hp-info-page .faq-item div {
    color: rgba(var(--hp-color-white-rgb), 0.72);
    font-size: 13.5px;
    line-height: 1.65;
}

.hp-info-page .faq-item p {
    margin: 0 0 6px;
}

.hp-info-page .faq-item p:last-child {
    margin-bottom: 0;
}

/* badges / alerts */
.hp-info-page .consequence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(var(--hp-color-accent-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--hp-color-accent-rgb), 0.12);
    color: var(--hp-color-accent-soft);
    font-size: 12px;
    font-weight: 600;
}

.hp-info-page .consequence-badge-danger {
    border-color: rgba(220, 53, 69, 0.4);
    background: rgba(220, 53, 69, 0.12);
    color: var(--hp-color-danger-text);
}

.hp-info-page .consequence-badge-warning {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.10);
    color: #ffe9ad;
}

.hp-info-page .alert {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 14px;
    background: rgba(220, 53, 69, 0.10);
    color: var(--hp-color-danger-text);
    font-size: 13.5px;
    line-height: 1.6;
}

.hp-info-page .alert-heading {
    margin: 0 0 6px;
    color: var(--hp-color-danger-text);
    font-size: 14px;
    font-weight: 700;
}

/* contact form */
.hp-info-page .form-label {
    display: block;
    margin: 0 0 6px;
    color: rgba(var(--hp-color-white-rgb), 0.72);
    font-size: 12px;
    font-weight: 600;
}

.hp-info-page .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10);
    border-radius: 12px;
    background: rgba(var(--hp-color-white-rgb), 0.035);
    color: var(--hp-color-white);
    font-size: 14px;
}

.hp-info-page .form-control:focus {
    outline: none;
    border-color: rgba(var(--hp-color-accent-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), 0.16);
}

.hp-info-page .btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hp-color-accent) 0%, var(--hp-color-accent-deep) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--hp-color-accent-deep-rgb), 0.35);
}

.hp-info-page .btn-warning:disabled {
    opacity: 0.5;
    cursor: default;
}

.hp-info-page .text-muted {
    color: rgba(var(--hp-color-white-rgb), 0.5) !important;
}

.hp-info-page .mb-0 { margin-bottom: 0 !important; }
.hp-info-page .mb-3 { margin-bottom: 16px !important; }
.hp-info-page .mb-4 { margin-bottom: 22px !important; }
.hp-info-page .py-3,
.hp-info-page .py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Solid surfaces for the info pages — scoped via body.hp-info-body so every
   other page keeps its glass styling.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   INFO PAGES ONLY (about, faq, terms, privacy, guidelines, contact)
   Solid surfaces — no glass / translucency / backdrop blur on these pages.
   Scoped to <body class="hp-info-body">, so every other page keeps glass.
   ========================================================================== */

/* no blur anywhere on these pages */
.hp-info-body .header.site-header .navbar::before,
.hp-info-body .header .header__topbar::before,
.hp-info-body .nav__menu,
.hp-info-body .nav__menu .nav__list,
.hp-info-body .dropdown-menu,
.hp-info-body .dropdown-menu.fd-menu,
.hp-info-body .simple-menu.fd-menu,
.hp-info-body .modal-content,
.hp-info-body .hp-card,
.hp-info-body .hp-info-page .info-card,
.hp-info-body .hp-info-page .faq-item,
.hp-info-body .hp-info__tip,
.hp-info-body .flatpickr-calendar,
.hp-info-body .toast,
.hp-info-body .alert,
.hp-info-body .hp-modal-close,
.hp-info-body .consequence-badge {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* header + bottom nav: solid surface instead of glass pills */
.hp-info-body .header.site-header .navbar::before,
.hp-info-body .header .header__topbar::before {
    background: rgb(var(--hp-color-surface-2-rgb)) !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.09) !important;
    box-shadow: 0 10px 28px rgba(var(--hp-color-black-rgb), 0.50) !important;
}

.hp-info-body .nav__menu .nav__list,
.hp-info-body .hp-videos-bottom .nav__list {
    background: rgb(var(--hp-color-surface-2-rgb)) !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.09) !important;
    box-shadow: 0 12px 32px rgba(var(--hp-color-black-rgb), 0.50) !important;
}

/* content cards: flat solid fill, no translucent gradient */
.hp-info-body .hp-info-page .info-card,
.hp-info-body .hp-info-page .faq-item {
    background: rgb(var(--hp-color-surface-2-rgb)) !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.08) !important;
}

.hp-info-body .hp-info-page .alert {
    background: rgba(var(--hp-color-danger-rgb), 0.14) !important;
    border-color: rgba(var(--hp-color-danger-rgb), 0.35) !important;
}

/* menus / tooltips / popovers: solid, one step lighter */
.hp-info-body .dropdown-menu,
.hp-info-body .dropdown-menu.fd-menu,
.hp-info-body .simple-menu.fd-menu,
.hp-info-body .hp-info__tip,
.hp-info-body .flatpickr-calendar,
.hp-info-body .toast {
    background: rgb(var(--hp-color-surface-3-rgb)) !important;
    border: 1px solid rgba(var(--hp-color-white-rgb), 0.10) !important;
    box-shadow: 0 16px 40px rgba(var(--hp-color-black-rgb), 0.55) !important;
}

/* controls */
.hp-info-body .hp-modal-close,
.hp-info-body .consequence-badge {
    background: rgb(var(--hp-color-surface-3-rgb)) !important;
}
/* ==========================================================================
   MOBILE FOOTER — centred but compact (brand inline, links centred)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .hp-site-footer {
        margin-top: 22px;
    }

    .hp-site-footer__inner {
        padding: 12px 18px 10px;
    }

    .hp-site-footer__row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px 12px;
    }

    .hp-site-footer__brand {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
    }

    .hp-site-footer__logo img {
        width: 104px;
    }

    .hp-site-footer__meta {
        padding-left: 10px;
        border-left: 1px solid rgba(var(--hp-color-white-rgb), 0.12);
        align-items: flex-start;
        text-align: left;
    }

    .hp-site-footer__nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        gap: 2px 10px;
        text-align: center;
    }

    .hp-site-footer__nav a {
        font-size: 11.5px;
    }

    .hp-site-footer__social {
        order: 2;
        justify-content: center;
    }
}
/* ==========================================================================
   ALBUM MEDIA GRID — cells must be real boxes
   .fd-cell is display:contents for the feed cards; in the album media grid
   that leaves the absolutely-positioned play glyph with no positioned
   ancestor, so every video's play button stacked in one spot.
   ========================================================================== */
.hp-album-grid > .fd-cell {
    display: block;
    position: relative;
    min-width: 0;
}

.hp-album-grid > .fd-cell > a {
    display: block;
    position: relative;
}
/* video media play badge: keep it a plain glyph (the generic mod-tool rule
   above adds 11px padding and forces 38px) */
.hp-album-grid > .fd-cell > span.position-absolute .hp-icon.hp-play-glyph {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
/* comments live in the main column now (they were clipped inside the sticky,
   scrollable sidebar rail) */
.hp-album-main .comments-section-wrap {
    margin: 24px 0 0 !important;
    max-width: none;
}
/* ==========================================================================
   SHORT PAGES — keep the footer at the bottom of the viewport
   <body> is d-flex flex-column min-vh-100; without an auto margin the footer
   stops right after the content and leaves empty space below it.
   ========================================================================== */
body.d-flex.min-vh-100 > .hp-site-footer {
    margin-top: auto !important;
}