/* =====================================================================
   Paulblog · iCMS v7 模板 · 明亮浅色科技风设计系统
   作用域：.pb-site（与 iCMS 核心/旧模板样式完全隔离，避免冲突）
   ===================================================================== */
.pb-site {
  /* ---------- 颜色令牌 · 浅色基底 ---------- */
  --pb-bg-base:       #f4f7fb;
  --pb-bg-surface:    #ffffff;
  --pb-bg-elevated:   #fbfdff;
  --pb-bg-input:      #eef2f8;

  --pb-border-soft:   rgba(15, 23, 42, 0.08);
  --pb-border-strong: rgba(15, 23, 42, 0.16);

  --pb-text-primary:  #0f172a;
  --pb-text-secondary:#475569;
  --pb-text-muted:    #94a3b8;

  --pb-accent:        #14b8a6;   /* teal-500 */
  --pb-accent-strong: #0d9488;
  --pb-accent-soft:   rgba(20, 184, 166, 0.10);
  --pb-accent-glow:   rgba(20, 184, 166, 0.30);

  --pb-accent-2:      #6366f1;   /* indigo-500 */
  --pb-accent-2-soft: rgba(99, 102, 241, 0.10);

  --pb-success: #10b981; --pb-warning: #f59e0b; --pb-error: #ef4444; --pb-info: #0ea5e9;

  --pb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pb-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --pb-fs-xs: .75rem; --pb-fs-sm: .8125rem; --pb-fs-base: 1rem; --pb-fs-lg: 1.125rem;
  --pb-fs-xl: 1.375rem; --pb-fs-2xl: 1.75rem; --pb-fs-3xl: 2.25rem; --pb-fs-4xl: 3rem;

  --pb-sp-1:.25rem; --pb-sp-2:.5rem; --pb-sp-3:.75rem; --pb-sp-4:1rem; --pb-sp-5:1.25rem;
  --pb-sp-6:1.5rem; --pb-sp-8:2rem; --pb-sp-10:2.5rem; --pb-sp-12:3rem; --pb-sp-16:4rem; --pb-sp-20:5rem;

  --pb-r-sm:6px; --pb-r-md:10px; --pb-r-lg:16px; --pb-r-xl:22px; --pb-r-full:999px;

  --pb-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --pb-shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --pb-shadow-lg: 0 24px 60px rgba(15,23,42,.12);
  --pb-glow: 0 0 0 1px var(--pb-accent-soft), 0 10px 28px var(--pb-accent-glow);

  --pb-t-fast:150ms ease; --pb-t-norm:280ms cubic-bezier(.4,0,.2,1);

  --pb-header-h: 64px; --pb-content-max: 1240px;
}

html, body { background: #f4f7fb; }
.pb-site, .pb-site * { box-sizing: border-box; }
.pb-site {
  font-family: var(--pb-font-sans);
  font-size: var(--pb-fs-base);
  line-height: 1.7;
  color: var(--pb-text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.pb-site img { max-width: 100%; display: block; }
.pb-site a { color: inherit; text-decoration: none; transition: color var(--pb-t-fast); }
.pb-site a:hover { color: var(--pb-accent); }
.pb-site ul { margin: 0; padding: 0; list-style: none; }
.pb-site button { font-family: inherit; cursor: pointer; }
.pb-site :focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: var(--pb-r-sm); }

/* ---------- 布局容器 ---------- */
.pb-wrap { width: 100%; max-width: var(--pb-content-max); margin-inline: auto; padding-inline: var(--pb-sp-5); }
.pb-section { padding-block: var(--pb-sp-16); }

/* ---------- 顶部品牌条（诗意标语） ---------- */
.pb-topbar { border-bottom: 1px solid var(--pb-border-soft);
  background: linear-gradient(90deg, rgba(20,184,166,.07), transparent 60%);
  font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); }
.pb-topbar .pb-wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: var(--pb-sp-4); }
.pb-topbar .pb-slogan { font-family: var(--pb-font-mono); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-topbar .pb-slogan b { color: var(--pb-accent); font-weight: 600; }
.pb-topbar .pb-meta { display: flex; gap: var(--pb-sp-4); flex-shrink: 0; }

/* ---------- 站点头部 / 导航 ---------- */
.pb-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pb-border-soft); }
.pb-header .pb-wrap { display: flex; align-items: center; gap: var(--pb-sp-6); height: var(--pb-header-h); }
.pb-brand { display: flex; align-items: center; gap: var(--pb-sp-3); flex-shrink: 0; }
.pb-brand .pb-mark { width: 38px; height: 38px; border-radius: var(--pb-r-md); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2)); color: #fff; font-weight: 700;
  font-family: var(--pb-font-mono); box-shadow: var(--pb-glow); font-size: 1.05rem; }
.pb-brand .pb-text { font-weight: 700; font-size: 1.2rem; letter-spacing: .5px; }
.pb-brand .pb-text b { background: linear-gradient(90deg, var(--pb-accent), var(--pb-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pb-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.pb-nav a { padding: var(--pb-sp-2) var(--pb-sp-3); border-radius: var(--pb-r-sm); font-size: var(--pb-fs-sm);
  color: var(--pb-text-secondary); position: relative; transition: all var(--pb-t-fast); white-space: nowrap; }
.pb-nav a:hover { color: var(--pb-text-primary); background: var(--pb-accent-soft); }
.pb-nav a.pb-active { color: var(--pb-accent-strong); }
.pb-nav a.pb-active::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 18px; height: 2px; background: var(--pb-accent); border-radius: 2px; }
.pb-nav .pb-sub { position: relative; }
.pb-nav .pb-sub > .pb-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px;
  background: #fff; border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md); padding: var(--pb-sp-2);
  box-shadow: var(--pb-shadow-md); z-index: 60; }
.pb-nav .pb-sub:hover > .pb-submenu { display: block; }
.pb-nav .pb-submenu a { display: block; padding: var(--pb-sp-2) var(--pb-sp-3); }
.pb-header-search { display: flex; align-items: center; background: var(--pb-bg-input); border: 1px solid var(--pb-border-soft);
  border-radius: var(--pb-r-full); padding: 6px 6px 6px 14px; width: 230px; transition: border-color var(--pb-t-fast), box-shadow var(--pb-t-fast); }
.pb-header-search:focus-within { border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft); }
.pb-header-search input { flex: 1; border: 0; background: transparent; color: var(--pb-text-primary); font-size: var(--pb-fs-sm); outline: none; min-width: 0; }
.pb-header-search input::placeholder { color: var(--pb-text-muted); }
.pb-header-search button { border: 0; background: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2)); color: #fff;
  width: 32px; height: 32px; border-radius: var(--pb-r-full); display: grid; place-items: center; transition: transform var(--pb-t-fast); }
.pb-header-search button:hover { transform: scale(1.06); }
.pb-nav-toggle { display: none; margin-left: auto; border: 1px solid var(--pb-border-soft); background: var(--pb-bg-surface);
  color: var(--pb-text-primary); width: 42px; height: 42px; border-radius: var(--pb-r-md); font-size: 1.1rem; }

/* ---------- 按钮 ---------- */
.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: var(--pb-fs-sm);
  padding: var(--pb-sp-3) var(--pb-sp-5); border-radius: var(--pb-r-full); border: 1px solid transparent;
  transition: all var(--pb-t-fast); cursor: pointer; line-height: 1; color: #fff; }
.pb-btn--primary { background: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2)); box-shadow: var(--pb-glow); }
.pb-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px var(--pb-accent-glow); color: #fff; }
.pb-btn--ghost { background: transparent; color: var(--pb-text-primary); border-color: var(--pb-border-strong); }
.pb-btn--ghost:hover { border-color: var(--pb-accent); color: var(--pb-accent-strong); background: var(--pb-accent-soft); }
.pb-btn--sm { padding: var(--pb-sp-2) var(--pb-sp-4); font-size: var(--pb-fs-xs); }

/* ---------- Hero ---------- */
.pb-hero { position: relative; overflow: hidden; padding-block: var(--pb-sp-20);
  background:
    radial-gradient(circle at 12% -10%, rgba(20,184,166,.10), transparent 42%),
    radial-gradient(circle at 92% 0%, rgba(99,102,241,.12), transparent 40%),
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px),
    var(--pb-bg-base);
  background-size: auto, auto, 44px 44px, 44px 44px, auto; }
.pb-hero .pb-wrap { position: relative; }
.pb-hero .pb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs);
  color: var(--pb-accent-strong); border: 1px solid var(--pb-border-strong); background: var(--pb-accent-soft);
  padding: 6px 12px; border-radius: var(--pb-r-full); margin-bottom: var(--pb-sp-5); }
.pb-hero .pb-eyebrow .pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pb-accent); box-shadow: 0 0 10px var(--pb-accent-glow); }
.pb-hero h1 { font-size: var(--pb-fs-4xl); line-height: 1.15; margin: 0 0 var(--pb-sp-5); font-weight: 700; letter-spacing: -.5px; }
.pb-hero h1 .pb-grad { background: linear-gradient(100deg, var(--pb-accent), var(--pb-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pb-hero p.pb-lead { font-size: var(--pb-fs-lg); color: var(--pb-text-secondary); max-width: 640px; margin: 0 0 var(--pb-sp-8); }
.pb-hero .pb-actions { display: flex; gap: var(--pb-sp-4); flex-wrap: wrap; }
.pb-hero .pb-stats { display: flex; gap: var(--pb-sp-10); margin-top: var(--pb-sp-12); flex-wrap: wrap; }
.pb-hero .pb-stats .pb-num { font-size: var(--pb-fs-3xl); font-weight: 700; font-family: var(--pb-font-mono); color: var(--pb-text-primary); }
.pb-hero .pb-stats .pb-num b { color: var(--pb-accent-strong); }
.pb-hero .pb-stats .pb-label { font-size: var(--pb-fs-sm); color: var(--pb-text-muted); }

/* ---------- 区块标题 ---------- */
.pb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pb-sp-4); margin-bottom: var(--pb-sp-8); }
.pb-head h2 { font-size: var(--pb-fs-2xl); margin: 0; font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: var(--pb-sp-3); }
.pb-head h2 .pb-bar { width: 4px; height: 26px; border-radius: 4px; background: linear-gradient(var(--pb-accent), var(--pb-accent-2)); }
.pb-head .pb-more { font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.pb-head .pb-more:hover { color: var(--pb-accent-strong); }

/* ---------- 卡片 / 文章 ---------- */
.pb-card { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-lg); overflow: hidden;
  transition: transform var(--pb-t-norm), border-color var(--pb-t-norm), box-shadow var(--pb-t-norm); box-shadow: var(--pb-shadow-sm); }
.pb-card:hover { transform: translateY(-4px); border-color: var(--pb-border-strong); box-shadow: var(--pb-shadow-lg); }
.pb-post { display: flex; flex-direction: column; height: 100%; }
.pb-post .pb-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: linear-gradient(135deg, #e0f2fe, #ccfbf1); }
.pb-post .pb-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pb-t-norm); }
.pb-post:hover .pb-thumb img { transform: scale(1.06); }
.pb-post .pb-thumb .pb-cat { position: absolute; top: 12px; left: 12px; font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs);
  padding: 4px 10px; border-radius: var(--pb-r-full); background: rgba(15,23,42,.65); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.pb-post .pb-body { padding: var(--pb-sp-5); display: flex; flex-direction: column; gap: var(--pb-sp-3); flex: 1; }
.pb-post h3 { margin: 0; font-size: var(--pb-fs-lg); font-weight: 600; line-height: 1.45; }
.pb-post h3 a:hover { color: var(--pb-accent-strong); }
.pb-post .pb-excerpt { color: var(--pb-text-secondary); font-size: var(--pb-fs-sm); margin: 0; flex: 1; }
.pb-post .pb-meta { display: flex; align-items: center; gap: var(--pb-sp-4); font-size: var(--pb-fs-xs); color: var(--pb-text-muted);
  font-family: var(--pb-font-mono); border-top: 1px solid var(--pb-border-soft); padding-top: var(--pb-sp-3); flex-wrap: wrap; }
.pb-post .pb-meta .pb-author { color: var(--pb-text-secondary); }
.pb-grid { display: grid; gap: var(--pb-sp-6); }
.pb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pb-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- 两栏布局 ---------- */
.pb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pb-sp-8); align-items: start; }
.pb-sidebar { display: flex; flex-direction: column; gap: var(--pb-sp-6); position: sticky; top: calc(var(--pb-header-h) + 20px); }
.pb-widget { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-lg); padding: var(--pb-sp-5); box-shadow: var(--pb-shadow-sm); }
.pb-widget h4 { margin: 0 0 var(--pb-sp-4); font-size: var(--pb-fs-base); font-weight: 600; display: flex; align-items: center; gap: var(--pb-sp-2); }
.pb-widget h4 .pb-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--pb-accent-soft); color: var(--pb-accent-strong); font-size: .8rem; }
.pb-widget .pb-search-box { display: flex; align-items: center; gap: 8px; background: var(--pb-bg-input); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md); padding: 8px 12px; }
.pb-widget .pb-search-box input { flex: 1; border: 0; background: transparent; color: var(--pb-text-primary); outline: none; font-size: var(--pb-fs-sm); }
.pb-widget .pb-search-box button { border: 0; background: transparent; color: var(--pb-accent-strong); font-size: 1rem; }
.pb-hot li { display: flex; gap: var(--pb-sp-3); padding: var(--pb-sp-3) 0; border-bottom: 1px solid var(--pb-border-soft); }
.pb-hot li:last-child { border-bottom: 0; padding-bottom: 0; }
.pb-hot .pb-rank { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs); font-weight: 700; color: var(--pb-text-muted); background: var(--pb-bg-input); }
.pb-hot li:nth-child(1) .pb-rank { background: var(--pb-accent); color: #fff; }
.pb-hot li:nth-child(2) .pb-rank { background: var(--pb-accent-2); color: #fff; }
.pb-hot li:nth-child(3) .pb-rank { background: var(--pb-warning); color: #fff; }
.pb-hot .pb-t { font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); line-height: 1.5; }
.pb-hot .pb-t:hover { color: var(--pb-accent-strong); }
.pb-hot .pb-v { font-family: var(--pb-font-mono); font-size: 11px; color: var(--pb-text-muted); }
.pb-tagcloud { display: flex; flex-wrap: wrap; gap: var(--pb-sp-2); }
.pb-tagcloud a { font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs); padding: 5px 11px; border-radius: var(--pb-r-full);
  border: 1px solid var(--pb-border-soft); color: var(--pb-text-secondary); transition: all var(--pb-t-fast); }
.pb-tagcloud a:hover { border-color: var(--pb-accent); color: var(--pb-accent-strong); background: var(--pb-accent-soft); }
.pb-about-widget { text-align: center; }
.pb-about-widget .pb-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--pb-sp-3);
  background: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2)); display: grid; place-items: center; color: #fff;
  font-weight: 700; font-size: 1.4rem; box-shadow: var(--pb-glow); }
.pb-about-widget p { font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); margin: 0 0 var(--pb-sp-4); }

/* ---------- 分类精选块 ---------- */
.pb-catblock { margin-bottom: var(--pb-sp-12); }
.pb-catblock .pb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pb-sp-5); border-left: 3px solid var(--pb-accent); padding-left: var(--pb-sp-3); }
.pb-catblock .pb-head h3 { margin: 0; font-size: var(--pb-fs-xl); font-weight: 600; }
.pb-catblock .pb-head .pb-link { font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs); color: var(--pb-text-muted); }
.pb-catblock .pb-head .pb-link:hover { color: var(--pb-accent-strong); }
.pb-catlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pb-sp-3); }
.pb-catlist li { display: flex; align-items: baseline; gap: var(--pb-sp-3); padding: var(--pb-sp-3) var(--pb-sp-4); background: var(--pb-bg-surface);
  border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md); transition: all var(--pb-t-fast); box-shadow: var(--pb-shadow-sm); }
.pb-catlist li:hover { border-color: var(--pb-border-strong); background: var(--pb-bg-elevated); transform: translateX(3px); }
.pb-catlist .pb-date { font-family: var(--pb-font-mono); font-size: 11px; color: var(--pb-text-muted); flex-shrink: 0; }
.pb-catlist .pb-tt { font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-catlist .pb-tt:hover { color: var(--pb-accent-strong); }

/* ---------- 栏目首页子分类卡 ---------- */
.pb-subgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pb-sp-4); margin-bottom: var(--pb-sp-12); }
.pb-subcard { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md); padding: var(--pb-sp-5); transition: all var(--pb-t-norm); }
.pb-subcard:hover { border-color: var(--pb-accent); transform: translateY(-3px); box-shadow: var(--pb-shadow-md); }
.pb-subcard h4 { margin: 0 0 var(--pb-sp-2); font-size: var(--pb-fs-lg); }
.pb-subcard .pb-count { font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs); color: var(--pb-text-muted); }

/* ---------- 面包屑 ---------- */
.pb-crumb { display: flex; align-items: center; gap: var(--pb-sp-2); flex-wrap: wrap; font-size: var(--pb-fs-sm);
  color: var(--pb-text-muted); padding-block: var(--pb-sp-5); font-family: var(--pb-font-mono); }
.pb-crumb a:hover { color: var(--pb-accent-strong); }
.pb-crumb .pb-sep { opacity: .5; }

/* ---------- 文章详情 ---------- */
.pb-article { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-lg); padding: var(--pb-sp-10); box-shadow: var(--pb-shadow-sm); }
.pb-article .pb-title { font-size: var(--pb-fs-3xl); line-height: 1.3; margin: 0 0 var(--pb-sp-5); font-weight: 700; }
.pb-article .pb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-sp-5); font-size: var(--pb-fs-sm);
  color: var(--pb-text-muted); font-family: var(--pb-font-mono); padding-bottom: var(--pb-sp-6); margin-bottom: var(--pb-sp-8); border-bottom: 1px solid var(--pb-border-soft); }
.pb-article .pb-meta b { color: var(--pb-text-secondary); font-weight: 500; }
.pb-article .pb-content { font-size: var(--pb-fs-lg); color: #334155; line-height: 1.9; }
.pb-article .pb-content h2 { font-size: var(--pb-fs-xl); margin: var(--pb-sp-10) 0 var(--pb-sp-4); color: var(--pb-text-primary); display: flex; align-items: center; gap: var(--pb-sp-2); }
.pb-article .pb-content h2::before { content: "#"; color: var(--pb-accent); font-family: var(--pb-font-mono); }
.pb-article .pb-content h3 { font-size: var(--pb-fs-lg); margin: var(--pb-sp-8) 0 var(--pb-sp-3); color: var(--pb-text-primary); }
.pb-article .pb-content p { margin: 0 0 var(--pb-sp-5); }
.pb-article .pb-content ul, .pb-article .pb-content ol { margin: 0 0 var(--pb-sp-5); padding-left: var(--pb-sp-6); }
.pb-article .pb-content li { margin-bottom: var(--pb-sp-2); }
.pb-article .pb-content strong { color: var(--pb-accent-strong); font-weight: 600; }
.pb-article .pb-content a.pb-inline { color: var(--pb-accent-strong); border-bottom: 1px dashed var(--pb-accent); }
.pb-article .pb-content blockquote { margin: var(--pb-sp-6) 0; padding: var(--pb-sp-4) var(--pb-sp-6); border-left: 3px solid var(--pb-accent);
  background: var(--pb-accent-soft); border-radius: 0 var(--pb-r-md) var(--pb-r-md) 0; color: var(--pb-text-secondary); }
.pb-article .pb-content img { border-radius: var(--pb-r-md); margin: var(--pb-sp-6) 0; border: 1px solid var(--pb-border-soft); max-width: 100%; height: auto; }

/* 轮播图（首页） */
.pb-slider { border-radius: var(--pb-r-lg); overflow: hidden; box-shadow: var(--pb-shadow-md); margin-bottom: var(--pb-sp-8); }
.pb-slider a { display: block; }
.pb-slider img { width: 100%; height: 360px; object-fit: cover; }

/* 代码块（保留深色质感，作为浅页焦点） */
.pb-code { margin: var(--pb-sp-6) 0; border-radius: var(--pb-r-md); overflow: hidden; border: 1px solid var(--pb-border-strong); background: #0f172a; box-shadow: var(--pb-shadow-md); }
.pb-code .pb-bar { display: flex; align-items: center; gap: var(--pb-sp-2); padding: var(--pb-sp-3) var(--pb-sp-4); background: #1e293b; border-bottom: 1px solid rgba(148,163,184,.15); }
.pb-code .pb-bar .pb-dots { display: flex; gap: 6px; }
.pb-code .pb-bar .pb-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.pb-code .pb-bar .pb-dots .r { background: #ff5f56; } .pb-code .pb-bar .pb-dots .y { background: #ffbd2e; } .pb-code .pb-bar .pb-dots .g { background: #27c93f; }
.pb-code .pb-bar .pb-name { font-family: var(--pb-font-mono); font-size: var(--pb-fs-xs); color: #94a3b8; margin-left: var(--pb-sp-2); }
.pb-code pre { margin: 0; padding: var(--pb-sp-5); overflow-x: auto; }
.pb-code code { font-family: var(--pb-font-mono); font-size: var(--pb-fs-sm); line-height: 1.7; color: #c8d6f0; }

.pb-article-foot { margin-top: var(--pb-sp-10); padding-top: var(--pb-sp-6); border-top: 1px solid var(--pb-border-soft); display: flex; flex-wrap: wrap; gap: var(--pb-sp-4); align-items: center; justify-content: space-between; }
.pb-article-foot .pb-share { display: flex; gap: var(--pb-sp-2); }
.pb-article-foot .pb-share a { width: 38px; height: 38px; border-radius: var(--pb-r-md); display: grid; place-items: center; border: 1px solid var(--pb-border-soft); color: var(--pb-text-secondary); transition: all var(--pb-t-fast); }
.pb-article-foot .pb-share a:hover { border-color: var(--pb-accent); color: var(--pb-accent-strong); background: var(--pb-accent-soft); }

/* ---------- 评论 ---------- */
.pb-comments { margin-top: var(--pb-sp-12); }
.pb-comment-form { display: grid; gap: var(--pb-sp-3); margin-bottom: var(--pb-sp-8); }
.pb-comment-form .pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pb-sp-3); }
.pb-input, .pb-textarea { width: 100%; background: var(--pb-bg-input); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md);
  padding: var(--pb-sp-3) var(--pb-sp-4); color: var(--pb-text-primary); font-size: var(--pb-fs-sm); font-family: inherit; transition: border-color var(--pb-t-fast), box-shadow var(--pb-t-fast); }
.pb-input:focus, .pb-textarea:focus { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft); }
.pb-textarea { resize: vertical; min-height: 120px; }
.pb-comment-list { display: flex; flex-direction: column; gap: var(--pb-sp-5); }
.pb-comment { display: flex; gap: var(--pb-sp-4); }
.pb-comment .pb-ava { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--pb-accent-2), var(--pb-accent)); display: grid; place-items: center; color: #fff; font-weight: 700; }
.pb-comment .pb-bubble { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md); padding: var(--pb-sp-4) var(--pb-sp-5); flex: 1; box-shadow: var(--pb-shadow-sm); }
.pb-comment .pb-bubble .pb-top { display: flex; align-items: center; gap: var(--pb-sp-3); margin-bottom: var(--pb-sp-2); }
.pb-comment .pb-bubble .pb-name { font-weight: 600; font-size: var(--pb-fs-sm); }
.pb-comment .pb-bubble .pb-time { font-family: var(--pb-font-mono); font-size: 11px; color: var(--pb-text-muted); }
.pb-comment .pb-bubble p { margin: 0; font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); }

/* ---------- 单页（关于 / 联系 / content 应用） ---------- */
.pb-pagehero { padding-block: var(--pb-sp-16); text-align: center; position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(20,184,166,.10), transparent 60%), var(--pb-bg-base); }
.pb-pagehero h1 { font-size: var(--pb-fs-3xl); margin: 0 0 var(--pb-sp-4); }
.pb-pagehero p { color: var(--pb-text-secondary); max-width: 620px; margin: 0 auto; font-size: var(--pb-fs-lg); }
.pb-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pb-sp-6); }
.pb-feature { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-lg); padding: var(--pb-sp-6); transition: all var(--pb-t-norm); box-shadow: var(--pb-shadow-sm); }
.pb-feature:hover { border-color: var(--pb-border-strong); transform: translateY(-4px); box-shadow: var(--pb-shadow-md); }
.pb-feature .pb-ico { width: 46px; height: 46px; border-radius: var(--pb-r-md); display: grid; place-items: center; background: var(--pb-accent-soft); color: var(--pb-accent-strong); font-size: 1.3rem; margin-bottom: var(--pb-sp-4); }
.pb-feature h3 { margin: 0 0 var(--pb-sp-2); font-size: var(--pb-fs-lg); }
.pb-feature p { margin: 0; color: var(--pb-text-secondary); font-size: var(--pb-fs-sm); }
.pb-timeline { position: relative; padding-left: var(--pb-sp-8); }
.pb-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--pb-accent), var(--pb-accent-2)); opacity: .4; }
.pb-timeline .pb-item { position: relative; padding-bottom: var(--pb-sp-8); }
.pb-timeline .pb-item::before { content: ""; position: absolute; left: -29px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--pb-bg-base); border: 2px solid var(--pb-accent); box-shadow: 0 0 0 4px var(--pb-accent-soft); }
.pb-timeline .pb-year { font-family: var(--pb-font-mono); color: var(--pb-accent-strong); font-size: var(--pb-fs-sm); font-weight: 600; }
.pb-timeline .pb-item h4 { margin: var(--pb-sp-1) 0 var(--pb-sp-2); font-size: var(--pb-fs-lg); }
.pb-timeline .pb-item p { margin: 0; color: var(--pb-text-secondary); font-size: var(--pb-fs-sm); }
.pb-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pb-sp-8); align-items: start; }
.pb-contact-info .pb-row { display: flex; gap: var(--pb-sp-4); padding: var(--pb-sp-4) 0; border-bottom: 1px solid var(--pb-border-soft); }
.pb-contact-info .pb-row .pb-ico { width: 42px; height: 42px; border-radius: var(--pb-r-md); flex-shrink: 0; display: grid; place-items: center; background: var(--pb-accent-soft); color: var(--pb-accent-strong); }
.pb-contact-info .pb-row .pb-k { font-size: var(--pb-fs-sm); color: var(--pb-text-muted); }
.pb-contact-info .pb-row .pb-v { font-size: var(--pb-fs-base); color: var(--pb-text-primary); }
.pb-contact-card { background: var(--pb-bg-surface); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-lg); padding: var(--pb-sp-8); box-shadow: var(--pb-shadow-sm); }
.pb-contact-card .pb-field { margin-bottom: var(--pb-sp-4); }
.pb-contact-card label { display: block; font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); margin-bottom: var(--pb-sp-2); }
.pb-contact-card .pb-qr { margin-top: var(--pb-sp-6); padding-top: var(--pb-sp-6); border-top: 1px solid var(--pb-border-soft); display: flex; gap: var(--pb-sp-4); align-items: center; }
.pb-contact-card .pb-qr .pb-codeimg { width: 96px; height: 96px; border-radius: var(--pb-r-md); flex-shrink: 0;
  background: repeating-conic-gradient(#0f172a 0 25%, #14b8a6 0 50%) 0 0 / 16px 16px; border: 1px solid var(--pb-border-strong); }
.pb-contact-card .pb-qr .pb-txt { font-size: var(--pb-fs-xs); color: var(--pb-text-muted); }

/* ---------- 分页 ---------- */
.pb-pagination { display: flex; justify-content: center; gap: var(--pb-sp-2); margin-top: var(--pb-sp-10); flex-wrap: wrap; }
.pb-pagination a, .pb-pagination span { min-width: 40px; height: 40px; padding: 0 var(--pb-sp-3); border-radius: var(--pb-r-md); display: grid; place-items: center;
  border: 1px solid var(--pb-border-soft); font-family: var(--pb-font-mono); font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); background: var(--pb-bg-surface); transition: all var(--pb-t-fast); }
.pb-pagination a:hover { border-color: var(--pb-accent); color: var(--pb-accent-strong); background: var(--pb-accent-soft); }
.pb-pagination .pb-active { background: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2)); color: #fff; border-color: transparent; font-weight: 600; }

/* ---------- 页脚 ---------- */
.pb-footer { border-top: 1px solid var(--pb-border-soft); margin-top: var(--pb-sp-16); background: rgba(255,255,255,.6); }
.pb-footer .pb-wrap { padding-block: var(--pb-sp-12); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--pb-sp-8); }
.pb-footer .pb-col h5 { font-size: var(--pb-fs-sm); color: var(--pb-text-primary); margin: 0 0 var(--pb-sp-4); letter-spacing: .5px; }
.pb-footer .pb-col a, .pb-footer .pb-col p { display: block; font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); margin-bottom: var(--pb-sp-2); }
.pb-footer .pb-col a:hover { color: var(--pb-accent-strong); }
.pb-footer .pb-blurb { color: var(--pb-text-secondary); font-size: var(--pb-fs-sm); margin-top: var(--pb-sp-3); }
.pb-footer .pb-bottom { border-top: 1px solid var(--pb-border-soft); padding-block: var(--pb-sp-5); text-align: center; font-size: var(--pb-fs-xs); color: var(--pb-text-muted); font-family: var(--pb-font-mono); }
.pb-footer .pb-bottom a { color: var(--pb-text-secondary); }
.pb-footer .pb-bottom a:hover { color: var(--pb-accent-strong); }
.pb-friendlinks { display: flex; flex-wrap: wrap; gap: var(--pb-sp-3); margin-top: var(--pb-sp-4); }
.pb-friendlinks a { font-size: var(--pb-fs-xs); color: var(--pb-text-muted); }
.pb-friendlinks a:hover { color: var(--pb-accent-strong); }

/* ---------- 栏目导航（侧栏竖列表） ---------- */
.pb-catnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pb-sp-1); }
.pb-catnav li a { display: block; padding: var(--pb-sp-2) var(--pb-sp-3); border-radius: var(--pb-r-sm); font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); border: 1px solid transparent; transition: all var(--pb-t-fast); }
.pb-catnav li a:hover { background: var(--pb-accent-soft); color: var(--pb-accent-strong); }
.pb-catnav li.pb-active a { background: var(--pb-accent-soft); color: var(--pb-accent-strong); border-color: var(--pb-accent); font-weight: 600; }

/* ---------- 表单页（forms 应用） ---------- */
.pb-formcard { padding: var(--pb-sp-8); }
.pb-form { display: flex; flex-direction: column; gap: var(--pb-sp-4); }
.pb-form .form-group,
.pb-form .form-field { display: flex; flex-direction: column; gap: var(--pb-sp-2); }
.pb-form label { font-size: var(--pb-fs-sm); color: var(--pb-text-secondary); }
.pb-form input[type="text"],
.pb-form input[type="email"],
.pb-form input[type="tel"],
.pb-form input[type="number"],
.pb-form input[type="password"],
.pb-form input[type="url"],
.pb-form textarea,
.pb-form select {
  width: 100%; padding: var(--pb-sp-3); border: 1px solid var(--pb-border-soft); border-radius: var(--pb-r-md);
  background: var(--pb-bg-base); color: var(--pb-text-primary); font-size: var(--pb-fs-base); font-family: var(--pb-font-sans);
  transition: border-color var(--pb-t-fast), box-shadow var(--pb-t-fast); }
.pb-form input:focus,
.pb-form textarea:focus,
.pb-form select:focus { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft); }
.pb-form textarea { min-height: 140px; resize: vertical; }
.pb-form-actions { margin-top: var(--pb-sp-2); }
.pb-alert { padding: var(--pb-sp-4); border-radius: var(--pb-r-md); font-size: var(--pb-fs-sm); margin-top: var(--pb-sp-4); }
.pb-alert--ok { background: var(--pb-accent-soft); color: var(--pb-accent-strong); border: 1px solid var(--pb-accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .pb-layout { grid-template-columns: 1fr; }
  .pb-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .pb-sidebar .pb-widget { flex: 1 1 260px; }
  .pb-footer .pb-wrap { grid-template-columns: 1fr 1fr; }
  .pb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pb-feature-grid { grid-template-columns: 1fr 1fr; }
  .pb-subgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pb-nav, .pb-header-search { display: none; }
  .pb-nav-toggle { display: grid; }
  .pb-nav.pb-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: var(--pb-header-h); left: 0; right: 0;
    background: var(--pb-bg-surface); border-bottom: 1px solid var(--pb-border-soft); padding: var(--pb-sp-4); gap: var(--pb-sp-1); margin-left: 0; box-shadow: var(--pb-shadow-md); }
  .pb-nav.pb-open a { padding: var(--pb-sp-3); }
  .pb-header .pb-wrap { position: relative; }
  .pb-hero { padding-block: var(--pb-sp-12); }
  .pb-hero h1 { font-size: var(--pb-fs-3xl); }
  .pb-grid--3, .pb-grid--2, .pb-feature-grid, .pb-catlist, .pb-contact-grid, .pb-subgrid { grid-template-columns: 1fr; }
  .pb-comment-form .pb-row { grid-template-columns: 1fr; }
  .pb-article { padding: var(--pb-sp-5); }
  .pb-footer .pb-wrap { grid-template-columns: 1fr; }
  .pb-topbar .pb-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-site *, .pb-site *::before, .pb-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}