/* ==========================================================================
   8SF传奇私服发布网 - 内容页样式 post.css
   ========================================================================== */

.post-main{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;padding:18px 0 10px}
.article{padding:28px 32px 24px}
.article .a-tt{font-size:26px;line-height:1.5;margin-bottom:14px}
.a-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.a-meta .a-cat{display:inline-flex;align-items:center;gap:5px;background:var(--grad-sky);color:#fff;padding:3px 13px;border-radius:12px;font-weight:700;font-size:12.5px}
.a-meta time{display:inline-flex;align-items:center;gap:5px}
.a-body{padding:20px 0;font-size:15px;line-height:2.05;color:var(--text)}
.a-body h2{font-size:20px;margin:28px 0 12px;padding-left:13px;position:relative}
.a-body h2::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:5px;background:var(--grad-sky)}
.a-body h3{font-size:17px;margin:22px 0 10px;color:var(--ink)}
.a-body p{margin:12px 0}
.a-body ul,.a-body ol{margin:12px 0;padding-left:6px}
.a-body ul li,.a-body ol li{padding:4px 0 4px 26px;position:relative}
.a-body ul li::before{content:'';position:absolute;left:6px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--grad-sky)}
.a-body ol{counter-reset:olc}
.a-body ol li{counter-increment:olc}
.a-body ol li::before{content:counter(olc);position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;background:var(--c4);color:var(--deep);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.a-body img{border-radius:12px;box-shadow:var(--shadow);margin:16px auto}
.a-body .a-img{position:relative;border-radius:12px;overflow:hidden;margin:18px 0;height:auto;min-height:220px}
.a-body .a-img img{position:static;width:100%;height:100%;object-fit:cover;box-shadow:none;margin:0}
.a-body .a-img figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(5,30,52,.8));color:#dff2ff;font-size:12.5px;padding:24px 14px 9px;text-align:center}
.a-body blockquote{margin:18px 0;padding:14px 20px;border-left:5px solid var(--c1);background:var(--c4);border-radius:0 12px 12px 0;color:var(--deep);font-weight:600}
.a-body .dl-tip{background:linear-gradient(135deg,#0b3d63,#0ea5e9);border-radius:14px;padding:22px;color:#fff;margin:20px 0;text-align:center}
.a-body .dl-tip b{font-size:18px;color:#fff;display:block;margin-bottom:10px}
.a-body .dl-tip .btn{margin:6px 4px}
.a-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.a-body table th{background:linear-gradient(120deg,#0b3d63,#0ea5e9);color:#fff;padding:9px 12px;text-align:left}
.a-body table td{border:1px solid var(--line);padding:9px 12px}
.a-body table tr:nth-child(even){background:#f6fbfe}
.a-tags{padding:16px 0;border-top:1px dashed var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.a-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.a-nav a{padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;color:var(--text);display:block}
.a-nav a:hover{border-color:var(--c1);color:var(--c1)}
.a-nav .next{text-align:right}
.a-nav b{display:block;color:var(--muted);font-size:11.5px;margin-bottom:3px}
.related{padding:20px 26px 24px}
.related h3{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.related h3 svg{width:20px;height:20px;color:var(--c1)}
.related li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #e6f2fb;font-size:14px}
.related li:last-child{border:none}
.related .r-dot{width:6px;height:6px;border-radius:50%;background:var(--c2);flex-shrink:0}
.related a{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related a:hover{color:var(--c1)}
.related time{font-size:12px;color:var(--muted)}

@media (max-width:1020px){.post-main{grid-template-columns:1fr}}
@media (max-width:640px){
  .article{padding:20px 18px}
  .article .a-tt{font-size:21px}
  .a-nav{grid-template-columns:1fr}
  .a-nav .next{text-align:left}
  .a-body{font-size:14.5px}
}