@charset "utf-8";
/* ==========================================================================
   收藏 / 分享 / 举报 操作条  —— .hzs- 前缀，独立组件
   文件：/rszk/css/share.css
   依赖：/rszk/js/qrcode.js（仅微信、朋友圈二维码用）、/rszk/js/share.js
   说明：不依赖 kaoshi.css，可直接引用到新闻内容页模板
   ========================================================================== */

:root {
    --hzs-red: #c50205;
    --hzs-line: #e8eaef;
    --hzs-txt: #4a5162;
    --hzs-sub: #8b91a1;
}

.hzs {
    position: relative;
}

.hzs *,
.hzs *::before,
.hzs *::after {
    box-sizing: border-box;
}

/* ---------------- 条本体 ---------------- */
.hzs-bar {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 0;
    border-top: 1px dashed var(--hzs-line);
    font-size: 13px;
    line-height: 1;
    color: var(--hzs-txt);
}

/* 收藏按钮 */
.hzs-fav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 15px 0 12px;
    font-size: 13px;
    line-height: 1;
    color: var(--hzs-txt);
    background: #fff;
    border: 1px solid #e2e5eb;
    border-radius: 999px;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}

.hzs-star {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: none;
    padding: 0;
    font-size: 0;
    line-height: 1;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%239aa1b1'%20stroke-width='1.6'%20stroke-linejoin='round'%20d='M12%203.4l2.62%205.72%206.28.7-4.68%204.26%201.3%206.12L12%2016.9l-5.52%203.3%201.3-6.12L3.1%209.82l6.28-.7z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.hzs-fav:hover {
    color: var(--hzs-red);
    border-color: #f0b7b8;
    background: #fffafa;
}

.hzs-fav:hover .hzs-star {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%23c50205'%20stroke-width='1.6'%20stroke-linejoin='round'%20d='M12%203.4l2.62%205.72%206.28.7-4.68%204.26%201.3%206.12L12%2016.9l-5.52%203.3%201.3-6.12L3.1%209.82l6.28-.7z'/%3E%3C/svg%3E");
}

.hzs-fav.is-on {
    color: #a5741a;
    background: #fffdf4;
    border-color: #f0d195;
}

.hzs-fav.is-on .hzs-star {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23f5b21e'%20stroke='%23e5a413'%20stroke-width='1.2'%20stroke-linejoin='round'%20d='M12%203.4l2.62%205.72%206.28.7-4.68%204.26%201.3%206.12L12%2016.9l-5.52%203.3%201.3-6.12L3.1%209.82l6.28-.7z'/%3E%3C/svg%3E");
}

/* 竖分隔 */
.hzs-vline {
    width: 1px;
    height: 16px;
    margin: 0 18px;
    background: var(--hzs-line);
}

/* 分享图标组 */
.hzs-share {
    display: flex;
    align-items: center;
}

.hzs-share-t {
    margin-right: 10px;
    font-size: 13px;
    color: var(--hzs-sub);
    letter-spacing: .5px;
}

.hzs-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 9px;
    border-radius: 50%;
    background: #dfe3ea;
    transition: transform .16s, box-shadow .16s, opacity .16s;
}

.hzs-ic:last-child {
    margin-right: 0;
}

.hzs-ic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(31, 36, 48, .18);
}

.hzs-ic:active {
    transform: translateY(0);
}

/* 品牌图标：白色图形 + 底色，HTML 里只要一个空 <a> */
/* 品牌图标：白色图形 + CSS 底色，HTML 里只需一个空 <a> */
.hzs-wx { background: #07c160 url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M8.691%202.188C3.891%202.188%200%205.476%200%209.53c0%202.212%201.17%204.203%203.002%205.55a.59.59%200%200%201%20.213.665l-.39%201.48c-.019.07-.048.141-.048.213%200%20.163.13.295.29.295a.326.326%200%200%200%20.167-.054l1.903-1.114a.864.864%200%200%201%20.717-.098%2010.16%2010.16%200%200%200%202.837.403c.276%200%20.543-.027.811-.05-.857-2.578.157-4.972%201.932-6.446%201.703-1.415%203.882-1.98%205.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785%205.991c.642%200%201.162.529%201.162%201.18a1.17%201.17%200%200%201-1.162%201.178A1.17%201.17%200%200%201%204.623%207.17c0-.651.52-1.18%201.162-1.18zm5.813%200c.642%200%201.162.529%201.162%201.18a1.17%201.17%200%200%201-1.162%201.178%201.17%201.17%200%200%201-1.162-1.178c0-.651.52-1.18%201.162-1.18zm5.34%202.867c-1.797-.052-3.746.512-5.28%201.786-1.72%201.428-2.687%203.72-1.78%206.22.942%202.453%203.666%204.229%206.884%204.229.826%200%201.622-.12%202.361-.336a.722.722%200%200%201%20.598.082l1.584.926a.272.272%200%200%200%20.14.047c.134%200%20.24-.111.24-.247%200-.06-.023-.12-.038-.177l-.327-1.233a.582.582%200%200%201-.023-.156.49.49%200%200%201%20.201-.398C23.024%2018.48%2024%2016.82%2024%2014.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53%203.274c.535%200%20.969.44.969.982a.976.976%200%200%201-.969.983.976.976%200%200%201-.969-.983c0-.542.434-.982.97-.982zm4.844%200c.535%200%20.969.44.969.982a.976.976%200%200%201-.969.983.976.976%200%200%201-.969-.983c0-.542.434-.982.969-.982z'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
.hzs-qq { background: #12b7f5 url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M21.395%2015.035a40%2040%200%200%200-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526%204.632%2017.351%200%2012%200S4.474%204.632%204.474%209.241c0%20.274.013.804.014.836l-1.08%202.695a39%2039%200%200%200-.802%202.264c-1.021%203.283-.69%204.643-.438%204.673.54.065%202.103-2.472%202.103-2.472%200%201.469.756%203.387%202.394%204.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578%205.883.369%207.482.189%201.6.18%207.14.389%207.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836%201.637-1.384%202.393-3.302%202.393-4.771%200%200%201.563%202.537%202.103%202.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
.hzs-wb { background: #e6162d url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M10.098%2020.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609%202.759-5.047%206.74-5.441%203.979-.394%207.413%201.404%207.671%204.018.259%202.6-2.759%205.049-6.737%205.439l-.002.004zM9.05%2017.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595%201.176-.861%201.793-.601.622.263.82.972.442%201.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.601l.014-.028zm.176-2.719c-1.893-.493-4.033.45-4.857%202.118-.836%201.704-.026%203.591%201.886%204.21%201.983.64%204.318-.341%205.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.57-.18-.405-.615.375-.977.42-1.804%200-2.404-.781-1.112-2.915-1.053-5.364-.03%200%200-.766.331-.571-.271.376-1.217.315-2.224-.27-2.809-1.338-1.337-4.869.045-7.888%203.08C1.309%2010.87%200%2013.273%200%2015.348c0%203.981%205.099%206.395%2010.086%206.395%206.536%200%2010.888-3.801%2010.888-6.82%200-1.822-1.547-2.854-2.915-3.284v.01zm1.908-5.092c-.766-.856-1.908-1.187-2.96-.962-.436.09-.706.511-.616.932.09.42.511.691.932.602.511-.105%201.067.044%201.442.465.376.421.466.977.316%201.473-.136.406.089.856.51.992.405.119.857-.105.992-.512.33-1.021.12-2.178-.646-3.035l.03.045zm2.418-2.195c-1.576-1.757-3.905-2.419-6.054-1.968-.496.104-.812.587-.706%201.081.104.496.586.813%201.082.707%201.532-.331%203.185.15%204.296%201.383%201.112%201.246%201.429%202.943.947%204.416-.165.48.106%201.007.586%201.157.479.165.991-.104%201.157-.586.675-2.088.241-4.478-1.338-6.235l.03.045z'/%3E%3C/svg%3E") center / 17px 17px no-repeat; }
.hzs-mo { background: #ff9f18 url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M12%203.2l2.55%205.55%206.05.68-4.5%204.1%201.26%205.95L12%2016.5l-5.36%202.98%201.26-5.95-4.5-4.1%206.05-.68z'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
.hzs-link { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%236b7280'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M10%2013.5a4.5%204.5%200%200%200%206.4.4l2.2-2.2a4.5%204.5%200%200%200-6.4-6.4L11%206.5M14%2010.5a4.5%204.5%200%200%200-6.4-.4l-2.2%202.2a4.5%204.5%200%200%200%206.4%206.4L13%2017.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }

.hzs-mo {
    border-radius: 7px;
}

/* 百度贴吧：蓝底 + 白色「贴」字，不依赖图片 */
.hzs-tb {
    background: #3385ff;
}

.hzs-tb::after {
    content: "贴";
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.hzs-link {
    border: 1px solid #e2e5eb;
}

.hzs-link:hover {
    border-color: #c9ceda;
}

/* 举报 */
.hzs-report {
    margin-left: auto;
    font-size: 13px;
    color: var(--hzs-sub);
    text-decoration: none;
}

.hzs-report:hover {
    color: var(--hzs-red);
    text-decoration: underline;
}

/* ---------------- 提示条 ---------------- */
.hzs-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #b26b12;
    background: #fffaf0;
    border: 1px solid #ffe7bd;
    border-radius: 3px;
}

.hzs-warn-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #f5a623;
    border-radius: 50%;
}

.hzs-warn a {
    color: var(--hzs-red);
    text-decoration: none;
}

.hzs-warn a:hover {
    text-decoration: underline;
}

/* ---------------- 二维码浮层 ---------------- */
.hzs-qr-pop {
    position: absolute;
    z-index: 60;
    top: 44px;
    left: 0;
    width: 168px;
    padding: 12px 12px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(31, 36, 48, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}

.hzs-qr-pop.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hzs-qr-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--hzs-arrow, 26px);
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #eceef3;
    border-top: 1px solid #eceef3;
    transform: rotate(45deg);
}

.hzs-qr-box {
    width: 132px;
    height: 132px;
    margin: 0 auto 8px;
}

.hzs-qr-box svg,
.hzs-qr-box img,
.hzs-qr-box canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hzs-qr-tip {
    font-size: 12px;
    line-height: 1.5;
    color: var(--hzs-sub);
}

/* ---------------- 轻提示 ---------------- */
.hzs-toast {
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 40%;
    padding: 10px 20px;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: rgba(29, 33, 41, .88);
    border-radius: 4px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.hzs-toast.is-show {
    opacity: 1;
}

/* ---------------- 举报弹层 ---------------- */
.hzs-mask {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 20, 26, .45);
}

.hzs-modal {
    width: 420px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 46px rgba(15, 18, 25, .28);
    overflow: hidden;
}

.hzs-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f1f5;
}

.hzs-modal-hd strong {
    font-size: 15px;
    font-weight: 600;
    color: #1f2430;
}

.hzs-modal-x {
    width: 24px;
    height: 24px;
    font-size: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}

.hzs-modal-x::before,
.hzs-modal-x::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 16px;
    height: 1.5px;
    background: #9299a8;
}

.hzs-modal-x::before {
    transform: rotate(45deg);
}

.hzs-modal-x::after {
    transform: rotate(-45deg);
}

.hzs-modal-bd {
    padding: 16px;
}

.hzs-modal-bd > p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
}

.hzs-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hzs-reason {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    color: #4a5162;
    background: #f6f7fa;
    border: 1px solid #eceef3;
    border-radius: 3px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.hzs-reason:hover {
    color: var(--hzs-red);
    border-color: #f0b7b8;
}

.hzs-reason.is-on {
    color: var(--hzs-red);
    background: #fff5f5;
    border-color: var(--hzs-red);
}

.hzs-modal textarea {
    display: block;
    width: 100%;
    height: 72px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    color: #1f2430;
    background: #fff;
    border: 1px solid #e2e5eb;
    border-radius: 3px;
    resize: none;
    outline: none;
}

.hzs-modal textarea:focus {
    border-color: #e6a3a4;
}

.hzs-modal-ft {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 16px 16px;
}

.hzs-btn {
    height: 34px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 1;
    border-radius: 3px;
    border: 1px solid #e2e5eb;
    background: #fff;
    color: #4a5162;
    cursor: pointer;
}

.hzs-btn:hover {
    border-color: #c9ceda;
}

.hzs-btn-main {
    color: #fff;
    background: var(--hzs-red);
    border-color: var(--hzs-red);
}

.hzs-btn-main:hover {
    background: #a80103;
    border-color: #a80103;
}

.hzs-btn-main:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------------- 窄屏 ---------------- */
@media screen and (max-width: 1100px) {
    .hzs-bar {
        flex-wrap: wrap;
        min-height: 0;
        row-gap: 10px;
    }

    .hzs-report {
        margin-left: 0;
    }
}

/* ================= 窄版（hzs-side）：放进封面/缩略图下方的窄列 ================= */
.hzs-side {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* 单行排布：左「收藏 · 举报」，右「分享图标」 */
.hzs-side .hzs-bar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 12px 0 2px;
    margin-top: 12px;
}

.hzs-side .hzs-fav {
    flex: none;
    justify-content: center;
    min-width: 82px;
    height: 28px;
    padding: 0 12px 0 10px;
}

.hzs-side .hzs-report {
    flex: none;
    margin-left: 0;
    font-size: 12px;
}

/* 分享组靠右 */
.hzs-side .hzs-share {
    width: auto;
    margin: 0 0 0 auto;
    justify-content: flex-end;
}

.hzs-side .hzs-ic {
    width: 26px;
    height: 26px;
    margin-right: 6px;
}

.hzs-side .hzs-tb::after {
    font-size: 11px;
}

.hzs-side .hzs-share .hzs-ic:last-child {
    margin-right: 0;
}

.hzs-side .hzs-vline {
    display: none;
}

.hzs-side .hzs-warn {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.6;
}

/* 窄列里浮层向上弹到封面区，箭头朝下 */
.hzs-side .hzs-qr-pop {
    top: auto;
    bottom: calc(100% + 18px);
}

.hzs-side .hzs-qr-pop::before {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #eceef3;
    border-bottom: 1px solid #eceef3;
}

/* ================= 登录提示弹层 ================= */
.hzs-modal-sm {
    width: 400px;
}

.hzs-login-p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #5b6273;
}

/* 弹层里的 <a> 当按钮用 */
.hzs-modal-ft a.hzs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ================= 文章页版（hzs-art）：正文末尾整块 ================= */
.hzs-art {
    margin: 28px 0 26px;
    padding: 16px 20px 15px;
    background: linear-gradient(180deg, #fbfcfe, #f6f8fb);
    border: 1px solid #eceff4;
    border-radius: 6px;
}

.hzs-art-hd {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}

.hzs-art-t {
    position: relative;
    padding-left: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #1f2430;
}

.hzs-art-t::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    margin-top: -7px;
    background: var(--hzs-red);
    border-radius: 2px;
}

.hzs-art-sub {
    font-size: 12px;
    color: var(--hzs-sub);
}

.hzs-art .hzs-bar {
    position: relative;
    min-height: 0;
    padding: 14px 0 0;
    border-top: 0;
}

.hzs-art .hzs-fav {
    height: 34px;
    padding: 0 16px 0 13px;
    font-family: inherit;
}

.hzs-art .hzs-report {
    margin: 0 0 0 16px;
}

.hzs-art .hzs-share {
    margin-left: auto;
}

.hzs-art .hzs-ic {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

.hzs-art .hzs-tb::after {
    font-size: 15px;
}

.hzs-art .hzs-share .hzs-ic:last-child {
    margin-right: 0;
}

/* 窄高度容器里浮层向上弹，箭头朝下 */
.hzs-art .hzs-qr-pop {
    top: auto;
    bottom: 100%;
}

.hzs-art .hzs-qr-pop::before {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #eceef3;
    border-bottom: 1px solid #eceef3;
}

@media screen and (max-width: 1366px) {
    .hzs-art-sub {
        display: none;
    }
}

/* 兼容新闻页的全局 a,p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis } */
.hzs-modal-bd p,
.hzs-login-p,
.hzs-warn,
.hzs-qr-tip {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}