 
<panel/apps/wordpress/wordpress/data/apple-theme.css
 
<panel/apps/wordpress/wordpress/data/apple-theme.css

 
<panel/apps/wordpress/wordpress/data/apple-theme.css


/* ============================================================


   Apple / Jobs 风格主题覆盖层  v2.0（全面丰富版）


   设计语言：乔布斯极简 × 艺术升学高级感


   - 保留全部功能与 DOM 结构，仅覆盖视觉


   - 背景：细腻多层渐变 + 品牌光晕 + 极淡网格质感


   - 主色：Apple 蓝 #0071e3 / 近黑 #1d1d1f / 浅灰 #f5f5f7


   - 卡片：白底 + 渐变描边 + 分层阴影 + 悬浮抬升


   - 组件：导航发光、芯片对勾、统计大数字渐变、表格渐变表头


   - 动效：页面渐入、卡片过渡、按钮按压反馈


   加载顺序：本文件必须位于 app.css 之后


   ============================================================ */


/* ---------- 设计 Tokens ---------- */


:root {


  --bg: #f5f5f7;


  --panel: #ffffff;


  --text: #1d1d1f;


  --muted: #6e6e73;


  --line: #e8e8ed;


  --brand: #0071e3;


  --brand-2: #0a84ff;


  --brand-soft: rgba(0,113,227,.08);


  --soft: #f5f5f7;


  --ok: #34c759;


  --warn: #0071e3;


  --danger: #ff3b30;


  --shadow: 0 24px 70px rgba(0,0,0,.10);


  --shadow-soft: 0 4px 22px rgba(0,0,0,.05);


  --radius: 22px;


}


/* ---------- 全局氛围：多层渐变 + 光晕 + 极淡网格 ---------- */


body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background: #fff !important;
  color: #1d1d1f;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: themeFadeIn .5s ease both;
}


@keyframes themeFadeIn {


  from { opacity: 0; transform: translateY(6px); }


  to { opacity: 1; transform: none; }


}


.wrap { max-width: 1160px; padding-top: 34px; }


::selection { background: rgba(0,113,227,.18); }


/* ---------- 大标题排版 ---------- */


h1 {


  font-size: 52px;


  font-weight: 700;


  letter-spacing: -.03em;


  color: #1d1d1f;


  line-height: 1.08;


}


h2 { color: #1d1d1f; letter-spacing: -.02em; }


h3 { color: #1d1d1f; letter-spacing: -.01em; }


p { color: #6e6e73; }


/* ---------- Hero：白色大卡片 + 渐变光晕 + 装饰圆环 ---------- */


.hero {


  background:


    radial-gradient(520px 240px at 88% -20%, rgba(0,113,227,.10), transparent 60%),


    radial-gradient(360px 200px at -5% 110%, rgba(0,113,227,.05), transparent 60%),


    #ffffff !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 30px !important;


  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 50px rgba(0,0,0,.07) !important;


  padding: 42px 42px 38px !important;


  margin-bottom: 26px !important;


  position: relative;


  overflow: hidden;


}


.hero::before {


  content: "";


  position: absolute;


  top: -90px;


  right: -70px;


  width: 240px;


  height: 240px;


  border-radius: 50%;


  border: 1.5px solid rgba(0,113,227,.14);


  pointer-events: none;


}


.hero::after {


  content: "";


  position: absolute;


  top: -40px;


  right: -20px;


  width: 130px;


  height: 130px;


  border-radius: 50%;


  border: 1px solid rgba(0,113,227,.10);


  pointer-events: none;


}


.hero > *, .hero .hero-actions, .hero div { position: relative; z-index: 1; }


.eyebrow {


  display: inline-flex;


  align-items: center;


  gap: 7px;


  background: rgba(0,113,227,.06) !important;


  color: #0071e3 !important;


  border: 1px solid rgba(0,113,227,.14) !important;


  border-radius: 999px !important;


  font-weight: 700 !important;


  letter-spacing: .08em;


  font-size: 12px !important;


  padding: 8px 16px !important;


}


.eyebrow::before {


  content: "";


  width: 6px;


  height: 6px;


  border-radius: 50%;


  background: linear-gradient(135deg, #0071e3, #0a84ff);


  box-shadow: 0 0 8px rgba(0,113,227,.6);


}


/* ---------- 卡片：白底 + 渐变描边 + 分层阴影 ---------- */


.card {


  background: linear-gradient(180deg, #ffffff, #fdfdff) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 24px !important;


  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 34px rgba(0,0,0,.05) !important;


  padding: 28px !important;


  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;


}


.card:hover {


  transform: translateY(-3px);


  border-color: rgba(0,113,227,.16) !important;


  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 20px 56px rgba(0,0,0,.09), 0 0 0 1px rgba(0,113,227,.04) !important;


}


.card-head h2 {


  font-size: 22px;


  font-weight: 700;


  letter-spacing: -.02em;


}


.card-head {


  position: relative;


  padding-left: 14px;


}


.card-head::before {


  content: "";


  position: absolute;


  left: 0;


  top: 4px;


  bottom: 4px;


  width: 4px;


  border-radius: 4px;


  background: linear-gradient(180deg, #0071e3, rgba(0,113,227,.15));


  opacity: .85;


}


/* ---------- 按钮：Apple 胶囊 + 渐变 + 按压反馈 ---------- */


.btn {


  border-radius: 12px !important;


  padding: 12px 28px !important;


  font-size: 15px !important;


  font-weight: 600 !important;


  background: #1d1d1f !important;


  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;


  letter-spacing: .01em;


  transition: all .22s ease;


}


.btn::after { display: none; }


.btn:hover {


  background: #2d2d2f !important;


  box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;


}


.btn:active {


  background: #000 !important;


  box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;


}


.btn.secondary {


  background: #ffffff !important;


  color: #1d1d1f !important;


  border: 1px solid rgba(0,0,0,.12) !important;


  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;


}


.btn.secondary:hover { background: #f5f5f7 !important; border-color: rgba(0,0,0,.16) !important; }


.btn.secondary::after { display: none; }


.btn.ghost {


  background: rgba(0,113,227,.06) !important;


  color: #0071e3 !important;


  border: 1px solid rgba(0,113,227,.16) !important;


  box-shadow: none !important;


}


.btn.ghost:hover { background: rgba(0,113,227,.12) !important; }


.btn.ghost::after { display: none; }


.btn.save-primary { font-weight: 700 !important; }


.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none !important; transform: none !important; }


/* ---------- 选择芯片：白底灰边，激活 Apple 蓝渐变 + 对勾 ---------- */


.choice-chip {


  border-radius: 16px !important;


  border: 1px solid rgba(0,0,0,.10) !important;


  background: #ffffff !important;


  color: #1d1d1f !important;


  font-weight: 600 !important;


  font-size: 15px !important;


  box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;


  min-height: 62px !important;


  transition: all .22s ease;


  position: relative;


}


.choice-chip:hover {


  border-color: #0071e3;


  background: rgba(0,113,227,.04) !important;


  transform: translateY(-1px);


  box-shadow: 0 6px 16px rgba(0,113,227,.10) !important;


}


.choice-chip.active {


  border-color: #0071e3 !important;


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  color: #ffffff !important;


  box-shadow: 0 0 0 4px rgba(0,113,227,.14), 0 10px 26px rgba(0,113,227,.26) !important;


}


.choice-chip.active::after {


  content: "✓";


  position: absolute;


  top: 8px;


  right: 14px;


  font-size: 13px;


  font-weight: 800;


  color: rgba(255,255,255,.92);


  opacity: 0;


  animation: themeChipCheck .3s ease forwards .1s;


}


@keyframes themeChipCheck {


  to { opacity: 1; }


}


.dual-sub-choice-chip {


  border-radius: 14px !important;


  border: 1px solid rgba(0,0,0,.10) !important;


  background: #ffffff !important;


  font-weight: 600 !important;


  transition: all .2s ease;


}


.dual-sub-choice-chip.active {


  border-color: #0071e3 !important;


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  color: #fff !important;


  box-shadow: 0 0 0 3px rgba(0,113,227,.15) !important;


}


/* ---------- 徽章 / 标签：浅蓝胶囊 ---------- */


.badge, .tag, .pill {


  background: rgba(0,113,227,.06) !important;


  color: #0071e3 !important;


  border: 1px solid rgba(0,113,227,.12) !important;


  font-weight: 600 !important;


  border-radius: 999px !important;


  padding: 6px 14px !important;


  font-size: 12px !important;


}


/* ---------- 表单：浅灰输入框 + 聚焦光晕 ---------- */


input, textarea, select {


  background: #ffffff !important;


  border: 1px solid rgba(0,0,0,.12) !important;


  border-radius: 12px !important;


  padding: 12px 16px !important;


  font-size: 14px !important;


  color: #1d1d1f !important;


  transition: border-color .2s, box-shadow .2s !important;


  border-radius: 14px !important;


  padding: 14px 18px !important;


  font-size: 15px !important;


  color: #1d1d1f !important;


  transition: all .22s ease;


}


input:hover, textarea:hover, select:hover {


  border-color: rgba(0,0,0,.2) !important;


}


input:focus, textarea:focus, select:focus {


  background: #ffffff !important;


  border-color: #0071e3 !important;


  box-shadow: 0 0 0 3px rgba(0,113,227,.12) !important;


  outline: none !important;


  box-shadow: 0 0 0 4px rgba(0,113,227,.14), 0 4px 14px rgba(0,113,227,.08) !important;


}


input::placeholder, textarea::placeholder { color: #aeaeb2 !important; }


select.select-filled, select.select-touched {


  background: rgba(0,113,227,.06) !important;


  border-color: rgba(0,113,227,.24) !important;


  color: #0071e3 !important;


}


input[readonly], input[readonly].locked-input {


  background: #fafafa !important;


  color: #86868b !important;


  font-weight: 600;


}


.field-display {


  background: linear-gradient(180deg, #ffffff, #f5f5f7) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 14px !important;


  color: #1d1d1f !important;


  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);


}


label {


  color: #6e6e73 !important;


  font-weight: 600 !important;


  font-size: 12px !important;


  letter-spacing: .01em;


  margin-bottom: 6px !important;


  display: block !important;


}


/* ---------- 统计数字：大数字渐变 ---------- */


.stat .v {


  font-size: 44px !important;


  font-weight: 700 !important;


  letter-spacing: -.04em !important;


  background: linear-gradient(180deg, #1d1d1f, #4a4a4f);


  -webkit-background-clip: text;


  background-clip: text;


  -webkit-text-fill-color: transparent;


  color: #1d1d1f;


}


.stat .k { color: #6e6e73 !important; font-weight: 500 !important; }


.stat {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 20px !important;


  box-shadow: 0 2px 10px rgba(0,0,0,.03) !important;


  padding: 20px 22px !important;


  transition: transform .25s ease, box-shadow .25s ease;


}


.stat:hover {


  transform: translateY(-2px);


  box-shadow: 0 10px 30px rgba(0,0,0,.07) !important;


}


/* ---------- 导航卡片：序号圆徽 + 激活发光 ---------- */


.nav-card .card {


  min-height: 100px !important;


  border-radius: 20px !important;


  padding: 18px 20px !important;


  position: relative;


  overflow: hidden;


}


.nav-card .card h3 { font-weight: 700 !important; font-size: 16px !important; }


.nav-card .mini {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  min-width: 26px;


  height: 26px;


  padding: 0 8px !important;


  border-radius: 999px;


  background: #f5f5f7 !important;


  color: #6e6e73 !important;


  font-weight: 700 !important;


  font-size: 12px !important;


}


.nav-card:hover .card {


  transform: translateY(-3px);


  border-color: rgba(0,113,227,.20) !important;


  box-shadow: 0 12px 36px rgba(0,0,0,.08) !important;


}


.nav-card.active .card {


  border-color: #0071e3 !important;


  background:


    radial-gradient(120px 60px at 90% -10%, rgba(0,113,227,.14), transparent 70%),


    linear-gradient(180deg, rgba(0,113,227,.05), #ffffff) !important;


  box-shadow: 0 0 0 3px rgba(0,113,227,.12), 0 12px 32px rgba(0,113,227,.12) !important;


}


.nav-card.active .mini {


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  color: #ffffff !important;


  box-shadow: 0 4px 12px rgba(0,113,227,.35);


}


.nav-card.active .card h3 { color: #0071e3 !important; }


.nav-current-badge {


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  box-shadow: 0 4px 14px rgba(0,113,227,.32) !important;


  border-radius: 999px !important;


  font-weight: 700 !important;


  font-size: 11px !important;


  letter-spacing: .04em;


}


/* ---------- 浅色信息卡（Apple 浅色卡片） ---------- */


.locked-client-chip,


.student-core-chip,


.sidebar-result-box strong {


  background: linear-gradient(180deg, #ffffff, #f5f5f7) !important;


  color: #1d1d1f !important;


  border: 1px solid rgba(0,0,0,.08) !important;


  border-radius: 16px !important;


  box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;


}


.student-core-chip span { color: #6e6e73 !important; opacity: 1 !important; font-weight: 500 !important; }


.student-core-chip strong { font-weight: 600 !important; color: #1d1d1f !important; }


.sidebar-result-box strong {


  border-radius: 14px !important;


  font-weight: 600 !important;


  color: #1d1d1f !important;


  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;


}


/* ---------- 结果高亮区 ---------- */


.result-highlight {


  background:


    radial-gradient(300px 120px at 90% -20%, rgba(0,113,227,.10), transparent 60%),


    linear-gradient(180deg, #f5f5f7, #ffffff) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 22px !important;


}


.result-highlight .big {


  font-size: 34px !important;


  font-weight: 700 !important;


  letter-spacing: -.03em !important;


}


.result-summary-item {


  background: #ffffff !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 16px !important;


  transition: transform .22s ease, box-shadow .22s ease;


}


.result-summary-item:hover {


  transform: translateY(-2px);


  box-shadow: 0 10px 28px rgba(0,0,0,.07) !important;


}


/* ---------- 评分相关 ---------- */


.score-box, .summary-box, .mini-panel {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.05) !important;


  border-radius: 20px !important;


}


.score-group {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 24px !important;


  transition: transform .25s ease, box-shadow .25s ease;


}


.score-group:hover {


  transform: translateY(-2px);


  box-shadow: 0 12px 34px rgba(0,0,0,.06) !important;


}


.culture-overview-panel {


  border: 1px solid rgba(0,0,0,.06) !important;


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border-radius: 24px !important;


}


.culture-context-item {


  background: #ffffff !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  box-shadow: none !important;


  border-radius: 16px !important;


  transition: transform .22s ease;


}


.culture-context-item:hover { transform: translateY(-2px); }


.culture-overview-note {


  background: rgba(0,113,227,.06) !important;


  border: 1px solid rgba(0,113,227,.12) !important;


  color: #00428c !important;


  border-radius: 14px !important;


}


.score-value, .score-chip {


  background: linear-gradient(180deg, rgba(0,113,227,.10), rgba(0,113,227,.06)) !important;


  color: #0071e3 !important;


  font-weight: 700 !important;


  border-radius: 999px !important;


}


/* 等级滑块单元格 */


.certificate-level-card, .strength-stage-card {


  background: #ffffff !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 18px !important;


  box-shadow: none !important;


}


.certificate-level-cell, .strength-stage-cell {


  background: #f5f5f7 !important;


  border: 1px solid transparent !important;


  border-radius: 12px !important;


  color: #6e6e73 !important;


  font-weight: 600 !important;


  transition: all .2s ease;


}


.certificate-level-cell.is-filled, .strength-stage-cell.is-filled {


  background: rgba(0,113,227,.10) !important;


  color: #0071e3 !important;


  border-color: rgba(0,113,227,.18) !important;


}


.certificate-level-cell.is-active, .strength-stage-cell.is-active {


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  color: #fff !important;


  box-shadow: 0 0 0 3px rgba(0,113,227,.16), 0 6px 16px rgba(0,113,227,.22) !important;


}


.certificate-level-slider, .strength-stage-slider { accent-color: #0071e3 !important; }


.certificate-level-value, .strength-stage-value { color: #0071e3 !important; font-weight: 700 !important; }


/* ---------- 表格：渐变表头 + 斑马纹 ---------- */


.table-shell {


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 20px !important;


  background: #ffffff !important;


  overflow: hidden;


}


th {


  background: linear-gradient(180deg, #fafafa, #f2f2f4) !important;


  color: #3a3a3c !important;


  font-weight: 700 !important;


  border-bottom: 1px solid rgba(0,0,0,.06) !important;


  letter-spacing: .02em;


}


td { border-bottom: 1px solid rgba(0,0,0,.05) !important; }


tbody tr:nth-child(even) td { background: #fafafa !important; }


tr:hover td { background: rgba(0,113,227,.04) !important; }


/* ---------- 状态提示 ---------- */


.status {


  background: linear-gradient(180deg, #ffffff, #f5f5f7) !important;


  border: 1px solid rgba(0,0,0,.05) !important;


  border-radius: 14px !important;


  font-weight: 500 !important;


}


.status-ok { color: #34c759 !important; font-weight: 700 !important; }


.status-error { color: #ff3b30 !important; font-weight: 700 !important; }


/* ---------- 空状态 ---------- */


.empty-state {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1.5px dashed rgba(0,0,0,.14) !important;


  border-radius: 20px !important;


  color: #6e6e73 !important;


}


/* ---------- 页面编号徽标：毛玻璃 + 渐变数字 ---------- */


.page-number-badge {


  background: rgba(255,255,255,.72) !important;


  backdrop-filter: saturate(180%) blur(20px);


  -webkit-backdrop-filter: saturate(180%) blur(20px);


  border: 1px solid rgba(0,0,0,.06) !important;


  color: #0071e3 !important;


  font-weight: 800 !important;


  border-radius: 10px !important;


  letter-spacing: .02em;


  box-shadow: 0 4px 16px rgba(0,0,0,.06);


}


/* ---------- 推荐案例卡片 ---------- */


.recommend-case-card {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  border-radius: 20px !important;


  transition: transform .25s ease, box-shadow .25s ease;


}


.recommend-case-card:hover {


  transform: translateY(-3px);


  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;


}


.recommend-case-score-badge {


  background: linear-gradient(180deg, #0071e3, #0066d6) !important;


  color: #fff !important;


  border-radius: 14px !important;


  box-shadow: 0 6px 16px rgba(0,113,227,.26) !important;


  font-weight: 700 !important;


}


.recommend-case-score-value { font-weight: 800 !important; }


/* ---------- 学校卡片 ---------- */


.school-card {


  border-radius: 20px !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  background: linear-gradient(180deg, #ffffff, #fcfcfe) !important;


  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 32px rgba(0,0,0,.05) !important;


  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;


}


.school-card:hover {


  transform: translateY(-3px);


  border-color: rgba(0,113,227,.18) !important;


  box-shadow: 0 4px 8px rgba(0,0,0,.04), 0 22px 56px rgba(0,0,0,.09) !important;


}


.school-card-major-name {


  color: #0071e3 !important;


  font-weight: 700 !important;


}


.school-card-major-box {


  background: rgba(0,113,227,.05) !important;


  border: 1px solid rgba(0,113,227,.10) !important;


  border-radius: 14px !important;


}


/* ---------- 指标行 / 迷你面板 ---------- */


.metric-row {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.05) !important;


  border-radius: 14px !important;


  transition: transform .2s ease;


}


.metric-row:hover { transform: translateX(2px); }


.sidebar-result-box {


  background: #fafafa !important;


  border: 1px solid rgba(0,0,0,.05) !important;


  border-radius: 16px !important;


}


/* ---------- 分区标题 / 分隔 ---------- */


.section-head h2 { font-size: 30px !important; font-weight: 700 !important; }


.section-divider {


  border-top-color: rgba(0,0,0,.06) !important;


  background: linear-gradient(90deg, rgba(0,113,227,.25), transparent 60%) !important;


  height: 1px !important;


  border-top: none !important;


}


.form-section { border-top-color: rgba(0,0,0,.06) !important; }


.form-section-title h3 {


  font-size: 19px !important;


  font-weight: 700 !important;


  display: inline-flex;


  align-items: center;


  gap: 8px;


}


.form-section-title h3::before {


  content: "";


  width: 5px;


  height: 16px;


  border-radius: 4px;


  background: linear-gradient(180deg, #0071e3, rgba(0,113,227,.2));


}


/* ---------- 双目标分组 ---------- */


.dual-goal-group {


  background: linear-gradient(180deg, #ffffff, #fafafa) !important;


  border: 1px solid rgba(0,0,0,.05) !important;


  border-radius: 20px !important;


  box-shadow: none !important;


}


/* ---------- 上传拖拽区 ---------- */


.upload-dropzone {


  border: 1.5px dashed rgba(0,113,227,.30) !important;


  border-radius: 18px !important;


  background: rgba(0,113,227,.03) !important;


  transition: all .22s ease;


}


.upload-dropzone:hover {


  border-color: #0071e3 !important;


  background: rgba(0,113,227,.06) !important;


}


/* ---------- 时间线 / 计划 ---------- */


.timeline-item {


  transition: transform .22s ease, box-shadow .22s ease;


}


.timeline-item:hover {


  transform: translateX(3px);


}


.plan-header {


  background:


    radial-gradient(320px 130px at 90% -20%, rgba(0,113,227,.12), transparent 60%),


    linear-gradient(180deg, #ffffff, #fafafa) !important;


  border-radius: 22px !important;


  border: 1px solid rgba(0,0,0,.06) !important;


}


/* ---------- 管理后台数据入口卡片 ---------- */


.data-hub-card {


  border-radius: 20px !important;


  border: 1px solid rgba(0,0,0,.06) !important;


  background: linear-gradient(180deg, #ffffff, #fcfcfe) !important;


  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;


}


.data-hub-card:hover {


  transform: translateY(-3px);


  border-color: rgba(0,113,227,.18) !important;


  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;


}


.data-hub-tags .tag {


  background: rgba(0,113,227,.05) !important;


  border-color: rgba(0,113,227,.10) !important;


}


/* ---------- 滚动条 ---------- */


::-webkit-scrollbar { width: 9px; height: 9px; }


::-webkit-scrollbar-thumb {


  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12));


  border-radius: 9px;


  border: 2px solid transparent;


  background-clip: padding-box;


}


::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.28); }


::-webkit-scrollbar-track { background: transparent; }


/* ---------- 移动端适配 ---------- */


@media (max-width: 768px) {


  h1 { font-size: 36px; }


  .hero { padding: 28px 22px !important; }


  .card { padding: 22px !important; border-radius: 20px !important; }


  .stat .v { font-size: 34px !important; }


  .wrap { padding-top: 24px; }


}


/* ===== 统一顶部导航（00-05）—— 与 index.html 完全一致 ===== */

.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,.06); }

.site-nav .nav-inner { max-width:1200px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; }

.site-nav .nav-logo { font-size:20px; font-weight:700; letter-spacing:-.02em; color:#1d1d1f; text-decoration:none; }

.site-nav .nav-links { display:flex; gap:32px; align-items:center; }

.site-nav .nav-step { font-size:12px; color:#6e6e73; text-decoration:none; display:flex; align-items:center; gap:4px; transition:color .2s; white-space:nowrap; }

.site-nav .nav-step span { font-size:10px; font-weight:700; color:#0071e3; }

.site-nav .nav-step:hover { color:#1d1d1f; }

.site-nav .nav-step.active { color:#1d1d1f; font-weight:600; }

.site-nav .nav-step.active span { color:#0071e3; }

@media (max-width:768px) {

  .site-nav .nav-inner { padding:12px 16px; flex-wrap:wrap; gap:8px; }

  .site-nav .nav-links { gap:12px; flex-wrap:wrap; }

  .site-nav .nav-step { font-size:11px; }

}


/* ===== 统一 Hero 区（00-05）—— 与 index.html 完全一致 ===== */

.hero-page { min-height:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 32px 80px; position:relative; }

.hero-page .hero-label { font-size:13px; font-weight:600; letter-spacing:.15em; color:#0071e3; text-transform:uppercase; margin-bottom:20px; }

.hero-page .hero-title { font-size:72px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:24px; color:#1d1d1f; }

.hero-page .hero-subtitle { font-size:22px; color:#86868b; font-weight:400; max-width:600px; line-height:1.5; }

@media (max-width:768px) {

  .hero-page { padding:100px 20px 60px; }

  .hero-page .hero-title { font-size:40px; }

  .hero-page .hero-subtitle { font-size:18px; }

}

ubuntu@VM-0-4-ubuntu:~ubuntu@VM-0-4-ubuntu:~

/* ===== 蓝色标题条：baoziwen.com 极简风格 ===== */
.hero.compact {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  padding: 24px 32px !important;
  margin-bottom: 24px !important;
  overflow: hidden;
}
.hero.compact::before,
.hero.compact::after {
  display: none !important;
}
.hero.compact .eyebrow {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}