/* ==========================================================
       通用侧栏
       无卡片边框 / 无 Tab 感 / 轻量分区
    ========================================================== */

    .cms-sider {
        display: flex;

        flex-direction: column;

        width: 100%;
    }

    .cms-sider,
    .cms-sider * {
        box-sizing: border-box;
    }

    .cms-sider-section {
        position: relative;

        width: 100%;

        margin-bottom: 26px;

        padding-bottom: 24px;

        border-bottom:
            1px solid #f0e6e1;
    }

    .cms-sider-recommend-section {
        order: 1;
    }

    .cms-sider-tag-section {
        order: 2;
    }

    .cms-sider-share-section {
        order: 3;

        margin-bottom: 0;

        padding-bottom: 0;

        border-bottom: 0;
    }
.cms-sider-section-title {
        margin:
            0 0 14px;

        color: #3f2d2c;

        font-size: 16px;
        font-weight: 600;

        line-height: 1.5;
    }

    /* ==========================================================
       推荐资讯
    ========================================================== */

    .cms-sider
    .recommend-list {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .cms-sider
    .recommend-item {
        display: flex;

        align-items: flex-start;

        min-width: 0;

        padding:
            9px 0;
    }

    .cms-sider
    .recommend-number {
        flex:
            0 0 24px;

        width: 24px;

        margin-right: 8px;

        color: #9c8683;

        font-size: 13px;
        font-weight: 500;

        line-height: 1.7;

        text-align: left;
    }

    .cms-sider
    .recommend-item:nth-child(1)
    .recommend-number,
    .cms-sider
    .recommend-item:nth-child(2)
    .recommend-number,
    .cms-sider
    .recommend-item:nth-child(3)
    .recommend-number {
        color: #331d1e;
    }

    .cms-sider
    .recommend-content {
        flex: 1;

        min-width: 0;
    }

    .cms-sider
    .recommend-title {
        margin: 0;

        font-size: 14px;
        font-weight: 400;

        line-height: 1.7;
    }

    .cms-sider
    .recommend-title a {
        display: -webkit-box;

        overflow: hidden;

        color: #5c4645;

        text-decoration: none;

        word-break: break-word;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        transition:
            color .16s ease;
    }

    .cms-sider
    .recommend-title a:hover {
        color: #331d1e;
    }

    /* ==========================================================
       热门标签
       去掉描边，改为轻灰填充
    ========================================================== */

    .cms-sider
    .tag-cloud {
        display: flex;

        align-items: center;
        flex-wrap: wrap;

        gap:
            8px 7px;
    }

    .cms-sider
    .tag {
        display: inline-flex;

        align-items: center;

        min-height: 28px;

        padding:
            4px 10px;

        border: 0;

        border-radius: 4px;

        background: #faf7f5;

        color: #6b5553;

        font-size: 12px;

        line-height: 1.5;

        text-decoration: none;

        transition:
            color .16s ease,
            background-color .16s ease;
    }

    .cms-sider
    .tag:hover {
        background: #f7f2f1;

        color: #331d1e;
    }

    /* ==========================================================
       分享区域
       PC：系统分享 + 微博 + 二维码 + 复制链接
       移动端：系统分享 + 微博 + 复制链接
    ========================================================== */

    .cms-sider-share-wrap {
        display: block;

        width: 100%;
    }

    .cms-sider-share-info {
        width: 100%;
        min-width: 0;
    }

    .cms-sider-share-tip {
        margin:
            0 0 12px;

        color: #9c8683;

        font-size: 12px;

        line-height: 1.7;
    }

    .cms-sider-share-list {
        display: flex;

        align-items: center;
        flex-wrap: nowrap;

        gap: 8px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .cms-sider-share-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        background: #faf7f5;

        color: #6b5553;

        font: inherit;

        cursor: pointer;

        transition:
            color .16s ease,
            background-color .16s ease,
            transform .16s ease;
    }

    .cms-sider-share-button:hover {
        color: #4a3534;

        background: #f7f2f1;

        transform:
            translateY(-1px);
    }

    .cms-share-svg {
        display: block;

        width: 20px;
        height: 20px;

        fill: currentColor;
    }

    .cms-sider-share-copy {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        height: 36px;

        padding:
            0 14px;

        border: 0;

        border-radius: 18px;

        background: #faf7f5;

        color: #6b5553;

        font-size: 12px;
        font-weight: 400;

        line-height: 1;

        white-space: nowrap;

        cursor: pointer;

        transition:
            color .16s ease,
            background-color .16s ease;
    }

    .cms-sider-share-copy:hover {
        background: #eef2ff;

        color: #4f46e5;
    }

    .cms-sider-share-button.is-wechat:hover {
        background: #f0fdf4;

        color: #16a34a;
    }

    .cms-sider-share-button.is-weibo:hover {
        background: #fff1f2;

        color: #e11d48;
    }

    .cms-sider-share-qrcode-item {
        display: none;
    }

    .cms-sider-share-button.is-qrcode:hover {
        background: #f7f2f1;

        color: #331d1e;
    }

    /* ==========================================================
       PC 二维码弹层
    ========================================================== */

    .cms-sider-qrcode-modal {
        position: fixed;

        inset: 0;

        z-index: 100003;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 24px;

        background: rgba(15, 23, 42, .36);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .18s ease,
            visibility .18s ease;
    }

    .cms-sider-qrcode-modal.is-show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .cms-sider-qrcode-dialog {
        position: relative;

        width: 320px;
        max-width: calc(100vw - 48px);

        padding: 26px 24px 22px;

        border-radius: 8px;

        background: #ffffff;

        box-shadow: 0 18px 48px rgba(15, 23, 42, .16);

        text-align: center;

        transform: translateY(8px) scale(.98);

        transition: transform .18s ease;
    }

    .cms-sider-qrcode-modal.is-show
    .cms-sider-qrcode-dialog {
        transform: translateY(0) scale(1);
    }

    .cms-sider-qrcode-close {
        position: absolute;

        top: 10px;
        right: 10px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: transparent;

        color: #9c8683;

        font-size: 20px;

        cursor: pointer;
    }

    .cms-sider-qrcode-close:hover {
        background: #faf7f5;

        color: #5c4645;
    }

    .cms-sider-qrcode-title {
        margin: 0;

        color: #3f2d2c;

        font-size: 17px;
        font-weight: 600;

        line-height: 1.5;
    }

    .cms-sider-qrcode-tip {
        margin: 6px 0 18px;

        color: #9c8683;

        font-size: 12px;
        line-height: 1.6;
    }

    .cms-sider-qrcode-box {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 214px;
        height: 214px;

        margin: 0 auto;
        padding: 12px;

        border: 1px solid #f0e6e1;
        border-radius: 6px;

        background: #ffffff;
    }

    .cms-sider-qrcode-box img,
    .cms-sider-qrcode-box canvas {
        display: block !important;

        width: 188px !important;
        height: 188px !important;

        margin: 0 !important;
    }

    .cms-sider-qrcode-loading {
        color: #9c8683;

        font-size: 12px;
    }

    .cms-sider-qrcode-url {
        margin: 14px 0 0;

        overflow: hidden;

        color: #9c8683;

        font-size: 11px;
        line-height: 1.6;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ==========================================================
       轻提示
    ========================================================== */

    .cms-sider-share-toast {
        position: fixed;

        left: 50%;
        bottom: 34px;

        z-index: 100002;

        max-width:
            calc(100vw - 40px);

        padding:
            9px 14px;

        border-radius: 4px;

        background:
            rgba(15, 23, 42, .92);

        color: #ffffff;

        font-size: 13px;

        line-height: 1.5;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateX(-50%)
            translateY(8px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .cms-sider-share-toast.is-show {
        opacity: 1;

        visibility: visible;

        transform:
            translateX(-50%)
            translateY(0);
    }

    /* ==========================================================
       PC 吸顶
    ========================================================== */

    @media screen and (min-width: 993px) {

        .cms-sider {
            position: sticky;

            top: 88px;
        }

        .cms-sider-share-qrcode-item {
            display: list-item;
        }

    }

    /* ==========================================================
       移动端
    ========================================================== */

    @media screen and (max-width: 992px) {

        .cms-sider {
            position: static;

            top: auto;
        }

        /*
         * 移动端排序：
         * 文章正文之后首先显示分享，
         * 然后推荐资讯，最后热门标签。
         */
        .cms-sider-share-section {
            order: 1;

            margin-bottom: 20px;

            padding-bottom: 20px;

            border-bottom:
                1px solid #f0e6e1;
        }

        .cms-sider-recommend-section {
            order: 2;

            margin-bottom: 20px;

            padding-bottom: 20px;

            border-bottom:
                1px solid #f0e6e1;
        }

        .cms-sider-tag-section {
            order: 3;

            margin-bottom: 0;

            padding-bottom: 0;

            border-bottom: 0;
        }

        .cms-sider-share-wrap {
            display: block;

            width: 100%;
        }

        .cms-sider-share-info {
            width: 100%;
            min-width: 0;
        }

        .cms-sider-share-tip {
            margin:
                0 0 10px;

            color: #6b5553;

            font-size: 12px;

            line-height: 1.6;
        }

        .cms-sider-share-list {
            flex-wrap: nowrap;

            gap: 8px;

            width: 100%;
        }

        .cms-sider-share-list li {
            flex:
                0 0 auto;
        }

    }

    @media screen and (max-width: 768px) {

        .cms-sider-share-section,
        .cms-sider-recommend-section {
            margin-bottom: 18px;

            padding-bottom: 18px;
        }

        .cms-sider-section-title {
            margin-bottom: 12px;

            font-size: 15px;
        }

        .cms-sider
        .recommend-item {
            padding:
                8px 0;
        }

    }