/* AIBID 内容层样式：首页最新文章区、Blog 列表页、文章详情页。
 *
 * ⚠️ 字号说明：设计稿里这些块是 7.5–9px，那是画板尺度。站内实测基准是
 *    正文 ≥10.5px、可点元素 ≥11px（低于此 Google 判「文字太小无法阅读」）。
 *    这里按基准写，不照抄画板数值。
 * ⚠️ 长串保护：跟 seo.css 同理 —— 德语复合词/长 URL 会撑破卡片，
 *    结构上用 overflow-wrap 封死，不靠「文案别写太长」。
 */

/* ── 首页：最新文章 ────────────────────────────────────── */
.home-news{
  margin:30px 0 24px;
  border-top:1px solid #ebe5df;
  padding-top:26px;
}
.home-news-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
}
.home-news-head .k{
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  color:#ff6813;
}
.home-news-head h2{
  margin:7px 0 5px;
  font-size:22px;
  line-height:1.14;
  letter-spacing:-.035em;
}
.home-news-head p{
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:#7d746d;
  max-width:60ch;
}
.home-news-more{
  flex:none;
  border:1px solid #e8e1db;
  background:#fff;
  border-radius:999px;
  padding:9px 15px;
  font-size:11px;
  font-weight:700;
  color:#4a443f;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.home-news-more:hover{border-color:#ff6813;color:#ff6813}
.home-news-grid{
  display:grid;
  /* 四列：12 篇正好三行满。三列时是 9 篇，改列数必须同时改 app.py 的
     limit，否则最后一行会剩孤卡。 */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.home-news-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e9e2dc;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.home-news-card:hover{
  border-color:#f0c8ab;
  box-shadow:0 10px 26px -18px rgba(120,53,15,.4);
  transform:translateY(-1px);
}
.home-news-thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#fdf3ec,#f6efe9);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  color:#c9b8a9;
  overflow:hidden;
}
.home-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.home-news-copy{padding:12px}
.home-news-meta{
  font-size:10px;
  color:#a19891;
  margin-bottom:6px;
}
.home-news-copy h3{
  margin:0 0 7px;
  font-size:12.5px;
  line-height:1.38;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-news-copy p{
  margin:0;
  font-size:11px;
  line-height:1.58;
  color:#7f766f;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-news-link{
  display:inline-block;
  margin-top:9px;
  font-size:11px;
  font-weight:750;
  color:#ff6813;
}

/* ── Blog 列表页 ──────────────────────────────────────── */
.blog-hero{
  border:1px solid #e8ded6;
  border-radius:18px;
  background:radial-gradient(circle at 84% 10%,rgba(255,104,19,.10),transparent 28%),
             linear-gradient(135deg,#fff8f3 0%,#fff 62%);
  padding:22px 24px;
}
.blog-hero .k{font-size:10px;font-weight:800;letter-spacing:.13em;color:#ff6813}
.blog-hero h1{margin:8px 0 9px;font-size:30px;line-height:1.08;letter-spacing:-.04em}
.blog-hero p{margin:0;max-width:70ch;font-size:12px;line-height:1.65;color:#7d746d}

.blog-filterbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:20px 0 12px;
  flex-wrap:wrap;
}
.blog-filterbar h2{margin:0;font-size:15px;letter-spacing:-.02em}
.blog-chips{display:flex;gap:6px;flex-wrap:wrap}
.blog-chip{
  border:1px solid #e8e1db;
  background:#fff;
  border-radius:999px;
  padding:7px 11px;
  font-size:11px;
  color:#6d655e;
  text-decoration:none;
  white-space:nowrap;
}
.blog-chip:hover{border-color:#f0c8ab;color:#ff6813}
.blog-chip.active{background:#171717;border-color:#171717;color:#fff}

/* 瀑布流：CSS 多列。用 columns 而不是 JS 排版 —— 服务端渲染出来就是最终版面，
   搜索引擎和 AI 抓取时不需要执行脚本就能拿到全部文章。
   卡片高度随摘要长短自然变化，不再被拉成等高的方格。 */
.blog-grid{
  /* 四列。第二个值是「每列最小宽度」——宽度不够时浏览器会自己减列，
     所以 260px 是四列能成立的下限；写 300px 的话在 1240px 容器里只排得下三列，
     改成 4 也没用。断点里再逐档降到 3 / 2 / 1 列。 */
  columns:4 250px;
  column-gap:12px;
}
.blog-grid > *{
  break-inside:avoid;            /* 卡片不许被拆到两列 */
  -webkit-column-break-inside:avoid;
  display:inline-block;          /* Safari 下 break-inside 才可靠 */
  width:100%;
  margin:0 0 12px;
}
.blog-empty{
  border:1px dashed #ded6cf;
  border-radius:14px;
  background:#fff;
  padding:34px 22px;
  text-align:center;
}
.blog-empty strong{display:block;font-size:13px;margin-bottom:6px}
.blog-empty span{display:block;max-width:52ch;margin:0 auto;font-size:11px;line-height:1.6;color:#968d86}

/* ── 文章详情 ─────────────────────────────────────────── */
.article-shell{max-width:720px;margin:0 auto}
.article-crumb{font-size:11px;color:#9c938c;margin-bottom:10px}
.article-crumb a{color:#9c938c}
.article-crumb a:hover{color:#ff6813}
.article-shell h1{
  margin:0 0 12px;
  font-size:clamp(26px,4.4vw,38px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.article-dek{margin:0 0 14px;font-size:13.5px;line-height:1.62;color:#6b635d}
.article-meta{font-size:11px;color:#a19891;margin-bottom:18px}
.article-hero{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg,#fdf3ec,#f6efe9);
  display:grid;
  place-items:center;
  color:#c9b8a9;
  font-size:12px;
  margin-bottom:22px;
}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{font-size:14px;line-height:1.75;color:#2a2522}
.article-body h2{margin:26px 0 9px;font-size:17px;letter-spacing:-.02em}
.article-body p{margin:0 0 14px}
.article-body ul,.article-body ol{margin:0 0 14px;padding-inline-start:20px}
.article-body li{margin:0 0 6px}
.article-body a{color:#ff6813;text-decoration:underline}

.article-related{margin-top:30px;border-top:1px solid #efece6;padding-top:18px}
.article-related h2{margin:0 0 11px;font-size:14px;letter-spacing:-.02em}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.related-item{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e9e2dc;
  background:#fff;
  border-radius:12px;
  padding:11px;
  text-decoration:none;
  color:inherit;
  font-size:11.5px;
  font-weight:650;
}
.related-item:hover{border-color:#f0c8ab}
.related-item img{width:26px;height:26px;border-radius:7px;flex:none;object-fit:cover}
.related-item .go{margin-inline-start:auto;color:#ff6813;font-size:11px;flex:none}

.article-sources{margin-top:26px;border-top:1px solid #efece6;padding-top:16px}
.article-sources h2{margin:0 0 9px;font-size:13px;letter-spacing:-.02em}
.article-sources a{font-size:11.5px;color:#6b635d;text-decoration:underline;overflow-wrap:anywhere}
.article-sources a:hover{color:#ff6813}

/* 长串保护：德语复合词 / 长 URL 撑破卡片是结构问题，不是文案问题 */
.home-news-copy h3,.home-news-copy p,.home-news-meta,
.blog-hero h1,.blog-hero p,.blog-chip,
.article-shell h1,.article-dek,.article-body,.related-item{
  overflow-wrap:anywhere;
}

/* ── 深色模式 ─────────────────────────────────────────── */
body[data-dark="1"] .home-news{border-top-color:#2c2823}
body[data-dark="1"] .home-news-card,
body[data-dark="1"] .related-item,
body[data-dark="1"] .blog-chip,
body[data-dark="1"] .home-news-more{background:#1c1a17;border-color:#2f2a25;color:#e7e1da}
body[data-dark="1"] .home-news-copy p,
body[data-dark="1"] .home-news-meta,
body[data-dark="1"] .blog-hero p{color:#9d948b}
body[data-dark="1"] .blog-hero,
body[data-dark="1"] .article-hero,
body[data-dark="1"] .home-news-thumb{
  background:linear-gradient(135deg,#221e1a,#1a1815);
  border-color:#2f2a25;
}
body[data-dark="1"] .article-body{color:#e7e1da}
body[data-dark="1"] .blog-chip.active{background:#ff6813;border-color:#ff6813;color:#fff}

.home-news-card:focus-visible,.blog-chip:focus-visible,
.home-news-more:focus-visible,.related-item:focus-visible{
  outline:2px solid #ff6813;
  outline-offset:2px;
}

/* ── 响应式 ───────────────────────────────────────────── */
/* 断点定在 1000 而不是 1280 ——
   容器最宽 1192px，所以 1280 视口下每列仍是 289px，和 1440 时一模一样，
   在那里退成三列纯属浪费（笔记本窗口通常就在 1200–1440，会一直看到三列）。
   真正变窄是容器跟着视口缩之后：1000 视口 → 容器 952 → 每列 229px，那时才该退。 */
@media (max-width:1180px){
  /* 4 → 3：容器放不下四列 260px 时先降一档，别直接掉到两列 */
  .blog-grid{columns:3 250px}
}
@media(max-width:1000px){
  .home-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid{columns:2 240px}
  /* 注：更宽的中间档在下面单独给，避免 4 → 2 跳档 */
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .home-news{margin:24px 0 20px;padding-top:22px}
  .home-news-head{display:block}
  .home-news-head h2{font-size:18px}
  .home-news-more{margin-top:10px;display:inline-block}
  .home-news-grid{grid-template-columns:1fr;gap:10px}
  .home-news-copy{padding:10px}
  .home-news-copy h3{font-size:11.5px}
  .home-news-copy p{font-size:10.5px;-webkit-line-clamp:3}
  .blog-hero{padding:17px;border-radius:15px}
  .blog-hero h1{font-size:23px}
  .blog-filterbar{display:block}
  .blog-chips{margin-top:10px}
  .blog-grid{columns:1}
  .related-grid{grid-template-columns:1fr}
  .article-body{font-size:13.5px}
}

/* 列表页分页（V67：每页 20 篇） */
.blog-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 6px}
.blog-page-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid #e8e1db;
  border-radius:9px;background:#fff;color:#5b544e;text-decoration:none;font-weight:800;font-size:14px}
.blog-page-btn:hover{border-color:#f0d9ca;color:#ff6813}
.blog-page-btn.disabled{opacity:.4;pointer-events:none}
.blog-page-now{font-size:13px;font-weight:800;color:#8a827b;min-width:22px;text-align:center}

/* ── 文章页社交分享 ────────────────────────────────────────── */
.article-share{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:26px 0 6px;padding-top:20px;border-top:1px solid #efe9e3;
}
.share-label{
  font-size:12px;font-weight:800;color:#8b837c;
  letter-spacing:.04em;margin-inline-end:4px;
}
.share-btn{
  width:36px;height:36px;flex:0 0 auto;
  display:inline-grid;place-items:center;
  border:1px solid #e8e1db;border-radius:999px;background:#fff;
  color:#5b544e;cursor:pointer;padding:0;
  transition:border-color .14s,color .14s,background .14s,transform .1s;
}
.share-btn svg{width:16px;height:16px;fill:currentColor;display:block}
.share-btn:hover{border-color:#f0d9ca;color:#ff6813;background:#fff8f3}
.share-btn:active{transform:scale(.94)}
.share-btn:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.share-btn.copied{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
@media(max-width:560px){
  .article-share{gap:7px}
  .share-btn{width:34px;height:34px}
}
body[data-dark="1"] .share-btn{background:#1a1714;border-color:#2f2a25;color:#d5cdc5}

/* ── 文章页导流 banner（分享按钮下方）────────────────────────── */
.blog-cta{
  display:block;margin:18px 0 8px;padding:18px 20px;
  border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,#fff6ef,#ffece0);
  border:1px solid #f6dcc9;
  transition:border-color .15s,transform .1s,box-shadow .15s;
}
.blog-cta:hover{
  border-color:#f0b98f;transform:translateY(-1px);
  box-shadow:0 10px 24px -18px rgba(180,90,20,.5);
}
.blog-cta:active{transform:translateY(0)}
.blog-cta:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.blog-cta-main{
  display:block;font-size:16px;font-weight:850;color:#7c2d12;
  letter-spacing:-.02em;margin-bottom:5px;
}
.blog-cta-sub{
  display:block;font-size:13px;font-weight:500;color:#9a6a4a;line-height:1.5;
}
.blog-cta-go{
  display:inline-block;margin-top:11px;
  font-size:13px;font-weight:800;color:#ff6813;
}
@media(max-width:560px){
  .blog-cta{padding:16px 16px}
  .blog-cta-main{font-size:15px}
  .blog-cta-sub{font-size:12.5px}
}
body[data-dark="1"] .blog-cta{
  background:linear-gradient(135deg,#241c15,#2b201a);border-color:#3d2e24;
}
body[data-dark="1"] .blog-cta-main{color:#ffd9bd}
body[data-dark="1"] .blog-cta-sub{color:#c9a488}

/* ── 文章页工具条：返回 + 语言切换（不动导航栏）──────────────── */
.article-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 16px;
}
.art-back{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:700;color:#5b544e;text-decoration:none;
  border:1px solid #e8e1db;border-radius:999px;padding:7px 14px;background:#fff;
  transition:border-color .14s,color .14s,background .14s;
}
.art-back:hover{border-color:#f0d9ca;color:#ff6813;background:#fff8f3}
.art-back:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.art-lang{display:inline-flex;align-items:center;gap:7px}
.art-lang-label{font-size:12px;font-weight:700;color:#a09992}
.art-lang select{
  font-family:inherit;height:32px;
  border:1px solid #e8e1db;border-radius:9px;background:#fff;
  padding:0 26px 0 10px;font-size:12.5px;font-weight:650;color:#46403b;
  cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23948c85' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:11px;
}
.art-lang select:focus-visible{outline:2px solid #f97316;outline-offset:1px}
@media(max-width:560px){
  .article-toolbar{gap:8px}
  .art-lang-label{display:none}
  .art-lang select{max-width:150px}
}
body[data-dark="1"] .art-back,
body[data-dark="1"] .art-lang select{background:#1a1714;border-color:#2f2a25;color:#d5cdc5}

/* ══ 信息流：桌面横向滑、移动端上下滑 ═══════════════════════════
   同一套卡片，两种滚动方向：
     桌面  scroll-snap-type:x —— 横向滑动，一屏三张，可拖拽
     窄屏  scroll-snap-type:y —— 抖音式一屏一张，上下翻
   都用原生 scroll-snap，不接管 touchmove：
   自己实现的手势拿不到惯性滚动，真机上一定比原生涩。 */
.tt-wrap{position:relative;margin:14px 0 6px}

/* 箭头基础定义必须放在媒体查询**之前**：写在后面的话，同特异性下
   display:none 会盖掉桌面块里的 display:flex，箭头永远不出现（实测踩过）。 */
.tt-arrows{display:none;gap:8px;position:absolute;top:0;right:0;z-index:4}

/* ── 桌面：横向滑动 ─────────────────────────────────────────── */
@media(min-width:761px){
  .tt-tabs{display:flex;gap:8px;margin-bottom:12px}
  .tt-tab{
    border:1px solid #e8e1db;background:#fff;border-radius:999px;
    padding:7px 16px;font-size:13px;font-weight:700;color:#5b544e;
    font-family:inherit;cursor:pointer;
  }
  .tt-tab.active{background:#171717;border-color:#171717;color:#fff}
  .tt-tab:hover{border-color:#f0d9ca;color:#ff6813}
  .tt-tab.active:hover{color:#fff}

  .tt-feed{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:thin;
    -webkit-user-select:none;user-select:none;
  }
  .tt-feed::-webkit-scrollbar{height:8px}
  .tt-feed::-webkit-scrollbar-thumb{background:#e0d8d1;border-radius:99px}
  .tt-feed::-webkit-scrollbar-track{background:transparent}
  .tt-feed.dragging{cursor:grabbing;scroll-snap-type:none}

  .tt-card{
    scroll-snap-align:start;
    flex:0 0 clamp(280px,31%,380px);
    height:330px;
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;overflow:hidden;border-radius:16px;
    background:#fff;border:1px solid #eee8e2;
    transition:transform .16s,box-shadow .16s;
  }
  .tt-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(60,40,20,.5)}
  .tt-body h3{font-size:17px;-webkit-line-clamp:3}
  .tt-body p{font-size:13px;-webkit-line-clamp:2}
  .tt-post{font-size:14px;-webkit-line-clamp:6}
  .tt-coach{display:none!important}
  .tt-arrows{display:flex}

  /* 榜单卡在 330px 高的横滑卡里放不下 5 行（实测内容 419px，溢出 87px）。
     桌面只显示前 3 名，点进榜单页看完整的。窄屏卡片高得多，仍显示 5 行。
     .tt-body 的子元素顺序是 badge(1) h3(2) row(3..7) go(8)，
     所以第 4 行起是 nth-child(6) —— 只命中 .tt-row，按钮不受影响。 */
  .tt-board .tt-row:nth-child(n+6){display:none}
  .tt-board .tt-row{padding:6px 0}
  .tt-board .tt-body{gap:6px}
}


.tt-arrow{
  width:34px;height:34px;border-radius:50%;border:1px solid #e8e1db;
  background:#fff;color:#5b544e;font-size:15px;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;
  transition:border-color .14s,color .14s;
}
.tt-arrow:hover{border-color:#f0d9ca;color:#ff6813}
.tt-arrow:disabled{opacity:.35;cursor:default}


/* ── 卡片视觉（两种布局共用）─────────────────────────────────
   这些必须放在媒体查询外面：之前整段写在 max-width:760px 里，
   桌面横滑的卡片拿不到 .tt-img 的 position/size，图片直接不显示，
   卡面一片空白。布局相关的（高度、snap 方向）才分屏写。 */
.tt-img{position:absolute;inset:0;background-size:cover;background-position:center}
.tt-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%);
}
.tt-body{position:relative;padding:18px;display:flex;flex-direction:column;gap:8px}
.tt-card:not(.tt-board):not(.tt-tweet) .tt-body h3,
.tt-card:not(.tt-board):not(.tt-tweet) .tt-body p,
.tt-card:not(.tt-board):not(.tt-tweet) .tt-badge{color:#fff}
.tt-badge{
  align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.03em;
  background:rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;
  color:#5b544e;backdrop-filter:blur(6px);
}
.tt-board .tt-badge,.tt-tweet .tt-badge{background:#f5f0ea;color:#8b837c}
.tt-body h3{
  margin:0;font-weight:850;line-height:1.32;letter-spacing:-.02em;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.tt-body p{
  margin:0;line-height:1.6;opacity:.92;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.tt-go{
  align-self:flex-start;margin-top:2px;
  background:#ff6813;color:#fff;border-radius:999px;
  padding:9px 16px;font-size:13px;font-weight:800;text-decoration:none;
}
.tt-board,.tt-tweet{justify-content:center;background:#fffdfb}
.tt-board h3{color:#201c1a;margin-bottom:2px}
.tt-row{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  padding:8px 0;border-bottom:1px solid #f4efe9;
}
.tt-rank{font-size:12px;font-weight:900;color:#a09992;min-width:26px}
.tt-ico{
  width:28px;height:28px;border-radius:9px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:#f2efec;
  border:1px solid #ece6e1;
}
.tt-ico.big{width:40px;height:40px;border-radius:50%}
.tt-nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#2f2925;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-bid{font-size:13.5px;font-weight:900;color:#ff6813}
.tt-who{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.tt-who b{display:block;font-size:14.5px;font-weight:800;color:#201c1a}
.tt-who i{display:block;font-size:12px;color:#a09992;font-style:normal}
.tt-post{
  margin:0;line-height:1.6;color:#2f2925;white-space:pre-wrap;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.tt-metrics{display:flex;gap:13px;font-size:12px;color:#a09992}

/* 首次引导浮层（只在窄屏出现，桌面已用 display:none 关掉） */
.tt-coach{
  position:fixed;inset:0;z-index:60;background:rgba(24,20,17,.72);
  display:grid;place-items:center;padding:24px;backdrop-filter:blur(3px);
}
.tt-coach[hidden]{display:none}
.tt-coach-box{
  background:#fff;border-radius:20px;padding:26px 22px;max-width:300px;
  text-align:center;display:flex;flex-direction:column;gap:7px;
}
.tt-coach-ico{font-size:30px;line-height:1;color:#ff6813;margin-top:6px}
.tt-coach-box b{font-size:15px;color:#201c1a}
.tt-coach-box span{font-size:12.5px;color:#8b837c;line-height:1.55}
.tt-coach-box button{
  margin-top:14px;background:#171717;color:#fff;border:0;border-radius:999px;
  padding:12px 20px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;
}

/* ── 窄屏：纵向一屏一张 ─────────────────────────────────────── */
@media(max-width:760px){
  .tt-wrap{margin:10px 0 4px}
  .blog-grid,.blog-pager{display:none}
  .tt-tabs{
    display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tt-tabs::-webkit-scrollbar{display:none}
  .tt-tab{
    flex:0 0 auto;border:1px solid #e8e1db;background:#fff;border-radius:999px;
    padding:7px 15px;font-size:13px;font-weight:700;color:#5b544e;
    font-family:inherit;cursor:pointer;
  }
  .tt-tab.active{background:#171717;border-color:#171717;color:#fff}
  .tt-feed{
    display:block;
    height:calc(100dvh - 210px);min-height:420px;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
    scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-radius:18px;
  }
  .tt-feed::-webkit-scrollbar{display:none}
  .tt-card{
    scroll-snap-align:start;scroll-snap-stop:always;
    height:calc(100dvh - 210px);min-height:420px;
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;overflow:hidden;border-radius:18px;
    margin-bottom:10px;background:#fff;border:1px solid #eee8e2;
  }

  /* ── 文章卡：卡内读正文，滑到底才翻页 ─────────────────────────
     机制是**嵌套滚动的自然链接**：内层 .tt-read-inner 自己能滚，
     滚到底之后浏览器把剩余的滚动传给外层 .tt-feed，于是 snap 到下一篇。
     ⚠️ 内层绝不能写 overscroll-behavior:contain —— 那正好会切断这个链接，
        结果是「读完了也翻不了页」。外层 .tt-feed 上的 contain 是对的
        （挡住继续传给整个页面），两者不能混。 */
  .tt-read{justify-content:flex-start;background:#fff}
  .tt-read-inner{
    height:100%;overflow-y:auto;overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tt-read-inner::-webkit-scrollbar{display:none}
  .tt-read-hero{
    height:190px;background-size:cover;background-position:center;
    border-radius:18px 18px 0 0;
  }
  .tt-read-body{padding:18px 18px 26px;display:flex;flex-direction:column;gap:10px}
  .tt-read .tt-badge{color:#8b837c;background:#f5f0ea}
  .tt-read h3{
    color:#201c1a;font-size:22px;line-height:1.3;
    /* 正文卡的标题不截断 —— 卡片能滚，没有截断的理由 */
    display:block;-webkit-line-clamp:none;overflow:visible;
  }
  .tt-article{color:#332e2a;font-size:15.5px;line-height:1.75}
  .tt-article h2{font-size:17px;font-weight:800;margin:18px 0 6px;color:#201c1a}
  .tt-article h3{font-size:15.5px;font-weight:800;margin:14px 0 5px}
  .tt-article p{margin:0 0 12px}
  .tt-article ul,.tt-article ol{margin:0 0 12px;padding-inline-start:20px}
  .tt-article li{margin:0 0 6px}
  .tt-article a{color:#ff6813}
  .tt-article img{max-width:100%;height:auto;border-radius:12px}
  .tt-read-foot{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-top:8px;padding-top:14px;border-top:1px solid #f2ece6;
  }
  .tt-next-hint{font-size:12.5px;color:#a89f97}
  .tt-body{padding:20px;gap:9px}
  .tt-body h3{font-size:21px;-webkit-line-clamp:4}
  .tt-body p{font-size:14px;-webkit-line-clamp:3}
  .tt-post{font-size:15.5px;-webkit-line-clamp:8}
  .tt-board h3{font-size:19px}
  .tt-ico{width:30px;height:30px}
  .tt-ico.big{width:42px;height:42px}
  .tt-go{padding:10px 18px;font-size:13.5px}
}

/* ── 文章页榜单轮播 ────────────────────────────────────────────
   八个市场全部在 HTML 里，只有当前那个 .active 显示。
   用 display 而不是删节点：搜索引擎读的是 HTML，八份榜单和
   实体链接都要在源码里 —— 这正是 Blog 要给付费实体带的内链。 */
.rank-rotator{
  margin:22px 0 6px;padding:18px 20px;
  border:1px solid #f0eae4;border-radius:16px;background:#fffdfb;
}
.rot-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.rot-head h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.05em;
             color:#b0a79f;text-transform:uppercase}
.rot-tabs{display:flex;gap:6px;flex-wrap:wrap}
.rot-tab{
  border:1px solid #e8e1db;background:#fff;border-radius:999px;
  padding:5px 11px;font-size:11.5px;font-weight:700;color:#8b837c;
  font-family:inherit;cursor:pointer;transition:all .14s;
}
.rot-tab:hover{border-color:#f0d9ca;color:#ff6813}
.rot-tab.active{background:#171717;border-color:#171717;color:#fff}
.rot-panel{display:none}
.rot-panel.active{display:block}
.rot-title{font-size:16px;font-weight:850;color:#201c1a;margin-bottom:8px}
.rot-row{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:9px 0;border-bottom:1px solid #f4efe9;
}
.rot-row:last-of-type{border-bottom:0}
.rot-rank{font-size:12px;font-weight:900;color:#a09992;min-width:26px}
.rot-ico{
  width:28px;height:28px;border-radius:9px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:#f2efec;
  border:1px solid #ece6e1;
}
.rot-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#2f2925;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rot-bid{font-size:13.5px;font-weight:900;color:#ff6813;font-variant-numeric:tabular-nums}
/* 左右箭头：绝对定位在轮播区两侧中部。
   .rank-rotator 要 position:relative，否则会相对页面定位跑到别处。 */
.rank-rotator{position:relative}
.rot-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  border:1px solid #e8e1db;background:#fff;color:#5b544e;
  font-size:14px;cursor:pointer;display:grid;place-items:center;
  font-family:inherit;z-index:2;
  box-shadow:0 2px 8px -4px rgba(60,40,20,.35);
  transition:border-color .14s,color .14s;
}
.rot-arrow:hover{border-color:#ff6813;color:#ff6813}
.rot-arrow:focus-visible{outline:2px solid #f97316;outline-offset:2px}
.rot-arrow.prev{left:-14px}
.rot-arrow.next{right:-14px}
@media(max-width:560px){
  /* 窄屏两侧没有富余空间，箭头改到内侧，避免超出屏幕 */
  .rot-arrow.prev{left:4px}
  .rot-arrow.next{right:4px}
  .rot-arrow{width:28px;height:28px;font-size:12px;opacity:.92}
}
.rot-dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.rot-dot{width:5px;height:5px;border-radius:50%;background:#e0d8d1;transition:background .2s}
.rot-dot.active{background:#ff6813}
@media(max-width:560px){
  .rank-rotator{padding:16px 15px}
  .rot-head{gap:8px}
  .rot-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .rot-tabs::-webkit-scrollbar{display:none}
  .rot-tab{flex:0 0 auto}
}
body[data-dark="1"] .rank-rotator{background:#1a1714;border-color:#2f2a25}
body[data-dark="1"] .rot-title{color:#efe8e1}
body[data-dark="1"] .rot-name{color:#d5cdc5}

/* ── 文章页：已上榜账号的公开推文（两排两列）────────────────── */
.art-tweets{margin:26px 0 6px;padding-top:20px;border-top:1px solid #efe9e3}
.art-tweets-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:13px;flex-wrap:wrap;
}
.art-tweets-head h2{
  margin:0;font-size:13px;font-weight:800;letter-spacing:.04em;
  color:#8b837c;text-transform:uppercase;
}
.art-tweets-head a{font-size:12.5px;font-weight:700;color:#ff6813;text-decoration:none}
.art-tweets-head a:hover{text-decoration:underline}

.art-tweets-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.art-tweet{
  display:block;text-decoration:none;
  background:#fff;border:1px solid #eee8e2;border-radius:14px;padding:14px 15px;
  transition:border-color .14s,transform .1s,box-shadow .14s;
}
.art-tweet:hover{
  border-color:#f0c8ab;transform:translateY(-1px);
  box-shadow:0 10px 22px -18px rgba(120,60,20,.45);
}
.art-tweet-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.art-tweet-av{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:#f2efec;
  border:1px solid #ece6e1;
}
.art-tweet-who{min-width:0;flex:1}
.art-tweet-who b{
  display:block;font-size:13.5px;font-weight:800;color:#201c1a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.art-tweet-who i{
  display:block;font-size:11.5px;color:#a09992;font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.art-tweet-bid{font-size:14px;font-weight:900;color:#ff6813;flex:0 0 auto}
.art-tweet-text{
  margin:0;font-size:13.5px;line-height:1.6;color:#3f3934;white-space:pre-wrap;
  word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.art-tweet-metrics{
  display:flex;gap:12px;margin-top:9px;font-size:11.5px;color:#a89f97;
  font-variant-numeric:tabular-nums;
}
/* 窄屏改单列：两列在手机上每列只剩 150px，推文根本读不了 */
@media(max-width:600px){
  .art-tweets-grid{grid-template-columns:1fr}
}
body[data-dark="1"] .art-tweet{background:#1a1714;border-color:#2f2a25}
body[data-dark="1"] .art-tweet-who b{color:#efe8e1}
body[data-dark="1"] .art-tweet-text{color:#d5cdc5}

/* ── 文章标签与阅读量 ─────────────────────────────────────── */
.art-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.art-tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
  border:1px solid #ece4dc;background:#fbf9f7;color:#6f665f;font-size:12.5px;
  font-weight:550;line-height:1;transition:border-color .16s ease,color .16s ease}
a.art-tag:hover{border-color:#f0c9ae;color:#df5700}
.art-views,.blog-card-views{display:inline-flex;align-items:center;gap:5px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ic-eye{opacity:.62;flex:none;vertical-align:-1px}
/* 列表卡片上的阅读量：跟日期同一档，不抢标题 */
.blog-card-views{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}