/* ============================================================
   北海好消息 · V3 报纸版详情页样式
   依赖 site-v3.css 的设计令牌（--paper/--ink/--cinnabar/...）
   保留 article.js / prerender 所需的全部类名与 ID 钩子：
   .detail-title .detail-meta .detail-cat--* .detail-content
   .detail-images #detailViews #detailLikeCount .tts-btn #ttsPlayer
   .lightbox(.active) .detail-related-item
   ============================================================ */

.detail-topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;min-height:50px;
  background:var(--ink);color:var(--paper);
  border-bottom:2px solid var(--cinnabar);
}
.detail-topbar .tb-brand{
  font-family:var(--serif);font-weight:900;font-size:16px;letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;
}
.detail-topbar .tb-brand img{width:24px;height:24px;border-radius:4px}
.detail-back{
  display:flex;align-items:center;gap:4px;
  background:none;border:1px solid rgba(244,241,234,.3);border-radius:999px;
  color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;padding:6px 15px;white-space:nowrap;flex-shrink:0;
  transition:border-color .25s ease,color .25s ease;
}
.detail-back:hover{border-color:var(--coral);color:var(--coral)}
.detail-share-top{
  background:var(--cinnabar);border:1px solid var(--cinnabar);border-radius:999px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--paper);
  cursor:pointer;padding:6px 15px;flex-shrink:0;margin-left:auto;
  transition:background-color .25s ease;
}
.detail-share-top:hover{background:var(--cinnabar-2)}
#userInfo{margin-left:12px}

.detail-wrapper{max-width:720px;margin:0 auto;padding:0 0 90px}
.detail-card{
  background:var(--paper);margin:0;
  padding:30px 20px 26px;
}
.detail-title{
  font-family:var(--serif);font-size:26px;font-weight:900;line-height:1.5;
  letter-spacing:.01em;color:var(--ink);margin-bottom:14px;
}
.detail-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--hairline);
  font-family:var(--sans);font-size:12.5px;color:var(--ink-60);flex-wrap:wrap;
}
.detail-cat{
  display:inline-block;padding:3px 11px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;border:1px solid currentColor;
}
.detail-cat--youliao { color:#1976D2; }
.detail-cat--shudong { color:#C2185B; }
.detail-cat--haoye   { color:#E65100; }
.detail-cat--zhidao  { color:#00695C; }
.detail-cat--job     { color:#2E7D32; }
.detail-cat--service { color:#6A1B9A; }
.detail-cat--rental  { color:#00695C; }

.detail-content{
  font-family:var(--serif);font-size:17px;line-height:2.05;color:var(--ink);
  text-align:justify;
}
.detail-content p{margin-bottom:16px}
.detail-content img{max-width:100%;height:auto;margin:10px 0}
.detail-content a{color:var(--cinnabar);text-decoration:underline}
.detail-content h3,.detail-content h4,.detail-content h5{
  font-weight:900;line-height:1.5;margin:22px 0 10px;
}
.detail-content ul,.detail-content ol{margin:0 0 16px 22px}
.detail-content blockquote{
  border-left:3px solid var(--cinnabar);padding:4px 0 4px 16px;
  color:var(--ink-60);margin:0 0 16px;
}
.detail-content table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.detail-content th,.detail-content td{border:1px solid var(--hairline);padding:7px 9px;text-align:left}

.detail-images{display:grid;gap:10px;margin-bottom:18px}
.detail-images.grid-1{grid-template-columns:1fr}
.detail-images.grid-2{grid-template-columns:1fr 1fr}
.detail-images.grid-3,.detail-images.grid-4,.detail-images.grid-5,
.detail-images.grid-6,.detail-images.grid-7,.detail-images.grid-8,
.detail-images.grid-9{grid-template-columns:repeat(3,1fr)}
.detail-images img{width:100%;height:100%;object-fit:cover;cursor:pointer;border:1px solid var(--hairline)}

.tts-btn{
  padding:8px 18px;background:var(--paper-2);border:1px solid var(--hairline);
  border-radius:999px;font-family:var(--sans);font-size:13px;cursor:pointer;
  color:var(--ink-60);display:inline-flex;align-items:center;gap:6px;
  transition:color .2s ease,border-color .2s ease;
}
.tts-btn:hover{color:var(--cinnabar);border-color:var(--cinnabar)}

.detail-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  display:flex;gap:12px;justify-content:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(244,241,234,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
}
.detail-bottom-bar button{
  padding:10px 26px;border-radius:999px;border:1px solid var(--hairline);
  font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:opacity .2s ease;
}
.detail-like-btn{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper)}
.detail-share-btn{background:var(--paper-2);color:var(--ink-60)}
.detail-bottom-bar button:hover{opacity:.88}

.detail-related{padding:8px 20px 20px}
.detail-related h3{
  font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-60);font-weight:700;margin:18px 0 12px;
  border-top:2px solid var(--rule);padding-top:16px;
}
.detail-related-item{
  display:block;padding:13px 0;margin-bottom:2px;
  border-bottom:1px solid var(--hairline);
  text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:15.5px;line-height:1.6;
}
.detail-related-item:hover{color:var(--cinnabar)}
.detail-related-item .rel-cat{
  font-family:var(--sans);font-size:11px;color:var(--cinnabar);
  border:1px solid var(--cinnabar);padding:1px 7px;margin-right:8px;
}

.loading{padding:48px;text-align:center;color:var(--ink-35);font-family:var(--sans);font-size:13px;letter-spacing:.2em}
.spinner{
  width:26px;height:26px;margin:0 auto 12px;border:2px solid var(--hairline);
  border-top-color:var(--cinnabar);border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:48px 20px;text-align:center;color:var(--ink-60);font-family:var(--sans)}
.empty .icon{font-size:40px;margin-bottom:10px}

/* 图片全屏预览（article.js 用 .active 切换） */
.lightbox{
  position:fixed;inset:0;z-index:140;display:none;
  align-items:center;justify-content:center;background:rgba(8,12,18,.94);
}
.lightbox.active{display:flex}
.lightbox-img,.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:20px;color:#fff;font-size:30px;cursor:pointer;z-index:2}
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:64px;display:flex;align-items:center;justify-content:center;
  background:rgba(244,241,234,.12);color:#fff;font-size:30px;cursor:pointer;
}
.lightbox-prev{left:12px}
.lightbox-next{right:12px}

/* AI 助手入口（报纸风，替换旧紫色浮球） */
.ai-fab{
  position:fixed;bottom:88px;right:18px;z-index:99;
  width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  text-decoration:none;cursor:pointer;border:1px solid rgba(244,241,234,.2);
  box-shadow:0 12px 30px -10px rgba(8,45,79,.6);
}
.ai-fab:hover{background:var(--cinnabar)}
.ai-fab-label{display:none}

@media (min-width:1024px){
  .detail-card{padding:40px 44px}
  .detail-title{font-size:32px}
  .detail-related{padding:8px 44px 24px}
}
@media (max-width:820px){
  .detail-topbar .tb-brand{display:none}
  .detail-title{font-size:23px}
  .detail-content{font-size:16.5px}
}