/*
 * V1.78.40 #944 · 前台公共 partial 的样式（原为视图内联 <style>，违反红线）
 *
 * 被抽取的四个 partial：
 *   contact_view.php（联系我们）· leads_form.php（留资表单）· _detail_view.php（详情页）· _list_view.php（列表页）
 *
 * 为什么必须抽出来：
 *   ① 视图内联 <style> 是明令禁止的红线 —— 改 tokens.css 对这些页面毫无作用，换色后立刻割裂；
 *   ② 内联样式无法被浏览器缓存，每个页面都要重复下载同一段 CSS；
 *   ③ 四个 partial 里大量硬编码色（#0f172a / #3b82f6 / #fbbf24 …），与令牌体系脱节。
 *
 * 动态主题值怎么处理：
 *   模板主题色（$theme['primary'] / $theme['grad'] / $palette[...]）无法写死在 CSS 里，
 *   改为在容器元素上用 **CSS 自定义属性**注入（style="--tp:#2563eb;--tg:linear-gradient(…)"），
 *   本文件一律用 var(--tp, 兜底色) 读取。注意：元素 style **属性**不等于 <style> 块，不违规。
 *
 * 颜色口径：全部走 tokens.css 变量（--text / --muted / --border / --card / --primary …），
 *   白字只出现在渐变底（hero / banner / 主按钮）这类反白场景。
 */

/* ========== 公共主题变量（由各 partial 在根容器注入） ==========
   --tp  主题主色      --tg  主题渐变
   --cl-* 联系我们页调色板（bg/grad/card/text/muted/border/accent） */
.part-site {
  --tp: var(--primary, #2563eb);
  --tg: linear-gradient(135deg, var(--primary, #2563eb) 0%, #1e40af 100%);
  --cl-bg:     var(--bg, #f6f8fb);
  --cl-grad:   var(--tg);
  --cl-card:   var(--card, #ffffff);
  --cl-text:   var(--text, #1e293b);
  --cl-muted:  var(--muted, #64748b);
  --cl-border: var(--border, #e2e8f0);
  --cl-accent: var(--primary, #2563eb);
}

/* ==================== 联系我们（contact_view） ==================== */
.cl-wrap { min-height:100vh; background:var(--cl-bg); color:var(--cl-text); }
.cl-hero { padding:80px 20px 50px; text-align:center; background:var(--cl-grad); position:relative; overflow:hidden; }
.cl-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0%, transparent 50%); }
.cl-hero h1 { font-size:42px; color:#fff; margin:0 0 8px; position:relative; }
.cl-hero p  { color:rgba(255,255,255,.92); font-size:16px; margin:0; position:relative; }
.cl-hero .meta { display:inline-block; padding:4px 12px; background:rgba(255,255,255,.18); border-radius:99px; font-size:12px; margin-top:18px; position:relative; backdrop-filter:blur(8px); }

.cl-grid { max-width:1100px; margin:0 auto; padding:50px 20px; display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:start; }
@media (max-width: 900px) { .cl-grid { grid-template-columns:1fr; } }

.cl-side { display:flex; flex-direction:column; gap:14px; }
.cl-card { background:var(--cl-card); border:1px solid var(--cl-border); border-radius:14px; padding:22px; display:flex; align-items:flex-start; gap:14px; transition:all .2s; box-shadow:0 4px 16px rgba(15,23,42,.04); }
.cl-card:hover { transform:translateY(-2px); border-color:var(--cl-accent); }
.cl-card .ic { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.cl-card .lt { font-size:12px; color:var(--cl-muted); margin-bottom:4px; }
.cl-card .vl { font-size:18px; font-weight:600; color:var(--cl-text); word-break:break-all; }
.cl-card .vl a { color:inherit; text-decoration:none; }

.cl-qr-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 480px) { .cl-qr-row { grid-template-columns:1fr; } }

.cl-form { background:var(--cl-card); border:1px solid var(--cl-border); border-radius:14px; padding:28px 26px; box-shadow:0 6px 24px rgba(15,23,42,.05); }
.cl-form h2 { margin:0 0 6px; font-size:22px; color:var(--cl-text); }
.cl-form .sub { color:var(--cl-muted); font-size:14px; margin:0 0 18px; }
.cl-form .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.cl-form .row-full { grid-column:1/-1; }
@media (max-width:600px) { .cl-form .row { grid-template-columns:1fr; } }
.cl-form label { display:block; font-size:12px; color:var(--cl-muted); margin-bottom:5px; }
.cl-form label .req { color:var(--accent, #d97706); }
.cl-form input, .cl-form textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--cl-border); background:var(--card, #fff); color:var(--cl-text); border-radius:8px; font-size:14px; font-family:inherit; }
.cl-form input:focus, .cl-form textarea:focus { outline:none; border-color:var(--cl-accent); box-shadow:0 0 0 3px rgba(59,130,246,.18); background:var(--card, #fff); }
.cl-form button { width:100%; padding:13px; border:0; border-radius:9px; background:var(--cl-grad); color:#fff; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px; transition:opacity .2s; }
.cl-form button:hover { opacity:.92; }

.cl-commit { display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; font-size:12px; color:var(--cl-muted); }
.cl-commit .it { display:flex; align-items:center; gap:5px; }

.cl-flash { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; }
/* 深红/深绿压在淡色底上才看得清（浅红浅绿对比度过低，见 V1.74.x 审计 UI） */
.cl-flash.err { background:var(--danger-soft, #fef2f2); color:var(--danger, #b91c1c); border:1px solid rgba(239,68,68,.35); }
.cl-flash.ok  { background:var(--success-soft, #ecfdf5); color:#15803d; border:1px solid rgba(16,185,129,.35); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ==================== 留资表单（leads_form） ==================== */
.lf-wrap { margin:32px 0 0; padding:40px 22px 0; background:transparent; color:var(--text, #1e293b); }
/* hero 主题：渐变底上的反白场景 */
.lf-wrap.lf-hero { margin:0; padding:56px 22px 0; background:var(--hero-grad, var(--tg)); color:#ffffff; }
.lf-card {
  max-width:640px; margin:0 auto;
  background:var(--card, #ffffff);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px; padding:28px 28px 24px;
  box-shadow:0 8px 28px rgba(15,23,42,.06);
  color:var(--text, #1e293b);
}
.lf-wrap.lf-hero .lf-card { border-color:transparent; box-shadow:0 14px 40px rgba(0,0,0,.18); }
.lf-head { margin-bottom:20px; text-align:center; }
.lf-head h2 { font-size:20px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }
.lf-head h2 .em { margin-right:6px; }
.lf-head p { margin:0; font-size:13px; color:var(--muted, #64748b); }
.lf-form .field { margin-bottom:14px; }
.lf-form .field:last-of-type { margin-bottom:18px; }
.lf-form label { display:block; font-size:12.5px; color:var(--muted, #64748b); margin-bottom:6px; font-weight:500; }
.lf-form label em { color:var(--danger, #ef4444); font-style:normal; margin-left:2px; }
.lf-form input, .lf-form textarea {
  width:100%; box-sizing:border-box; padding:11px 12px;
  border:1px solid var(--border, #e2e8f0); background:var(--card, #ffffff);
  color:var(--text, #1e293b); border-radius:8px; font-size:14px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.lf-form input::placeholder, .lf-form textarea::placeholder { color:var(--muted-2, #94a3b8); }
.lf-form input:focus, .lf-form textarea:focus {
  outline:none; border-color:var(--primary, #2563eb);
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.lf-form textarea { resize:vertical; min-height:76px; line-height:1.5; }
.lf-form .btn-submit {
  display:block; width:100%; padding:12px 18px; border:0; border-radius:9px;
  background:linear-gradient(135deg, var(--primary, #2563eb) 0%, #1e40af 100%);
  color:#ffffff; font-size:15px; font-weight:600; cursor:pointer;
  transition:opacity .15s, transform .05s; letter-spacing:.02em;
}
.lf-form .btn-submit:hover { opacity:.94; }
.lf-form .btn-submit:active { transform:translateY(1px); }
.lf-tos { margin:10px 0 0; text-align:center; font-size:11.5px; color:var(--muted-2, #94a3b8); }
.lf-tos a { color:var(--muted, #64748b); text-decoration:none; }
.lf-tos a:hover { color:var(--primary, #2563eb); text-decoration:underline; }
/* 蜜罐容器：移出视口但保留在 DOM（不用 display:none，部分浏览器会跳过提交） */
.lf-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
@media (max-width: 600px) {
  .lf-card { padding:22px 18px 18px; }
  .lf-head h2 { font-size:18px; }
}

/* ==================== 详情页（_detail_view） ==================== */
.dv-shell { background:var(--card, #fff); min-height:60vh; }
.dv-body  { max-width:780px; margin:0 auto; padding:50px 20px 30px; }
.dv-two-col { max-width:1100px; margin:0 auto; padding:50px 20px 30px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }
@media (max-width:920px){ .dv-two-col { grid-template-columns:1fr; } }
.dv-team-main { min-width:0; }
.dv-eyebrow { display:inline-block; padding:4px 12px; background:color-mix(in srgb, var(--tp) 8%, transparent); color:var(--tp); border-radius:99px; font-size:12px; font-weight:500; margin-bottom:14px; }
.dv-title  { font-size:30px; line-height:1.35; margin:0 0 12px; color:var(--text, #1e293b); font-weight:700; }
.dv-meta   { display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px; padding-bottom:18px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.dv-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--muted-2); display:inline-block; }

.dv-content { font-size:15.5px; line-height:1.85; color:#334155; }
.dv-content h1, .dv-content h2, .dv-content h3 { color:var(--text, #1e293b); margin:28px 0 10px; }
.dv-content p  { margin:0 0 14px; }
.dv-content img { max-width:100%; border-radius:8px; margin:14px 0; }
.dv-content blockquote { border-left:4px solid var(--tp); padding:10px 16px; background:var(--surface3, #fafbfd); margin:14px 0; color:var(--muted); }

.dv-faq-q { font-size:24px; font-weight:700; color:var(--text, #1e293b); margin:0 0 16px; line-height:1.4; }
.dv-faq-a { background:color-mix(in srgb, var(--tp) 3%, transparent); border:1px solid color-mix(in srgb, var(--tp) 19%, transparent); border-radius:14px; padding:22px 24px; color:var(--text, #1e293b); font-size:15.5px; line-height:1.85; }

.dv-team-banner { display:flex; gap:24px; align-items:center; padding:32px; background:var(--tg); border-radius:18px; color:#fff; margin-bottom:24px; }
.dv-team-banner .ava { width:110px; height:110px; border-radius:22px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:46px; overflow:hidden; flex-shrink:0; }
.dv-team-banner .ava img { width:100%; height:100%; object-fit:cover; }
.dv-team-banner h1 { font-size:30px; margin:0 0 6px; color:#fff; }
.dv-team-banner .role { background:rgba(255,255,255,.22); padding:4px 12px; border-radius:99px; font-size:12.5px; display:inline-block; margin-bottom:8px; backdrop-filter:blur(6px); }
.dv-team-banner .desc { color:rgba(255,255,255,.92); font-size:14.5px; line-height:1.7; }
.dv-team-spec { margin:24px 0; padding:14px 20px; border-radius:12px; background:color-mix(in srgb, var(--tp) 5%, transparent); border:1px solid color-mix(in srgb, var(--tp) 15%, transparent); color:var(--text, #1e293b); font-size:14.5px; line-height:1.75; }

.dv-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:780px; margin:24px auto 0; padding:0 20px; }
.dv-nav .it { background:var(--card, #fff); border:1px solid var(--border); border-radius:12px; padding:14px 18px; text-decoration:none; color:var(--text, #1e293b); transition:.2s; display:block; }
.dv-nav .it:hover { border-color:var(--tp); transform:translateY(-2px); }
.dv-nav .it .lab { font-size:12px; color:var(--muted); margin-bottom:4px; }
.dv-nav .it .ttl { font-size:14px; font-weight:600; line-height:1.5; }
.dv-nav .it.disabled { opacity:.5; pointer-events:none; }

.dv-related { max-width:1100px; margin:40px auto 60px; padding:0 20px; }
.dv-related h2 { font-size:20px; margin:0 0 16px; color:var(--text, #1e293b); padding-bottom:10px; border-bottom:2px solid color-mix(in srgb, var(--tp) 25%, transparent); display:inline-block; }
.dv-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.dv-related .card { background:var(--card, #fff); border:1px solid var(--border); border-radius:12px; padding:14px 16px; transition:.2s; }
.dv-related .card:hover { border-color:var(--tp); transform:translateY(-2px); }
.dv-related .card a { color:var(--text, #1e293b); text-decoration:none; font-size:14.5px; font-weight:500; line-height:1.55; }
.dv-related .card .it-meta { color:var(--muted); font-size:12px; margin-top:6px; }

/* ==================== 列表页（_list_view） ==================== */
.sr-shell * { box-sizing:border-box; }
.sr-shell { background:var(--card, #fff); }
.sr-hero  { background:var(--hero-grad, var(--tg)); color:#fff; padding:50px 20px 36px; text-align:center; }
.sr-hero h1 { font-size:32px; margin:0 0 6px; color:#fff; }
.sr-hero p  { margin:0; color:rgba(255,255,255,.92); }
.sr-meta { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; max-width:1100px; margin:24px auto 14px; padding:0 20px; }
.sr-meta h1 { margin:0; font-size:24px; color:var(--text, #1e293b); }
.sr-meta .sub { color:var(--muted); font-size:13px; margin:4px 0 0; }
.sr-meta .search { display:flex; gap:6px; }
.sr-meta .search input { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:13px; min-width:200px; background:var(--card,#fff); color:var(--text,#1e293b); }
.sr-meta .search button { padding:8px 16px; border:0; background:var(--tp); color:#fff; border-radius:8px; font-size:13px; cursor:pointer; }

.sr-cats { max-width:1100px; margin:0 auto 16px; padding:0 20px; display:flex; gap:8px; flex-wrap:wrap; }
.sr-cats a { padding:6px 14px; border-radius:99px; background:var(--surface2); color:var(--muted); text-decoration:none; font-size:13px; transition:.2s; }
.sr-cats a:hover { background:var(--tp); color:#fff; }
.sr-cats a.active { background:var(--tp); color:#fff; }

.sr-two-col { max-width:1100px; margin:0 auto 32px; padding:0 20px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }
@media (max-width:920px){ .sr-two-col { grid-template-columns:1fr; } }
.sr-main { min-width:0; }

.sr-grid { max-width:1100px; margin:0 auto 32px; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.sr-card { background:var(--card, #fff); border:1px solid var(--border); border-radius:14px; padding:20px 22px; transition:all .25s; position:relative; overflow:hidden; }
.sr-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(15,23,42,.08); border-color:var(--tp); }
.sr-card .tag { display:inline-block; padding:3px 10px; background:color-mix(in srgb, var(--tp) 8%, transparent); color:var(--tp); border-radius:99px; font-size:11px; font-weight:500; margin-bottom:8px; }
.sr-card h3 { margin:0 0 6px; font-size:17px; line-height:1.5; color:var(--text, #1e293b); }
.sr-card h3 a { color:inherit; text-decoration:none; }
.sr-card .excerpt { color:var(--muted); font-size:13.5px; line-height:1.65; margin:0 0 10px; min-height:42px; }
.sr-card .meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted-2); border-top:1px solid var(--border); padding-top:8px; }
.sr-card .meta .tag-inline { background:var(--surface2); padding:2px 8px; border-radius:6px; color:var(--muted); margin-right:4px; }

.sr-empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); }
.sr-empty .em { font-size:48px; margin-bottom:12px; opacity:.5; }
.sr-empty h3 { margin:0 0 6px; color:var(--text, #1e293b); }
.sr-empty p  { margin:0; font-size:13px; }

.sr-pager { max-width:1100px; margin:0 auto 40px; padding:0 20px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.sr-pager a, .sr-pager span { padding:7px 12px; border-radius:6px; background:var(--card,#fff); border:1px solid var(--border); text-decoration:none; color:#334155; font-size:13px; min-width:36px; text-align:center; }
.sr-pager a:hover { background:var(--tp); color:#fff; border-color:var(--tp); }
.sr-pager .active { background:var(--tp); color:#fff; border-color:var(--tp); }
.sr-pager .gap { background:transparent; border:0; color:var(--muted-2); }
/* V1.78.40 #944 · 边界页（首页/上一页已在第 1 页）：必须有视觉上的「不可点」，
   否则点了还在本页，用户以为分页坏了 */
.sr-pager .off { opacity:.45; pointer-events:none; }
.sr-pager .total { background:transparent; border:0; color:var(--muted-2,#64748b); }