/* AUTO-GENERATED by scripts/build-web-assets.sh on 20260522 — 勿手改，改源文件后重跑 */

/* ===== global.css ===== */
/* 默认显示 PC 元素，隐藏手机元素 */
.pc-only { display: block; }
.mobile-only { display: none; }

/* 当屏幕宽度小于 768px 时（通常是手机或小型平板） */
@media screen and (max-width: 768px) {
    .pc-only { display: none !important; }
    .mobile-only { display: block ; }
}

/* 平板竖版也使用手机版式 */
@media screen and (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
    .pc-only { display: none !important; }
    .mobile-only { display: block; }
}

/* 如果你的元素是 Flex 布局，记得对应修改 */
@media screen and (max-width: 768px) {
    .mobile-flex { display: flex !important; }
}

@media screen and (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
    .mobile-flex { display: flex !important; }
}


@media (max-width: 768px),
       (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
    #bottom-right {
        top: 0;
        box-sizing: border-box;
        padding-bottom: 60px !important;
    }
}

.pdf-page-wrapper:last-child {
    /*margin-bottom: 100px !important;*/
}
button{cursor: pointer}

/* ===== share.css ===== */
.share-container {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;    /* 垂直居中 */
	gap: 5px;              /* 图标间距 */
	padding: 5px;
}

.icon-item {
	width: 24px;
	height: 24px;
	cursor: pointer;
	transition: background-color 0.3s ease; /* 颜色变换平滑过渡 */

	/* 核心：将 SVG 作为遮罩 */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;

	/* 默认颜色：深灰色 */
	background-color: #666;
}

/* 分别指定图标地址 */
.zhihu { -webkit-mask-image: url('https://cms-1251142715.cos.ap-shanghai.myqcloud.com/share/zhihu-circle-fill.svg'); }
.linkedin { -webkit-mask-image: url('https://cms-1251142715.cos.ap-shanghai.myqcloud.com/share/linkedin.svg'); }
.tieba { -webkit-mask-image: url('https://cms-1251142715.cos.ap-shanghai.myqcloud.com/share/tieba0.svg'); }
.weibo { -webkit-mask-image: url('https://cms-1251142715.cos.ap-shanghai.myqcloud.com/share/weibo.svg'); }

/* 悬停时的颜色变化 (指定颜色变化填充) */
.zhihu:hover { background-color: #0084ff; }    /* 知乎蓝 */
.linkedin:hover { background-color: #0077b5; } /* 领英蓝 */
.tieba:hover { background-color: #2932e1; }    /* 贴吧蓝 */
.weibo:hover { background-color: #e6162d; }    /* 微博红 */

/* ===== resource.css ===== */
/* ===== row-2 背景与 a 容器间距阴影 ===== */
#row-2 {
    background: #fff;
}

#row-2 > a {
    display: block;
    margin:  0 0 14px;
    padding: 8px 0;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 -2px 4px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.13);
    transition: box-shadow 0.18s ease;
}

#row-2 > a:hover {
    box-shadow:
        0 -1px 2px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.30);
}

/* hover 时保持卡片背景不变（覆盖 .resource-card:hover 的灰色） */
#row-2 > a:hover .resource-card,
#row-2 > a .resource-card:hover {
    background: #fff;
}

/* ===== resource-card：侧边栏列表项 ===== */
.resource-card {
    display: flex;
    align-items: center;
    height: 72px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    border-radius: 0;
    transition: background 0.15s ease;
}

.resource-card:hover {
    background: #f7f7f7;
}

.resource-card:hover .resource-title {
    color: var(--theme-color, #76b900);
}

/* 当前激活项：左侧彩色竖条 + 白色背景（与未激活项保持一致） */
.resource-card--current {
    background: #fff;
    border-left: 3px solid var(--theme-color, #76b900);
    padding-left: 5px;
}

.resource-card--current:hover {
    background: #fff;
}

/* 图片缩略图 */
.resource-img-box {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: #eee;
    border-radius: 3px;
    margin-right: 8px;
}

.resource-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease, filter 0.4s ease;
    filter: blur(4px) brightness(0.95);
}

.resource-img-box img.img-loaded {
    opacity: 1;
    filter: none;
}

/* 右侧文字区 */
.resource-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

/* 类型标签 */
.resource-type {
    font-size: 11px;
    font-weight: 500;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 标题 */
.resource-title {
    font-size: 13px;
    font-weight: 400;
    color: #222;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    text-decoration: none !important;
}

/* 当前激活项标题加深 */
.resource-card--current .resource-title {
    color: var(--theme-color, #76b900);
    font-weight: 500;
}

.resource-title:hover,
.resource-type:hover {
    text-decoration: none !important;
}

/* ===== row-2 顶部主标题（仅在 #row-2 内、仅 PC 端显示）===== */
#row-2 > .row-2-title {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding: 14px 12px 8px;
    letter-spacing: 0.3px;
}
/* #row-2 之外凡是带 row-2-title 类的元素都不显示，杜绝外溢 */
.row-2-title {
    display: none;
}
#row-2 > .row-2-title {
    display: block;
}

/* 与项目里 isPc() 的判定保持一致：< 769px 或 ≤1366px 竖版 视为移动端，隐藏标题 */
@media (max-width: 768px),
       (max-width: 1366px) and (orientation: portrait) {
    #row-2 > .row-2-title {
        display: none;
    }
}

/* ===== row-2 列表头部标签 ===== */
.row-2-header {
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 8px 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* ===== userMode：Group 折叠树 ===== */
.ug-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    background: #eef0f3;
    border-bottom: 1px solid #d8dde3;
    border-left: 3px solid transparent;
    user-select: none;
    transition: background 0.15s ease, border-left-color 0.15s ease;
}

.ug-group-header:hover {
    background: #e3e7ec;
}

.ug-group-header.is-open {
    background: #e8ecf1;
    border-left-color: var(--theme-color, #76b900);
}

.ug-caret {
    flex-shrink: 0;
    color: #777;
    transition: transform 0.18s ease;
}

.ug-group-header.is-open .ug-caret {
    transform: rotate(90deg);
    color: var(--theme-color, #76b900);
}

.ug-group-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.ug-group-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    background: #f3f3f3;
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 20px;
    text-align: center;
}

.ug-group-header.is-open .ug-group-count {
    color: var(--theme-color, #76b900);
    background: #f5f5f5;
}

.ug-group-body {
    display: none;
    background: #fff;
}

.ug-group-body.is-open {
    display: block;
}

/* userMode 下，让子项缩进，与折叠图标对齐 */
.ug-group-body > a {
    display: block;
    margin: 14px 0;
    padding: 8px 0;
    background: #fff;
    border-bottom: none;
    box-shadow:
        0 -2px 4px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.13);
    transition: box-shadow 0.18s ease;
}

/* 每个 cmsGroup（.ug-group-body）内第一个 a：去掉与上方 group-header 之间的多余间距 */
.ug-group-body > a:first-child {
    margin: 0 0 14px;
}

.ug-group-body > a:hover {
    box-shadow:
        0 -1px 2px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.30);
}

/* hover 时保持卡片背景不变 */
.ug-group-body > a:hover .resource-card,
.ug-group-body > a .resource-card:hover {
    background: #fff;
}

.ug-group-body .resource-card {
    padding-left: 20px;
}

.ug-group-body .resource-card--current {
    padding-left: 17px;
}

/* ───── 点击卡片后立即出现的导航反馈（无 SPA 化，靠浏览器最后一帧 paint）───── */
.resource-card.resource-card--loading {
    position: relative;
}
.resource-card.resource-card--loading::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: var(--theme-color, #1976d2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    animation: nav-spin .7s linear infinite;
    z-index: 2;
}
@keyframes nav-spin {
    to { transform: rotate(360deg); }
}

body.is-navigating .resource-card:not(.resource-card--loading) {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}
body.is-navigating {
    cursor: progress;
}

#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--theme-color, #1976d2);
    box-shadow: 0 0 8px var(--theme-color, #1976d2);
    z-index: 99999;
    transition: width .3s ease;
    pointer-events: none;
}
body.is-navigating #nav-progress {
    width: 80%;
    transition: width 1.5s cubic-bezier(.1, .7, .1, 1);
}


/* ===== next.css ===== */
.action-wrapper {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 999;
}

#image-preview-box {
    position: absolute;
    bottom: 0px; /* 位于按钮上方 */
    right: 0;
    width: 350px; /* 预览图宽度 */
    height: 400px;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 10000;

    /* 初始状态：不可见，且位于目标位置的右下方 */
    opacity: 0;
    visibility: hidden;
    transform: translate(0px, 0px) scale(0.8);

    /* 贝塞尔曲线让移动更有弹性（任务 12 优化） */
    transition:
            opacity 0.4s ease,
            transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
            visibility 0.4s;
}

/* 激活状态 */
#image-preview-box.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto; /* 激活后允许鼠标移入 */
    display: block !important;
    opacity: 1 !important;
    bottom: 0px; /* 位于按钮上方 */
    right: 0;
}

#image-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*pointer-events: none;*/
}

#preview-btn {
    padding: 10px 20px;
    background: #007AFF;
    color: white;
    border: none;
    cursor: pointer;
}


/* 默认隐藏（移动端） */
.action-wrapper {
    display: none;
}

/* 仅在 PC 端显示 (屏幕宽度 >= 768px) */
@media screen and (min-width: 768px) {
    .action-wrapper {
        display: block;
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 999;
    }

    #preview-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 180px;
        font-size: 24px;
        padding: 18px 16px;
        line-height: 30px;
        height: 66px;
        color: black;
        cursor: pointer;
        border: none; /* 边框颜色将通过 JS 动态设置 */
        transition: opacity 0.2s;
    }

    #preview-btn:hover {
        opacity: 0.9;
    }

    #image-preview-box:hover{
        cursor: pointer;
    }

    /*#image-preview-box {*/
    /*    position: absolute;*/
    /*    bottom: 0px;*/
    /*    right: 0px;*/
    /*    display: none; !* 初始隐藏预览图 *!*/
    /*}*/
}

/* ===== pdf.css ===== */
/* ============================================================
 *  PDFCore 阅读器样式表（合并整理版）
 *  - 消除重复选择器
 *  - 确保移动端手势不被 CSS 阻止
 *  - touch-action: none 集中管理
 * ============================================================ */

/* ========== 骨架屏加载动画 ========== */
@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== Loading 旋转动画 ========== */
@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.spinner {
    animation: rotate 2s linear infinite;
}

.spinner .path {
    stroke: #76b900;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

/* ========== 链接注释层动画 ========== */
@keyframes link-hint {
    0%   { background-color: rgba(0, 123, 255, 0); }
    50%  { background-color: rgba(0, 123, 255, 0.2); }
    100% { background-color: rgba(0, 123, 255, 0); }
}

/* ============================================================
 *  工具栏
 * ============================================================ */

#right-top {
    background: #121e2b;
    border-bottom: 1px solid #333;
    z-index: 100;
}

.toolbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 15px;
    box-sizing: border-box;
    background: #121e2b;
    color: #fff;
}

.toolbar-left,
.toolbar-center,
.toolbar-right,
.nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 工具栏按钮 */
.tool-btn {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 4px;
    display: flex;
    transition: all 0.2s;
}

.tool-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.tool-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* 页码输入框 */
.page-input-container {
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    height: 100%;
}

.page-input-container input {
    width: 40px;
    background: #0c1621;
    border: 1px solid #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
}

#page-num {
    width: 40px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
    background: #000;
    color: #fff;
    border: 1px solid #3e4b5b;
    border-radius: 3px;
    font-size: 13px;
    outline: none;
    -moz-appearance: textfield;
}

#page-num::-webkit-inner-spin-button,
#page-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-total {
    color: #ccc;
    font-size: 13px;
    margin-left: 6px;
    display: inline-block;
}

/* 缩放下拉框 */
#scale-select {
    background: #0c1621;
    color: #fff;
    border: 1px solid #333;
    padding: 2px 5px;
    outline: none;
}

/* ============================================================
 *  #bottom-right 主容器
 * ============================================================ */

#bottom-right {
    position: relative;
    overflow: hidden;       /* 必须 hidden，用 translate 代替 scroll */
    width: 100%;
    height: 100%;
}

/* ============================================================
 *  PDF 阅读器容器
 * ============================================================ */

.pdf-viewer-container {
    display: block;                         /* 严禁 flex，配合内部 translate 居中 */
    position: relative;
    overflow: hidden;                       /* 关闭原生滚动，由 JS transform 控制 */
    width: 100%;
    height: calc(100vh - 34px);             /* 减去工具栏高度 */
    background: #182839;

    /* 手势控制：交给 JS 处理所有触摸 */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;

    /* 禁止选中和拖拽 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ============================================================
 *  PDF 画布（承载所有页面）
 * ============================================================ */

.pdf-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;                         /* 严禁 flex 或 margin:auto */
    margin: 0;
    transform-origin: 0 0;                  /* 必须锁定左上角，否则 JS 偏移计算会乱 */
    will-change: transform;                 /* 硬件加速 */
    pointer-events: auto;
}

/* ============================================================
 *  页面占位符
 * ============================================================ */

.page-placeholder {
    position: relative;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;

    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* ============================================================
 *  图层：缩略图 / 背景 / SVG / 内容
 * ============================================================ */

/* 缩略图层 */
.thumb-layer {
    width: 100% !important;
    height: 100% !important;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    filter: blur(4px);                      /* 模糊处理，切换高清时视觉更自然 */
    transition: opacity 0.5s ease-out;
}

/* 高清内容容器（初始透明，加载完成后淡入） */
.content-layers {
    opacity: 0;
    transition: opacity 0.5s ease-in;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* 背景层 */
.bg-layer {
    width: 100% !important;
    height: 100% !important;
    display: block;
    pointer-events: none;                   /* 事件穿透到容器 */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* SVG 文字层 */
.svg-layer {
    width: 100% !important;
    height: 100% !important;
    display: block;
    overflow: hidden;                       /* 防止 SVG 内容溢出 */
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    inset: 0 !important;
}

/* SVG 内容图片 */
.svg_content_img {
    aspect-ratio: auto;
    mix-blend-mode: multiply;
}

/* ============================================================
 *  注释层（链接/目录跳转）
 * ============================================================ */

.anno-item:hover {
    animation: link-hint 1.5s infinite ease-in-out;
    border-radius: 2px;
}

/* ============================================================
 *  文字选择层
 * ============================================================ */

.text-layer-container svg {
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.text-layer-container path,
.text-layer-container rect {
    pointer-events: none;
}

.text-layer-container text::selection {
    background: rgba(0, 102, 255, 0.25);
    fill: transparent;
}

.text-layer span.highlight {
    background-color: rgba(255, 255, 0, 0.4);
    color: transparent;
}

/* ============================================================
 *  左侧缩略图栏
 * ============================================================ */

#bottom-left {
    width: 140px;
    max-width: 360px;
    min-width: 140px;
    overflow-y: hidden;
    background: #121e2b;
    position: relative;     /* ★ 必须，handle 用 absolute 定位依赖此 */
    flex-shrink: 0;         /* ★ 若父容器是 flex，防止被压缩 */
}

#bottom-left.active {
    max-width: 360px;
}

/* 拖动调整宽度的手柄 */
#bottom-left-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    z-index: 200;
    background: #2a3b4d;
}

#bottom-left-resize-handle:hover,
#bottom-left-resize-handle.dragging {
    background: #333;
}

.bottom-left-thumb {
    height: calc(100vh - 55px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    padding: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 缩略图列表 - 支持多列布局 */
#thumb-list-render {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

/* 缩略图项 */
.thumb-item {
    width: calc(100% - 4px);  /* 单列时占满宽度 */
    padding: 6px;
    margin-bottom: 0;
    cursor: pointer;
    text-align: center;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 多列布局时的缩略图宽度 */
#bottom-left[data-cols="2"] .thumb-item {
    width: calc(50% - 6px);
}

#bottom-left[data-cols="3"] .thumb-item {
    width: calc(33.33% - 6px);
}

/* 缩略图内部容器 */
.thumb-item .thumb-inner {
    display: inline-block;
}

/* 图片容器 - hover/current 样式仅作用于图片 */
.thumb-item img {
    display: block;
    width: auto;
    max-width: 100px;
    height: auto;
    background: #eeeeee;
    border: 2px solid transparent;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.thumb-item:hover img {
    border-color: #5a6a7a;
}

.thumb-item.current img {
    border-color: var(--theme-color, #76b900);
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #76b900) 40%, transparent);
}

.thumb-item.active img {
    border-color: var(--theme-color, #76b900);
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #76b900) 40%, transparent);
}

.thumb-item span {
    display: block;
    color: #888;
    font-size: 11px;
    margin-top: 6px;
}

.thumb-item.current span,
.thumb-item.active span {
    color: var(--theme-color, #76b900);
}

/* .thumb-page-num 已废弃，使用 .thumb-item span 替代 */

/* ============================================================
 *  响应式：移动端
 * ============================================================ */

@media (max-width: 767px) {
    /* 隐藏 PC 工具栏 */
    #right-top {
        display: none !important;
    }

    /* 移动端全屏，无工具栏 */
    .pdf-viewer-container {
        height: 100vh;
        height: 100dvh;                     /* 动态视口高度，适配移动端地址栏 */
    }

    /* 移动端缩略图栏窄一点 */
    .bottom-left-thumb {
        width: 120px;
        height: 100vh;
        height: 100dvh;
    }

    .thumb-item img {
        width: 90px;
        min-height: 90px;
    }

}

.outline-name,.outline-page{color:#fff}
.tool-btn.active-tab{background:#000 }

.outline-item:hover{background:#2a3b4d}
#outline-container {
    overflow-y: auto;
    height: 100%;     /* 或具体高度，否则内容撑开容器不会出滚动条 */
}

#outline-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
}

#outline-resize-handle:hover,
#outline-resize-handle:active {
    background: rgba(255, 255, 255, 0.15);
}
#outline-resize-handle {
    cursor: ew-resize;  /* ↔ 左右双向箭头，比 col-resize 更直观 */
}

#outline-container {
    position: relative;  /* 确保 CSS 层面也有，不只靠 JS */
}

#outline-resize-handle {
    position: absolute;
    right: -4px;
    top: 0;
    width: 8px;
    height: 100%;
    min-height: 100%;
    cursor: ew-resize;
    z-index: 10;
}



/* ===== continue.css ===== */
/* 抽屉总高度 298px */
#mobile-nav-drawer {
    position: fixed;
    bottom: -237px; /* 初始隐藏 content 部分 (298-60) */
    left: 0;
    width: 100%;
    height: 298px;
    background-color: var(--theme-color);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0;
    padding: 0;
    z-index: 1000000 !important; /* 使用 32 位整数的最大值 */
    color: var(--theme-contract-color);
    opacity: 0; /* 主题色加载前隐藏，防止白色闪动 */
}

#mobile-nav-drawer.is-expanded {
    transform: translateY(-238px);
}

/* 顶部 Continue Reading 区域 */
#drawer-trigger {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-color);
    padding: 0;
    z-index: 2147483647 !important;
}

/* 3. 针对视频容器的补丁 */
video, iframe, .video-js {
    z-index: 1 !important;
}

/* 资源滚动容器 */
.drawer-content {
    height: 238px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    padding: 0;
}

#resource-list {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /* 关键：左右填充，保证第一个/最后一个项也能居中 */
    padding: 10px ;
    margin: 0;
    justify-content: space-between;
}

/* 资源项：宽 200px, 高 226px (150图 + 76文字区) */
.resource-item {
    flex: 0 0 200px;
    height: 226px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 图片：200x150 */
.resource-item .pf-mobile-thumbnail {
    width: 200px;
    height: 150px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border-radius: 5px 5px 0 0 ;
}

/* 文字区：遵循 calc(18px * 3 + 10px) */
.resource-item .resource-title-div {
    padding: 7px 10px;
    height: calc(18px * 3 + 10px); /* 64px */
    background-color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.resource-item p {
    margin: 0;
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    font-family: "NVIDIASansWRg", sans-serif;
    /* 多行文本截断 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

/* 高亮样式 */
.resource-item.active .pf-mobile-thumbnail {
    /*box-shadow: inset 0 0 0 4px #76b900;*/
}

.header-icon-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;

}
.arrow-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.4s ease; /* 旋转动画 */
    display: block;
}
/* 关键：当容器展开时，箭头旋转 180 度 */
#mobile-nav-drawer.is-expanded .arrow-icon {
    transform: rotate(180deg);
}


#mobile-nav-drawer {
    transition: transform 0.3s ease-out, opacity 0.3s;
    touch-action: pan-x; /* 允许横向滚动内容，但拦截纵向手势用于关闭 */
}

#mobile-nav-drawer.dragging {
    transition: none; /* 拖拽时取消动画，保证跟手 */
}


.drawer-scroll-wrapper {
    position: relative;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
}

.scroll-arrow.scroll-left {
    left: 6px;
}

.scroll-arrow.scroll-right {
    right: 6px;
}

.scroll-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

/* userMode（1 段路径）：单条横向轮播中插入"分组标签"作为分段 */
.group-divider {
    flex: 0 0 64px;
    height: 226px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 4px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.10);
    border: 1px dashed rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    color: var(--theme-contract-color);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.group-divider.is-expanded {
    border-style: solid;
    background: rgba(255, 255, 255, 0.20);
}
.group-divider .gd-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 1px;
    max-height: 160px;
    overflow: hidden;
}
.group-divider .gd-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.25);
    color: var(--theme-contract-color);
}
.group-divider.is-current {
    background: var(--theme-contract-color);
    border-color: var(--theme-contract-color);
    color: var(--theme-color);
}
.group-divider.is-current .gd-count {
    background: var(--theme-color);
    color: var(--theme-contract-color);
}
.group-divider.is-empty {
    opacity: 0.6;
}

/* ===== side-btn.css ===== */
#side-controls {
    position: fixed;
    right: 10px;
    bottom: 170px;
    display: flex;
    flex-direction: column; /* 从下往上排列 */
    gap: 0px;
    z-index: 1000;
}

.f-btn {
    width: 48px;
    height: 48px;
    background: var(--theme-color, transparent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
    margin: 10px 5px;
}

.f-btn i { font-size: 22px; width: 24px;height: 24px} /* 图标大小控制 */

.f-btn:active { transform: scale(0.9); }

@media (min-width: 1367px), (min-width: 768px) and (orientation: landscape) {
    #side-controls,#home-drawer{
        display: none;
    }
    .drawer-bottom {
        position: fixed;
        left: 0;
        bottom: 0px;
        width: 100%;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        z-index: 3000;
        transform: translateY(100%); /* 初始隐藏 */
        transition: transform 0.3s ease-out;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
    }

}

@media (max-width: 768px),
       (min-width: 769px) and (max-width: 1366px) and (orientation: portrait) {
    /* 悬浮层通用容器（手机 + 平板竖版） */
    .drawer-bottom {
        position: fixed;
        left: 0;
        bottom: 60px;
        width: 100%;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        z-index: 3000;
        transform: translateY(100%); /* 初始隐藏 */
        transition: transform 0.3s ease-out;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;

    }

}






.drawer-bottom.is-open {
    transform: translateY(0);
}

/* 顶部滑动把手 */
.drawer-handle {
    width: 40px;
    height: 5px;
    background: #ddd;
    border-radius: 3px;
    margin: 12px auto;
}

/* “更多”层中的图标排版 */
.more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 30px 20px;
    text-align: center;
}

.more-item i {
    font-size: 32px;
    color: #76b900;
    display: block;
    margin-bottom: 8px;
}

.more-item span {
    font-size: 13px;
    color: #666;
}

/* 禁用状态（针对目录） */
.more-item.disabled {
    filter: grayscale(1);
    opacity: 0.4;
    pointer-events: none;
}

#home-drawer .home-content{
    height: 320px;
}

#home-thumb{
    background: #182839;
    height: 80%;
}

#home-thumb .home-content{
    background: #182839;
}


/* 缩略图网格容器 */
.thumb-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 严格三列 */
    gap: 12px;
    padding: 15px;
    background: #182839;
}

/* 单个缩略图卡片 */
.thumb-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.thumb-card:active {
    opacity: 0.7; /* 点击反馈 */
}

/* 图片比例容器 */
.thumb-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4; /* 根据你的PDF比例调整，如 210/297 */
    background-color: #e0e0e0; /* 预加载背景色 */
    overflow: hidden;
}

.thumb-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 页码信息 */
.thumb-info {
    font-size: 11px;
    color: #666;
    text-align: center;
    padding: 4px 0;
    border-top: 1px solid #eee;
}

/* 高亮当前页 */
.thumb-card.active {
    outline: 2px solid #76b900;
}

/*//由于你现在有了向下滑动手势，用户会本能地尝试按住 drawer-handle 下拉。确保你的 CSS 中手柄是显眼的*/
.drawer-handle {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff; /* 确保背景色不透明 */
    cursor: row-resize;
    border-radius: 16px 16px 0 0;
}

.drawer-handle span {
    width: 40px;
    height: 5px;
    background: #ccc;
    border-radius: 3px;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    z-index: 998; /* 确保在 Drawer (999) 下面，在普通页面内容上面 */
    display: none; /* 默认隐藏 */
    backdrop-filter: blur(2px); /* 可选：增加高斯模糊感，更显高级 */
}

/* 当抽屉打开时，body 处于锁定状态，遮罩配合显示 */
body.drawer-open .drawer-overlay {
    display: block;
}

.f-btn {
    display: flex;           /* 开启弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    /* 基础尺寸设置 */
    width: 44px;             /* 举例 */
    height: 44px;            /* 举例 */
    cursor: pointer;
}

/* 确保内部的 i 标签本身也是一个容器 */
.f-btn i {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 移除你之前在行内写的 margin: auto */
}

#thumb-drawer{
    height: 80%;
}


/*滑动拉取缩略图*/
    /* 抽屉主体 */
#thumb-drawer {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止外层容器出现滚动条干扰 */
}

/* 内容承载区：这是关键 */
.home-content {
    flex: 1;            /* 占据剩余所有空间 */
    overflow-y: auto;   /* 纵向超出时允许滚动 */
    height: 100%;

    /* 优化移动端滚动体验 */
    -webkit-overflow-scrolling: touch;

    /* 防止拖动内容时触发浏览器的下拉刷新 */
    overscroll-behavior: contain;
}

/* 网格布局保持整齐 */
.thumb-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 移动端通常一行3个 */
    gap: 10px;
    padding: 15px;
}

/* ===== dbclick.css ===== */
.pdf-viewer-container {
    position: relative;
    z-index: 10; /* 确保在底层 UI 之上 */
    overflow-y: auto;
    overflow-x: hidden;
    background: #182839; /* 保持背景色一致，避免“白边”感 */
}

.pdf-page-wrapper {
    margin: 0 auto 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    /* 移除可能遮挡的伪元素 */
    pointer-events: none;
}

/* 隐藏所有可能出现的遮罩 */
.pdf-page-wrapper .loading-icon {
    display: none !important;
}

/* 确保 SVG 层不干扰双击 */
.svg-layer {
    pointer-events: none;
}

/* ===== mobileDbClick.css ===== */
#bottom-right {
    overflow-x: auto !important;
    overflow-y: auto !important;
    display: block !important;
    scroll-behavior: smooth; /* HTML/CSS 原生平滑滚动 */
    -webkit-overflow-scrolling: touch;  /* 保证 iOS 滑动流畅 */
    touch-action: pan-x pan-y !important; /* 关键：允许浏览器处理水平和垂直方向的原生滚动 */
}

/* 1. 包装层样式 */
.pdf-page-wrapper {
    /* 移除 !important，否则动画会失效 */
    transition: width 0.3s ease-out, max-width 0.3s ease-out;

    display: block;
    margin: 0 auto 20px auto;
    position: relative;
    /* 初始状态下不要设置过小的 max-width */
    /*max-width: none !important;   在pc端不能设置这个值...*/
}

/* 2. 内部图片样式 (标准 CSS 写法) */
.pdf-page-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block;
    /* 避免图片层级导致的闪烁 */
    backface-visibility: hidden;
}

/* ===== ad.css ===== */
:root {
    --vip-gold: #f1c40f;
    --dark-bg: rgba(20, 20, 20, 0.85);
}

.sticky-bar {
    position: fixed;
    bottom: -100px; /* 初始隐藏在屏幕下方 */
    left: 0;
    width: 100%;
    height: 70px;
    background: var(--dark-bg);
    backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
    border-top: 1px solid rgba(241, 196, 15, 0.3);
    z-index: 9999;
    transition: bottom 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

/* 当激活时显示的类 */
.sticky-bar.active {
    bottom: 0;
}

.bar-container {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vip-badge {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #000;
    font-weight: bold;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.text-content {
    display: flex;
    flex-direction: column;
}

.main-text {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.sub-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-renew {
    background: var(--vip-gold);
    color: #000;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4); /* 呼吸灯外发光 */
}

.btn-renew:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
}

.btn-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
}

.btn-close:hover {
    color: #fff;
}

/* 移动端适配 */
@media (max-width: 600px) {
    .sub-text { display: none; }
    .main-text { font-size: 13px; }
    .sticky-bar { height: 60px; }
}

/* ===== safari.css ===== */
/* ============================================================
 * Safari 字体优化样式表
 * 解决问题：
 *   1. 中文字体在 Safari 中回退为宋体（不美观）
 *   2. 字体粗细在 Safari 与 Chrome 中不一致
 * 方案：纯 CSS，不加载任何外部字体文件
 * ============================================================ */


/* ----------------------------------------------------------
 * 1. 全局字体栈（核心修复）
 *
 * 优先级说明：
 *   - "PingFang SC"    → macOS / iOS 自带苹方（简中）
 *   - "PingFang TC"    → macOS / iOS 自带苹方（繁中）
 *   - "Helvetica Neue" → macOS 经典西文字体
 *   - "Arial"          → Windows / Android 通用西文
 *   - "Microsoft YaHei" → Windows 微软雅黑（简中）
 *   - "Hiragino Sans GB" → macOS 冬青黑体（简中备选）
 *   - "WenQuanYi Micro Hei" → Linux 文泉驿微米黑
 *   - sans-serif        → 最终回退
 *
 * 这条规则确保 Safari 不会回退到宋体
 * ---------------------------------------------------------- */
html, body {
    font-family:
            -apple-system,
            BlinkMacSystemFont,
            "PingFang SC",
            "PingFang TC",
            "Helvetica Neue",
            "Arial",
            "Microsoft YaHei",
            "Hiragino Sans GB",
            "WenQuanYi Micro Hei",
            sans-serif;
}


/* ----------------------------------------------------------
 * 2. Safari 字体渲染优化
 *
 * -webkit-font-smoothing: antialiased
 *   → Safari/Chrome macOS 下使用灰度抗锯齿
 *   → 解决字体发虚、比 Chrome 看起来更粗的问题
 *
 * text-rendering: optimizeLegibility
 *   → 启用高级字距和连字处理
 * ---------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ----------------------------------------------------------
 * 3. 修复 Safari 中 font-weight 渲染偏粗的问题
 *
 * Safari 的 subpixel antialiasing 会让文字看起来比
 * Chrome 更粗。以下针对常用权重做微调。
 * ---------------------------------------------------------- */

/* 正文：确保使用 400（normal），不要用未命名的中间值 */
body,
p,
span,
li,
td,
th,
div {
    font-weight: 400;
}

/* 标题：统一使用 600（semibold）而非 bold(700)
   在 Safari 中 600 与 Chrome 的 700 视觉接近 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* 按钮和强调文本 */
button,
input,
select,
textarea,
strong,
b {
    font-weight: 600;
}


/* ----------------------------------------------------------
 * 4. 针对 Safari 的特定修复（仅 Safari 生效）
 *
 * 利用 Safari 特有的 @supports 检测：
 *   -webkit-marquee-repetition 是 Safari 独有属性
 * ---------------------------------------------------------- */
@supports (-webkit-marquee-repetition: infinite) {
    body {
        /* Safari 专属：强制灰度抗锯齿，减少粗细差异 */
        -webkit-font-smoothing: antialiased;

        /* 可选：微调字间距，补偿 Safari 渲染差异 */
        letter-spacing: 0.01em;
    }

    /* Safari 中小字号（<14px）容易发虚，设定最小字号 */
    p, span, li, td, a, label {
        font-size: max(14px, inherit);
    }
}


/* ----------------------------------------------------------
 * 5. iOS Safari 专项优化
 * ---------------------------------------------------------- */

/* 防止 iOS 横屏时自动放大字号 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 消除 iOS input/button 默认的圆角和阴影 */
input,
textarea,
button,
select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: inherit; /* 继承全局字体栈，避免回退到系统默认 */
}


/* ----------------------------------------------------------
 * 6. 资源卡片和特定组件字体修复
 *
 * 确保你项目中动态渲染的组件也使用正确的字体
 * ---------------------------------------------------------- */
.resource-title,
.resource-type,
.resource-title-div p,
.share-container a,
.error-tip,
#total-count {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* CTA 按钮文字 */
.action-wrapper button,
#preview-btn {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
}


/* ----------------------------------------------------------
 * 7. 补充：force-show 工具类
 *    （配合之前 JS 修复中 updateToolbar 使用）
 * ---------------------------------------------------------- */
.force-show {
    display: block !important;
}