/* 主题样式（首页与阅读页共用） */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;          /* 页面至少占满一屏 */
  display: flex;              /* 纵向布局 */
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f7;
  color: #333;
}

/* Header */
header {
  position: relative;
  height: 38vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
  overflow:hidden;
}
header::before { content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.65)); z-index:0;}
nav, .signature { position:relative; z-index:1;}
nav { position:absolute; top:20px; right:40px; display:flex; gap:16px; padding:6px 14px; border-radius:999px; background:rgba(0,0,0,0.25); backdrop-filter:blur(10px); font-size:0.9rem;}
nav a { color:#fff; text-decoration:none; opacity:0.9; }
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

nav a:hover {
  opacity: 1;
}

/* 当前选中分类高亮 */
nav a.active {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
}
.signature { font-size:1.8rem; letter-spacing:2px; }

/* main section */
.main-section { flex:1; background: linear-gradient(135deg, #009db4 10%, #00b7d1 30%, #3fd8ec 50%, #b6f6ff 150%); padding:40px 0 60px; }
.content { max-width:1000px; margin:0 auto; padding:0 20px; }
/* 关于我页面布局 */
.about-layout h2 {
  margin-bottom: 24px;
  color: #3c4c52;
}

.about-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  align-items: flex-start;
}

.about-avatar {
  flex: 0 0 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: #ccc;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

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

.about-body {
  flex: 1;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.8;
}

.about-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
}

.about-tagline {
  margin: 4px 0 16px;
  font-size: 0.9rem;
  color: #666;
}

.about-body ul {
  padding-left: 1.2rem;
  margin: 8px 0 12px;
}

.about-meta {
  margin-top: 12px;
  font-size: 0.85rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 小屏幕适配 */
@media (max-width: 900px) {
  .about-card {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .about-avatar {
    width: 140px;
    height: 140px;
  }

  .about-body {
    width: 100%;
  }
}


/* 让不同页面的主体区域撑满中间空间，footer 自然贴底 */
.main,
.container {
  flex: 1;
}
/* cards */
.cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; margin-top:20px; }
@media (max-width:900px) { .cards { grid-template-columns:1fr; } }
.card { display:flex; gap:16px; padding:16px 20px; border-radius:18px; background:rgba(255,255,255,0.95); box-shadow:0 8px 22px rgba(0,0,0,0.16); transition: .25s ease; cursor:pointer; text-decoration:none; color:inherit; }
.card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,0.20); }
.card-thumb { flex:0 0 150px; height:100px; border-radius:12px; overflow:hidden; background:#ccc; }
.card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.card-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.card-meta { font-size:.8rem; color:#888; margin-bottom:4px;}
.card h3 { margin:0 0 6px; font-size:1.1rem; color:#333; }
.card p { margin:0; font-size:.9rem; color:#555; }

/* Article */

.article-content { background:#fff; border-radius:16px; padding:24px 24px 28px; box-shadow:0 10px 26px rgba(0,0,0,0.12); line-height:1.8; font-size:.98rem; }
.article-content h2 { font-size:1.3rem; margin:22px 0 10px; border-left:4px solid #00b7d1; padding-left:10px; color:#223; }
.article-content h3 { font-size:1.05rem; margin:18px 0 8px; color:#334; }
.article-content code { font-family:Consolas,Menlo,Monaco,monospace; background:#f3f3f3; padding:2px 4px; border-radius:4px; font-size:.9rem; }
.article-content blockquote { margin:14px 0; padding:10px 14px; border-left:4px solid #00b7d1; background:#f0fbff; color:#444; border-radius:0 10px 10px 0; }
/* 阅读页：主内容 + 右侧同栏目的文章列表 */

.article-main {
  /* 原来的 .main 已经有一些通用样式，这里针对左侧块做一点细调 */
}

.article-side {
  align-self: flex-start;
}

/* ========= 文章阅读页统一布局 ========= */

/* 阅读页主体：你 post.php 里的 <main class="main read-layout"> */
.main.read-layout {
  max-width: 1000px;                /* 和 .content、footer-inner 一致 */
  margin: 24px auto 40px;
  padding: 0 20px;                  /* 左右都是 20px，对齐首页卡片和页脚 */
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1.1fr);
  gap: 28px;
}

/* 右侧栏靠上 */
.article-side {
  align-self: flex-start;
}

/* 小屏幕：改为单列，右侧列表放到正文下方 */
@media (max-width: 900px) {
  .main.read-layout {
    grid-template-columns: 1fr;
  }
  .article-side {
    order: 2;
    margin-top: 20px;
  }
}
/* 右侧卡片外框 */
.side-card {
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  padding: 14px 16px 16px;
  font-size: 0.9rem;
}

.side-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #333;
}

/* 列表容器：最多显示大概 8 行，高度超过就滚动 */
.side-list {
  max-height: 280px;        /* 这里大约能放 8 条，想调可以改这个值 */
  overflow-y: auto;
  padding-right: 4px;
}

/* 单条文章项 */
.side-item {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px dashed #eee;
}

.side-item:last-child {
  border-bottom: none;
}

.side-title {
  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
}

.side-date {
  color: #999;
  font-size: 0.8rem;
}

.side-item:hover .side-title {
  color: #007b9e;
}

/* 没有更多文章时的提示 */
.side-empty {
  font-size: 0.85rem;
  color: #999;
}

/* 小屏幕下改为单列布局 */
@media (max-width: 900px) {
  .read-layout {
    grid-template-columns: 1fr;
  }

  .article-side {
    order: 2;       /* 让右侧列表在小屏幕放到正文下方 */
  }
}

/* Copy button */
.code-wrapper { position:relative; margin:16px 0; }
.code-wrapper pre { margin:0; border-radius:10px; overflow:auto; padding-top:32px; }
.copy-btn { position:absolute; top:6px; right:8px; padding:4px 10px; font-size:12px; border-radius:999px; border:1px solid #ddd; background:rgba(255,255,255,0.9); cursor:pointer; color:#666; }
.copy-btn.copied { color:#0b974b; border-color:#0b974b; }

/* Footer */
footer { padding:40px 0 24px; text-align:center; font-size:.85rem; color:#fff; border-top:1px solid rgba(255,255,255,0.4); background:#008FA4; }
footer .footer-inner { max-width:1000px; margin:0 auto; padding:0 20px; }

/* Admin */
.container { max-width:1000px; margin: 24px auto; padding:0 16px; }
.table { width:100%; border-collapse: collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.table th, .table td { padding:10px 12px; border-bottom:1px solid #eee; text-align:left; font-size:.95rem; }
.table th { background:#f0fbff; }
.btn { display:inline-block; padding:8px 14px; border-radius:8px; background:#00b7d1; color:#fff; text-decoration:none; }
.btn.secondary { background:#7ab6c2; }
.toolbar-hint { font-size:.85rem; color:#666; margin:8px 0 14px; }
.login-box { max-width:360px; margin:120px auto; background:#fff; border-radius:12px; padding:20px; box-shadow:0 10px 26px rgba(0,0,0,.12); }
.login-box h3 { margin:0 0 12px; }
.login-box input { width:100%; padding:10px 12px; margin:6px 0; border:1px solid #ddd; border-radius:8px; }
/* ========= 文章阅读页统一布局 ========= */