/* v10 產業誌 tradehub — 專業人脈版型
   佈局 DNA：近黑雙灰底的專業人脈流，左欄個人名片＋中欄動態＋右欄職缺卡，公司徽章與漸層主鈕貫穿。
   變體軸：漸層主鈕角度與徽章形狀可依「法規／財報／展會／聯盟」子站切分身份調性。 */

/* ================= 雙模式色彩架構（primitive 12 階 → semantic 雙層） =================
   primitive：H＝青藍品牌色階、N＝近中性灰階，light/dark 各一組（防指紋前綴 pro）。
   本版型「預設深色」（近黑專業人脈感）：:root 為深色，[data-mode="light"] 為完整亮模式；
   proGrad＝裝飾亮漸層、proGradBtn＝按鈕用可讀深漸層；青綠色分模式加深以確保亮底可讀。 */
:root {
  /* H 青藍品牌色階 light */
  --proHl1:#fafcfc; --proHl2:#dff2f6; --proHl3:#c5e8ef; --proHl4:#d3eff8; --proHl5:#bce9f8; --proHl6:#9fdff4;
  --proHl7:#77d0ee; --proHl8:#43bde5; --proHl9:#0f7d99; --proHl10:#0b5f75; --proHl11:#0e6a83; --proHl12:#204c5b;
  /* H 青藍品牌色階 dark */
  --proHd1:#182d35; --proHd2:#0c2b31; --proHd3:#123a42; --proHd4:#1b566a; --proHd5:#1c677f; --proHd6:#1e7b9a;
  --proHd7:#2493b8; --proHd8:#32aed7; --proHd9:#00c9e4; --proHd10:#00a7c4; --proHd11:#5fd9ea; --proHd12:#e6f0f4;
  /* N 近中性灰階 light */
  --proNl1:#f4f6f8; --proNl2:#eaeef1; --proNl3:#f1f1f2; --proNl4:#eaebec; --proNl5:#e2e3e4; --proNl6:#dde2e7;
  --proNl7:#c2c5c6; --proNl8:#a6a9ab; --proNl9:#898d8f; --proNl10:#74787b; --proNl11:#5c6773; --proNl12:#1c2530;
  /* N 近中性灰階 dark */
  --proNd1:#161616; --proNd2:#282828; --proNd3:#313131; --proNd4:#303234; --proNd5:#3a3c3e; --proNd6:#3e3e3e;
  --proNd7:#595c5e; --proNd8:#707376; --proNd9:#85878a; --proNd10:#9a9c9d; --proNd11:#a8a8a8; --proNd12:#f2f2f2;

  /* semantic（dark 預設） */
  --proBg: var(--proNd1);
  --proSurface: var(--proNd2);
  --proSurfaceAlt: var(--proNd3);
  --proLine: var(--proNd6);
  --proText: var(--proNd12);
  --proTextMuted: var(--proNd11);
  --proCyan: #00c9e4;      /* 青：連結／標籤（亮模式加深） */
  --proBlue: #007bff;
  --proGreen: #00c9a7;     /* 綠：數值（亮模式加深） */
  --proGreenSoft: rgba(0, 201, 167, .14);
  --proStar: #ffc107;
  --proGrad: linear-gradient(256deg, #00c9e4, #007bff);
  --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
  --proGradSoft: linear-gradient(256deg, rgba(0,201,228,.16), rgba(0,123,255,.16));
  --proHeading: #ffffff;   /* 標題／品牌文字（亮模式轉深） */

  /* 圓角語言：6px 統一 */
  --proRadius: 6px;
  --proRadiusLg: 8px;

  /* 陰影語言：框線為主、深底薄影 */
  --proShadow: 0 2px 10px rgba(0, 0, 0, .4);
  --proGlow: 0 4px 18px rgba(0, 123, 255, .3);

  --proFont: "Ubuntu", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --proSizeBase: 13.5px;
}

/* semantic 亮色覆蓋 */
[data-mode="light"] {
  --proBg: var(--proNl1);
  --proSurface: #ffffff;
  --proSurfaceAlt: var(--proNl2);
  --proLine: var(--proNl6);
  --proText: var(--proNl12);
  --proTextMuted: var(--proNl11);
  --proCyan: #0e7d99;
  --proBlue: #0067d6;
  --proGreen: #0a8f76;
  --proGreenSoft: rgba(10, 143, 118, .12);
  --proStar: #d97e00;
  --proGrad: linear-gradient(256deg, #06b6d4, #2563eb);
  --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
  --proGradSoft: linear-gradient(256deg, rgba(14,125,153,.12), rgba(0,103,214,.12));
  --proHeading: #1c2530;
  --proShadow: 0 2px 10px rgba(20, 40, 70, .12);
  --proGlow: 0 4px 18px rgba(0, 103, 214, .16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --proBg: var(--proNl1); --proSurface: #ffffff; --proSurfaceAlt: var(--proNl2); --proLine: var(--proNl6);
    --proText: var(--proNl12); --proTextMuted: var(--proNl11); --proCyan: #0e7d99; --proBlue: #0067d6;
    --proGreen: #0a8f76; --proGreenSoft: rgba(10,143,118,.12); --proStar: #d97e00;
    --proGrad: linear-gradient(256deg, #06b6d4, #2563eb); --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
    --proGradSoft: linear-gradient(256deg, rgba(14,125,153,.12), rgba(0,103,214,.12)); --proHeading: #1c2530;
    --proShadow: 0 2px 10px rgba(20,40,70,.12); --proGlow: 0 4px 18px rgba(0,103,214,.16);
  }
}
/* @check text=#1c2530 bg=#f4f6f8 muted=#5c6773 primary=#0f7d99 btntext=#ffffff mode=light */
/* @check text=#f2f2f2 bg=#161616 muted=#a8a8a8 primary=#0f7d99 btntext=#ffffff mode=dark */

/* 模式切換鈕 */
.pro-mode {
  width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--proLine); border-radius: var(--proRadius);
  background: var(--proSurfaceAlt); color: var(--proCyan);
  font-size: .95rem; display: grid; place-items: center;
}
.pro-mode:hover { border-color: var(--proCyan); box-shadow: var(--proGlow); }
.pro-mode .pro-sun { display: none; }
[data-mode="light"] .pro-mode .pro-moon { display: none; }
[data-mode="light"] .pro-mode .pro-sun { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) .pro-mode .pro-moon { display: none; }
  :root:not([data-mode="dark"]) .pro-mode .pro-sun { display: inline; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: var(--proBg); color: var(--proText);
  font-family: var(--proFont); font-size: var(--proSizeBase); line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--proCyan); text-decoration: none; }
a:hover { color: var(--proGreen); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; color: var(--proHeading); margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.06rem; }
p { margin: 0 0 .95em; }

.pro-wrap { max-width: 1200px; margin: 0 auto; padding: 0 14px 54px; }

/* 頂欄 */
.pro-top {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg);
  box-shadow: var(--proShadow); position: sticky; top: 8px; z-index: 40; margin: 12px 0;
}
.pro-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--proHeading); }
.pro-brand span { width: 28px; height: 28px; border-radius: var(--proRadius); display: grid; place-items: center; color: #fff; background: var(--proGrad); font-size: .88rem; }
.pro-search { flex: 1; min-width: 0; padding: 8px 13px; font: inherit; font-size: .86rem; border: 1px solid var(--proLine); border-radius: var(--proRadius); background: var(--proBg); color: var(--proText); }
.pro-search::placeholder { color: var(--proTextMuted); }

/* 導覽 */
.pro-nav { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); margin-bottom: 16px; }
.pro-link { flex: 0 0 auto; padding: 8px 15px; border-radius: var(--proRadius); color: var(--proTextMuted); font-weight: 500; font-size: .86rem; white-space: nowrap; }
.pro-link.on { background: var(--proGradBtn); color: #fff; box-shadow: var(--proGlow); }

/* 麵包屑 */
.pro-crumb { font-size: .78rem; color: var(--proTextMuted); margin: 0 3px 14px; }
.pro-crumb a { color: var(--proTextMuted); }
.pro-crumb i { color: var(--proCyan); font-style: normal; margin: 0 5px; }

/* 三欄佈局 */
.pro-cols { display: grid; grid-template-columns: 250px 1fr 290px; gap: 16px; align-items: start; }
.pro-left, .pro-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; align-self: start; }
.pro-feed { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pro-card { background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); box-shadow: var(--proShadow); padding: 16px; }
.pro-ctitle { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--proHeading); margin-bottom: 13px; font-size: .98rem; }
.pro-ctitle::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--proGrad); }

/* 個人名片（左欄） */
.pro-me { text-align: center; }
.pro-me-cover { height: 64px; margin: -16px -16px 0; border-radius: var(--proRadiusLg) var(--proRadiusLg) 0 0; background: var(--proGrad); }
.pro-me-av { width: 66px; height: 66px; border-radius: 50%; margin: -33px auto 8px; background: var(--proSurfaceAlt); border: 3px solid var(--proSurface); display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; color: var(--proCyan); }
.pro-me b { display: block; color: var(--proHeading); font-size: 1rem; }
.pro-me small { color: var(--proTextMuted); font-size: .78rem; }
.pro-me-stats { display: flex; border-top: 1px solid var(--proLine); margin-top: 12px; padding-top: 12px; }
.pro-me-stats div { flex: 1; }
.pro-me-stats b { font-size: .95rem; }
.pro-me-stats small { font-size: .7rem; }

/* 公司徽章 */
.pro-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border: 1px solid var(--proCyan); border-radius: var(--proRadius);
  color: var(--proCyan); font-size: .72rem; font-weight: 500; background: var(--proGradSoft);
}
.pro-badge.gn { border-color: var(--proGreen); color: var(--proGreen); background: var(--proGreenSoft); }

/* 工具表單卡 */
.pro-form .pro-fld { margin-bottom: 12px; }
.pro-lbl { display: block; font-weight: 500; font-size: .8rem; margin-bottom: 5px; color: var(--proCyan); }
.pro-sel, .pro-inp { width: 100%; padding: 10px 12px; font: inherit; font-size: .87rem; border: 1px solid var(--proLine); border-radius: var(--proRadius); background: var(--proBg); color: var(--proText); }
.pro-sel:focus, .pro-inp:focus { outline: none; border-color: var(--proBlue); box-shadow: 0 0 0 3px rgba(0,123,255,.25); }
.pro-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-radio label { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--proLine); border-radius: var(--proRadius); font-size: .82rem; cursor: pointer; background: var(--proBg); }
.pro-radio input { accent-color: var(--proBlue); }
.pro-fbtns { display: flex; gap: 8px; margin-top: 4px; }
.pro-btn { flex: 1; padding: 11px 16px; border: none; border-radius: var(--proRadius); background: var(--proGradBtn); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--proGlow); }
.pro-btn:hover { filter: brightness(1.12); }
.pro-btn-line { padding: 11px 16px; border: 1px solid var(--proGreen); border-radius: var(--proRadius); background: transparent; color: var(--proGreen); font: inherit; font-weight: 700; cursor: pointer; }
.pro-btn-line:hover { background: var(--proGreenSoft); }

/* 結果貼文卡 */
.pro-post { background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); box-shadow: var(--proShadow); padding: 16px; }
.pro-phead { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.pro-av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: var(--proSurfaceAlt); border: 2px solid var(--proCyan); color: var(--proCyan); display: grid; place-items: center; font-weight: 700; }
.pro-who { flex: 1; min-width: 0; }
.pro-name { font-weight: 700; color: var(--proHeading); font-size: .92rem; }
.pro-meta { font-size: .74rem; color: var(--proTextMuted); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pro-tag { background: var(--proGradSoft); color: var(--proCyan); padding: 1px 8px; border-radius: var(--proRadius); font-weight: 500; font-size: .7rem; border: 1px solid rgba(0,201,228,.35); }
.pro-rec { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .68rem; color: var(--proTextMuted); background: var(--proBg); padding: 1px 7px; border-radius: 3px; border: 1px solid var(--proLine); }
.pro-ptext { margin-bottom: 12px; font-size: .88rem; }
.pro-res { background: var(--proBg); border: 1px solid var(--proGreen); border-radius: var(--proRadius); padding: 12px 14px; margin-bottom: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.pro-res b { color: var(--proHeading); }
.pro-res .pro-rnum { font-size: 1.3rem; font-weight: 700; color: var(--proGreen); }
.pro-stars { color: var(--proStar); letter-spacing: 2px; font-size: 1rem; margin-bottom: 11px; }
.pro-stars small { color: var(--proTextMuted); letter-spacing: normal; margin-left: 5px; font-size: .74rem; }
.pro-react { display: flex; gap: 7px; border-top: 1px solid var(--proLine); padding-top: 11px; }
.pro-react button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px solid var(--proLine); border-radius: var(--proRadius); background: transparent; color: var(--proTextMuted); font: inherit; font-weight: 500; font-size: .82rem; cursor: pointer; }
.pro-react button:hover { border-color: var(--proCyan); color: var(--proCyan); background: var(--proGradSoft); }

/* 職缺卡 */
.pro-job { border: 1px solid var(--proLine); border-radius: var(--proRadius); padding: 12px 13px; margin-bottom: 10px; background: var(--proBg); }
.pro-job:last-child { margin-bottom: 0; }
.pro-job:hover { border-color: var(--proBlue); }
.pro-job-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pro-job-logo { width: 34px; height: 34px; border-radius: var(--proRadius); flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; background: var(--proGrad); }
.pro-job b { display: block; color: var(--proHeading); font-size: .88rem; }
.pro-job small { color: var(--proTextMuted); font-size: .72rem; }
.pro-job-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.pro-job-pay { color: var(--proGreen); font-weight: 700; font-size: .8rem; }

/* 平台數據統計 */
.pro-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pro-stat { background: var(--proBg); border: 1px solid var(--proLine); border-radius: var(--proRadius); padding: 13px 10px; text-align: center; }
.pro-stat b { display: block; font-size: 1.45rem; font-weight: 700; background: var(--proGradBtn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-stat small { font-size: .72rem; color: var(--proTextMuted); }

/* 熱門排行 */
.pro-rank { display: flex; flex-direction: column; }
.pro-rrow { display: flex; align-items: center; gap: 10px; padding: 8px 5px; border-bottom: 1px solid var(--proLine); }
.pro-rrow:last-child { border-bottom: none; }
.pro-rno { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: .74rem; background: var(--proSurfaceAlt); color: var(--proTextMuted); }
.pro-rrow:nth-child(1) .pro-rno { background: var(--proGrad); color: #fff; }
.pro-rrow:nth-child(2) .pro-rno { background: var(--proCyan); color: #0b2830; }
.pro-rrow:nth-child(3) .pro-rno { background: var(--proGreen); color: #0b2f26; }
.pro-rnm { flex: 1; min-width: 0; font-weight: 500; font-size: .85rem; }
.pro-rval { font-weight: 700; font-size: .78rem; color: var(--proGreen); }

/* 文章卡 */
.pro-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pro-art { background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); overflow: hidden; }
.pro-art:hover { border-color: var(--proBlue); box-shadow: var(--proGlow); }
.pro-art-thumb { height: 108px; position: relative; background: var(--proGrad); }
.pro-art-thumb.grad2 { background: linear-gradient(256deg, var(--proGreen), var(--proCyan)); }
.pro-art-thumb.grad3 { background: linear-gradient(256deg, var(--proBlue), var(--proGreen)); }
.pro-art-thumb span { position: absolute; left: 9px; bottom: 9px; background: rgba(22,22,22,.8); color: #fff; font-weight: 500; font-size: .68rem; padding: 2px 9px; border-radius: var(--proRadius); }
.pro-art-info { padding: 12px 14px; }
.pro-art-info h3 { font-size: .92rem; margin-bottom: 5px; }
.pro-art-info p { font-size: .78rem; color: var(--proTextMuted); margin: 0; }

/* 文章內文排版 */
.pro-body { background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); box-shadow: var(--proShadow); padding: 22px; }
.pro-body h3 { color: var(--proCyan); }
.pro-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .84rem; }
.pro-body th { background: var(--proBg); color: var(--proCyan); padding: 9px 11px; text-align: left; border-bottom: 2px solid var(--proBlue); font-size: .78rem; }
.pro-body td { padding: 9px 11px; border-bottom: 1px solid var(--proLine); }
.pro-body tr:nth-child(even) td { background: var(--proSurfaceAlt); }
.pro-body blockquote { margin: 1.1em 0; padding: 12px 16px; border-left: 3px solid var(--proGreen); background: var(--proBg); border-radius: 0 var(--proRadius) var(--proRadius) 0; color: var(--proText); }
.pro-faq details { border: 1px solid var(--proLine); border-radius: var(--proRadius); padding: 11px 14px; margin-bottom: 8px; background: var(--proBg); }
.pro-faq summary { font-weight: 700; color: var(--proHeading); cursor: pointer; }
.pro-faq details[open] summary { color: var(--proCyan); margin-bottom: 6px; }

/* 工具牆 */
.pro-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pro-tile { background: var(--proSurface); border: 1px solid var(--proLine); border-radius: var(--proRadiusLg); padding: 15px 14px; }
.pro-tile:hover { border-color: var(--proCyan); box-shadow: var(--proGlow); }
.pro-tile i { width: 40px; height: 40px; border-radius: var(--proRadius); margin-bottom: 8px; display: grid; place-items: center; font-style: normal; font-size: 1.1rem; color: #fff; background: var(--proGrad); }
.pro-tile b { display: block; color: var(--proHeading); font-size: .88rem; }
.pro-tile small { color: var(--proTextMuted); font-size: .72rem; }

/* 16:9 影片容器 */
.pro-vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--proRadiusLg); overflow: hidden; background: linear-gradient(256deg, #113344, #0a2033); border: 1px solid var(--proLine); }
.pro-vid .pro-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: var(--proGrad); display: grid; place-items: center; box-shadow: var(--proGlow); }
.pro-vid .pro-play::before { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.pro-vid .pro-vlbl { position: absolute; left: 12px; bottom: 10px; color: #fff; font-weight: 500; font-size: .82rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* 圖片網格 2×2 */
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pro-cell { aspect-ratio: 4 / 3; border-radius: var(--proRadius); border: 1px solid var(--proLine); }
.pro-cell:nth-child(1) { background: var(--proGrad); }
.pro-cell:nth-child(2) { background: linear-gradient(256deg, var(--proGreen), var(--proBlue)); }
.pro-cell:nth-child(3) { background: linear-gradient(256deg, var(--proCyan), var(--proGreen)); }
.pro-cell:nth-child(4) { background: linear-gradient(256deg, #113344, var(--proCyan)); }

/* 分頁 */
.pro-page { display: flex; gap: 7px; justify-content: center; margin-top: 20px; }
.pro-page button { min-width: 36px; height: 36px; padding: 0 11px; border-radius: var(--proRadius); border: 1px solid var(--proLine); background: var(--proSurface); color: var(--proTextMuted); font: inherit; font-weight: 500; cursor: pointer; }
.pro-page button.on, .pro-page button:hover { background: var(--proGradBtn); color: #fff; border-color: transparent; box-shadow: var(--proGlow); }

/* footer */
.pro-foot { margin-top: 34px; background: var(--proSurface); border: 1px solid var(--proLine); border-top: 3px solid transparent; border-image: var(--proGrad) 1; border-radius: 0 0 var(--proRadiusLg) var(--proRadiusLg); padding: 24px 22px; }
.pro-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 22px; }
.pro-foot-grid h4 { color: var(--proHeading); font-size: .92rem; }
.pro-foot-grid a { color: var(--proTextMuted); display: block; font-size: .82rem; padding: 2px 0; }
.pro-foot-grid a:hover { color: var(--proCyan); }
.pro-foot-grid p { color: var(--proTextMuted); font-size: .82rem; }
.pro-foot-bottom { border-top: 1px solid var(--proLine); margin-top: 18px; padding-top: 14px; font-size: .76rem; text-align: center; color: var(--proTextMuted); }

/* 人脈操作鈕（描邊品牌色） */
.pro-connect {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--proCyan); border-radius: var(--proRadius);
  background: transparent; color: var(--proCyan); font: inherit; font-weight: 500; font-size: .82rem; cursor: pointer;
}
.pro-connect:hover { background: var(--proGradSoft); box-shadow: var(--proGlow); }
.pro-connect.done { border-color: var(--proGreen); color: var(--proGreen); }

/* 分隔線與空狀態 */
.pro-hr { border: none; border-top: 1px solid var(--proLine); margin: 14px 0; }
.pro-empty { text-align: center; color: var(--proTextMuted); font-size: .84rem; padding: 22px 10px; border: 1px dashed var(--proLine); border-radius: var(--proRadius); }

/* 焦點與選取 */
:focus-visible { outline: 2px solid var(--proCyan); outline-offset: 2px; }
::selection { background: rgba(0, 123, 255, .35); color: #fff; }

/* 捲軸（深色系） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--proBg); }
::-webkit-scrollbar-thumb { background: var(--proLine); border-radius: 5px; border: 2px solid var(--proBg); }
::-webkit-scrollbar-thumb:hover { background: var(--proTextMuted); }

/* 動效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 響應式 */
@media (max-width: 1020px) {
  .pro-cols { grid-template-columns: 1fr 290px; }
  .pro-left { display: none; }
}
@media (max-width: 860px) {
  .pro-cols { grid-template-columns: 1fr; }
  .pro-left, .pro-right { position: static; }
  .pro-left { display: flex; }
  .pro-art-grid { grid-template-columns: 1fr 1fr; }
  .pro-wall { grid-template-columns: 1fr 1fr; }
  .pro-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pro-search { display: none; }
  .pro-art-grid, .pro-wall, .pro-foot-grid, .pro-stat-strip { grid-template-columns: 1fr; }
  .pro-wrap { padding: 0 10px 34px; }
}

/* v2 visual direction: executive network */
body { background-image:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--proCyan) 10%,transparent),transparent 30%),radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--proGreen) 8%,transparent),transparent 25%); }
.pro-top { position:sticky; top:0; z-index:70; backdrop-filter:blur(18px); background:color-mix(in srgb,var(--proSurface) 86%,transparent); box-shadow:0 12px 38px rgba(13,47,59,.08); }
.pro-wrap { max-width:1420px; }
.pro-card { border-color:color-mix(in srgb,var(--proCyan) 12%,var(--proLine)); box-shadow:0 12px 30px rgba(16,56,67,.075); transition:transform .2s ease,box-shadow .2s ease; }
.pro-me { overflow:hidden; }
.pro-cover { min-height:92px; }
.pro-card:hover { box-shadow:0 17px 38px rgba(16,56,67,.11); }
.pro-form { border-top:4px solid var(--proCyan); }
.pro-btn-main { box-shadow:0 9px 22px color-mix(in srgb,var(--proCyan) 25%,transparent); }

/* ================= 廣告版位（AD-*）——原生預留、無素材自動塌陷 =================
   class 字根 pro-showcase（B2B 合作夥伴卡氣質）；贊助標示字樣「合作夥伴」。
   模板版位預設帶 hidden，loader 有素材才展開；preview 拿掉 hidden 顯示占位示意。 */
[hidden] { display: none !important; }

.pro-showcase { position: relative; display: block; margin: 0 0 16px; }
.pro-showcase-tag {
  display: inline-block; margin-bottom: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--proGreen);
  padding: 2px 9px; border-radius: var(--proRadius);
}
/* 占位示意框（橫幅／側欄類版位） */
.pro-showcase-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--proCyan) 42%, var(--proLine));
  border-radius: var(--proRadiusLg);
  background: color-mix(in srgb, var(--proCyan) 5%, var(--proSurface));
  color: var(--proTextMuted);
}
.pro-showcase-ph { font-size: .8rem; font-weight: 600; }
.pro-showcase-ph b { display: block; font-size: .92rem; color: var(--proCyan); letter-spacing: .05em; }
.pro-showcase--top .pro-showcase-body, .pro-showcase--end .pro-showcase-body { min-height: 88px; }
.pro-showcase--side-a .pro-showcase-body { min-height: 250px; }
.pro-showcase--side-b .pro-showcase-body { min-height: 380px; }

/* 原生：B2B 合作夥伴卡（feed／result 沿用 pro-card 皮膚＋標示） */
.pro-showcase--native { border-left: 3px solid var(--proGreen); }
.pro-showcase-partner { display: flex; gap: 12px; align-items: center; }
.pro-showcase-logo {
  width: 46px; height: 46px; border-radius: var(--proRadius); flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--proGrad);
}
.pro-showcase-co { flex: 1; min-width: 0; }
.pro-showcase-co b { display: block; color: var(--proText); font-size: .95rem; }
.pro-showcase-co small { color: var(--proTextMuted); font-size: .78rem; }
.pro-showcase-desc { margin: 11px 0 0; font-size: .86rem; color: var(--proText); }
.pro-showcase-hint {
  display: inline-block; margin-top: 10px;
  font-size: .66rem; font-weight: 600; letter-spacing: .05em;
  color: var(--proTextMuted); background: var(--proBg);
  border: 1px dashed var(--proLine); padding: 2px 9px; border-radius: var(--proRadius);
}
.pro-showcase-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 11px 16px; border-radius: var(--proRadius);
  background: var(--proGradBtn); color: #fff; font-weight: 700; font-size: .86rem;
}
/* 文章內原生（第 2 個 h2 前） */
.pro-showcase--article {
  margin: 1.3em 0; padding: 13px 15px; border-radius: var(--proRadius);
  border: 1px solid var(--proLine); border-left: 3px solid var(--proGreen);
  background: color-mix(in srgb, var(--proGreen) 7%, var(--proSurface));
}
.pro-showcase-lead { margin: 6px 0 0; font-size: .9rem; color: var(--proText); }

/* 行動 sticky（≤768px、高 54px、× 可關；坐落共用底部 tab 正上方，z-index 蓋過 shell 浮層） */
.pro-showcase--sticky { display: none; }
.pro-showcase-x {
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--proLine); border-radius: var(--proRadius);
  background: var(--proBg); color: var(--proTextMuted); font-size: 1.15rem; line-height: 1;
}
@media (max-width: 768px) {
  .pro-showcase--sticky {
    position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 1300;
    box-sizing: border-box; height: 54px; margin: 0; padding: 0 8px 0 12px;
    display: flex; align-items: center; gap: 10px;
    background: var(--proSurface); border: 1px solid var(--proLine);
    border-radius: var(--proRadiusLg); box-shadow: var(--proShadow);
  }
  .pro-showcase--sticky .pro-showcase-tag { margin: 0; }
  .pro-showcase--sticky .pro-showcase-ph { flex: 1; min-width: 0; text-align: left; font-size: .74rem; }
  .pro-showcase--sticky .pro-showcase-ph b { display: inline; margin-right: 6px; }
  .pro-showcase-chk:checked ~ .pro-showcase--sticky { display: none; }
}

/* ================= 手機廣告強化（≤768px 生效，桌機完全不變） =================
   側欄回流／result 大 CTA／sticky 迷你 CTA 條／插頁（預設關＋測試鈕）／CTA 全面加大。
   全部承接既有語意變數（pro*）與 pro-showcase 皮膚，雙模式自動跟隨；桌機零改動。 */

/* 側欄回流卡：桌機不出現（side 版位仍在左右欄），≤768 才於動態流內顯示 */
.pro-showcase--reflow { display: none; }
/* 整卡可點的伸展連結：桌機不存在，≤768 覆蓋整張原生卡 */
.pro-showcase-stretch { display: none; }
/* 迷你 CTA 條子元素預設隱藏，僅 ≤768 sticky 內啟用 */
.pro-showcase-ic { display: none; }

/* 插頁（AD-INTERSTITIAL，預設 hidden；由測試鈕／正式站 loader 控制） */
.pro-showcase-intr {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: color-mix(in srgb, #050b16 74%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pro-showcase-intr-card {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--proSurface); color: var(--proText);
  border: 1px solid var(--proLine); border-radius: var(--proRadiusLg);
  box-shadow: var(--proShadow); padding: 20px 18px 18px;
}
.pro-showcase-intr-img { height: 148px; border-radius: var(--proRadius); margin-bottom: 14px; background: var(--proGrad); }
.pro-showcase-intr-card .pro-showcase-tag { margin-bottom: 10px; }
.pro-showcase-intr-title { font-weight: 700; color: var(--proHeading); font-size: 1.12rem; margin: 0 0 6px; }
.pro-showcase-intr-text { color: var(--proTextMuted); font-size: .9rem; margin: 0 0 16px; }
.pro-showcase-intr-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; font-size: 15px; font-weight: 700; text-decoration: none;
  border-radius: var(--proRadius); background: var(--proGradBtn); color: #fff;
}
.pro-showcase-intr-skip {
  position: absolute; left: 14px; top: 12px; cursor: pointer; font-size: .72rem; font-weight: 700;
  color: var(--proTextMuted); background: var(--proBg);
  border: 1px solid var(--proLine); border-radius: var(--proRadius); padding: 3px 10px;
}
.pro-showcase-intr-x {
  position: absolute; right: 12px; top: 10px; cursor: pointer; width: 28px; height: 28px;
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  color: var(--proTextMuted); background: var(--proBg);
  border: 1px solid var(--proLine); border-radius: var(--proRadius);
}
/* 插頁測試鈕（示意用）：桌機完全不出現 */
.pro-showcase-intr-demo { display: none; }

@media (max-width: 768px) {
  /* 1) 側欄回流：桌機 side 版位手機收起，改由動態流內原生合作夥伴卡承接庫存 */
  .pro-showcase--side-a, .pro-showcase--side-b { display: none; }
  .pro-showcase--reflow { display: block; }

  /* 2) AD-RESULT 大 CTA：全寬、≥48px、字 ≥15px */
  .pro-showcase-cta { width: 100%; min-height: 48px; font-size: 15px; }

  /* 5) 原生卡整卡可點（result／feed／回流）＋ CTA 全面加大 */
  .pro-showcase--native { position: relative; }
  .pro-showcase-stretch { display: block; position: absolute; inset: 0; z-index: 1; }
  .pro-showcase--native .pro-showcase-cta { position: relative; z-index: 2; }

  /* 3) AD-STICKY 迷你 CTA 條：圖示＋文案＋CTA 鈕＋×（沿用固定底距 84px 與 z-index 1300） */
  .pro-showcase--sticky { height: auto; min-height: 56px; padding: 5px 8px 5px 10px; }
  .pro-showcase-ic { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--proRadius); background: var(--proGradSoft); font-size: 1rem; }
  .pro-showcase-msg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .pro-showcase-msg .pro-showcase-tag { margin: 0; align-self: flex-start; line-height: 1.25; }
  .pro-showcase-txt { font-size: .8rem; line-height: 1.25; font-weight: 700; color: var(--proText); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pro-showcase-go {
    flex: 0 0 auto; display: grid; place-items: center; min-height: 44px; padding: 0 14px; text-decoration: none;
    border-radius: var(--proRadius); background: var(--proGradBtn); color: #fff; font-weight: 700; font-size: 15px;
  }

  /* 4) 插頁測試鈕：固定左上、不擋內容、僅示意 */
  .pro-showcase-intr-demo {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    position: fixed; left: 8px; top: 72px; z-index: 1250;
    padding: 7px 12px; min-height: 34px; font-size: .74rem; font-weight: 700;
    color: #fff; background: var(--proGradBtn);
    border: none; border-radius: var(--proRadius); box-shadow: var(--proShadow);
  }
}