:root{
      --primary-color:#5468ff; --light-color:#f5f7fa; --dark-color:#3d4ecc;
      --text-color:#2D3748; --text-light:#718096; --border-color:#e2e8f0;
      --free-color:#389E0D; --price-color:#5468ff; --price-light:#7c8aff;
      --disabled-bg:#F5F5F5; --disabled-color:#999; --spec-desc-bg:#FAFAFA;
      --card-shadow:0 2px 8px rgba(0,0,0,0.06);
      --service-btn-bg:#5468ff; --service-online-bg:#4CAF50;
    }
    *{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei","PingFang SC",sans-serif}
    body{background-color:var(--light-color);color:var(--text-color);min-height:100vh}
    .container{max-width:1200px;margin:0 auto;padding:20px 15px 30px;position:relative}
    @media (min-width:768px){.container{padding:30px 40px 40px}}
    @media (min-width:1024px){.container{padding:40px 60px 40px}}
    .back-btn{position:fixed;top:15px;left:15px;padding:8px 16px;background-color:var(--primary-color);color:#fff;text-decoration:none;border-radius:8px;font-size:13px;font-weight:600;z-index:99;box-shadow:var(--card-shadow);transition:all .3s ease}
    .back-btn:hover{background-color:var(--dark-color)}
    .goods-title{text-align:center;font-size:22px;margin:30px 0 10px;line-height:1.4;font-weight:600}
    .goods-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;font-size:13px;color:var(--text-light);margin-bottom:15px}
    .goods-meta span{display:inline-flex;align-items:center;gap:4px}
    .goods-meta i{opacity:.8}
    .feedback-btn{display:inline-flex;align-items:center;gap:4px;background:var(--primary-color);color:#fff;padding:4px 12px;border-radius:15px;font-size:12px;text-decoration:none;transition:all .3s ease}
    .feedback-btn:hover{background:var(--dark-color);color:#fff}
    
    /* 文章标签区域样式 */
    .article-tags-section{padding:20px 0;margin-bottom:10px}
    .article-tags-end{display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;margin-bottom:15px}
    .article-tags-end::before,.article-tags-end::after{content:'';flex:1;max-width:100px;height:0;border-top:1px dashed #ddd}
    .article-tags-end::before{margin-right:15px}
    .article-tags-end::after{margin-left:15px}
    .article-tags-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
    .article-tag-item{padding:0 12px;height:28px;line-height:28px;border-radius:20px;font-size:12px;text-decoration:none;transition:all .2s ease;display:inline-flex;align-items:center;gap:4px;background:#f7f7f7;color:#888;border:1px solid #eee}
    .article-tag-item:hover{opacity:.85;color:#666;border-color:#ddd}
    .article-tag-item.tag-color-0{background:#e8f4fd;color:#2196f3;border-color:#bbdefb}
    .article-tag-item.tag-color-0:hover{background:#bbdefb;color:#1976d2}
    .article-tag-item.tag-color-1{background:#fff8e1;color:#ff9800;border-color:#ffecb3}
    .article-tag-item.tag-color-1:hover{background:#ffecb3;color:#f57c00}
    .goods-intro{background:#fff;padding:18px 20px;border-radius:10px;margin-bottom:15px;line-height:1.8;font-size:14px;box-shadow:var(--card-shadow);border:1px solid var(--border-color);color:var(--primary-color);font-weight:500}
    .goods-content{background:#fff;padding:20px;border-radius:10px;margin-bottom:20px;line-height:1.8;font-size:14px;box-shadow:var(--card-shadow);border:1px solid var(--border-color)}
    /* 文章内容内的 container 不应继承页面级 padding，否则每行间距会过大 */
    .goods-content .container{max-width:none;margin:0;padding:0}
    .goods-content img{max-width:100%;height:auto;border-radius:8px}
    /* 代码高亮区域 - 大框套小框结构，左右留出间距 */
    .goods-content .code-block-wrapper{margin:12px 0;padding:16px;background:#fff;border-radius:6px;border:1px solid #ddd;box-shadow:0 1px 3px rgba(0,0,0,.06)}
    .goods-content .code-block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .goods-content .code-block-lang-label{font-size:14px;font-weight:500;color:#333;border-bottom:2px solid #FF4D4F;padding-bottom:2px}
    .goods-content .code-block-toolbar{flex-shrink:0}
    .goods-content .code-copy-btn{padding:6px 14px;font-size:12px;color:#555;background:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;transition:all .2s;white-space:nowrap}
    .goods-content .code-copy-btn:hover{color:#333;background:#e8e8e8}
    .goods-content .code-copy-btn.copied{color:#4CAF50;border-color:#4CAF50;background:#e8f5e9}
    .goods-content .code-block-inner{background:#f8f8f8;border:1px solid #eee;border-radius:6px;overflow:hidden;position:relative;isolation:isolate}
    .goods-content .code-block-inner pre[class*="language-"]{margin:0;padding:16px 20px;border:none;background:transparent;font-size:13px;line-height:1.5;overflow-x:auto;max-height:400px;overflow-y:auto;white-space:pre}
    .goods-content .code-block-inner code{display:block;white-space:pre;word-break:normal;overflow-wrap:normal}
    .goods-content pre[class*="language-"]:not(.code-block-wrapper pre){margin:12px 0;padding:14px 20px;border-radius:6px;overflow-x:auto;font-size:13px;line-height:1.5;border:1px solid #ebeae8;background:#f8f7f5}
    /* Prism token 颜色 */
    .goods-content .token.comment,.goods-content .token.prolog,.goods-content .token.doctype,.goods-content .token.cdata{color:#8d9baa}
    .goods-content .token.keyword,.goods-content .token.selector,.goods-content .token.atrule,.goods-content .token.important{color:#a078e4}
    .goods-content .token.string,.goods-content .token.attr-value,.goods-content .token.regex{color:#e3666f}
    .goods-content .token.variable,.goods-content .token.number,.goods-content .token.boolean,.goods-content .token.constant{color:#6eb6ff}
    .goods-content .token.function,.goods-content .token.class-name,.goods-content .token.builtin{color:#4dc370}
    .goods-content .token.punctuation,.goods-content .token.operator{color:#4a5568}
    .goods-content .token.tag,.goods-content .token.property{color:#6eb6ff}
    /* 正文内表格样式（后台编辑器插入的表格） */
    .goods-content table{border-collapse:collapse;width:100%;margin:1em 0;min-width:200px}
    .goods-content table td,.goods-content table th{border:1px solid #dcdcde;padding:8px 10px;text-align:left;vertical-align:top}
    .goods-content table th{background-color:#f6f7f7;font-weight:600}
    .goods-content .table-wrapper{overflow-x:auto;margin:1em 0}
    .goods-content .table-wrapper table{margin:0;min-width:200px}
    .screenshots-section{margin-bottom:20px}
    .screenshots-title{font-size:16px;font-weight:600;margin-bottom:12px;text-align:center;color:var(--text-color)}
    .goods-images{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
    .goods-img-container{width:100%;cursor:pointer;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1px solid var(--border-color);background:#fff;transition:all .25s ease}
    .goods-img-container:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);border-color:var(--primary-color)}
    .goods-img-wrapper{position:relative;width:100%;overflow:hidden}
    .goods-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .25s ease}
    .goods-img-container:hover .goods-img{transform:scale(1.03)}
    .goods-img-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
    .goods-img-container:hover .goods-img-overlay{opacity:1}
    .zoom-icon{width:28px;height:28px;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
    .zoom-icon i{color:var(--primary-color);font-size:12px}
    .img-intro{padding:6px 8px;font-size:11px;color:var(--text-light);text-align:center;background:#fafafa;border-top:1px solid var(--border-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


    .copyright-section{margin-bottom:20px}
    .copyright-fieldset{border:1px dashed #008cff;padding:15px 20px;border-radius:8px;background:#fff;box-shadow:var(--card-shadow)}
    .copyright-legend{width:auto;padding:6px 20px;margin:0 auto;text-align:center;background:linear-gradient(to right,#FFCC99,#FF99CC);border-radius:20px;font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:6px;justify-content:center}
    .copyright-legend i{font-size:13px}
    .copyright-content{line-height:2;font-size:13px;color:#6d6d6d}
    .copyright-line{margin-bottom:2px}
    @media (max-width:480px){
      .copyright-fieldset{padding:12px 15px}
      .copyright-legend{font-size:13px;padding:5px 15px}
      .copyright-content{font-size:12px;line-height:1.9}
    }

    .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100000;align-items:center;justify-content:center;backdrop-filter:blur(2px);overflow-y:auto;padding:20px 15px}
    #posterModal{background:rgba(0,0,0,0.6);padding:20px;box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none}
    #posterModal::-webkit-scrollbar{display:none}
    .modal-content{background:#fff;width:90%;max-width:500px;border-radius:12px;padding:25px;box-shadow:0 8px 30px rgba(0,0,0,.15);border:1px solid var(--border-color);position:relative;margin:auto;max-height:calc(100vh - 40px);overflow-y:auto}
    @media (max-width: 480px) {
      .modal-content{padding:20px 15px;max-height:calc(100vh - 40px)}
      .modal-title{font-size:16px;margin-bottom:15px}
      .spec-btn{min-width:100px;padding:10px 6px;font-size:13px}
      .spec-btn .spec-name{font-size:13px;margin-bottom:4px}
      .spec-btn .spec-price{font-size:13px}
      .spec-desc{padding:12px;font-size:13px;margin-bottom:15px}
      .modal-buttons{gap:10px}
      .modal-btn{padding:10px 0;font-size:14px}
    }
    .modal-title{text-align:center;font-size:18px;margin-bottom:20px;font-weight:600}
    .spec-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
    .spec-btn{flex:1;min-width:120px;padding:12px 8px;border:2px solid var(--border-color);border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .3s ease;font-size:14px;position:relative}
    .spec-btn.active{border-color:var(--primary-color);background:rgba(84,104,255,.05);box-shadow:0 2px 8px rgba(84,104,255,.1)}
    .spec-btn.active::before{content:'';position:absolute;top:-1px;right:-1px;width:20px;height:20px;background:var(--primary-color);border-radius:0 6px 0 8px;display:flex;align-items:center;justify-content:center}
    .spec-btn.active::after{content:'✓';position:absolute;top:0;right:3px;color:#fff;font-size:11px;font-weight:bold}
    .spec-btn.purchased{border-color:#e0e0e0;background:#fafafa}
    .spec-btn.purchased.active{border-color:#4CAF50;background:rgba(76,175,80,.08);box-shadow:0 2px 10px rgba(76,175,80,.25)}
    .spec-btn.purchased.active::before{background:#4CAF50}
    .spec-btn .spec-name{font-size:14px;margin-bottom:6px;display:block}
    .spec-btn .spec-price{font-size:14px;color:var(--price-color);font-weight:600;display:block}
    .spec-btn .spec-price.free{color:var(--free-color)}
    .spec-desc{padding:15px;background:var(--spec-desc-bg);border-radius:8px;margin-bottom:18px;line-height:1.8;font-size:14px;border:1px solid var(--border-color);white-space:pre-line}
    
    /* 会员价格相关样式 */
    .modal-title-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
    .modal-title-wrap .modal-title{margin-bottom:0}
    .view-member-price-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff;border:none;border-radius:15px;font-size:11px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}
    .view-member-price-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(255,152,0,.4)}
    .view-member-price-btn i{font-size:10px}
    .spec-btn .view-service-price-btn{display:inline-flex;align-items:center;gap:3px;margin-top:6px;padding:3px 8px;background:linear-gradient(135deg,#fff8e1,#ffecb3);color:#ff6b00;border:1px solid #ffd54f;border-radius:10px;font-size:11px;font-weight:500;cursor:pointer;transition:all .3s ease}
    .spec-btn .view-service-price-btn:hover{background:linear-gradient(135deg,#ffecb3,#ffe082);transform:scale(1.02);box-shadow:0 2px 6px rgba(255,152,0,.3)}
    .spec-btn .view-service-price-btn i{font-size:10px;color:#ff9800}
    
    /* 会员价格弹窗样式 */
    .member-price-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100001;align-items:center;justify-content:center;padding:15px}
    .member-price-modal-content{background:#fff;width:95%;max-width:500px;border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.2);position:relative;max-height:80vh;overflow-y:auto}
    .member-price-modal-title{text-align:center;font-size:16px;font-weight:600;margin-bottom:15px;color:var(--text-color)}
    .member-price-table{width:100%;border-collapse:collapse;font-size:13px}
    .member-price-table th,.member-price-table td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--border-color)}
    .member-price-table th{background:#f8f9fa;font-weight:600;color:var(--text-light);font-size:12px}
    .member-price-table th:first-child,.member-price-table td:first-child{text-align:left;font-weight:600}
    .member-price-table td{color:var(--text-color)}
    .member-price-table .price-original{color:var(--text-light)}
    .member-price-table .price-member{color:#ff5722;font-weight:600}
    .member-price-table .price-free{color:var(--free-color);font-weight:600}
    .member-price-close-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#666;border:none;transition:all .3s ease}
    .member-price-close-btn:hover{background:#e8e8e8;transform:rotate(90deg)}
    .single-service-price{margin-top:15px}
    .single-service-price .service-name{font-size:14px;font-weight:600;color:var(--primary-color);margin-bottom:12px;text-align:center}
    .single-service-price-list{display:flex;flex-direction:column;gap:8px}
    .single-service-price-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f8f9fa;border-radius:8px;border:1px solid var(--border-color)}
    .single-service-price-item .plan-name{font-size:13px;color:var(--text-color);font-weight:500}
    .single-service-price-item .plan-price{font-size:14px;color:#ff5722;font-weight:600}
    .single-service-price-item .plan-price.free{color:var(--free-color)}
    .single-service-price-item.original{background:#fff}
    .single-service-price-item.original .plan-name{color:var(--text-light)}
    .single-service-price-item.original .plan-price{color:var(--text-color)}
    
    .modal-buttons{display:flex;gap:12px}
    .modal-btn{flex:1;padding:12px 0;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}
    .cancel-btn{background:var(--disabled-bg);color:var(--text-light)}
    .confirm-btn{background:var(--primary-color);color:#fff}
    .confirm-btn:hover{background:var(--dark-color)}
    .confirm-btn.disabled{background:var(--disabled-bg);color:var(--disabled-color);cursor:not-allowed}

    .modal-close-btn{position:absolute;top:15px;left:15px;width:28px;height:28px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#666;border:none;transition:all .3s ease}
    .modal-close-btn:hover{transform:rotate(90deg);background:#e8e8e8}

    .service-modal-content{background:#fff;width:90%;max-width:400px;border-radius:12px;padding:25px;box-shadow:0 8px 30px rgba(0,0,0,.15);border:1px solid var(--border-color);position:relative;text-align:center}
    .service-spec-title{font-size:16px;margin-bottom:15px;font-weight:600}
    .contact-service-ok-btn{width:100%;display:block;padding:12px 0;margin-top:20px}
    .qr-code-container{margin:0 auto 15px;width:180px;height:180px;border:1px solid var(--border-color);border-radius:8px;padding:8px;background:#fff}
    .qr-code-container img{width:100%;height:100%;object-fit:cover;border-radius:4px}

    .download-modal-body .form-control{background:#f8f9fa;border:1px solid var(--border-color);border-radius:6px;padding:10px 14px;font-size:13px;min-width:0;flex:1}
    .download-modal-body .btn{padding:10px 18px;border-radius:6px;border:none;font-weight:600;cursor:pointer;white-space:nowrap;font-size:13px}
    .download-modal-body .btn-primary{background:var(--primary-color);color:#fff}
    .download-modal-body .btn-primary:hover{background:var(--dark-color)}
    .download-modal-body .copy-btn.copied{background:#4CAF50!important}
    .download-item-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .download-item-row input{flex:1;min-width:120px}
    .download-modal-body .small{font-size:13px}
    .download-modal-body .text-muted{color:var(--text-light)}
    .download-modal-body .d-block{display:block}
    .download-modal-body .mb-1{margin-bottom:6px}
    .download-modal-body .mb-3{margin-bottom:16px}
    .download-modal-body .text-success{color:#28a745}

    .image-preview-modal-content{background:transparent;width:95%;max-width:800px;text-align:center;position:relative}
    .preview-img{width:100%;max-height:70vh;object-fit:contain;border-radius:8px;margin-bottom:20px;touch-action:none;-webkit-user-drag:none}
    .image-preview-buttons{display:flex;gap:15px;justify-content:center}
    .preview-btn{padding:12px 30px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;min-width:120px;transition:all .3s ease}
    .next-btn{background:#4CAF50;color:#fff}
    .next-btn:hover{background:#43a047}
    .close-btn2{background:var(--primary-color);color:#fff}
    .close-btn2:hover{background:var(--dark-color)}

    @media (max-width:768px){
      .goods-images{grid-template-columns:repeat(4,1fr);gap:8px}
      .goods-img{aspect-ratio:4/3}
      .zoom-icon{width:24px;height:24px}
      .zoom-icon i{font-size:10px}
      .img-intro{padding:5px 6px;font-size:10px}
      .screenshots-title{font-size:15px;margin-bottom:10px}
    }
    @media (max-width:480px){
      .goods-title{font-size:20px}
      .goods-images{grid-template-columns:repeat(3,1fr);gap:6px}
      .goods-intro{padding:15px;font-size:14px}
      .preview-btn{padding:10px 25px;font-size:14px;min-width:100px}
      .goods-img-container{border-radius:4px}
      .zoom-icon{width:22px;height:22px}
      .zoom-icon i{font-size:10px}
      .img-intro{padding:4px 5px;font-size:9px}
      .screenshots-title{font-size:14px;margin-bottom:8px}
    }

    /* 广告容器样式 */
    .ad-container {
      max-width: 1200px;
      margin: 0 auto 20px;
      text-align: center;
    }
    .ad-container img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto 6px;
      border-radius: 8px;
    }
    .ad-container img:last-child {
      margin-bottom: 0;
    }
    .ad-container a {
      display: block;
      margin-bottom: 6px;
    }
    .ad-container a:last-child {
      margin-bottom: 0;
    }
    .ad-container a img {
      margin-bottom: 0;
    }
    .ad-article_top {
      margin-bottom: 15px;
    }

    /* 资源购买板块样式 */
    .resource-purchase-box {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border-color);
    }
    .resource-purchase-inner {
      display: flex;
      gap: 16px;
    }
    .resource-thumb {
      flex-shrink: 0;
      width: 120px;
      height: 90px;
      border-radius: 8px;
      overflow: hidden;
      background: #f5f7fa;
    }
    .resource-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .resource-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
    }
    .resource-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color);
      line-height: 1.4;
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .resource-desc {
      font-size: 13px;
      color: var(--text-light);
      margin-bottom: 10px;
    }
    .resource-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .resource-price-area {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .resource-price {
      font-size: 22px;
      font-weight: 700;
      color: var(--price-color);
    }
    .resource-price-original {
      font-size: 13px;
      color: #999;
      text-decoration: line-through;
    }
    .price-slash {
      position: relative;
      display: inline-block;
      color: #999;
    }
    .price-slash::after {
      content: '';
      position: absolute;
      left: -2px;
      top: 50%;
      width: calc(100% + 4px);
      height: 2px;
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
      transform: rotate(12deg);
      transform-origin: center;
    }
    .member-discount-hint {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #ff6b00;
      background: linear-gradient(135deg, #fff8e1, #ffecb3);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid #ffd54f;
      margin-left: 6px;
      cursor: pointer;
      transition: all .2s;
    }
    .member-discount-hint:hover {
      background: linear-gradient(135deg, #ffecb3, #ffe082);
    }
    .member-discount-hint i {
      font-size: 10px;
      color: #ff9800;
    }
    .resource-btn-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .resource-demo-btn {
      padding: 10px 20px;
      background: linear-gradient(135deg, #52c41a, #389e0d);
      color: #fff;
      border: none;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(82,196,26,0.3);
    }
    .resource-demo-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(82,196,26,0.4);
    }
    .resource-buy-btn {
      padding: 10px 28px;
      background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
      color: #fff;
      border: none;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(84,104,255,0.3);
    }
    .resource-buy-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(84,104,255,0.4);
    }
    .resource-tag {
      position: absolute;
      top: -1px;
      right: -1px;
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
      color: #fff;
      font-size: 11px;
      padding: 4px 12px;
      border-radius: 0 12px 0 12px;
    }
    .resource-tag.free-tag {
      background: linear-gradient(135deg, #52c41a, #389e0d);
    }
    .resource-purchase-box {
      position: relative;
    }
    @media (max-width: 768px) {
      .resource-thumb {
        display: none;
      }
      .resource-bottom {
        flex-direction: column;
        align-items: stretch;
      }
      .resource-price-area {
        justify-content: center;
      }
      .resource-btn-group {
        width: 100%;
        flex-direction: row;
        justify-content: center;
      }
      .resource-demo-btn,
      .resource-buy-btn {
        flex: 1;
        text-align: center;
      }
    }
    .ad-article_bottom {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    @media (max-width: 768px) {
      .ad-container {
        margin: 0 auto 15px;
      }
      .ad-container img {
        margin-bottom: 5px;
        border-radius: 6px;
      }
      .ad-container a {
        margin-bottom: 5px;
      }
      .ad-article_top {
        margin-bottom: 10px;
      }
      .ad-article_bottom {
        margin-top: 15px;
        margin-bottom: 15px;
      }
    }

    /* 点赞/分享/收藏区域样式 */
    .interaction-section {
      padding: 20px 0 30px;
      margin-bottom: 20px;
      text-align: center;
    }
    .article-tags-section + .interaction-section {
      padding-top: 10px;
    }
    .interaction-title {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 12px;
      margin-bottom: 20px;
    }
    .interaction-title::before,
    .interaction-title::after {
      content: '';
      flex: 1;
      max-width: 100px;
      height: 0;
      border-top: 1px dashed #ddd;
    }
    .interaction-title::before {
      margin-right: 15px;
    }
    .interaction-title::after {
      margin-left: 15px;
    }
    .interaction-buttons {
      display: flex;
      justify-content: center;
      gap: 0;
    }
    .interaction-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 0;
      border: none;
      background: none;
      cursor: pointer;
      color: #aaa;
      transition: all 0.3s ease;
      width: 100px;
      min-width: 100px;
      max-width: 100px;
      box-sizing: border-box;
    }
    .interaction-btn .btn-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border-radius: 50%;
      background: #f5f5f5;
      transition: all 0.3s ease;
    }
    .interaction-btn .btn-icon svg {
      width: 24px;
      height: 24px;
      display: block;
      flex-shrink: 0;
      fill: currentColor;
      transition: all 0.3s ease;
    }
    .interaction-btn .btn-text {
      font-size: 12px;
      line-height: 1.4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      white-space: nowrap;
      font-weight: 500;
    }
    .interaction-btn .btn-count {
      display: inline;
    }
    .interaction-btn .btn-count.hidden {
      display: none;
    }
    .interaction-btn:hover {
      color: #666;
    }
    .interaction-btn:hover .btn-icon {
      transform: scale(1.1);
    }
    /* 点赞按钮 */
    .interaction-btn.like-btn:hover {
      color: #ff6b6b;
    }
    .interaction-btn.like-btn:hover .btn-icon {
      background: #fff0f0;
    }
    .interaction-btn.like-btn.active {
      color: #ff4757;
    }
    .interaction-btn.like-btn.active .btn-icon {
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
      color: #fff;
      box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    }
    /* 分享按钮 */
    .interaction-btn.share-btn:hover {
      color: #1890ff;
    }
    .interaction-btn.share-btn:hover .btn-icon {
      background: #e6f7ff;
    }
    /* 收藏按钮 */
    .interaction-btn.favorite-btn:hover {
      color: #ffba00;
    }
    .interaction-btn.favorite-btn:hover .btn-icon {
      background: #fffbe6;
    }
    .interaction-btn.favorite-btn.active {
      color: #ffa502;
    }
    .interaction-btn.favorite-btn.active .btn-icon {
      background: linear-gradient(135deg, #ffc107, #ffa502);
      color: #fff;
      box-shadow: 0 4px 15px rgba(255, 165, 2, 0.4);
    }
    @media (max-width: 480px) {
      .interaction-btn {
        width: 85px;
        min-width: 85px;
        max-width: 85px;
        padding: 8px 0;
      }
      .interaction-btn .btn-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
      }
      .interaction-btn .btn-icon svg {
        width: 20px;
        height: 20px;
      }
      .interaction-btn .btn-text {
        font-size: 12px;
      }
    }
    
    /* 分享弹窗样式 */
    .share-modal-content {
      background: #fff;
      width: 90%;
      max-width: 360px;
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      text-align: center;
    }
    .share-modal-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: var(--text-color);
    }
    .share-options {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px 15px;
      margin-bottom: 20px;
    }
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.2s;
      min-width: 50px;
    }
    .share-option:hover {
      transform: translateY(-3px);
    }
    .share-option-icon {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
    }
    .share-option-icon.wechat {
      background: linear-gradient(135deg, #07c160, #09bb07);
    }
    .share-option-icon.weibo {
      background: linear-gradient(135deg, #ff8200, #e6162d);
    }
    .share-option-icon.qq {
      background: linear-gradient(135deg, #12b7f5, #1296db);
    }
    .share-option-icon.copy {
      background: linear-gradient(135deg, #667eea, #764ba2);
    }
    .share-option-icon.poster {
      background: linear-gradient(135deg, #f093fb, #f5576c);
    }
    .share-option-text {
      font-size: 11px;
      color: var(--text-light);
      white-space: nowrap;
    }
    @media (max-width: 400px) {
      .share-modal-content {
        padding: 20px 15px;
      }
      .share-options {
        gap: 15px 12px;
      }
      .share-option-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
      }
      .share-option-text {
        font-size: 10px;
      }
    }
    .share-url-box {
      background: #f5f7fa;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 15px;
    }
    .share-url-input {
      width: 100%;
      border: none;
      background: transparent;
      text-align: center;
      font-size: 13px;
      color: var(--text-light);
      outline: none;
    }
    .share-close-btn {
      padding: 10px 40px;
      border: none;
      border-radius: 20px;
      background: var(--primary-color);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .share-close-btn:hover {
      background: var(--dark-color);
    }
    
    /* Toast 提示样式 */
    .toast-notification {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 500;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
    }
    .toast-notification.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }
    .toast-notification i {
      font-size: 20px;
      color: #4CAF50;
    }

.poster-modal-content {
      background: transparent;
      width: 100%;
      max-width: 300px;
      text-align: center;
      box-sizing: border-box;
    }
    @media (max-width: 767px) {
      .poster-modal-content {
        max-width: 260px;
      }
    }
    .poster-preview-container {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    }
    .poster-preview-container canvas {
      width: 100%;
      height: auto;
      display: block;
    }
    .poster-loading {
      padding: 80px 20px;
      color: #fff;
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
    }
    .poster-loading i {
      font-size: 36px;
      margin-bottom: 15px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .poster-action-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 15px;
      padding-bottom: 10px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .poster-action-buttons.show {
      opacity: 1;
    }
    .poster-action-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
    }
    .poster-action-btn.download {
      background: linear-gradient(135deg, #4CAF50, #45a049);
      color: #fff;
    }
    .poster-action-btn.close {
      background: rgba(255,255,255,0.3);
      color: #fff;
    }

/* 隐藏内容块样式 */
.hidden-content-block {
    background: rgba(240, 68, 148, 0.015);
    border: 1px dashed rgba(240, 68, 148, 0.35);
    border-radius: 14px;
    padding: 14px 14px 12px;
    margin: 16px 0;
    text-align: center;
    box-shadow: none;
}
.hidden-content-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.hidden-content-icon {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    flex-shrink: 0;
}
.hidden-content-icon i {
    font-size: 13px;
    color: #f04494;
}
.hidden-content-info {
    min-width: 0;
    text-align: center;
}
.hidden-content-title {
    display: none;
}
.hidden-content-desc {
    font-size: 13px;
    color: rgba(240, 68, 148, 0.82);
    line-height: 1.45;
}
.hidden-content-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 1px;
}
.hidden-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(240, 68, 148, 0.4);
    background: #fff;
    color: rgba(240, 68, 148, 0.92);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-shadow: none;
    min-width: 132px;
}
.hidden-action-btn i {
    font-size: 13px;
}
.hidden-action-btn:hover {
    background: rgba(240, 68, 148, 0.04);
    border-color: rgba(240, 68, 148, 0.48);
    color: #f04494;
    transform: none;
}
.hidden-action-hint {
    font-size: 12px;
    color: rgba(240, 68, 148, 0.6);
    text-align: center;
    width: 100%;
}
.hidden-action-plans {
    display: block;
    font-size: 12px;
    color: rgba(240, 68, 148, 0.72);
    margin-top: 1px;
    text-align: center;
    width: 100%;
}
.hidden-password-form {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.hidden-password-input {
    padding: 8px 12px;
    border: 1px solid rgba(240, 68, 148, 0.28);
    border-radius: 10px;
    font-size: 13px;
    width: 220px;
    outline: none;
    transition: border-color 0.3s ease;
    background: #fff;
}
.hidden-password-input:focus {
    border-color: rgba(240, 68, 148, 0.6);
}

/* 已解锁内容样式 */
.hidden-content-revealed {
    background: #fbfff8;
    border: 1px solid #d5f2c7;
    border-radius: 10px;
    padding: 16px;
    margin: 15px 0;
}

/* 付费弹窗样式 */
.hidden-pay-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.hidden-pay-modal.show {
    display: flex;
}
.hidden-pay-content {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.hidden-pay-content-relative {
    position: relative;
}
.hidden-pay-header {
    background: linear-gradient(135deg, #5468ff 0%, #7c8aff 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
}
.hidden-pay-header h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
}
.hidden-pay-header .price {
    font-size: 28px;
    font-weight: 700;
}
.hidden-pay-body {
    padding: 24px;
}
.hidden-pay-methods {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.hidden-pay-method {
    flex: 1;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hidden-pay-method:hover {
    border-color: #5468ff;
}
.hidden-pay-method.active {
    border-color: #5468ff;
    background: #f0f4ff;
}
.hidden-pay-method i {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
}
.hidden-pay-method.alipay i { color: #1677ff; }
.hidden-pay-method.wxpay i { color: #07c160; }
.hidden-pay-method span {
    font-size: 13px;
    color: #4a5568;
}
.hidden-pay-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #5468ff 0%, #7c8aff 100%);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hidden-pay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(84, 104, 255, 0.4);
}
.hidden-pay-footer {
    padding: 16px 24px;
    background: #f8fafc;
    text-align: center;
    font-size: 12px;
    color: #a0aec0;
}
.hidden-pay-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 24px;
    cursor: pointer;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .hidden-content-block {
        padding: 12px 12px 10px;
    }
    .hidden-content-header {
        align-items: center;
        gap: 10px;
    }
    .hidden-content-info {
        text-align: center;
    }
    .hidden-password-form {
        justify-content: center;
    }
    .hidden-password-input {
        width: 100%;
        max-width: 100%;
    }
}

/* 隐藏内容提示Toast */
.hidden-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    text-align: center;
}
.hidden-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.hidden-toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.hidden-toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.hidden-toast.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.hidden-toast i {
    font-size: 18px;
}

#loginRequiredModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
#loginRequiredModal.is-open {
  display: flex;
}
.login-required-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.login-required-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: loginModalIn 0.3s ease;
}
@keyframes loginModalIn {
  from { opacity: 0; transform: scale(0.9) translateY(-20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.login-required-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-required-icon i { font-size: 28px; color: #fff; }
.login-required-title { font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
.login-required-desc { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 24px; }
.login-required-btns { display: flex; gap: 12px; }
.login-required-btn { flex: 1; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
.login-required-btn.cancel { background: #f5f5f5; color: #666; }
.login-required-btn.cancel:hover { background: #eee; }
.login-required-btn.confirm { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: #fff; }
.login-required-btn.confirm:hover { opacity: 0.9; transform: translateY(-1px); }
/* Externalized inline style replacements */
.resource-tag-icon,
.resource-demo-icon {
  margin-right: 4px;
}

.resource-price-start {
  font-size: 13px;
  color: #666;
}

.resource-member-price {
  font-size: 16px;
  color: #ff6b6b;
  font-weight: 700;
  margin-left: 8px;
}

.thumb-error-hidden {
  display: none !important;
}

.service-purchased-text,
.purchased-tag {
  color: #4CAF50;
}

.spec-price-original-small {
  font-size: 11px;
  margin-right: 4px;
}

.spec-price-member {
  color: #ff6b6b;
}

.pay-choice-title {
  font-size: 14px;
  font-weight: 600;
}

.pay-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-type-icon {
  font-size: 18px;
  margin-right: 6px;
}

.pay-type-icon.alipay {
  color: #1677FF;
}

.pay-type-icon.wxpay {
  color: #07C160;
}

.pay-type-name {
  display: inline !important;
  margin-bottom: 0 !important;
}

.buy-form-hidden {
  display: none;
}

.is-hidden {
  display: none !important;
}

.modal.is-open,
.member-price-modal.is-open {
  display: flex !important;
}

/* 今日下载次数提示弹窗（与其它弹窗一致，自动关闭） */
.download-limit-toast .download-limit-toast-content {
  max-width: 340px;
  text-align: center;
  padding: 24px 20px 20px;
}
.download-limit-toast-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(84, 104, 255, 0.12);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.download-limit-toast-msg {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-color);
  margin: 0 0 16px;
  padding: 0;
}
.download-limit-toast-progress {
  height: 3px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}
.download-limit-toast-progress-bar {
  display: block;
  height: 100%;
  background: var(--primary-color);
  border-radius: 2px;
  width: 100%;
}
.download-limit-toast-progress-bar.run {
  animation: download-limit-toast-shrink 3s linear forwards;
}
@keyframes download-limit-toast-shrink {
  from { width: 100%; }
  to { width: 0%; }
}

.contact-service-content {
  color: var(--text-light);
  line-height: 1.6;
  text-align: center;
}

.demo-modal-content {
  max-width: 450px;
}

.demo-modal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.demo-modal-title-icon {
  color: var(--primary-color);
}

.demo-info-content {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 16px 18px;
  line-height: 1.8;
  font-size: 14px;
  color: var(--text-color);
  white-space: pre-line;
  word-break: break-all;
}

.demo-ok-btn {
  margin-top: 18px;
  width: 100%;
}

.member-price-title-icon {
  color: #ff9800;
  margin-right: 6px;
}

.poster-loading-error {
  color: #ff4757;
}

.poster-loading-icon-static {
  animation: none !important;
}

.is-hidden-form {
  display: none !important;
}