:root{
  --bg:#0b0d10; --fg:#e9eef5; --muted:#9fb3c8; --accent:#5fb3ff; --hl:rgba(97,173,255,.35);
  --card:#0e141b; --line:#233041; --pure:#ffffff; --ink:#0a0a0a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,"PingFang SC","Noto Sans CJK SC",sans-serif;}
.hidden{display:none !important}

/* ====== PC端原有样式（保持不变） ====== */
#topbar{display:flex; flex-direction:column; align-items:center; gap:14px; padding:25vh 16px 24px; position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(11,13,16,0.98) 0%, rgba(11,13,16,0.92) 70%, rgba(11,13,16,0.00) 100%); backdrop-filter:saturate(1.1) blur(8px); transition:padding .2s ease}
#topbar .searchwrap{width:min(700px, 80vw)}
.brand{font-weight:900; font-size:34px; letter-spacing:.5px; text-align:center; text-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.25); cursor:pointer}
.searchwrap{display:flex; gap:10px; width:min(700px, 80vw); justify-content:center; align-items:center}

/* 行内 logo 默认不显示，在结果页与图文对照页显示 */
.brand-inline{flex:0 0 auto; font-weight:900; font-size:18px; letter-spacing:.5px; margin-right:8px; white-space:nowrap; display:none}
#q{flex:1; padding:12px 16px; border:2px solid var(--ink); border-radius:999px; background:var(--pure); color:var(--ink); font-size:16px;}
#bookSelect{padding:12px 12px; border:2px solid var(--ink); border-radius:999px; background:var(--pure); color:var(--ink)}
#btnSearch{padding:12px 18px; border-radius:999px; border:2px solid var(--pure); background:var(--ink); color:var(--pure); cursor:pointer}
#btnSearch:hover{filter:brightness(1.1)}

/* 移动端搜索控件默认隐藏 */
.search-controls{display:none}

/* 分析链接样式 */
.header-actions {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
}

.analytics-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--fg);
}

.analytics-link:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-50%) scale(1.1);
  border-color: var(--accent);
}



body.compact #topbar{padding:10px 12px 2px; align-items:center;}
/* 结果/查看页面：隐藏 logo，仅保留检索栏 */
body.compact .brand{display:none !important}
/* 在结果页与图文对照页显示行内 logo */
body.compact .brand-inline{display:block}
body.viewer .brand-inline{display:block}
/* 图文对照上方仅保留检索栏，隐藏本页工具条 */
body.compact:not(.viewer) .viewerbar{display:none !important}
body.compact #topbar .searchwrap{width:100%; max-width:900px; margin:0 auto;}

#content{max-width:none; width:100%; margin:0 auto; padding:12px 24px 48px}
#resultsList{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.result{padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer}
.result:hover{outline:2px solid #18324d}
.result .line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.result .meta{color:var(--muted); font-size:13px; margin-top:4px}

/* 检索结果页脚样式 */
.resultsFooter{display:flex; flex-direction:column; gap:16px; margin-top:24px; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:12px}
.resultsInfo{display:flex; justify-content:center; align-items:center}
.resultsInfo span{color:var(--muted); font-size:14px; font-weight:500}
.pager{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px}
.pager button{padding:10px 14px; border-radius:8px; border:1px solid var(--line); background:#122031; color:var(--fg); cursor:pointer; font-size:14px; min-width:44px; transition:all 0.2s ease}
.pager button[disabled]{opacity:.4; cursor:not-allowed; background:#0a0f14}
.pager button:hover:not([disabled]){background:#1a2a3a; border-color:var(--accent)}
.pager .num{min-width:44px; text-align:center; font-weight:500; border-radius:6px}
.pager .active{background:var(--accent); color:var(--ink); border-color:var(--accent); font-weight:600}
.pager .active:hover{background:var(--accent); filter:brightness(1.1)}

.hint{color:var(--muted); text-align:center; position:fixed; bottom:120px; left:50%; transform:translateX(-50%); z-index:1}
.viewerbar{display:flex; gap:12px; align-items:center; margin:4px 0 8px}
.viewerbar.sticky{position:sticky; top:64px; z-index:5; background:rgba(11,13,16,.9); border:1px solid var(--line); border-radius:12px; padding:6px 12px; backdrop-filter: blur(6px)}
.viewerbar button{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#122031; color:var(--fg); cursor:pointer}
.viewerbar button:disabled{opacity:.5; cursor:not-allowed}
#srcInfo{text-align:right; flex:1; color:var(--muted); font-size:14px}
#stage{position:relative; display:grid; grid-template-columns: 1fr minmax(480px, 50vw); gap:8px; align-items:start; min-height:70vh}
#imagePane {
  position: relative;
  grid-column: 1;
  background: var(--card);
  border-radius: 8px;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 70vh;
  max-height: 90vh;
  padding: 16px;
}
/* 图片加载完成后隐藏占位骨架 */
#imagePane.loaded::before { display: none; }

#pageImg {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  object-fit: contain;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

#pageImg.loaded {
  opacity: 1;
}

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* 加载占位效果 */
#imagePane::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 140%;
  background: linear-gradient(
    90deg,
    var(--card) 0%,
    var(--line) 50%,
    var(--card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
#textPane{grid-column:2; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; height:80vh; max-height:80vh; align-self:start}
#textContent{flex:1; padding:8px; overflow-y:auto; overflow-x:auto; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; gap:2px; letter-spacing:0.5px; line-height:1.6; font-size:18px; padding-top:0; margin-top:0}
#textContent::-webkit-scrollbar{width:8px}
#textContent::-webkit-scrollbar-track{background:var(--card)}
#textContent::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
#textContent::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.text-column{display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-height:100px}
.text-line{display:block; cursor:pointer; padding:1px 2px; border-radius:6px; transition:background-color 0.2s; writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap}
.text-line-horizontal{display:block; cursor:pointer; padding:1px 2px; border-radius:6px; transition:background-color 0.2s; writing-mode:horizontal-tb; text-orientation:mixed; white-space:normal; word-break:break-all}
.text-line:hover{background:rgba(255,255,255,.03)}
.text-line-horizontal:hover{background:rgba(255,255,255,.03)}
mark.hl-blue{background:var(--hl); color:inherit; padding:0 .1em; border-radius:.15em}

/* ====== 移动端专用样式（仅在768px以下生效） ====== */
@media (max-width: 768px) {
  body{overflow-x:hidden}
  
  /* 顶部搜索栏移动端优化 */
  #topbar{
    padding:15vh 12px 16px;
  }
  
  .brand{
    font-size:28px;
    margin-bottom:8px;
    text-align:center;
    width:100%;
    display:block;
  }
  
  .searchwrap{
    width:100%;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  
  #q{
    width:100%;
    min-width:unset;
    font-size:16px;
    padding:16px 20px;
  }
  
  .search-controls{
    display:flex;
    gap:8px;
    width:100%;
  }
  
  #bookSelect{
    flex:1;
    padding:14px 16px;
    font-size:14px;
    min-width:unset;
  }
  
  #btnSearch{
    flex:0 0 auto;
    padding:14px 24px;
    font-size:16px;
    font-weight:600;
  }
  
  /* 移动端隐藏桌面端控件，显示移动端控件 */
  .searchwrap > #bookSelect,
  .searchwrap > #btnSearch{
    display:none;
  }
  
  /* 紧凑模式移动端 */
  body.compact #topbar{
    padding:8px 12px 1px;
  }
  
  body.compact .searchwrap{
    flex-direction:row;
    gap:8px;
  }
  
  body.compact #q{
    padding:12px 16px;
    font-size:14px;
  }
  
  body.compact .brand-inline{
    font-size:16px;
    margin-right:6px;
    text-align:center;
    width:100%;
    margin-bottom:8px;
    margin-left:0;
  }
  
  body.compact .search-controls{
    display:none;
  }
  
  body.compact .searchwrap > #bookSelect,
  body.compact .searchwrap > #btnSearch{
    display:block;
    padding:12px 12px;
    font-size:14px;
  }
  
  /* 主内容区域 */
  #content{
    padding:12px 16px 48px;
  }
  
  /* 搜索结果列表移动端优化 */
  .result{
    padding:16px;
    border-radius:8px;
    margin-bottom:2px;
    transition:all 0.2s ease;
  }
  
  .result .line{
    font-size:16px;
    line-height:1.4;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
  }
  
  .result .meta{
    font-size:12px;
    margin-top:8px;
    opacity:0.8;
  }
  
  .result:active{
    transform:scale(0.98);
    background:var(--line);
  }
  
  /* 分页器移动端优化 */
  .resultsFooter{
    padding:16px;
    margin-top:16px;
  }
  
  .resultsInfo span{
    font-size:13px;
  }
  
  .pager{
    gap:6px;
  }
  
  .pager button{
    padding:12px 16px;
    font-size:16px;
    min-width:48px;
    min-height:48px;
    border-radius:6px;
  }
  
  .pager .num{
    min-width:48px;
  }
  
  .hint{
    position:fixed;
    bottom:100px;
    left:50%;
    transform:translateX(-50%);
    font-size:15px;
    padding:0 20px;
    z-index:1;
  }
  
  /* 图文对照页导航栏移动端 */
  .viewerbar{
    gap:8px;
    margin:2px 0 6px;
    flex-wrap:wrap;
  }
  
  .viewerbar.sticky{
    top:56px;
    padding:8px;
    border-radius:8px;
  }
  
  .viewerbar button{
    padding:12px 16px;
    font-size:14px;
    border-radius:6px;
    min-height:44px;
    flex:1;
    transition:all 0.2s ease;
    white-space:nowrap;
  }
  
  .viewerbar button:hover:not(:disabled){
    background:#1a2a3a;
    border-color:var(--accent);
  }
  
  .viewerbar > div{
    display:contents;
  }
  
  .viewerbar > div > button{
    flex:1;
  }
  
  #srcInfo{
    width:100%;
    text-align:center;
    padding:8px 0;
    font-size:13px;
    order:3;
  }
  
  #btnBack{
    order:1;
    flex:0 0 auto;
    width:auto;
  }
  
  /* 图文对照主舞台移动端布局 */
  #stage{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:auto;
  }
  
  #imagePane{
    width:100%;
    order:1;
    overflow:visible;
    cursor:zoom-in;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 12px;
  }
  
  #imagePane.zoomed{
    cursor:zoom-out;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  #pageImg{
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    object-fit: contain !important;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border-radius:6px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  
  #overlay{
    border-radius:6px;
  }
  
  #textPane{
    width:100%;
    order:2;
    height:60vh;
    max-height:60vh;
    border-radius:8px;
  }
  
  #textContent{
    padding:12px;
    font-size:16px;
    gap:6px;
  }
  
  #textContent::-webkit-scrollbar{width:4px}
  
  /* 文本行移动端优化 */
  .text-line{
    padding:4px 6px;
    border-radius:4px;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  
  .text-line:active{
    background:rgba(255,255,255,.08);
    transform:scale(0.98);
  }
}

/* 超小屏幕优化（480px以下） */
@media (max-width: 480px) {
  #stage{
    gap:8px;
  }
  
  #imagePane{
    padding: 8px;
  }
  
  #pageImg{
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    object-fit: contain !important;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border-radius:4px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  
  #textPane{
    height:50vh;
    max-height:50vh;
  }
  
  #textContent{
    padding:10px;
    font-size:15px;
  }
}

/* 大屏幕优化（1200px以上） */
@media (min-width: 1200px) {
  #stage {
    grid-template-columns: 1fr minmax(520px, 45vw);
    gap: 24px;
  }
  
  #imagePane {
    min-height: 75vh;
    max-height: 95vh;
  }
  
  #textPane {
    height: 85vh;
    max-height: 85vh;
  }
}

/* 超大屏幕优化（1600px以上） */
@media (min-width: 1600px) {
  #stage {
    grid-template-columns: 1fr minmax(600px, 40vw);
    gap: 32px;
  }
  
  #imagePane {
    min-height: 80vh;
    max-height: 98vh;
  }
  
  #textPane {
    height: 90vh;
    max-height: 90vh;
  }
}

/* 触摸设备专用样式 */
@media (hover: none) and (pointer: coarse) {
  .result:hover{
    outline:none;
  }
  
  .text-line:hover{
    background:transparent;
  }
  
  .pager button:hover:not([disabled]){
    background:#122031;
    border-color:var(--line);
  }
  
  .viewerbar button:hover:not(:disabled){
    background:#122031;
    border-color:var(--line);
  }
}

/* 安全区域适配 - iPhone X 等设备 */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    #topbar{
      padding-left:max(12px, env(safe-area-inset-left));
      padding-right:max(12px, env(safe-area-inset-right));
    }
    
    #content{
      padding-left:max(16px, env(safe-area-inset-left));
      padding-right:max(16px, env(safe-area-inset-right));
      padding-bottom:max(48px, env(safe-area-inset-bottom));
    }
  }
}

/* 键盘弹出时的适配 */
@media (max-width: 768px) {
  body.compact #topbar{
    position:sticky;
  }
  
  body.viewer .viewerbar.sticky{
    position:relative;
    top:auto;
  }
}

/* 加载状态优化 */
.result:only-child{
  text-align:center;
  font-style:italic;
  opacity:0.8;
}

/* 隐藏主界面的搜 全库栏 */
#topbar #bookSelect,
#topbar #bookSelectMobile {
  display: none;
}

/* 在结果页和图文对照页显示搜 全库栏 */
body.compact #topbar #bookSelect,
body.compact #topbar #bookSelectMobile,
body.viewer #topbar #bookSelect,
body.viewer #topbar #bookSelectMobile {
  display: inline-block;
}

/* 缩小搜索框和目录页的上下尺寸 */
body.compact #topbar,
body.viewer #topbar {
  padding:5px 12px;
}

body.compact #q,
body.viewer #q {
  padding:8px 12px;
}

body.compact #bookSelect,
body.viewer #bookSelect {
  padding:6px 10px;
}

body.compact #btnSearch,
body.viewer #btnSearch {
  padding:6px 12px;
}

@media (max-width: 768px) {
  .search-controls {
    justify-content: center;
  }

  #btnSearchMobile {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .searchwrap {
    width: 100%;
    padding: 0 12px;
    display: flex;
    gap: 8px;
  }

  #q {
    flex: 1;
    width: auto;
  }

  #btnSearchMobile {
    flex: 0 0 auto;
    width: auto;
  }
}

@media (max-width: 768px) {
  body.compact .searchwrap,
  body.viewer .searchwrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.compact #q,
  body.viewer #q {
    width: 100%;
    margin-bottom: 8px;
  }

  body.compact #bookSelect,
  body.viewer #bookSelect {
    width: 100%;
    margin-bottom: 8px;
  }

  body.compact #btnSearchMobile,
  body.viewer #btnSearchMobile {
    width: 100%;
  }
}