/* Prolean Blog Hub — 全部选择器限定在 .hub 作用域内，不污染站点其余部分 */

.hub, .hub *{margin:0;padding:0}
.hub{
  --navy:#040430; --blue:#1f40b3; --blue-h:#2a54d6; --blue-s:#eef2fe;
  --ink:#15152b; --ink2:#55556f; --ink3:#8a8aa3; --line:#e4e6f0; --line2:#eef0f7;
  --bg:#f7f8fc; --card:#fff; --r:14px; --max:1200px;
  --shadow:0 1px 2px rgba(21,21,43,.04), 0 6px 20px -8px rgba(21,21,43,.10);
  --shadow-h:0 2px 4px rgba(21,21,43,.06), 0 18px 40px -14px rgba(21,21,43,.22);
  font-family:inherit;            /* 跟随站点正文字体，避免二次引入字体 */
  color:#15152b; background:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.hub a{color:inherit;text-decoration:none;box-shadow:none;border-bottom:0}
.hub img{display:block;max-width:100%;height:auto;border-radius:0;box-shadow:none}
.hub button,.hub input{font-family:inherit;font-size:inherit;line-height:inherit}
.hub ul,.hub ol{list-style:none;margin:0;padding:0}
.hub h1,.hub h2,.hub h3,.hub h4{font-family:inherit;color:inherit;margin:0;text-transform:none}
.hub-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.hub :focus-visible{outline:3px solid #6f9bff;outline-offset:2px;border-radius:6px}

/* ---------- 预览提示条 ---------- */
.hub-demo{background:#fff8e1;border-bottom:1px solid #f0d98a;color:#6b4e00;font-size:12.5px}
.hub-demo .hub-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.hub-demo b{font-weight:700}
.hub-demo code{background:#fff;border:1px solid #f0d98a;border-radius:4px;padding:1px 5px;font-size:11.5px}

/* ---------- HERO ---------- */
.hub-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:66px 0 60px}
.hub-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 340px at 88% -10%, rgba(31,64,179,.55), transparent 70%),
    radial-gradient(560px 300px at 6% 108%, rgba(31,64,179,.28), transparent 72%);
}
.hub-hero::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1),transparent 62%);
  mask-image:linear-gradient(to left,rgba(0,0,0,1),transparent 62%);
}
.hub-hero .hub-wrap{position:relative;z-index:1}
.hub-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#9db6ff;
  border:1px solid rgba(157,182,255,.35);border-radius:999px;padding:5px 13px;margin-bottom:20px;
}
.hub-eyebrow i{width:6px;height:6px;border-radius:50%;background:#4d7cff;display:block}
.hub-h1{font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.022em;font-weight:800;max-width:15ch;color:#fff}
.hub-lede{margin-top:16px;font-size:clamp(15px,1.5vw,17.5px);color:#c3c9e6;max-width:60ch;line-height:1.62}
.hub-lede a{color:#9db6ff;border-bottom:1px solid rgba(157,182,255,.45)}
.hub-lede a:hover{color:#fff;border-color:#fff}

/* 搜索 */
.hub-search{margin-top:28px;display:flex;gap:10px;max-width:640px}
.hub-search-field{position:relative;flex:1}
.hub-search-field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink3)}
.hub-search input{
  width:100%;border:1px solid transparent;border-radius:11px;background:#fff;color:var(--ink);
  font-size:15.5px;padding:15px 16px 15px 45px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  -webkit-appearance:none;appearance:none;
}
.hub-search input::placeholder{color:#9a9ab0}
.hub-search button{
  flex:0 0 auto;border:0;border-radius:11px;background:var(--blue);color:#fff;
  font-size:15px;font-weight:700;padding:15px 26px;cursor:pointer;transition:background .15s;
  text-shadow:none;box-shadow:none;
}
.hub-search button:hover{background:var(--blue-h)}
.hub-search-hint{margin-top:11px;font-size:12.5px;color:#9aa2c8}
.hub-search-hint b{color:#c3c9e6;font-weight:600}

/* 统计 */
.hub-stats{margin-top:30px;display:flex;gap:34px;flex-wrap:wrap}
.hub-stats li{display:flex;flex-direction:column;gap:2px}
.hub-stats b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#fff}
.hub-stats span{font-size:12px;color:#9aa2c8;letter-spacing:.05em;text-transform:uppercase;font-weight:600}

/* ---------- 通用区块 ---------- */
.hub-sec{padding:64px 0;background:#fff}
.hub-sec--tint{background:var(--bg);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
/* 站头是 fixed 且高 67px（.et_pb_section_0_tb_header）⇒ 锚点必须留偏移，否则目标顶部被遮住 */
.hub #topics,.hub #grid{scroll-margin-top:84px}
.hub-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.hub-sec-head h2{font-size:clamp(21px,2.5vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hub-sec-head p{margin-top:7px;color:var(--ink2);font-size:14.5px;max-width:68ch}

/* ---------- 主题导航 ---------- */
.hub-tgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hub-tg{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:13px;transition:box-shadow .18s,transform .18s,border-color .18s;
}
.hub-tg:hover{box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:#d3d9ef}
.hub-tg-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hub-tg h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.hub-tg-n{font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-s);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hub-tg-blurb{font-size:13.5px;color:var(--ink2);line-height:1.55;min-height:42px}
.hub-tg-cats{display:flex;flex-wrap:wrap;gap:7px}
.hub-tg-cats a{
  display:inline-flex;align-items:center;gap:6px;font-size:12.8px;font-weight:600;color:var(--ink);
  background:#f4f5fa;border:1px solid var(--line);border-radius:8px;padding:5px 9px;transition:.15s;
}
.hub-tg-cats a:hover{background:var(--blue-s);border-color:#c3cff7;color:var(--blue)}
.hub-tg-cats em{font-style:normal;color:var(--ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
.hub-tg-cats a:hover em{color:var(--blue)}

/* ---------- 精选 ---------- */
.hub-feat{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.hub-feat-main,.hub-feat-side a{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.hub-feat-main:hover,.hub-feat-side a:hover{box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:#d3d9ef}
.hub-feat-main .m{position:relative;aspect-ratio:16/8.2;background:var(--bg)}
.hub-feat-main .m img{width:100%;height:100%;object-fit:cover}
.hub-feat-main .b{padding:24px 26px 26px}
.hub-feat-main h2{font-size:clamp(19px,2.2vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.24}
.hub-feat-main p{margin-top:11px;color:var(--ink2);font-size:14.5px;line-height:1.62}
.hub-feat-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.hub-feat-side .m{position:relative;aspect-ratio:16/7.4;background:var(--bg)}
.hub-feat-side .m img{width:100%;height:100%;object-fit:cover}
.hub-feat-side .b{padding:15px 18px 18px}
.hub-feat-side h3{font-size:14.6px;font-weight:700;line-height:1.34}

/* 角标 / 元信息 */
.hub-badge{
  position:absolute;left:12px;top:12px;font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(4,4,48,.86);color:#fff;border-radius:7px;padding:4px 9px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.hub-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.2px;color:var(--ink3);margin-top:12px}
.hub-meta .dot{width:3px;height:3px;border-radius:50%;background:#c8cbdb}

/* ---------- 主区 + 侧栏 ---------- */
.hub-cols{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:38px;align-items:start}
.hub-filters{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.hub-chips{display:flex;flex-wrap:wrap;gap:8px}
.hub-chip{
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13.2px;font-weight:650;
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:7px;line-height:1.4;
}
.hub-chip:hover{border-color:#c3cff7;background:var(--blue-s);color:var(--blue)}
.hub-chip em{font-style:normal;color:var(--ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
.hub-chip.is-active,.hub-chip[aria-current="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.hub-chip.is-active em,.hub-chip[aria-current="true"] em{color:rgba(255,255,255,.72)}
.hub-chips--sub[hidden]{display:none}
.hub-chips--sub{margin-left:2px;padding-left:13px;border-left:2px solid var(--line2)}
.hub-result{font-size:13.4px;color:var(--ink2);margin-bottom:16px}
.hub-result b{color:var(--ink);font-weight:750}
.hub-clear{color:var(--blue);font-weight:700;padding-left:6px}
.hub-clear:hover{text-decoration:underline}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;transition:box-shadow .18s,transform .18s,border-color .18s}
.hub-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:#d3d9ef}
.hub-card>a,.hub-card>.hub-card-link{display:flex;flex-direction:column;width:100%}
.hub-card .m{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#eef0f7,#e3e6f2);overflow:hidden}
.hub-card .m img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hub-card:hover .m img{transform:scale(1.035)}
.hub-card .b{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.hub-card h3{font-size:15.2px;font-weight:750;line-height:1.36;letter-spacing:-.005em;min-height:2.72em}
.hub-card p{margin-top:9px;font-size:13.1px;color:var(--ink2);line-height:1.55;min-height:3.1em}
/* p / h3 是 flex 子项会被 blockify ⇒ -webkit-line-clamp 在此失效；
   行数由服务端截断控制，这里只用 min-height 对齐、meta 靠 margin-top:auto 贴底。 */
.hub-card .hub-meta{margin-top:auto;padding-top:11px;border-top:1px solid var(--line2)}

/* 封面占位（只在图片确实加载失败或为外站热链时出现） */
.hub-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px;background:linear-gradient(140deg,#1f40b3,#0b0b46);color:#fff;font-weight:800;
  font-size:14.5px;line-height:1.3;letter-spacing:.01em;position:relative}
.hub-ph::after{content:"";position:absolute;left:16px;bottom:16px;width:26px;height:3px;background:#6f9bff;border-radius:2px}
.hub-feat-main .hub-ph{font-size:20px;padding:28px}
.hub-feat-side .hub-ph{font-size:15px;padding:16px}

.hub-empty{padding:56px 20px;text-align:center;color:var(--ink2);border:1px dashed var(--line);border-radius:var(--r);background:var(--bg)}
.hub-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

/* ---------- 加载更多 = 一条明确的行动条 ----------
   改版前：孤零零一个按钮 + 一行小字，紧贴页脚 ⇒ 用户以为是内容结尾（实测 doc_h 5542，
   控件在 4556，离底部还有 844px 的页脚），发现性差。
   现在做成有底色、有边框、有进度文字的整条 band：
   左「已看 12 / 共 931」，右「Load more guides」—— 一眼看出「还有内容，可继续」。 */
.hub-more{
  margin-top:26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,#fff,var(--blue-s));
}
.hub-more-txt{font-size:13.4px;color:var(--ink2);line-height:1.5}
.hub-more-txt b{color:var(--ink);font-weight:800}
.hub-more-note{
  display:block;font-size:12px;color:var(--ink3);margin-top:2px;
}
.hub-more button{
  border:1.5px solid var(--blue);background:var(--blue);color:#fff;
  font-size:14.4px;font-weight:700;letter-spacing:.01em;
  border-radius:11px;padding:12px 30px;cursor:pointer;transition:.15s;flex:0 0 auto;
}
.hub-more button:hover:not(:disabled){background:var(--blue-h);border-color:var(--blue-h)}
.hub-more button:disabled{opacity:.45;cursor:default}
.hub-more button.is-busy{opacity:.6;cursor:progress}

/* 窄屏：文字与按钮上下排，按钮占满宽度 */
@media (max-width:640px){
  .hub-more{flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .hub-more button{width:100%}
}

/* ---------- 分页（真实链接，爬虫与无 JS 用户可用） ---------- */
.hub-pager{margin-top:22px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center}
.hub-pager .pg{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  font-size:13.4px;font-weight:700;padding:0 12px;transition:.15s;
}
.hub-pager a.pg:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-s)}
.hub-pager .pg--cur{background:var(--blue);border-color:var(--blue);color:#fff}
.hub-pager .pg--off{opacity:.4}
.hub-pager .pg--gap{border:0;min-width:14px;padding:0}

/* ---------- 卡片分享行（图标式单行，在主链接外面） ----------
   改版前是 6 个文字胶囊，254px 宽放不下 ⇒ 换行成 2–3 行、占 116px（卡片高的 23.5%），
   视觉重量压过标题。现在改成图标 + 悬浮提示，单行约 34px。
   可访问性不降：aria-label / title 都在，文字标签用 .hub-vh 视觉隐藏但仍被读屏读取。 */
.hub-card{flex-direction:column}
.hub-card>.hub-card-link{flex:1}
.hub-share{
  display:flex;align-items:center;gap:8px;
  padding:9px 15px 11px;margin-top:-3px;
  border-top:1px solid var(--line);
}
.hub-share-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin-right:auto;flex:0 0 auto;
}
.hub-share-btns{display:inline-flex;align-items:center;gap:2px}
.hub-share-a{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--ink3);
  cursor:pointer;padding:0;font-family:inherit;transition:.14s;
}
.hub-share-a svg{width:15px;height:15px;display:block}
.hub-share-a:hover{border-color:var(--line);background:var(--blue-s);color:var(--blue)}
.hub-share-a:focus-visible{outline:2px solid #6f9bff;outline-offset:1px}
.hub-share-copy.is-done{border-color:#b8e6d2;background:#e7f6ef;color:#0b5c42}
.hub-share-copy.is-fail{border-color:#f5c6c2;background:#fdecea;color:#8a1c12}
/* 视觉隐藏但仍可达（不要用 display:none —— 那会让读屏也读不到） */
.hub-vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 侧栏：订阅 ---------- */
.hub-panel-lede{font-size:13.2px;color:var(--ink2);line-height:1.55;margin-bottom:12px}
.hub-panel--sub p{font-size:13.2px;color:var(--ink2);line-height:1.58;margin-bottom:13px}
.hub-sub .forminator-ui{margin:0}
.hub-sub .forminator-ui .forminator-row{margin-bottom:11px}
.hub-sub .forminator-ui .forminator-label{font-size:12.4px;font-weight:650;color:var(--ink)}
.hub-sub .forminator-ui input[type="email"],
.hub-sub .forminator-ui input[type="text"]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:14px;background:#fff;color:var(--ink);
}
.hub-sub .forminator-ui button.forminator-button-submit{
  width:100%;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;
  padding:12px;cursor:pointer;margin-top:3px;
}
.hub-sub .forminator-ui button.forminator-button-submit:hover{background:var(--blue-h)}
.hub-sub .forminator-ui .forminator-checkbox,
.hub-sub .forminator-ui .forminator-gdprcheckbox{font-size:12.2px;color:var(--ink2);line-height:1.5}
.hub-sub-fallback .hub-sub-mail{
  display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:11px;
  font-size:13.6px;font-weight:700;color:var(--blue);background:#fff;transition:.15s;
}
.hub-sub-fallback .hub-sub-mail:hover{background:var(--blue-s);border-color:#c3cff7}
.hub-sub-fallback small{display:block;margin-top:9px;font-size:11.4px;color:var(--ink3);text-align:center}

/* ---------- 侧栏：社媒 ---------- */
.hub-social{display:flex;flex-wrap:wrap;gap:8px}
.hub-social a{
  display:inline-flex;align-items:center;gap:7px;font-size:12.6px;font-weight:600;color:var(--ink2);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:.15s;
}
.hub-social a:hover{border-color:#c3cff7;background:var(--blue-s);color:var(--blue)}
.hub-social svg{width:15px;height:15px;flex:0 0 auto}

/* ---------- 侧栏 */
.hub-side{position:sticky;top:22px;display:flex;flex-direction:column;gap:20px}
.hub-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.hub-panel h3{font-size:11.8px;font-weight:800;margin-bottom:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}
.hub-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.6px;font-weight:600;transition:.13s}
.hub-list a:hover{background:var(--blue-s);color:var(--blue)}
.hub-list em{font-style:normal;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.hub-list--posts a{display:block;padding:10px 10px 11px;font-weight:650;line-height:1.42;font-size:13.4px}
.hub-list--posts a span{display:block;font-size:11.5px;color:var(--ink3);font-weight:500;margin-top:4px}
.hub-panel--cta{background:var(--navy);border-color:var(--navy);color:#fff}
.hub-panel--cta h3{color:#9aa2c8}
.hub-panel--cta p{font-size:13.6px;color:#c3c9e6;line-height:1.6}
.hub-panel--cta a.btn{
  display:block;text-align:center;margin-top:15px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;
  border-radius:10px;padding:12px;transition:background .15s;
}
.hub-panel--cta a.btn:hover{background:var(--blue-h);color:#fff}
.hub-panel--cta small{display:block;margin-top:11px;font-size:11.6px;color:#8f97bd}

/* ---------- 底部 CTA ---------- */
.hub-cta{background:var(--navy);color:#fff;padding:56px 0;position:relative;overflow:hidden}
.hub-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 300px at 78% 0%, rgba(31,64,179,.5), transparent 70%);}
.hub-cta .hub-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hub-cta h2{font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;color:#fff}
.hub-cta p{margin-top:8px;color:#c3c9e6;font-size:14.6px;max-width:56ch}
.hub-cta .act{display:flex;gap:12px;flex-wrap:wrap}
.hub-cta a{font-size:14.4px;font-weight:700;border-radius:11px;padding:14px 26px;transition:.15s}
.hub-cta a.p{background:var(--blue);color:#fff}
.hub-cta a.p:hover{background:var(--blue-h);color:#fff}
.hub-cta a.s{border:1.5px solid rgba(255,255,255,.32);color:#fff}
.hub-cta a.s:hover{border-color:#fff;background:rgba(255,255,255,.07)}

/* AJAX 加载中 */
.hub-more button.is-busy{opacity:.6;cursor:progress}
.hub-grid.is-loading{opacity:.5;transition:opacity .15s}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hub-tgroups{grid-template-columns:repeat(2,1fr)}
  .hub-cols{grid-template-columns:1fr;gap:34px}
  .hub-side{position:static;display:grid;grid-template-columns:repeat(2,1fr)}
  .hub-panel--cta{grid-column:span 2}
}
@media (max-width:860px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .hub-feat{grid-template-columns:1fr}
  .hub-feat-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .hub-wrap{padding:0 17px}
  .hub-hero{padding:48px 0 44px}
  .hub-search{flex-direction:column}
  .hub-search button{width:100%}
  .hub-stats{gap:22px}
  .hub-sec{padding:46px 0}
  .hub-tgroups{grid-template-columns:1fr}
  .hub-grid{grid-template-columns:1fr}
  .hub-feat-side{grid-template-columns:1fr}
  .hub-side{grid-template-columns:1fr}
  .hub-panel--cta{grid-column:auto}
  .hub-cta a{display:block;text-align:center}
}