/* ==== sucai_detail.html（2026-09-19 从视图内联 <style> 抽出：
     视图渲染在 #app 内，Vue2 挂载重建 DOM 会丢弃内联 <style>，必须外部 link） ==== */

    .page {
        width: 100%;
    }
    .trial-doc .el-dialog__title {
        color: red;
    }
    .page-detail {
        margin-top: 120px;
        min-height: calc(100vh - 90px);
        background-color: #f5f7fa;
        width: 1200px;
        height:100%;
        display:flex;
        align-items: flex-start;
        justify-content: center;
    }

    /* ==== 手机版扫码入口（2026-09-19 二开）==== */
    .left-block {
    	position: relative;
    	width:870px;
   		padding:2em;
   		background:#FFF;
  		border-radius:10px 10px 0px 0px;
  		margin-bottom:2em;
  		box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .position a {
    	color:#676b6f;
    }

    .title {
    	font-size: 20px;
		font-weight: 900;
		-webkit-line-clamp: inherit;
		height: auto;
		line-height: normal;
		margin-top:1em;
		margin-bottom: 10px;
        line-height:30px;
        height:30px;
        overflow: hidden;
    }

    .info {
    	font-size:12px;
    	margin-top:1em;
    	color:#676b6f;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .info-content {
    	margin-top: 1em;
    	width:100%;
    	font-size:15px;
    	line-height:30px;
        padding-bottom:1em;
    }

    .sucai-image {
        width:100%;
        min-height:150px;
        max-height: 300px;
        margin:20px 0px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .sucai-image-leftarrow {
        width:100px;
        cursor:pointer;
    }

    .sucai-image-list {
        width:670px;
        height:100%;
        overflow:hidden;
        display:flex;
        justify-content:flex-start;
        align-items:center;
    }

    .sucai-image-item {
        width:150px;
        min-height:120px;
        margin-right:10px;
        border-radius:10px;
        cursor: pointer;
    }

    .sucai-image-rightarrow {
        width:100px;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        cursor:pointer;
    }

    blockquote {
    	position: relative;
		padding: 30px 40px;
		background: #f0f4f5;
		border-radius: 3px;
		margin:20px 0px;
    }

    blockquote::before {
    	position: absolute;
		top: 20px;
		left: 20px;
		display: block;
		width: 16px;
		height: 14px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAANCAYAAADISGwcAAAABmJLR0QA/wD/AP+gvaeTAAABJUlEQVQ4y62UzVHDMBCFPxgX4BJcQkpIKgAqwKkguAJDBSQdmAooAXPhlINLcDowFSQHr0fPipTMJHozmlnJT6u3f35o//YIlkBt9hroOccb8AQMwAvwY/d8vAMfZh8JY/XoHdTiLPR4LpyOBFABpTz+FeF/mohLnJsE5OZ8irwJcJcmEvvekwCTgI1Etotwa7FjnJsEFIwNA2NjhaIvceVpSVR/gAx4lX1v2QA4iBjlDJKNX6DCZU+b+F/urMT+Fv6QeYIWtqZIQ9l4tgXzUSvkcT+TrWQyl7POH8N7sBG7MhGXOGuYj+E9yHET0hGfooXZW2yKUgkocamtrmRowJUtmYDJeYOrt6LA9c2sPBljt4cudRFbcTDnje1jf8cCN+qNfjgBbfA/pMbdZOcAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC) no-repeat;
		content: '';
    }

    blockquote::after {
    	  position: absolute;
		  right: 20px;
		  bottom: 20px;
		  display: block;
		  width: 16px;
		  height: 14px;
		  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAANCAYAAADISGwcAAAABmJLR0QA/wD/AP+gvaeTAAABJUlEQVQ4y62UzVHDMBCFPxgX4BJcQkpIKgAqwKkguAJDBSQdmAooAXPhlINLcDowFSQHr0fPipTMJHozmlnJT6u3f35o//YIlkBt9hroOccb8AQMwAvwY/d8vAMfZh8JY/XoHdTiLPR4LpyOBFABpTz+FeF/mohLnJsE5OZ8irwJcJcmEvvekwCTgI1Etotwa7FjnJsEFIwNA2NjhaIvceVpSVR/gAx4lX1v2QA4iBjlDJKNX6DCZU+b+F/urMT+Fv6QeYIWtqZIQ9l4tgXzUSvkcT+TrWQyl7POH8N7sBG7MhGXOGuYj+E9yHET0hGfooXZW2yKUgkocamtrmRowJUtmYDJeYOrt6LA9c2sPBljt4cudRFbcTDnje1jf8cCN+qNfjgBbfA/pMbdZOcAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC) -16px 0 no-repeat;
		  content: '';
    }

    .right-block {
    	width:300px;
    	margin-left:30px;
   		margin-bottom:2em;
   		box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .info-list {
    	padding:1em;
    	background:#FFF;
  		border-radius:10px;
    	width:100%;
    	display:flex;
    	align-items:flex-start;
    	justify-content:center;
    	flex-direction:column;
    }

    .info-item {
    	width:100%;
    	display:flex;
    	justify-content:space-between;
    	align-items:center;
    	height:90px;
    	padding:1em 0em;
    	border-bottom: 1px solid #f0f4f5;
    }

    .info-item:last-child {
    	padding-bottom:0em;
    	border-bottom: none;
    }

    .info-item-title {
    	display:flex;
    	width:100%;
    	height:75px;
        line-height:25px;
        overflow:hidden;
    	padding:0px 10px;
    	justify-content:flex-start;
    	align-items:flex-start;
    	flex-direction:column;
    	font-size:14px;
    }

    .info-item-title-content {
        height:50px;
        line-height:25px;
        overflow:hidden;
    }

    .info-item-other {
        display:flex;
        width:100%;
        height:25px;
        line-height:25px;
        overflow:hidden;
        padding:0px 10px 0px 0px;
        justify-content:space-between;
        align-items:center;
        font-size:12px;
        color:#c4c4c4;
    }

    .info-item-title a {
    	color:#555;
    }

    .right-block-img {
    	width:100px;
    	height:70px;
    	border-radius:10px;
    }

    .content-lock {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #212529;
        background-color: #f5f7fa;
        height: 150px;
        border-radius: 10px;
        position: relative;
        margin-top:20px;
    }

    .card-info {
        width: 350px;
        height: 60px;
        background: #fbfbfb;
        border-radius: 10px;
        margin-right: 2em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .content-lock-tips {
        position: absolute;
        top:5px;
        left: 15px;
    }

    .pay-btn {
        width: 150px;
        height: 40px;
        border-radius: 25px;
        border:1px solid #212529;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .pay-btn:hover {
        background-color: #212529;
        color: #FFF;
        transition: color .5s,background-color .5s;
    }

    .vip-btn {
        width: 150px;
        height: 40px;
        border-radius: 25px;
        border:1px solid #d99959;
        color:#d99959;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 1em;
        cursor: pointer;
    }

    .vip-btn:hover {
        background-color: #d99959;
        color: #212529;
        transition: color .5s,background-color .5s;
    }

    .share {
    	padding-top:2em;
    	height: 50px;
    	background-color:#fff;
    	display:flex;
    	justify-content:flex-end;
    	align-items:center;
    	border-top: 1px dashed #f0f4f5;
    }
    
    .sucai-doc {
        background-color: #fbfbfb;
        width:100%;
        height:100px;
        border-radius:10px;
        padding:1em;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .sucai-pan {
        background-color: #fbfbfb;
        width:100%;
        box-sizing:border-box;
        min-height:100px;
        border-radius:10px;
        padding:1em;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:stretch;
        gap:8px;
    }

    /* 未解锁软门禁卡：只给渠道名，链接与提取码都不出 */
    .sucai-pan-lock {
        background-color: #fffaf0;
        border: 1px dashed #e6a23c;
    }
    .pan-lock-row {
        width: 100%;
    }
    .pan-lock-row .el-input {
        width: 100%;
    }
    .pan-lock-row .el-input__inner {
        color: #c0c4cc;
        background-color: #f7f7f7;
        font-style: italic;
    }
    .pan-lock-tip {
        display: flex;
        align-items: center;
        color: #e6a23c;
        font-size: 13px;
    }
    .pan-lock-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
    }
    .pan-lock-btns .el-button + .el-button {
        margin-left: 0;
    }
    .pan-lock-sub {
        color: #909399;
        font-size: 12px;
        line-height: 1.6;
        margin-top: 6px;
    }

    /* 已解锁的多渠道列表：块级流式排列（原 .sucai-pan 是 flex，多行链接会挤成一行） */
    .sucai-pan-list {
        background-color: #fbfbfb;
        width:100%;
        box-sizing:border-box;
        border-radius:10px;
        padding:1em;
    }
    /* 每个网盘一组卡片：网盘名 + 地址 + 提取码 必须在视觉上「成团」。
       否则上一个渠道的「提取码」会和下一个渠道名挨在一起，用户分不清属于谁
       （2026-09-19 用户反馈：渠道之间要有间隔）。 */
    .sucai-pan-list .pan-group {
        background: #fff;
        border: 1px solid #e4ebf6;
        border-left: 3px solid #bcd4ff;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 14px;
        box-shadow: 0 1px 2px rgba(31, 61, 122, .04);
    }
    .sucai-pan-list .pan-group:last-child {
        margin-bottom: 0;
    }

    /* 其他渠道（只显示网盘名，点名称弹解锁弹窗）与自选渠道提示 —— 2026-09-18，与 H5 详情页口径一致 */
    .sucai-pan-note {
        margin-top: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        background: #f2f5fc;
        color: #5b7bc4;
        font-size: 12px;
        line-height: 1.7;
    }
    .sucai-pan-note.warn {
        background: #fff8ec;
        border: 1px solid #ffe0ad;
        color: #b25e00;
    }
    .sucai-pan-locks {
        margin-top: 10px;
        background: #fbfbfb;
        border-radius: 10px;
        padding: 1em;
    }
    .sucai-pan-locks .tip { font-size: 12px; color: #909399; margin-bottom: 8px; }
    .sucai-pan-locks .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .sucai-pan-locks .chip {
        display: inline-block;
        font-size: 12px;
        color: #8a6d3b;
        background: #fdf6e9;
        border: 1px solid #f2e2c4;
        border-radius: 999px;
        padding: 4px 12px;
        cursor: pointer;
        user-select: none;
    }
    .sucai-pan-locks .chip:hover { background: #fbefd7; border-color: #e6c68f; }
    .sucai-pan-locks .sub { font-size: 11.5px; color: #909399; margin-top: 8px; line-height: 1.7; }

    /* 网盘行：标签定宽不收缩不换行；输入框吃掉剩余宽度。
       （el-input 自带 width:100%，在 flex 行里会把容器撑破，必须 min-width:0 + flex:1） */
    .pan-row-label {
        flex: 0 0 auto;
        width: 100px;
        white-space: nowrap;
    }
    .sucai-pan > .flex-center,
    .sucai-pan-list > div > .flex-center {
        width: 100%;
    }
    .sucai-pan .el-input,
    .sucai-pan-list .el-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 分享得次数区：独立块级容器，不能放进 .sucai-pan（那是固定高的 flex 行） */
    .sucai-credit {
        background-color: #fdf6ec;
        width:100%;
        box-sizing:border-box;
        border-radius:10px;
        padding:12px 1em;
        margin-top:12px;
        font-size:13px;
        line-height:1.9;
    }


    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .register-text {
        font-size:12px;
        color:#8a8a8a;
        width:120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
    }

    .free-content img {
        max-width:100%;
    }

    .pay-content img {
        max-width:100%;
    }

    .pay-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height:300px;
        padding: 10px;
        border-radius: 10px;
    }

    .wechat-pay {
        width: 250px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .task-block {
        width: 250px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .vip-block {
        min-height: 60px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .vip-item {
        border-radius: 10px;
        padding:.5em 2em;
        background: #FFC200;
        color: #FFF;
        font-size: 12px;
        margin-right: 1em;
        margin-top: 1em;
    }

    .vip-pay-block {
        margin-top: 1em;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .vip-pay-tips {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #b5b5b5;
    }

    .go-vip-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #333;
        color: #FFC200;
        font-size: 14px;
        padding:1em 3em;
        margin-top:1em;
        border-radius: 10px;
        cursor: pointer;
    }

    .task-qrcode-tips {
        margin-top: 1em;
        font-size: 12px;
        color: #666666;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .wechat-pay-tips {
        margin-top: 1em;
        font-size: 12px;
        color: #666666;
    }
    .video-player-block {
        width: 100%;
        height: 480px;
    }
    #sucai-video-player {
        width: 100%;
        height: 480px;
    }
    .doc-end {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: -400px;
        height: 400px;
        z-index: 99;
        position: relative;
        width: 100%;
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 1));
    }
    .line {
        width: 50px;
        height: 1px;
        background-color: #919191;
    }
    .preview-text {
        padding:1em;
        font-size: 14px;
        color: #919191;
    }
    .preview-unlock-btn {
        border-radius: 10px;
        width: 150px;
        height: 40px;
    }


    /* 助力开创建成功弹窗（2026-09-19）—— 原来用 $alert 把 HTML 当纯文本吐出来了 */
    .help-done-tip { font-size: 13px; color: #606266; line-height: 1.8; }
    .help-done-link { margin: 8px 0 12px; }
    .help-done-rule {
        background: #fff8ec;
        border: 1px solid #ffe6c2;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 12.5px;
        color: #8a5a00;
        line-height: 1.9;
    }
    .help-done-rule b { color: #d97706; font-size: 14px; }
    .help-done-prog {
        margin-top: 10px;
        background: #f6f8fb;
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 12.5px;
        color: #606266;
    }
    .help-done-prog b { color: #2f6fed; font-size: 14px; }
    .help-done-more { text-align: center; margin-top: 12px; }
    .help-done-more a { color: #2f6fed; font-size: 12.5px; text-decoration: none; }
    .help-done-more a:hover { text-decoration: underline; }


/* ==== 手机版扫码入口（乐学二开 2026-09-19）==== */
.page-detail .title {
    padding-right: 116px;          /* 给右上角入口让位，长标题不会压到按钮 */
}

.page-detail .mo-qr {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
}

.page-detail .mo-qr-btn {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    color: #1f3d7a;
    background: #f0f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 16px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}

.page-detail .mo-qr-btn:hover {
    background: #e3edff;
    border-color: #bcd4ff;
}

.page-detail .mo-qr-btn i {
    font-size: 14px;
    margin-right: 4px;
}

.page-detail .mo-qr-pop {
    position: absolute;
    top: 38px;
    right: 0;
    width: 190px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e4ebf6;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(31, 61, 122, .14);
    text-align: center;
}

.page-detail .mo-qr-pop:before {
    content: '';
    position: absolute;
    top: -6px;
    right: 22px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #e4ebf6;
    border-top: 1px solid #e4ebf6;
    transform: rotate(45deg);
}

.page-detail .mo-qr-tip {
    font-size: 12px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
}

.page-detail .mo-qr-box {
    width: 148px;
    height: 148px;
    margin: 0 auto;
}

.page-detail .mo-qr-box img,
.page-detail .mo-qr-box canvas,
.page-detail .mo-qr-box table {
    width: 148px !important;
    height: 148px !important;
    margin: 0 auto;
}

.page-detail .mo-qr-sub {
    font-size: 11px;
    color: #909399;
    margin-top: 6px;
    line-height: 1.5;
}

.page-detail .mo-qr-link {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eef1f6;
    font-size: 11px;
    color: #8a94a6;
    word-break: break-all;
    cursor: pointer;
    line-height: 1.5;
}

.page-detail .mo-qr-link i {
    margin-left: 4px;
    color: #1f3d7a;
}

.page-detail .mo-qr-link:hover {
    color: #1f3d7a;
}

/* ==== 详情页右上角工具条（乐学二开 2026-09-25）====
   把「收藏」从正文整条搬到右上角，与「手机版」并排；只保留按钮、去掉说明文字。
   ⚠️ .detail-tools 的定位参数刻意与 .mo-qr 原值逐字相同（absolute / top:14 / right:14 / z-index:20），
      保证右上角位置与改动前一致；.mo-qr 改成 relative 后，其悬停二维码弹层 .mo-qr-pop
      （position:absolute; top:38px; right:0）依旧以 .mo-qr 为参照，行为不变。 */
.page-detail .detail-tools {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-detail .detail-tools .mo-qr {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
}

.page-detail .fav-tool {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    color: #8a6d1f;
    background: #fffaf0;
    border: 1px solid #f5e3b8;
    border-radius: 16px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background .18s, border-color .18s;
}

.page-detail .fav-tool:hover {
    background: #fff3d6;
    border-color: #eccc8a;
}

.page-detail .fav-tool i {
    font-size: 14px;
    margin-right: 4px;
}

.page-detail .fav-tool.on {
    color: #b7791f;
    font-weight: 600;
    background: #fff3d6;
    border-color: #eccc8a;
}

.page-detail .fav-tool.busy {
    opacity: .6;
    pointer-events: none;
}

/* 长标题给右上角「收藏 + 手机版」两个按钮让位（原来是 116px，只给手机版留） */
.page-detail .title {
    padding-right: 200px;
}