/* Flipbook Styles - 3D Book Effect */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: #2c2c2c;
}

/* 禁止文字选中和图片拖拽 */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

#flipbook, #flipbook * {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ============================================
   Flipbook Viewport
   ============================================ */

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.flipbook-viewport .flipbook-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.6s ease;
}

/* ============================================
   Book Thickness - Page Edge Lines
   ============================================ */

/* 右侧厚度 - 表示右侧剩余页数 */
.thickness {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(to right, #FCFCFC, #C9C9C9 2px);
    background-size: 100% 100%;
    z-index: 50;
    transition: width 500ms, right 500ms;
    pointer-events: none;
    /* 3D 斜边效果 - 使用 clip-path */
    clip-path: polygon(0 0, 100% 2%, 100% 98%, 0 100%);
}

/* 左侧厚度 - 表示左侧已翻页数 */
.thickness_left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(to right, #FCFCFC, #C9C9C9 2px);
    background-size: 100% 100%;
    z-index: 50;
    transition: width 500ms, left 500ms;
    pointer-events: none;
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%);
}

/* ============================================
   Page Spine Shadows — 书脊阴影
   使用与原始 flbook 平台相同的 base64 纹理图片，
   实现真实的书页边缘质感（非平滑渐变）
   ============================================ */

/* 左页（偶数页）：阴影在右边缘（靠近书脊） */
.evenshadow {
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    width: 21%;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAABCAYAAAAhMKvHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA1LTA3VDAwOjQ3OjQxKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNS0wN1QwMDo0ODo0NSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wNS0wN1QwMDo0ODo0NSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MDgzMjIzOC0yYTIyLTY4NDktYmM0Yy02N2NjYjQ1MWY2YzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzA4MzIyMzgtMmEyMi02ODQ5LWJjNGMtNjdjY2I0NTFmNmMxIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NzA4MzIyMzgtMmEyMi02ODQ5LWJjNGMtNjdjY2I0NTFmNmMxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MDgzMjIzOC0yYTIyLTY4NDktYmM0Yy02N2NjYjQ1MWY2YzEiIHN0RXZ0OndoZW49IjIwMjQtMDUtMDdUMDA6NDc6NDErMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz51Wco+AAAAMklEQVQYlWP8//8/AwMDAwMjIyMjAwRQg6a3Wf+phBmwsPGJMTEwMLBAMTMaG4aZ8NEAqxMcNOjRNY8AAAAASUVORK5CYII=");
    background-repeat: repeat-y;
    background-size: 100% auto;
}

/* 右页（奇数页）：阴影在左边缘（靠近书脊） */
.oddshadow {
    position: absolute;
    top: 0;
    left: -1px;
    height: 100%;
    width: 14%;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAABCAYAAABnhghtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA1LTA3VDAwOjQ3OjQ4KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNS0wN1QwMDo0ODo0NCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wNS0wN1QwMDo0ODo0NCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpmODg0ZWUwYy02ZjkzLWNjNDktODZlYi02ODk0YzI5ZmVhNmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Zjg4NGVlMGMtNmY5My1jYzQ5LTg2ZWItNjg5NGMyOWZlYTZjIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Zjg4NGVlMGMtNmY5My1jYzQ5LTg2ZWItNjg5NGMyOWZlYTZjIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmODg0ZWUwYy02ZjkzLWNjNDktODZlYi02ODk0YzI5ZmVhNmMiIHN0RXZ0OndoZW49IjIwMjQtMDUtMDdUMDA6NDc6NDgrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gvcRQAAAAoElEQVQYlT2Nwa2FMBADidfJIgIFvJ5+UxTJlTpQWNb/BIeRDx5pSinlj6TMTO4ukklSpRSR/Ki1iqQAfH+tVa011VoFQACytSYAeheA3F0ARDIByMw0z7PM7GOapjQz9d5FUs/zfN1SSr4dd1dEyN3l7q+Xy7IoItR7V0Ro2zZFhNZ1zYhQRGiMod/vp/u+NcbQdV06zzOP49C+78pM/QN5lXL/HcGjfgAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    background-size: 100% auto;
}

/* ============================================
   Page Numbers
   ============================================ */

.page-number {
    position: absolute;
    bottom: 25px;
    text-align: center;
    font-size: 13px;
    color: #999;
    pointer-events: none;
    z-index: 1;
}

.page-number.even {
    left: 0;
    width: 595px;
}

.page-number.odd {
    left: 595px;
    width: 595px;
}

/* ============================================
   Flipbook Container
   ============================================ */

#flipbook {
    position: relative;
    margin: 0 auto;
}

/* Page Base */
#flipbook .page {
    background-color: #fffff4;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}

/* Hard cover */
#flipbook .hard {
    background-color: #f8f8f0;
    border: none;
}

/* Double page spread */
#flipbook .page.double {
    width: 1190px;
    height: 841px;
}

/* Single page */
#flipbook .page:not(.double) {
    width: 595px;
    height: 841px;
}

/* ============================================
   Typography
   ============================================ */

#flipbook p { margin: 0; padding: 0; }
#flipbook .text-justify { text-align: justify; }

#flipbook h1 { font-size: 28px; font-weight: bold; margin: 20px 0; }
#flipbook h2 { font-size: 22px; font-weight: bold; margin: 15px 0; line-height: 1.4; }

#flipbook table { width: 100%; border-collapse: collapse; font-size: 14px; }
#flipbook th, #flipbook td { padding: 10px 6px; border: 1px solid #ebeef5; }
#flipbook th { background-color: #f5f7fa; color: #606266; font-weight: bold; text-align: center; }
#flipbook tr:nth-child(even) { background-color: #fafafa; }

/* ============================================
   Turn.js Shadow
   ============================================ */

.flipbook-viewport .shadow {
    transition: box-shadow 0.5s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* ============================================
   Toolbar
   ============================================ */

.flipbook-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 44px;
    background: linear-gradient(to top, #3a3a3a, #2a2a2a);
    z-index: 1000;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border-bottom: 1px solid #444;
    align-items: center;
    justify-content: center;
}
.topbar-title { font-size: 16px; font-weight: bold; letter-spacing: 2px; }

.flipbook-toolbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 1000;
    color: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    border-top: 1px solid #444;
}

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

.toolbar-btn {
    background: transparent; border: 1px solid transparent;
    color: #ccc; cursor: pointer;
    padding: 6px 10px; border-radius: 4px;
    font-size: 16px; transition: all 0.2s; line-height: 1;
}
.toolbar-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.toolbar-btn:active { background: rgba(255,255,255,0.2); }
.toolbar-btn.active { color: #4fc3f7; border-color: rgba(79,195,247,0.3); }

.toolbar-page-info { font-size: 14px; min-width: 80px; text-align: center; color: #aaa; }
.toolbar-title { font-size: 15px; font-weight: bold; color: #ddd; }

/* ============================================
   Catalog Sidebar
   ============================================ */

.flipbook-catalog {
    position: fixed; top: 0; left: -300px;
    width: 300px; height: 100%;
    background: #fff;
    box-shadow: 2px 0 15px rgba(0,0,0,0.2);
    z-index: 1001; transition: left 0.3s ease;
    display: flex; flex-direction: column;
}
.flipbook-catalog.open { left: 0; }

.catalog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; border-bottom: 1px solid #eee; background: #f8f8f8;
}
.catalog-header h3 { font-size: 18px; color: #333; }
.catalog-close { background: transparent; border: none; font-size: 24px; cursor: pointer; color: #999; padding: 0; line-height: 1; }
.catalog-close:hover { color: #333; }

.catalog-content { flex: 1; overflow-y: auto; padding: 10px 0; }
.catalog-list { list-style: none; padding: 0; margin: 0; }
.catalog-section { padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.catalog-section.active { background: #e3f2fd; }
.catalog-title { font-size: 16px; font-weight: bold; color: #333; cursor: pointer; }
.catalog-title:hover { color: #1976d2; }
.catalog-children { list-style: none; padding: 8px 0 0 20px; margin: 0; }
.catalog-article { padding: 6px 0; font-size: 14px; color: #666; cursor: pointer; }
.catalog-article:hover { color: #1976d2; }

/* ============================================
   Search Panel
   ============================================ */

.flipbook-search-panel {
    position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
    background: #fff; border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding: 10px 15px; z-index: 1002; transition: top 0.3s ease;
    display: flex; align-items: center; gap: 10px;
}
.flipbook-search-panel.open { top: 0; }

.search-input {
    width: 250px; padding: 8px 12px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 14px; outline: none;
}
.search-input:focus { border-color: #1976d2; box-shadow: 0 0 0 2px rgba(25,118,210,0.1); }

.search-btn {
    background: transparent; border: 1px solid #ddd;
    padding: 6px 10px; cursor: pointer; border-radius: 4px; font-size: 14px;
}
.search-btn:hover { background: #f5f5f5; }

.search-count { font-size: 12px; color: #999; min-width: 60px; }
.search-highlight { background-color: #ffeb3b; padding: 1px 2px; border-radius: 2px; }
.search-highlight-active { background-color: #ff9800; box-shadow: 0 0 5px rgba(255,152,0,0.5); }

/* ============================================
   Loading
   ============================================ */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   Mobile responsive
   ============================================ */

@media (max-width: 768px) {
    .flipbook-topbar { display: flex; }
    .flipbook-toolbar { height: 44px; padding: 0 8px; }
    .toolbar-btn { padding: 5px 7px; font-size: 14px; }
    .toolbar-title { display: none; }
    .toolbar-page-info { font-size: 13px; min-width: 60px; }
    .flipbook-catalog { width: 260px; left: -260px; }
    .thickness, .thickness_left { display: none; }
    .evenshadow, .oddshadow { display: none; }
}

@media (max-width: 480px) {
    .toolbar-center { display: none; }
}

@media print {
    .flipbook-toolbar, .flipbook-catalog, .flipbook-search-panel { display: none !important; }
}