:root{
  --bg:#fff; --fg:#222; --muted:#6b7280; --brand:#0ea5e9;
  --border:#e5e7eb; --card:#f8fafc;
  --page:1100px; --sidebar:300px; --gap:24px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; line-height:1.8; font-size:16px;}
a{color:var(--brand); text-decoration:none;} a:hover{text-decoration:underline;}

/* 关键修复 CSS: 仅禁用滚动 */
html.lb-open {
  overflow: hidden; 
}

.topbar{position:sticky; top:0; z-index:60; background:linear-gradient(#ffffffcc,#ffffffcc); backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--border);}
.topbar .inner{max-width:var(--page); margin:0 auto; padding:10px 12px;gap:10px; align-items:center;}
.topbar .muted{color:var(--muted); font-size:13px; margin-right:auto;}
.topbar .toc-btn{display:none; padding:8px 10px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer;}

/* 【核心修正 1：清理 style.css 中的 desktop 布局/sticky/height 定义】 
   让 index.php 内联样式中的 display:grid + align-items:stretch 规则能完全生效。
*/
.container{max-width:var(--page); margin:0 auto; padding:16px 12px 24px; display:grid; grid-template-columns: var(--sidebar) 1fr; gap:var(--gap);}
.sidebar{
  padding:16px; 
  border:1px solid var(--border); 
  border-radius:12px; 
  background:var(--card);
}


.sidebar h1{font-size:18px; margin:0 0 10px;}
.sidebar .search{position:sticky; top:0; background:var(--card); padding-bottom:12px; z-index:1;}
.sidebar input[type="search"]{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none;}
/* 【修正搜索清除按钮样式 - 保留通用外观，移除定位（定位由 index.php 控制）】 */
.search form{display:block;}
.search-input-wrap {
    position: relative;
    display: block;
}
.clear-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 20px; /* 增大字体，更明显 */
    padding: 0 5px;
    line-height: 1;
    opacity: 0.8; 
}
.clear-search-btn:hover {
    color: var(--fg); /* 悬停时更黑 */
    opacity: 1;
}

/* 调整搜索框内边距，给清除按钮留出空间 */
.search input[type="search"] {
    padding-right: 35px; /* 增加内边距 */
}
/* 【修正搜索清除按钮样式结束】 */
.sidebar .nav{margin:12px 0 0; padding:0; list-style:none;}
.sidebar .nav li{margin:6px 0; line-height:1.4;}
.sidebar .nav a{display:block; padding:6px 8px; border-radius:8px;}
.sidebar .nav a:hover{background:#eef6ff; text-decoration:none;}
.sidebar .tools{display:flex; gap:8px; margin-top:12px;}
.sidebar .tools button{flex:1; padding:6px 8px; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer;}
.sidebar .tools button:hover{background:#f3f4f6;}
.tip{font-size:12px;color:var(--muted);margin-top:6px;}

.main{min-width:0;}
.header{margin:4px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.h-title{font-size:22px; margin:0;}
.h-meta{font-size:13px; color:var(--muted);}

.post{padding:16px 0; border-bottom:1px solid var(--border);}
.post-title{font-size:18px; margin:0 0 6px;}
.post-title .toggle{font:inherit; background:none; border:none; padding:0; color:inherit; cursor:pointer; text-align:left;}
.post-meta{font-size:13px; color:var(--muted); margin-bottom:8px;}
.post-body{margin-top:6px;}
.post.collapsed .post-body{display:none;}
.post.collapsed .post-title .toggle::after{content:"  ▶"; color:var(--muted);}
.post:not(.collapsed) .post-title .toggle::after{content:"  ▼"; color:var(--muted);}

.post-body p{margin:10px 0; text-align:justify; text-justify:inter-ideograph;}
.media-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:12px; margin-top:12px;}
.media-fig{margin:0; text-align:center;}
.media-fig img, .media-fig video{width:100%; height:auto; border-radius:10px; display:block;}
.media-fig figcaption{font-size:12px; color:var(--muted); margin-top:6px;}
.emb img, .emb video{width:100%; height:auto; border-radius:10px; display:block; margin:10px 0;}

/* Lightbox - 真正的全屏视口居中 */
.lb-backdrop{
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,.85); 
  display:none; 
  align-items:center; 
  justify-content:center; 
  z-index:999;
  padding:0; 
}
.lb-backdrop.active{display:flex;}
.lb-content{
  position:relative;
  max-width:calc(100% - 40px); 
  max-height:calc(100% - 40px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lb-content img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:4px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  /* 启用拖动手柄 */
  cursor: grab;
  /* 确保 transform 变化平滑 */
  transition: transform 0s; 
}
/* 拖动时的鼠标样式 */
.lb-content img:active {
  cursor: grabbing;
}

.lb-close{
  position:fixed; 
  top:20px; 
  right:20px; 
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff; 
  font-size:28px;
  font-weight:300;
  cursor:pointer; 
  user-select:none;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  transition:background .2s;
  z-index:1000;
}
.lb-close:hover{
  background:rgba(0,0,0,.7);
}

/* Back to top */
.backtop{position:fixed; right:14px; bottom:20px; padding:10px 12px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08); display:none; z-index:40; cursor:pointer;}
.backtop.show{display:block;}

/* Grouped TOC */
.toc-grouped{padding-top:8px;}
.toc-year{border:1px solid var(--border); border-radius:10px; background:#fff; margin-bottom:10px; overflow:hidden;}
.toc-year > .toc-hd{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--card); cursor:pointer; user-select:none;
  /* 修正 2: 年份标题分隔线 */
  border-bottom: 1px solid var(--border); 
  margin-bottom: -1px; 
}
.toc-year > .toc-hd b{font-weight:600;}
.toc-year > .toc-year-bd{display:none; padding:8px 12px;}
.toc-year.open > .toc-year-bd{display:block;}

.toc-month{
  margin:6px 0; 
  border:none; /* 移除原来的边框，依赖虚线分隔 */
  border-radius:8px;
}
.toc-month > .toc-hd{
  display:flex; align-items:center; justify-content:space-between; padding:8px 10px; cursor:pointer;
  /* 移除标题下方的分隔线，月份标题上方的虚线由 PHP 内联样式控制 */
  border-bottom: none; 
}
.toc-month > .toc-month-bd{display:none; padding:0 10px 10px;}
.toc-month.open > .toc-month-bd{display:block;}

/* 【修正 2: 目录月份下的文章标题分隔线】 */
.toc-month-bd a{
  display:block; 
  padding:4px 0; 
  line-height:1.4;
  /* 关键：增加底部虚线 */
  border-bottom: 1px dotted var(--border); 
}
/* 移除最后一个链接的底部虚线 */
.toc-month-bd a:last-child {
  border-bottom: none;
}

.toc-month-bd a.active{
  background:var(--brand);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  /* 激活时确保背景不被虚线覆盖 */
  border-bottom: none; 
}


/* Pager */
.pager{display:flex; align-items:center; gap:10px; justify-content:center; padding:12px 0; color:var(--muted);}
.pager button{padding:6px 12px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer;}
.pager button[disabled]{opacity:.5; cursor:not-allowed;}

/* Mobile: off-canvas sidebar */
@media (max-width: 1024px){
  .container{grid-template-columns: 1fr; gap:12px;}
  .sidebar{position:fixed; top:0; right:-100%; height:100vh; width:min(90vw, 360px); max-width:90vw; border-radius:0; border-left:1px solid var(--border); border-right:none; background:#fff; transition:right .25s ease; z-index:60; padding:16px;}
  .sidebar.open{right:0;}
  .toc-mask{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; display:none;}
  .toc-mask.show{display:block;}
  .topbar .toc-btn{display:inline-block;}
  .media-grid{grid-template-columns: repeat(auto-fill, minmax(160px,1fr));}
  .h-title{font-size:20px;}
  .post-title{font-size:17px;}
  body{font-size:15px;}
  /* 移动端 Light Box 限制 */
  .lb-content{
    max-width:calc(100% - 20px); 
    max-height:calc(100% - 20px);
  }
  .lb-content img{
    max-width:100%;
    max-height:100%;
  }
  .lb-close{
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    font-size:24px;
  }
}