/* ============================================================
   HBP SITE TAKEOVER — flat, borderless, no gradients, no emojis
   Uses the same --hbp-* custom properties as the dashboard so
   admin colour settings apply automatically.
   ============================================================ */

.hbp-sitemode, .hbp-sitemode * { box-sizing: border-box; }

.hbp-sitemode {
    font-family: var(--hbp-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);
    color: var(--text-color, #1E293B);
}

/* ─── Breadcrumbs (Genre → Story → Episode / Category → Post) ────────── */

.hbp-breadcrumbs { margin: 0 0 14px; }
.hbp-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hbp-breadcrumbs li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hbp-breadcrumbs a { color: var(--hbp-gray-500, #64748B); text-decoration: none; font-weight: 600; }
.hbp-breadcrumbs a:hover { color: var(--hbp-primary, #2563EB); }
.hbp-breadcrumbs span[aria-current="page"] { color: var(--hbp-gray-800, #1E293B); font-weight: 700; }
.hbp-breadcrumbs-sep { color: var(--hbp-gray-300, #CBD5E1); }

/* ─── Single post / page — novel reading layout ─────────────────── */

.hbp-single-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.hbp-article-header { margin-bottom: 28px; }

.hbp-article-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hbp-primary, #2563EB);
    text-decoration: none;
    margin-bottom: 12px;
}
.hbp-article-kicker:hover { color: var(--hbp-primary-dark, #1D4ED8); }

.hbp-article-title {
    font-size: 1.5rem;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--text-color, #0F172A);
}

.hbp-article-subtitle {
    font-size: 19px;
    line-height: 1.5;
    color: var(--hbp-gray-600, #475569);
    margin: 0 0 24px;
    font-weight: 400;
}

.hbp-article-byline { display: flex; align-items: center; gap: 12px; }
.hbp-article-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--hbp-gray-100, #F1F5F9); }
.hbp-article-byline-text { min-width: 0; }
.hbp-article-author { font-size: 15px; font-weight: 700; color: var(--text-color); text-decoration: none; display: block; }
.hbp-article-author:hover { color: var(--hbp-primary); }
.hbp-article-meta { font-size: 13px; color: var(--hbp-gray-500, #64748B); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.hbp-article-meta-sep { color: var(--hbp-gray-300, #CBD5E1); }

.hbp-article-cover { margin: 28px 0; border-radius: var(--hbp-radius-lg, 16px); overflow: hidden; }
.hbp-article-cover img { width: 100%; height: auto; display: block; }

.hbp-article-body {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-color, #1E293B);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.hbp-article-body > * { max-width: 100%; }
.hbp-article-body p {
    margin: 0 0 26px;
    letter-spacing: -0.003em;
}
.hbp-article-body p:first-of-type {
    font-size: 1.08em;
    color: var(--text-color, #1E293B);
}
.hbp-article-body h2 { font-size: 27px; font-weight: 800; margin: 44px 0 18px; line-height: 1.3; letter-spacing: -0.01em; scroll-margin-top: 90px; }
.hbp-article-body h3 { font-size: 22px; font-weight: 700; margin: 36px 0 14px; line-height: 1.35; scroll-margin-top: 90px; }
.hbp-article-body h4 { font-size: 18.5px; font-weight: 700; margin: 28px 0 12px; line-height: 1.4; color: var(--text-color); }
.hbp-article-body img { max-width: 100%; height: auto; border-radius: var(--hbp-radius, 12px); margin: 8px 0; display: block; }
.hbp-article-body figure { margin: 28px 0; max-width: 100%; }
.hbp-article-body figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--hbp-gray-500, #64748B);
    text-align: center;
    line-height: 1.5;
}
.hbp-article-body blockquote {
    position: relative;
    margin: 32px 0;
    padding: 18px 22px 18px 28px;
    border-left: 3px solid var(--hbp-primary, #2563EB);
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: 0 var(--hbp-radius, 12px) var(--hbp-radius, 12px) 0;
    font-size: 21px;
    line-height: 1.6;
    font-style: italic;
    color: var(--hbp-gray-700, #334155);
}
.hbp-article-body blockquote p { margin: 0 0 10px; }
.hbp-article-body blockquote p:last-child { margin-bottom: 0; }
.hbp-article-body blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--hbp-gray-500, #64748B);
}
.hbp-article-body ul, .hbp-article-body ol { margin: 0 0 26px; padding-left: 26px; }
.hbp-article-body li { margin-bottom: 10px; }
.hbp-article-body li > ul, .hbp-article-body li > ol { margin-top: 10px; margin-bottom: 0; }
.hbp-article-body a { color: var(--hbp-primary); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.hbp-article-body a:hover { color: var(--hbp-primary-dark, #1D4ED8); }
.hbp-article-body strong { font-weight: 700; color: var(--text-color); }
.hbp-article-body hr {
    border: none;
    height: 1px;
    background: var(--hbp-gray-200, #E2E8F0);
    margin: 44px 0;
}
.hbp-article-body pre {
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: var(--hbp-radius, 12px);
    padding: 18px 20px;
    overflow-x: auto;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
}
.hbp-article-body code { background: var(--hbp-gray-100, #F1F5F9); padding: 2px 6px; border-radius: 5px; font-size: .9em; word-break: break-word; }
.hbp-article-body pre code { background: none; padding: 0; }

/* ─── Tables ───────────────────────────────────────────────────────── */
.hbp-article-body table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 32px 0;
    font-size: 15.5px;
    line-height: 1.5;
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-radius: var(--hbp-radius, 12px);
    overflow: hidden;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hbp-article-body table thead { background: var(--hbp-gray-50, #F8FAFC); }
.hbp-article-body table th {
    text-align: left;
    font-weight: 700;
    color: var(--text-color);
    padding: 12px 16px;
    border-bottom: 1px solid var(--hbp-gray-200, #E2E8F0);
    white-space: nowrap;
}
.hbp-article-body table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hbp-gray-200, #E2E8F0);
    color: var(--hbp-gray-700, #334155);
    vertical-align: top;
}
.hbp-article-body table tr:last-child td { border-bottom: 0; }
.hbp-article-body table tbody tr:hover { background: var(--hbp-gray-50, #F8FAFC); }
.hbp-article-body iframe, .hbp-article-body embed, .hbp-article-body object, .hbp-article-body video {
    max-width: 100%;
    width: 100%;
    border-radius: var(--hbp-radius, 12px);
    margin: 8px 0;
}

/* ─── Reading progress bar ─────────────────────────────────────────── */
/* Single source of truth: sits directly under the 64px (h-16) sticky
   header. Previously this file said top:0/z-index:999 while the header
   template's own inline <style> said top:64px/z-index:35 — two
   conflicting rules of equal specificity racing each other depending on
   load/cache order, which is exactly what made the bar align correctly
   on some pages (story/episode) and drift on others (single post/page).
   The header template's inline override has been removed so this is
   now the only definition. */
.hbp-read-progress {
    position: fixed;
    top: 64px; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 40;
    pointer-events: none;
}
.hbp-read-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--hbp-primary, #2563EB);
    transition: width .08s linear;
}

.hbp-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }

.hbp-disclosure-box { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 24px; padding: 12px 16px; border-radius: 8px; background: var(--hbp-warning, #D97706); background: color-mix(in srgb, var(--hbp-warning, #D97706) 12%, transparent); color: var(--hbp-gray-500, #64748B); font-size: 13px; line-height: 1.5; }
.hbp-disclosure-box svg { flex-shrink: 0; margin-top: 1px; color: var(--hbp-warning, #D97706); }

.hbp-article-excerpt { color: var(--text-color, #1E293B); }
.hbp-paywall-box { text-align: center; padding: 40px 24px; margin: 12px 0 0; border-radius: 12px; background: var(--hbp-gray-50, #F8FAFC); }
.hbp-paywall-box svg { color: var(--hbp-primary, #2563EB); margin-bottom: 12px; }
.hbp-paywall-box h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text-color, #1E293B); }
.hbp-paywall-box p { margin: 0 0 18px; font-size: 14px; color: var(--hbp-gray-400, #94A3B8); max-width: 420px; margin-left: auto; margin-right: auto; }
.hbp-paywall-btn { display: inline-block; padding: 11px 28px; border-radius: 8px; background: var(--hbp-primary, #2563EB); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.hbp-unlock-btn, .hbp-unlock-pay-btn { transition: transform .15s, box-shadow .15s; }
.hbp-unlock-btn:hover, .hbp-unlock-pay-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

.hbp-read-reward { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 0; padding: 16px 20px; border-radius: 10px; background: var(--hbp-primary-xlight, #EFF6FF); }
.hbp-read-reward-msg { margin: 0; font-size: 14px; color: var(--text-color, #1E293B); }
.hbp-read-reward-btn { flex-shrink: 0; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--hbp-primary, #2563EB); cursor: pointer; min-width: 130px; }
.hbp-read-reward-btn:disabled { background: var(--hbp-gray-300, #CBD5E1); cursor: default; }
.hbp-read-reward-btn--done { background: var(--hbp-success, #16A34A) !important; }
.hbp-read-reward--done { display: flex; align-items: center; gap: 8px; margin: 28px 0 0; padding: 14px 18px; border-radius: 10px; background: var(--hbp-gray-50, #F8FAFC); color: var(--hbp-gray-400, #94A3B8); font-size: 13.5px; }
.hbp-article-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--hbp-gray-600, #475569);
    background: var(--hbp-gray-100, #F1F5F9);
    padding: 6px 14px;
    border-radius: var(--hbp-radius-lg, 999px);
    text-decoration: none;
}
.hbp-article-tag:hover { background: var(--hbp-primary-light, #DBEAFE); color: var(--hbp-primary); }

/* ─── Engagement bar (votes / share / report / tips) ─────────────── */

.hbp-engage-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 36px 0;
    padding: 14px 4px;
    border-top: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-bottom: 1px solid var(--hbp-gray-200, #E2E8F0);
}

.hbp-engage-votes { display: flex; align-items: center; gap: 2px; background: var(--hbp-gray-50, #F8FAFC); border-radius: var(--hbp-radius-lg, 999px); padding: 4px; }

.hbp-engage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hbp-gray-50, #F8FAFC);
    border: none;
    border-radius: var(--hbp-radius-lg, 999px);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hbp-gray-600, #475569);
    cursor: pointer;
    transition: var(--hbp-transition, all .2s ease);
}
.hbp-engage-votes .hbp-engage-btn { padding: 7px 12px; background: transparent; }
.hbp-engage-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.hbp-engage-btn:hover { background: var(--hbp-primary-light, #DBEAFE); color: var(--hbp-primary); }
.hbp-vote-btn[data-vote="up"].is-active { color: var(--hbp-success, #16A34A); background: #ECFDF5; }
.hbp-vote-btn[data-vote="down"].is-active { color: var(--hbp-danger, #DC2626); background: #FEF2F2; }
.hbp-report-btn { margin-left: auto; }
.hbp-engage-tip-wrap .hbp-btn { padding: 9px 16px !important; border-radius: var(--hbp-radius-lg, 999px) !important; font-size: 14px !important; }

@media (max-width: 480px) {
    .hbp-engage-bar { gap: 8px; padding: 12px 2px; }
    .hbp-engage-btn { padding: 7px 12px; font-size: 13px; }
    .hbp-engage-votes .hbp-engage-btn { padding: 6px 10px; }
    .hbp-engage-tip-wrap .hbp-btn { padding: 7px 12px !important; font-size: 13px !important; }
}

.hbp-engage-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--button-color, var(--hbp-primary));
    color: #fff;
    border: none;
    border-radius: var(--hbp-radius, 12px);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.hbp-engage-cta:hover { background: var(--hbp-primary-dark, #1D4ED8); color: #fff; }

/* Report modal */
.hbp-report-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.hbp-report-modal.is-open { display: flex; }
.hbp-report-modal-card { background: #fff; border-radius: var(--hbp-radius-lg, 16px); max-width: 420px; width: 100%; padding: 28px; position: relative; }
.hbp-report-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--hbp-gray-400); cursor: pointer; }
.hbp-report-modal-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.hbp-report-modal-sub { margin: 0 0 18px; font-size: 13px; color: var(--hbp-gray-500); }
.hbp-report-modal-card select, .hbp-report-modal-card textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-radius: var(--hbp-radius, 12px); font-size: 14px; margin-bottom: 12px; font-family: inherit; resize: vertical;
}
.hbp-report-modal-card .hbp-engage-cta { width: 100%; }

/* Author card */
.hbp-article-author-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: var(--hbp-radius-lg, 16px);
    padding: 22px;
    margin: 36px 0;
}
.hbp-article-author-card img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hbp-article-author-card-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--hbp-gray-500); margin-bottom: 2px; }
.hbp-article-author-card-name { font-size: 16px; font-weight: 800; color: var(--text-color); text-decoration: none; }
.hbp-article-author-card-bio { margin: 6px 0 0; font-size: 14px; color: var(--hbp-gray-600); line-height: 1.5; }

/* ─── Comments — blended, not "regular WordPress" ────────────────── */

.hbp-comments { margin-top: 48px; }
.hbp-comments-heading { font-size: 22px; font-weight: 800; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.hbp-comments-count { font-size: 14px; font-weight: 700; color: var(--hbp-gray-500); background: var(--hbp-gray-100); padding: 3px 12px; border-radius: 999px; }

.hbp-comments-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.hbp-comments-list ul.children { list-style: none; margin: 14px 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.hbp-comment-card { display: flex; gap: 12px; }
.hbp-comment-avatar img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.hbp-comment-body { flex: 1; min-width: 0; background: var(--hbp-gray-50, #F8FAFC); border-radius: var(--hbp-radius, 12px); padding: 14px 16px; }
.hbp-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hbp-comment-author { font-size: 14px; font-weight: 700; color: var(--text-color); }
.hbp-comment-date { font-size: 12px; color: var(--hbp-gray-400); }
.hbp-comment-pending { font-size: 11px; color: var(--hbp-warning); font-weight: 700; }
.hbp-comment-text { font-size: 15px; line-height: 1.65; color: var(--hbp-gray-700); overflow-wrap: break-word; word-break: break-word; }
.hbp-comment-text p { margin: 0 0 8px; }
.hbp-comment-text a { overflow-wrap: break-word; word-break: break-word; max-width: 100%; display: inline-block; }
.hbp-comment-actions { margin-top: 6px; }
.hbp-comment-reply a { font-size: 12px; font-weight: 700; color: var(--hbp-primary); text-decoration: none; }

.hbp-comment-form { margin-top: 8px; }
.hbp-comment-form #commentform-title, .hbp-comment-form > p:not(.comment-form-comment):not(.form-submit) { display: none; }
.hbp-comment-form-row { margin-bottom: 10px; }
.hbp-comment-input, .hbp-comment-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-radius: var(--hbp-radius, 12px);
    font-size: 15px;
    font-family: inherit;
    background: var(--hbp-gray-50, #F8FAFC);
}
.hbp-comment-textarea { resize: vertical; margin-bottom: 12px; }
.hbp-comment-input:focus, .hbp-comment-textarea:focus { outline: none; border-color: var(--hbp-primary); background: #fff; }
.hbp-comments-closed { color: var(--hbp-gray-500); font-size: 14px; }

/* ─── Archive / Search grid ───────────────────────────────────────── */

.hbp-archive-wrap, .hbp-404-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 20px 80px; }

.hbp-archive-header { margin-bottom: 28px; }
.hbp-archive-title { font-size: 32px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.hbp-archive-desc { font-size: 15px; color: var(--hbp-gray-600); margin: 0 0 8px; }
.hbp-archive-count { font-size: 13px; font-weight: 700; color: var(--hbp-gray-500); }

.hbp-archive-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px)  { .hbp-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hbp-archive-grid { grid-template-columns: repeat(3, 1fr); } }

.hbp-archive-card { display: flex; flex-direction: column; }
.hbp-archive-card-thumb { display: block; aspect-ratio: 16/10; border-radius: var(--hbp-radius-lg, 16px); overflow: hidden; background: var(--hbp-gray-100); margin-bottom: 14px; }
.hbp-archive-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hbp-archive-card:hover .hbp-archive-card-thumb img { transform: scale(1.04); }
.hbp-archive-card-thumb-fallback { display: block; width: 100%; height: 100%; background: var(--hbp-gray-100); }
.hbp-archive-card-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hbp-primary); text-decoration: none; }
.hbp-archive-card-title { font-size: 18px; font-weight: 800; margin: 6px 0 8px; line-height: 1.35; }
.hbp-archive-card-title a { color: var(--text-color); text-decoration: none; }
.hbp-archive-card-title a:hover { color: var(--hbp-primary); }
.hbp-archive-card-excerpt { font-size: 14px; color: var(--hbp-gray-600); line-height: 1.55; margin: 0 0 12px; }
.hbp-archive-card-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--hbp-gray-500); }
.hbp-archive-card-meta img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.hbp-archive-card-meta-sep { color: var(--hbp-gray-300); }

.hbp-archive-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.hbp-archive-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
    border-radius: var(--hbp-radius, 12px); font-size: 14px; font-weight: 700; color: var(--text-color);
    background: var(--hbp-gray-50, #F8FAFC); text-decoration: none; padding: 0 10px;
}
.hbp-archive-pagination .page-numbers.current,
.hbp-archive-pagination .page-numbers:hover { background: var(--button-color, var(--hbp-primary)); color: #fff; }

.hbp-archive-empty { text-align: center; padding: 60px 20px; color: var(--hbp-gray-500); }

/* Search form */
.hbp-search-form { display: flex; align-items: center; gap: 10px; background: var(--hbp-gray-50, #F8FAFC); border-radius: var(--hbp-radius-lg, 999px); padding: 8px 8px 8px 18px; margin: 0 0 36px; max-width: 480px; }
.hbp-search-form svg { width: 18px; height: 18px; color: var(--hbp-gray-400); flex-shrink: 0; }
.hbp-search-form input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; padding: 8px 0; }
.hbp-search-form button { border: none; background: var(--button-color, var(--hbp-primary)); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px; cursor: pointer; }

/* ─── 404 ─────────────────────────────────────────────────────────── */

.hbp-404-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding-top: 60px; padding-bottom: 60px; }
.hbp-404-card { text-align: center; max-width: 460px; }
.hbp-404-code { display: block; font-size: 64px; font-weight: 800; color: var(--hbp-primary-light, #DBEAFE); line-height: 1; }
.hbp-404-title { font-size: 24px; font-weight: 800; margin: 12px 0 8px; }
.hbp-404-desc { font-size: 15px; color: var(--hbp-gray-600); margin: 0 0 28px; }
.hbp-404-home { margin-top: 4px; }

/* ─── Mobile bottom nav — icons only, mobile devices only ─────────── */

.hbp-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
    background: var(--hbp-header-bg, #fff);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
}
.hbp-bn-item {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--hbp-radius, 12px);
    color: var(--hbp-header-text, var(--hbp-gray-500, #64748B));
    text-decoration: none;
}
.hbp-bn-item svg { width: 23px; height: 23px; }
.hbp-bn-item:hover, .hbp-bn-item:active { color: var(--hbp-primary); background: var(--hbp-primary-xlight, #EFF6FF); }
.hbp-bn-item.is-active { color: var(--hbp-primary); }
.hbp-bn-center { width: auto; height: auto; margin-top: -26px; }
.hbp-bn-center-circle {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--button-color, var(--hbp-primary));
    color: #fff;
    box-shadow: var(--hbp-shadow, 0 4px 16px rgba(0,0,0,.16));
}
.hbp-bn-center:hover .hbp-bn-center-circle { background: var(--hbp-primary-dark, #1D4ED8); }

@media (max-width: 782px) {
    .hbp-bottom-nav { display: flex; }
    body.hbp-has-bottom-nav { padding-bottom: 70px; }
}

/* ─── Toast (self-contained, no dependency on dashboard footer) ──── */

#hbp-site-toast-container { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@media (min-width: 783px) { #hbp-site-toast-container { bottom: 24px; } }
.hbp-site-toast {
    background: #111827; color: #fff; font-size: 13px; font-weight: 600;
    padding: 10px 18px; border-radius: 999px; opacity: 0; transform: translateY(10px);
    transition: all .25s ease; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.hbp-site-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE / OVERFLOW SAFETY
   Prevents 3rd-party scripts (e.g. AdSense Auto ads anchor + in-article
   ads) from breaking mobile layout by forcing horizontal scroll or
   pushing fixed elements off-screen.
   ════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
html, body.hbp-sitemode-body, body.hbp-dashboard {
    max-width: 100%;
    /* clip, not hidden: overflow-x:hidden forces the other axis's
       computed overflow to auto per the CSS Overflow spec, which is a
       well-known cause of position:sticky silently breaking on
       descendants (e.g. the sticky header scrolling away instead of
       staying pinned). clip blocks horizontal scroll the same way
       without that side effect. */
    overflow-x: clip;
}
body.hbp-sitemode-body *, body.hbp-dashboard * { box-sizing: border-box; }
/* Google AdSense Auto ads anchor unit sits at z-index ~2147483647 with its
   own fixed positioning — give our bottom nav a comfortably lower z-index
   stack but keep enough bottom spacing so the two never visually collide. */
.hbp-bottom-nav { max-width: 100vw; }
body.hbp-has-bottom-nav { padding-bottom: max(70px, calc(56px + env(safe-area-inset-bottom))); }

/* Hard containment for any 3rd-party embed (AdSense Auto/in-article ads,
   iframes, embeds, videos, tables, etc.) — nothing is ever allowed to
   stretch wider than its parent or force the page to scroll sideways. */
ins.adsbygoogle,
.adsbygoogle,
iframe,
embed,
object,
video,
table,
img,
svg,
canvas,
.hbp-article-body > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
ins.adsbygoogle, .adsbygoogle { width: 100% !important; overflow: hidden !important; }
iframe[id*="google_ads"], iframe[id*="aswift"], iframe[id*="ad_iframe"] { width: 100% !important; max-width: 100% !important; }

/* The actual root cause of ads clipping/shifting past the right edge on
   mobile: Google's Auto Ads script wraps its iframe in its own outer <div>
   (id="aswift_N_host", or id="google_ads_iframe_...") and sets that div's
   width with an inline style AT REQUEST TIME. Every rule above only ever
   targeted the ins/iframe itself, never that outer host div — so the host
   div was free to render at whatever pixel width Google requested, wider
   than the column, and everything inside it (including the iframe we DID
   constrain) got carried along and clipped by the viewport edge. Catching
   the host div itself, at any nesting depth, is what actually fixes it. */
[id^="aswift_"],
[id^="google_ads_iframe_"],
.google-auto-placed,
.google-auto-placed > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Auto/in-article AdSense ads that land inside the post body are otherwise
   only width-capped above — they still sit flush against whatever their
   surrounding element is instead of matching the paragraphs' own centered
   column, which is what actually caused ads to look shifted left and cut
   off on the right on narrow screens. Centering + the same vertical rhythm
   as a paragraph (see .hbp-article-body p above) makes an auto-inserted ad
   read as "part of the column", not a break-out element. */
.hbp-article-body ins.adsbygoogle,
.hbp-article-body .adsbygoogle,
.hbp-article-body > div.google-auto-placed {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px auto !important;
    overflow: hidden !important;
    text-align: center;
    box-sizing: border-box !important;
}

/* External Ads (admin-pasted network codes: AdSense manual units or any
   other network's snippet) — this wrapper previously had ZERO styling of
   its own, so it only ever inherited the generic full-width/overflow rules
   above and never matched the paragraphs' own column: no side inset, no
   vertical rhythm, and nothing stopping a network's inline pixel width
   from pushing the whole thing past the right edge. This gives it the
   same treatment as an in-article auto ad above — centered, capped to the
   column, same margin as a paragraph — regardless of how deeply the
   network nests its own markup inside it. */
.hbp-ext-ad {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 26px auto;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}
.hbp-ext-ad,
.hbp-ext-ad * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.hbp-ext-ad iframe,
.hbp-ext-ad ins.adsbygoogle,
.hbp-ext-ad [id^="aswift_"],
.hbp-ext-ad [id^="google_ads_iframe_"] {
    width: 100% !important;
}
.hbp-ext-ad-label {
    display: block;
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hbp-gray-400, #94A3B8);
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   SITE-MODE HEADER (plugin's own — never the theme's header.php)

   Layout contract: the logo/brand is the ONLY flexible element in this
   row. It is allowed to shrink (and clip via overflow:hidden) on narrow
   screens. Every other child — search icon, nav, notifications, avatar,
   Login, Sign Up — is flex-shrink:0 and lives inside .hbp-sm-header-end,
   which is pinned to the right edge with margin-left:auto. That means:
     1) the logo's own width/height HTML attributes (set in header.php)
        let the browser reserve its box before the image finishes
        loading, so nothing to its right ever shifts once it arrives.
     2) even if the logo/text is unusually wide, it shrinks and clips
        instead of pushing Sign Up off-screen, so the right-hand cluster
        never gets cut off on any screen size.
   ════════════════════════════════════════════════════════════════════ */
.hbp-sm-header {
    background: var(--hbp-header-bg, #fff);
    position: sticky;
    top: 0;
    z-index: 200;
}
.hbp-sm-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 20px 20px;
    box-sizing: border-box;
    min-width: 0;
}
.hbp-sm-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.hbp-sm-brand-img { height: 32px; width: auto; max-width: 100%; flex-shrink: 0; display: block; }
.hbp-sm-brand-text { display: block; font-size: 19px; font-weight: 800; color: var(--hbp-header-text, var(--text-color)); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbp-sm-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hbp-gray-100, #F1F5F9);
    border-radius: 999px;
    padding: 8px 14px;
    margin: 0 auto 0 24px;
}
.hbp-sm-search svg { width: 16px; height: 16px; color: var(--hbp-gray-400, #94A3B8); flex-shrink: 0; }
.hbp-sm-search input { border: none; background: transparent; outline: none; font-size: 13.5px; width: 100%; color: var(--text-color); }
.hbp-sm-header-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.hbp-sm-btn { font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.hbp-sm-btn-ghost { color: var(--hbp-header-text, var(--text-color)); }
.hbp-sm-btn-ghost:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-sm-btn-fill { background: var(--button-color, var(--hbp-primary)); color: #fff; }
.hbp-sm-btn-fill:hover { background: var(--hbp-primary-dark, #1D4ED8); color: #fff; }
.hbp-sm-icon-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    color: var(--hbp-header-text, var(--text-color));
    text-decoration: none;
}
.hbp-sm-icon-btn:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-sm-icon-btn svg { width: 19px; height: 19px; }
.hbp-sm-badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--hbp-danger, #DC2626); color: #fff;
    font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px;
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid var(--hbp-header-bg, #fff);
}
.hbp-sm-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hbp-primary-light, #DBEAFE);
    color: var(--hbp-primary, #2563EB);
    font-weight: 700; font-size: 14px;
    text-decoration: none; overflow: hidden; flex-shrink: 0;
}
.hbp-sm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Header search icon (mobile trigger) ──────────────────────────── */
.hbp-sm-search-icon-btn {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 0; background: transparent;
    color: var(--hbp-header-text, var(--text-color));
    cursor: pointer; flex-shrink: 0; flex-basis: 38px;
}
.hbp-sm-search-icon-btn:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-sm-search-icon-btn svg { width: 19px; height: 19px; }

/* ─── Header nav (desktop — sits right after the search bar) ──────── */
.hbp-sm-header-nav { flex-shrink: 0; }
.hbp-sm-header-nav-list {
    list-style: none; display: flex; align-items: center; gap: 4px;
    margin: 0; padding: 0;
}
.hbp-sm-header-nav-list li { position: relative; margin: 0; }
.hbp-sm-header-nav-list > li > a {
    display: block; padding: 8px 12px; border-radius: 999px;
    color: var(--hbp-header-text, var(--text-color));
    text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.hbp-sm-header-nav-list > li > a:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-sm-header-nav-list .sub-menu {
    list-style: none; margin: 0; padding: 6px;
    position: absolute; top: 100%; left: 0; min-width: 190px;
    background: var(--hbp-white, #fff);
    border-radius: var(--hbp-radius-lg, 16px);
    box-shadow: var(--hbp-shadow, 0 4px 16px rgba(0,0,0,.1));
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all .18s ease;
    z-index: 50;
}
.hbp-sm-header-nav-list .menu-item-has-children:hover > .sub-menu,
.hbp-sm-header-nav-list .menu-item-has-children.is-submenu-open > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.hbp-sm-header-nav-list .sub-menu a {
    display: block; padding: 9px 12px; border-radius: 10px;
    color: var(--text-color); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.hbp-sm-header-nav-list .sub-menu a:hover { background: var(--hbp-gray-100, #F1F5F9); }

/* ─── Mobile nav drawer toggle (grid icon) ─────────────────────────── */
.hbp-sm-nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 0; background: transparent;
    color: var(--hbp-header-text, var(--text-color));
    font-size: 18px; cursor: pointer; flex-shrink: 0; flex-basis: 38px;
}
.hbp-sm-nav-toggle:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-sm-nav-toggle svg { width: 19px; height: 19px; }

/* ─── Mobile search overlay — slides down, covers the whole header ─── */
.hbp-sm-search-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hbp-header-bg, #fff);
    padding: 0 14px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    z-index: 5;
}
.hbp-sm-search-overlay.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.hbp-sm-search-overlay-form {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    background: var(--hbp-gray-100, #F1F5F9);
    border-radius: 999px;
    padding: 10px 14px;
}
.hbp-sm-search-overlay-form svg { width: 17px; height: 17px; color: var(--hbp-gray-400, #94A3B8); flex-shrink: 0; }
.hbp-sm-search-overlay-form input { border: none; background: transparent; outline: none; font-size: 14px; width: 100%; color: var(--text-color); }
.hbp-sm-search-overlay-close {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px; border: 0; background: var(--hbp-gray-100, #F1F5F9);
    color: var(--hbp-header-text, var(--text-color)); cursor: pointer;
}

/* ─── Mobile slide-in nav drawer ───────────────────────────────────── */
.hbp-sm-nav-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
    z-index: 998;
}
.hbp-sm-nav-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.hbp-sm-nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(82vw, 320px);
    background: var(--hbp-header-bg, #fff);
    box-shadow: -4px 0 24px rgba(0,0,0,.14);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.2,0,0,1);
    z-index: 999;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.hbp-sm-nav-drawer.is-open { transform: translateX(0); }
.hbp-sm-nav-drawer-head {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 18px 18px;
    border-bottom: 1px solid rgba(127,127,127,.18);
}
.hbp-sm-nav-drawer-close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    border: 0; background: rgba(127,127,127,.12);
    color: var(--hbp-header-text, var(--text-color)); cursor: pointer;
}
.hbp-sm-nav-drawer-list { list-style: none; margin: 0; padding: 8px; }
.hbp-sm-nav-drawer-list li { margin: 0; }
.hbp-sm-nav-drawer-list > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px; border-radius: 10px;
    color: var(--hbp-header-text, var(--text-color)); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.hbp-sm-nav-drawer-list > li > a:hover { background: rgba(127,127,127,.12); }
.hbp-sm-nav-drawer-list .menu-item-has-children > a::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .18s ease; flex-shrink: 0;
}
.hbp-sm-nav-drawer-list .menu-item-has-children.is-submenu-open > a::after { transform: rotate(-135deg); }
.hbp-sm-nav-drawer-list .sub-menu {
    list-style: none; margin: 0; padding: 0 0 0 14px;
    max-height: 0; overflow: hidden;
    transition: max-height .22s ease;
}
.hbp-sm-nav-drawer-list .menu-item-has-children.is-submenu-open > .sub-menu { max-height: 600px; }
.hbp-sm-nav-drawer-list .sub-menu a {
    display: block; padding: 10px 12px; border-radius: 10px;
    color: var(--hbp-header-text, var(--text-color)); opacity: .8; text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.hbp-sm-nav-drawer-list .sub-menu a:hover { background: rgba(127,127,127,.12); }
body.hbp-nav-drawer-locked { overflow: hidden; }

@media (max-width: 782px) {
    .hbp-sm-header-inner { padding: 16px 14px; gap: 10px; }
    .hbp-sm-btn { padding: 8px 12px; font-size: 12.5px; }
    .hbp-sm-search { display: none; }
    .hbp-sm-search-icon-btn { display: flex; }
    .hbp-sm-header-nav { display: none; }
    .hbp-sm-nav-toggle { display: flex; }
}
@media (max-width: 360px) {
    /* Extra-narrow phones: tighten spacing further and let the brand
       logo/text clip a little more so Login/Sign Up always stay fully
       visible and never get cut off at the right edge. */
    .hbp-sm-header-inner { gap: 6px; padding: 14px 10px; }
    .hbp-sm-header-end { gap: 6px; }
    .hbp-sm-btn { padding: 7px 10px; font-size: 11.5px; }
    .hbp-sm-brand-img { max-width: 90px; }
}
@media (min-width: 783px) {
    .hbp-sm-search-overlay,
    .hbp-sm-nav-drawer,
    .hbp-sm-nav-drawer-backdrop { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SITE-MODE TELEGRAM BAR (after-header strip)
   Same width as the header, sits flush against it with no gap/margin.
   ════════════════════════════════════════════════════════════════════ */
.hbp-sm-telegram-bar {
    background: var(--hbp-telegram-bg, #229ED9);
    margin: 0;
    border: 0;
    padding: 6px;
}
.hbp-sm-telegram-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
}
.hbp-sm-telegram-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--hbp-telegram-text, #FFFFFF);
    text-decoration: none;
    font-size: 1rem !important;
    font-weight: 600;
    text-align: center;
}
.hbp-sm-telegram-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.hbp-sm-telegram-link:hover { opacity: .88; }
@media (max-width: 640px) {
    .hbp-sm-telegram-bar-inner { padding: 8px 14px; }
    .hbp-sm-telegram-link { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   SITE-MODE FOOTER
   ════════════════════════════════════════════════════════════════════ */
.hbp-sm-footer {
    background: #111827;
    color: #fff;
    padding: 18px 20px;
    margin-top: 32px;
}
.hbp-sm-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: #9CA3AF;
    text-align: center;
}
.hbp-sm-footer-inner a { color: #fff; text-decoration: none; }
.hbp-sm-footer-sep { color: #4B5563; }
.hbp-sm-footer-menu { max-width: 1180px; margin: 0 auto; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hbp-sm-footer-menu-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; padding: 14px 0; }
.hbp-sm-footer-menu-list li { margin: 0; }
.hbp-sm-footer-menu-list a { color: #D1D5DB; text-decoration: none; font-size: 13px; font-weight: 600; }
.hbp-sm-footer-menu-list a:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE — soft, smooth, social card feed.
   2 columns on mobile (not one giant stacked column), scaling up to a
   richer multi-column grid on larger screens.
   ════════════════════════════════════════════════════════════════════ */
.hbp-home-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }

.hbp-home-genre-title { font-size: 20px; font-weight: 800; color: var(--hbp-gray-800, #1E293B); margin: 0 0 14px; }

.hbp-home-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 18px;
    scrollbar-width: none;
}
.hbp-home-chips::-webkit-scrollbar { display: none; }
.hbp-home-chip {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hbp-gray-100, #F1F5F9);
    color: var(--hbp-gray-600, #475569);
    text-decoration: none;
    transition: all .15s ease;
}
.hbp-home-chip:hover { background: var(--hbp-primary-xlight, #EFF6FF); color: var(--hbp-primary); }
.hbp-home-chip.is-active { background: var(--button-color, var(--hbp-primary)); color: #fff; }

.hbp-home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 560px)  { .hbp-home-grid { gap: 18px; } }
@media (min-width: 768px)  { .hbp-home-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .hbp-home-grid { grid-template-columns: repeat(4, 1fr); } }

.hbp-home-card {
    display: flex;
    flex-direction: column;
    background: var(--hbp-white, #fff);
    border-radius: var(--hbp-radius-lg, 16px);
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    overflow: hidden;
    transition: border-color .22s ease;
}
.hbp-home-card:hover { border-color: var(--hbp-primary); }

.hbp-home-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    background: var(--hbp-gray-100, #F1F5F9);
    overflow: hidden;
}
.hbp-home-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hbp-home-card:hover .hbp-home-card-thumb img { transform: scale(1.05); }
.hbp-home-card-thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--hbp-primary-xlight, #EFF6FF), var(--hbp-primary-light, #DBEAFE)); }
.hbp-home-card-kicker {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(17,24,39,.62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.hbp-home-card-body { padding: 10px 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.hbp-home-card-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hbp-home-card-title a { color: var(--text-color); text-decoration: none; }
.hbp-home-card-title a:hover { color: var(--hbp-primary); }
.hbp-home-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--hbp-gray-500, #64748B);
    margin-top: auto;
}
.hbp-home-card-meta img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hbp-home-card-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.hbp-home-card-meta-sep { color: var(--hbp-gray-300, #CBD5E1); }

@media (min-width: 768px) {
    .hbp-home-card-body { padding: 14px 16px 18px; gap: 10px; }
    .hbp-home-card-title { font-size: 16px; }
    .hbp-home-card-meta { font-size: 12.5px; }
    .hbp-home-card-meta img { width: 22px; height: 22px; }
    .hbp-home-card-author { max-width: none; }
}

.hbp-home-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.hbp-home-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
    border-radius: var(--hbp-radius, 12px); font-size: 14px; font-weight: 700; color: var(--text-color);
    background: var(--hbp-gray-50, #F8FAFC); text-decoration: none; padding: 0 10px;
}
.hbp-home-pagination .page-numbers.current { background: var(--button-color, var(--hbp-primary)); color: #fff; }
.hbp-home-pagination .page-numbers:hover:not(.current) { background: var(--hbp-gray-100, #F1F5F9); }

.hbp-home-empty { text-align: center; padding: 80px 20px; color: var(--hbp-gray-500, #64748B); font-size: 14px; }

/* ================================================================
   CUSTOM VERIFIED BADGE  (.hbp-vbadge)
   Squircle + checkmark — rendered as inline SVG.
   Used in: byline, author card, comments, public profile.
================================================================ */
.hbp-vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--button-color, var(--hbp-primary, #6366f1));
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.hbp-vbadge svg { display: block; }

/* ================================================================
   GHOST FOLLOW / UNFOLLOW BUTTON  (.hbp-fbtn)
   No background, no box-shadow — just a bordered pill button.
   Sizes: sm (byline / author card), xs (comments).
================================================================ */
.hbp-fbtn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 1.5px solid var(--button-color, var(--hbp-primary, #6366f1));
    background: transparent;
    color: var(--button-color, var(--hbp-primary, #6366f1));
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
    transition: color .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.hbp-fbtn:hover { opacity: .75; }
.hbp-fbtn:disabled { opacity: .45; cursor: default; }
.hbp-fbtn.is-following {
    border-color: var(--hbp-gray-300, #CBD5E1);
    color: var(--hbp-gray-500, #64748B);
}
.hbp-fbtn.is-following:hover {
    border-color: #E2395E;
    color: #E2395E;
}
/* Sizes */
.hbp-fbtn-sm { font-size: 12px; padding: 4px 12px; }
.hbp-fbtn-xs { font-size: 11px; padding: 2px 9px; }

/* ================================================================
   GHOST SUBSCRIBE / UNSUBSCRIBE BUTTON  (.hbp-sbtn)
   Same visual language as .hbp-fbtn, aimed at categories/tags instead
   of authors. No background, no box-shadow — bordered pill button.
================================================================ */
.hbp-sbtn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 1.5px solid var(--button-color, var(--hbp-primary, #6366f1));
    background: transparent;
    color: var(--button-color, var(--hbp-primary, #6366f1));
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
    transition: color .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.hbp-sbtn:hover { opacity: .75; }
.hbp-sbtn:disabled { opacity: .45; cursor: default; }
.hbp-sbtn.is-subscribed {
    border-color: var(--hbp-gray-300, #CBD5E1);
    color: var(--hbp-gray-500, #64748B);
}
.hbp-sbtn.is-subscribed:hover {
    border-color: #E2395E;
    color: #E2395E;
}
.hbp-sbtn-sm { font-size: 12px; padding: 4px 12px; }
.hbp-sbtn-xs { font-size: 11px; padding: 2px 9px; }
.hbp-sbtn-md { font-size: 13.5px; padding: 8px 18px; }

/* ================================================================
   BYLINE — name row with badge + followers count + follow button
================================================================ */
.hbp-article-byline {
    align-items: flex-start;
}
.hbp-article-byline-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.hbp-article-author {
    display: inline; /* override block so it sits inline in the row */
}
.hbp-article-byline-followers {
    font-size: 12px;
    color: var(--hbp-gray-400, #94A3B8);
    font-weight: 400;
}

/* Author card name + badge inline */
.hbp-article-author-card-name { display: inline; }

/* ================================================================
   COMMENT META — badge + xs follow button inline
================================================================ */
.hbp-comment-meta {
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   IN-ARTICLE SUGGESTIONS — inline "you might also like" cards dropped
   every N paragraphs, plus the sticky top card shown on scroll-up.
   Flat design: no borders, no shadows, no gradients — a soft tinted
   surface and generous radius do all the separating.
   ════════════════════════════════════════════════════════════════════ */

.hbp-inline-suggest {
    margin: 30px 0;
    clear: both;
}
.hbp-inline-suggest-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hbp-gray-400, #94A3B8);
    margin-bottom: 10px;
}
.hbp-inline-suggest-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: var(--hbp-radius, 16px);
    padding: 12px;
    text-decoration: none !important;
    transition: background .16s ease;
}
.hbp-article-body .hbp-inline-suggest-card,
.hbp-article-body .hbp-inline-suggest-card * {
    text-decoration: none !important;
}
.hbp-inline-suggest-card:hover { background: var(--hbp-gray-100, #F1F5F9); }
.hbp-inline-suggest-media {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: calc(var(--hbp-radius, 16px) - 6px);
    overflow: hidden;
    background: var(--hbp-gray-100, #F1F5F9);
}
.hbp-inline-suggest-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbp-inline-suggest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hbp-inline-suggest-kicker {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--hbp-primary, #2563EB);
}
.hbp-inline-suggest-title {
    font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text-color);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hbp-inline-suggest-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--hbp-gray-500, #64748B);
}
.hbp-inline-suggest-dot { color: var(--hbp-gray-300, #CBD5E1); }
.hbp-inline-suggest-arrow {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--hbp-primary, #2563EB);
    background: #fff;
}
.hbp-inline-suggest-arrow svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
    .hbp-inline-suggest-media { width: 68px; height: 68px; }
    .hbp-inline-suggest-title { font-size: 14.5px; }
    .hbp-inline-suggest-arrow { display: none; }
}

/* ─── Sticky top "keep reading" suggestion — compact card, anchored
   to the right on every viewport size, never full width. ─────────── */

.hbp-sticky-suggest {
    position: fixed;
    top: 0;
    right: 14px;
    left: auto;
    z-index: 190; /* just under .hbp-sm-header (200) */
    width: 320px;
    max-width: calc(100vw - 28px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hbp-header-bg, #fff);
    border-radius: var(--hbp-radius, 16px);
    padding: 10px;
    box-sizing: border-box;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .25s ease, visibility 0s linear .25s;
}
.hbp-sticky-suggest.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .25s ease, visibility 0s;
}
.hbp-sticky-suggest-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: calc(var(--hbp-radius, 16px) - 4px);
    padding: 6px 10px 6px 6px;
}
.hbp-sticky-suggest-card * { text-decoration: none !important; }
.hbp-sticky-suggest-media {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    overflow: hidden; background: var(--hbp-gray-100, #F1F5F9);
}
.hbp-sticky-suggest-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbp-sticky-suggest-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hbp-sticky-suggest-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--hbp-primary, #2563EB);
}
.hbp-sticky-suggest-title {
    font-size: 13px; font-weight: 700; color: var(--text-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 190px;
}
.hbp-sticky-suggest-close {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hbp-gray-50, #F8FAFC);
    color: var(--hbp-gray-500, #64748B);
    border: none; cursor: pointer; padding: 0;
    transition: background .15s ease, color .15s ease;
}
.hbp-sticky-suggest-close:hover { background: var(--hbp-gray-100, #F1F5F9); color: var(--text-color); }
.hbp-sticky-suggest-close svg { width: 14px; height: 14px; }
@media (max-width: 480px) {
    .hbp-sticky-suggest { width: 268px; right: 10px; padding: 8px; gap: 8px; }
    .hbp-sticky-suggest-title { max-width: 130px; font-size: 12.5px; }
    .hbp-sticky-suggest-media { width: 34px; height: 34px; }
}
/* ============================================================
   READ PREVIOUS / READ NEXT — post navigation cards
============================================================ */
.hbp-postnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 36px 0;
}
.hbp-postnav-card {
    position: relative;
    display: block;
    height: 192px;
    border-radius: var(--hbp-radius-lg, 16px);
    overflow: hidden;
    background: var(--hbp-gray-100, #F1F5F9);
    text-decoration: none !important;
}
.hbp-postnav-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s cubic-bezier(.2,0,0,1);
}
.hbp-postnav-media--blank { background: var(--hbp-primary, #2563EB); }
.hbp-postnav-card:hover .hbp-postnav-media { transform: scale(1.07); }
.hbp-postnav-tint {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    transition: background .25s ease;
}
.hbp-postnav-card:hover .hbp-postnav-tint { background: rgba(15, 23, 42, .68); }
.hbp-postnav-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hbp-postnav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
}
.hbp-postnav-label svg { flex-shrink: 0; transition: transform .25s cubic-bezier(.2,0,0,1); }
.hbp-postnav-prev:hover .hbp-postnav-label svg { transform: translateX(-4px); }
.hbp-postnav-next:hover .hbp-postnav-label svg { transform: translateX(4px); }
.hbp-postnav-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hbp-postnav-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hbp-postnav-meta-sep { color: rgba(255, 255, 255, .5); }
.hbp-postnav-next { text-align: right; }
.hbp-postnav-next .hbp-postnav-content { align-items: flex-end; }
.hbp-postnav-next .hbp-postnav-label { flex-direction: row-reverse; }
.hbp-postnav-next .hbp-postnav-meta { justify-content: flex-end; }
@media (max-width: 640px) {
    .hbp-postnav { grid-template-columns: 1fr; gap: 12px; margin: 28px 0; }
    .hbp-postnav-card { height: 150px; }
    .hbp-postnav-title { font-size: 15px; }
}