@charset "UTF-8";
/* ==========================================================================
   168彩网 cuicaitang.cn —— 明亮清爽 · 翡翠绿 · 大留白 · 卡片化
   全站唯一样式表，纯手写，无任何外部框架 / CDN 依赖
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量（:root）
   -------------------------------------------------------------------------- */
:root{
  /* 主色板 */
  --c-primary:        #0E7C66;
  --c-primary-dark:   #0A5E4D;
  --c-primary-light:  #14A085;
  --c-accent:         #34D399;
  --c-accent-soft:    #A7F3D0;
  --c-accent-pale:    #D1FAE5;

  /* 中性色 */
  --c-bg:             #F0FDF9;
  --c-bg-alt:         #E5F8F1;
  --c-card:           #FFFFFF;
  --c-text:           #103A31;
  --c-text-2:         #4B6F65;
  --c-text-3:         #8AAEA3;
  --c-border:         #D6EFE6;
  --c-border-soft:    #E9F7F1;

  /* 强调 / 状态色 */
  --c-warn:           #F59E0B;
  --c-warn-soft:      #FEF3C7;
  --c-hot:            #EF6C5A;
  --c-hot-soft:       #FDE4DF;
  --c-cold:           #5B9BD5;
  --c-cold-soft:      #E1EEF8;

  /* 圆角（本站为大圆角卡片风格） */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* 阴影层次（柔和、低对比、大留白） */
  --sh-xs: 0 1px 2px rgba(16,58,49,.05);
  --sh-sm: 0 4px 14px rgba(16,58,49,.06);
  --sh-md: 0 10px 30px rgba(16,58,49,.08);
  --sh-lg: 0 20px 48px rgba(16,58,49,.10);
  --sh-accent: 0 12px 28px rgba(14,124,102,.22);

  /* 布局 */
  --container: 1200px;
  --gap: 24px;
  --header-h: 74px;

  /* 过渡 */
  --t-fast: .18s cubic-bezier(.4,0,.2,1);
  --t-base: .28s cubic-bezier(.4,0,.2,1);
  --t-slow: .5s cubic-bezier(.4,0,.2,1);

  /* 字体气质：无衬线圆润 */
  --font-sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --font-num: "DIN Alternate","Helvetica Neue",Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{ margin:0 0 .6em; font-weight:700; line-height:1.35; color:var(--c-text); }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.3em; }
li{ margin-bottom:.4em; }
a{ color:var(--c-primary); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--c-primary-light); }
img{ max-width:100%; display:block; border:0; }
figure{ margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:1px solid var(--c-border); margin:32px 0; }
:focus-visible{ outline:3px solid var(--c-accent-soft); outline-offset:2px; border-radius:4px; }

/* 统一滚动条点缀 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--c-bg-alt); }
::-webkit-scrollbar-thumb{ background:var(--c-accent-soft); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--c-accent); }

/* --------------------------------------------------------------------------
   3. 基础排版与通用工具类
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:72px 0; }
.section--tight{ padding:48px 0; }
.section--alt{ background:linear-gradient(180deg,#FFFFFF 0%,var(--c-bg) 100%); }
.section-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.section-head .eyebrow{
  display:inline-block;
  padding:5px 16px;
  margin-bottom:14px;
  font-size:13px;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--c-primary);
  background:var(--c-accent-pale);
  border-radius:var(--r-pill);
}
.section-head h2{ font-size:32px; letter-spacing:-.01em; }
.section-head p{ color:var(--c-text-2); font-size:16px; margin-bottom:0; }
.text-center{ text-align:center; }
.text-muted{ color:var(--c-text-2); }
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.gap-sm{ gap:12px; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 装饰分割线 */
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--c-border) 20%,var(--c-border) 80%,transparent);
  margin:40px 0;
}
.divider-dot{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:36px 0;
}
.divider-dot i{ width:6px; height:6px; border-radius:50%; background:var(--c-accent-soft); }
.divider-dot i:nth-child(2){ width:10px; height:10px; background:var(--c-accent); }

/* --------------------------------------------------------------------------
   4. 顶部信息条
   -------------------------------------------------------------------------- */
.topbar{
  background:linear-gradient(90deg,var(--c-primary-dark) 0%,var(--c-primary) 55%,var(--c-primary-light) 100%);
  color:#EAFBF5;
  font-size:13px;
  padding:8px 0;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.topbar-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-item svg{ width:14px; height:14px; flex:0 0 auto; }
.topbar a{ color:#EAFBF5; }
.topbar a:hover{ color:#fff; text-decoration:underline; }
.topbar .dot-live{
  width:8px; height:8px; border-radius:50%; background:#7CF2C6;
  box-shadow:0 0 0 0 rgba(124,242,198,.7); animation:pulseLive 1.8s infinite;
}
@keyframes pulseLive{
  0%{ box-shadow:0 0 0 0 rgba(124,242,198,.7); }
  70%{ box-shadow:0 0 0 8px rgba(124,242,198,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,242,198,0); }
}

/* --------------------------------------------------------------------------
   5. Header / 主导航
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-border-soft);
  transition:box-shadow var(--t-base);
}
.site-header.is-stuck{ box-shadow:var(--sh-sm); }
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:28px;
}
.logo{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.logo-mark{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-accent) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-accent);
}
.logo-mark svg{ width:26px; height:26px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.2; }
.logo-name{ font-size:21px; font-weight:800; letter-spacing:.06em; color:var(--c-primary-dark); }
.logo-sub{ font-size:11px; letter-spacing:.22em; color:var(--c-text-3); text-transform:uppercase; }

.main-nav{ margin-left:8px; }
.main-nav ul{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.main-nav li{ margin:0; }
.main-nav a{
  display:inline-block;
  padding:9px 16px;
  border-radius:var(--r-pill);
  font-size:15px; font-weight:600; color:var(--c-text-2);
  transition:all var(--t-fast);
}
.main-nav a:hover{ color:var(--c-primary); background:var(--c-accent-pale); }
.main-nav a.is-active{ color:var(--c-primary-dark); background:var(--c-accent-pale); }

.header-tools{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.search-box{
  position:relative; display:flex; align-items:center;
}
.search-box input{
  width:190px; height:42px; padding:0 40px 0 16px;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-bg); font-size:14px;
  transition:all var(--t-base);
}
.search-box input:focus{
  width:230px; background:#fff; border-color:var(--c-accent);
  box-shadow:0 0 0 4px rgba(52,211,153,.15); outline:none;
}
.search-box button{
  position:absolute; right:6px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--c-primary);
}
.search-box button:hover{ background:var(--c-accent-pale); }
.search-box svg{ width:17px; height:17px; }

.hamburger{
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--c-bg);
}
.hamburger span{ display:block; width:20px; height:2px; background:var(--c-primary-dark); border-radius:2px; transition:all var(--t-base); }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 移动端抽屉 */
.mobile-drawer{
  position:fixed; top:0; right:0; width:300px; max-width:86vw; height:100%;
  background:#fff; box-shadow:var(--sh-lg); z-index:120;
  transform:translateX(105%); transition:transform var(--t-base);
  padding:26px 22px; overflow-y:auto;
}
.mobile-drawer.is-open{ transform:translateX(0); }
.mobile-drawer h4{ font-size:13px; letter-spacing:.16em; color:var(--c-text-3); text-transform:uppercase; margin:22px 0 10px; }
.mobile-drawer ul{ list-style:none; margin:0; padding:0; }
.mobile-drawer ul a{
  display:block; padding:12px 14px; border-radius:var(--r-sm);
  font-weight:600; color:var(--c-text);
}
.mobile-drawer ul a:hover{ background:var(--c-accent-pale); color:var(--c-primary); }
.drawer-close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:var(--c-bg); font-size:22px; line-height:1; color:var(--c-text-2); }
.overlay{
  position:fixed; inset:0; background:rgba(16,58,49,.4); z-index:110;
  opacity:0; visibility:hidden; transition:all var(--t-base);
}
.overlay.is-open{ opacity:1; visibility:visible; }

/* --------------------------------------------------------------------------
   6. 按钮
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px; border-radius:var(--r-pill);
  font-size:15px; font-weight:700; line-height:1;
  transition:all var(--t-base); border:1px solid transparent; white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-light) 100%);
  color:#fff; box-shadow:var(--sh-accent);
}
.btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(14,124,102,.3); }
.btn-ghost{
  background:#fff; color:var(--c-primary); border-color:var(--c-border);
}
.btn-ghost:hover{ color:var(--c-primary-dark); border-color:var(--c-accent); background:var(--c-accent-pale); transform:translateY(-2px); }
.btn-accent{
  background:var(--c-accent); color:#04372A; box-shadow:0 10px 24px rgba(52,211,153,.3);
}
.btn-accent:hover{ color:#04372A; transform:translateY(-2px); }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn-block{ width:100%; }

/* --------------------------------------------------------------------------
   7. Hero 大图横幅
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(52,211,153,.28), transparent 60%),
    radial-gradient(700px 320px at 4% 110%, rgba(14,124,102,.16), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,var(--c-bg) 100%);
  padding:70px 0 76px;
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--c-border);
  font-size:13px; font-weight:600; color:var(--c-primary); box-shadow:var(--sh-xs);
  margin-bottom:20px;
}
.hero-badge svg{ width:15px; height:15px; }
.hero h1{
  font-size:46px; line-height:1.24; letter-spacing:-.02em; margin-bottom:18px;
}
.hero h1 .hl{
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ font-size:17px; color:var(--c-text-2); max-width:520px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  border-top:1px solid var(--c-border); padding-top:26px; max-width:600px;
}
.hero-stat b{
  display:block; font-family:var(--font-num);
  font-size:26px; font-weight:800; color:var(--c-primary-dark); letter-spacing:-.02em;
}
.hero-stat span{ font-size:13px; color:var(--c-text-3); }

.hero-visual{ position:relative; }
.hero-visual .hero-img{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
  border:6px solid #fff;
}
.hero-visual .hero-img img{ width:100%; height:auto; }
.hero-float{
  position:absolute; left:-26px; bottom:34px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-md);
  padding:14px 18px; display:flex; align-items:center; gap:12px; border:1px solid var(--c-border-soft);
}
.hero-float .balls{ display:flex; gap:6px; }
.hero-float small{ display:block; font-size:12px; color:var(--c-text-3); }
.hero-float b{ font-size:15px; color:var(--c-primary-dark); }
.hero-chip{
  position:absolute; right:-14px; top:26px;
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--sh-md);
  padding:9px 16px; font-size:13px; font-weight:700; color:var(--c-primary);
  border:1px solid var(--c-border-soft);
}

/* --------------------------------------------------------------------------
   8. 公告条 / 跑马灯
   -------------------------------------------------------------------------- */
.notice-bar{
  background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));
  color:#EAFBF5; padding:12px 0; overflow:hidden;
}
.notice-bar .container{ display:flex; align-items:center; gap:16px; }
.notice-tag{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  background:rgba(255,255,255,.16); padding:5px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700;
}
.notice-tag svg{ width:15px; height:15px; }
.marquee{ flex:1 1 auto; overflow:hidden; position:relative; }
.marquee-track{ display:flex; gap:44px; white-space:nowrap; will-change:transform; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-size:14px; color:#D6F7EC; }
.marquee-track b{ color:#fff; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. 号码球
   -------------------------------------------------------------------------- */
.ball{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  font-family:var(--font-num); font-size:17px; font-weight:800; color:#fff;
  background:linear-gradient(145deg,var(--c-primary) 0%,var(--c-primary-light) 100%);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.14), 0 4px 10px rgba(14,124,102,.28);
}
.ball--sm{ width:30px; height:30px; font-size:13px; }
.ball--accent{ background:linear-gradient(145deg,var(--c-accent) 0%,#10B981 100%); color:#04372A; }
.ball--soft{ background:linear-gradient(145deg,#FFF3D6 0%,#FFE1A8 100%); color:#8A5A00; box-shadow:inset 0 -3px 6px rgba(0,0,0,.08),0 4px 10px rgba(245,158,11,.22); }
.ball--green{ background:linear-gradient(145deg,#D1FAE5 0%,#A7F3D0 100%); color:#0A5E4D; box-shadow:inset 0 -3px 6px rgba(0,0,0,.06),0 4px 10px rgba(52,211,153,.24); }
.ball--outline{ background:#fff; color:var(--c-text-3); box-shadow:inset 0 0 0 2px var(--c-border); }
.ball-row{ display:flex; gap:9px; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   10. 卡片 / 网格
   -------------------------------------------------------------------------- */
.card{
  background:var(--c-card); border:1px solid var(--c-border-soft);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-xs);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--c-accent-soft); }
.card--flat:hover{ transform:none; box-shadow:var(--sh-xs); }
.card--pad-lg{ padding:32px; }

.card-icon{
  width:54px; height:54px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-accent-pale); color:var(--c-primary); margin-bottom:16px;
}
.card-icon svg{ width:27px; height:27px; }
.card h3{ font-size:18px; margin-bottom:8px; }
.card p{ color:var(--c-text-2); font-size:14.5px; margin-bottom:14px; }
.card-link{ font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.card-link svg{ width:14px; height:14px; transition:transform var(--t-fast); }
.card-link:hover svg{ transform:translateX(4px); }

/* 玩法卡片（6 个） */
.play-card{ text-align:left; position:relative; overflow:hidden; }
.play-card::after{
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
  border-radius:50%; background:var(--c-accent-pale); opacity:.5; transition:transform var(--t-slow);
}
.play-card:hover::after{ transform:scale(1.5); }
.play-card .card-icon{ position:relative; z-index:1; }

/* 大图卡片（热门竞猜 4 个） */
.media-card{
  border-radius:var(--r-lg); overflow:hidden; background:#fff;
  border:1px solid var(--c-border-soft); box-shadow:var(--sh-xs);
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.media-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.media-card .thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.media-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.media-card:hover .thumb img{ transform:scale(1.06); }
.media-card .tag-float{
  position:absolute; left:14px; top:14px; padding:5px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); color:var(--c-primary-dark); font-size:12.5px; font-weight:700;
}
.media-card .body{ padding:20px; }
.media-card .body h3{ font-size:17px; margin-bottom:6px; }
.media-card .body p{ color:var(--c-text-2); font-size:14px; margin-bottom:12px; }
.media-meta{ display:flex; gap:16px; font-size:12.5px; color:var(--c-text-3); }

/* 资讯卡片 */
.news-card{ background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--c-border-soft); box-shadow:var(--sh-xs); transition:transform var(--t-base), box-shadow var(--t-base); display:flex; flex-direction:column; }
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.news-card .thumb{ overflow:hidden; aspect-ratio:16/10; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.news-card:hover .thumb img{ transform:scale(1.05); }
.news-card .body{ padding:20px; flex:1 1 auto; display:flex; flex-direction:column; }
.news-card h3{ font-size:17px; margin-bottom:8px; }
.news-card h3 a{ color:var(--c-text); }
.news-card h3 a:hover{ color:var(--c-primary); }
.news-card p{ font-size:14px; color:var(--c-text-2); flex:1 1 auto; }
.news-card .meta{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--c-text-3); padding-top:12px; border-top:1px dashed var(--c-border); }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  background:var(--c-accent-pale); color:var(--c-primary);
}
.pill--warn{ background:var(--c-warn-soft); color:#92580A; }
.pill--hot{ background:var(--c-hot-soft); color:#B03A28; }
.pill--cold{ background:var(--c-cold-soft); color:#255C8C; }
.pill--muted{ background:var(--c-bg-alt); color:var(--c-text-2); }

/* --------------------------------------------------------------------------
   11. 表格
   -------------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--c-border-soft); background:#fff; }
.table{ min-width:640px; font-size:14.5px; }
.table thead th{
  background:var(--c-bg-alt); color:var(--c-primary-dark);
  font-size:13.5px; font-weight:700; text-align:left; padding:14px 18px; white-space:nowrap;
}
.table tbody td{ padding:14px 18px; border-top:1px solid var(--c-border-soft); color:var(--c-text-2); vertical-align:middle; }
.table tbody tr{ transition:background var(--t-fast); }
.table tbody tr:hover{ background:var(--c-accent-pale); }
.table .td-strong{ color:var(--c-text); font-weight:700; }
.table--compact thead th,.table--compact tbody td{ padding:11px 14px; }

/* 号码分布表 */
.range-bar{
  display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden; background:var(--c-bg-alt); margin-top:6px;
}
.range-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--c-accent),var(--c-primary)); }

/* 冷热统计进度 */
.meter{ height:8px; border-radius:var(--r-pill); background:var(--c-bg-alt); overflow:hidden; min-width:90px; }
.meter i{ display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--c-primary),var(--c-accent)); }
.meter--hot i{ background:linear-gradient(90deg,#F59E0B,var(--c-hot)); }
.meter--cold i{ background:linear-gradient(90deg,#93C5FD,var(--c-cold)); }

/* --------------------------------------------------------------------------
   12. 排行榜
   -------------------------------------------------------------------------- */
.rank-list{ list-style:none; margin:0; padding:0; }
.rank-list li{
  display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:var(--r-md);
  transition:background var(--t-fast); margin-bottom:2px;
}
.rank-list li:hover{ background:var(--c-accent-pale); }
.rank-no{
  flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:14px; font-weight:800;
  background:var(--c-bg-alt); color:var(--c-text-2);
}
.rank-no--1{ background:linear-gradient(135deg,#FFE08A,#F5B301); color:#7A5200; }
.rank-no--2{ background:linear-gradient(135deg,#E7EEF3,#C3D2DC); color:#54606A; }
.rank-no--3{ background:linear-gradient(135deg,#FBD9B5,#E0A872); color:#7A4B1E; }
.rank-avatar{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
}
.rank-main{ flex:1 1 auto; min-width:0; }
.rank-main b{ display:block; font-size:15px; color:var(--c-text); }
.rank-main small{ font-size:12.5px; color:var(--c-text-3); }
.rank-value{ flex:0 0 auto; text-align:right; }
.rank-value b{ font-family:var(--font-num); color:var(--c-primary); font-size:16px; }
.rank-value small{ display:block; font-size:12px; color:var(--c-text-3); }

/* 数据概览小卡 */
.stat-card{
  background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-md);
  padding:20px; text-align:center; box-shadow:var(--sh-xs);
}
.stat-card b{ display:block; font-family:var(--font-num); font-size:30px; font-weight:800; color:var(--c-primary-dark); }
.stat-card span{ font-size:13px; color:var(--c-text-3); }

/* --------------------------------------------------------------------------
   13. 标签云
   -------------------------------------------------------------------------- */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:9px; }
.tag{
  display:inline-block; padding:7px 15px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--c-border); font-size:13.5px; color:var(--c-text-2);
  transition:all var(--t-fast);
}
.tag:hover{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); transform:translateY(-2px); }
.tag--accent{ background:var(--c-accent-pale); border-color:transparent; color:var(--c-primary); }

/* --------------------------------------------------------------------------
   14. 分页
   -------------------------------------------------------------------------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:38px; }
.pagination a,.pagination span{
  min-width:42px; height:42px; padding:0 14px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:var(--c-text-2);
  background:#fff; border:1px solid var(--c-border); transition:all var(--t-fast);
}
.pagination a:hover{ background:var(--c-accent-pale); color:var(--c-primary); border-color:var(--c-accent-soft); }
.pagination .is-current{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.pagination .is-disabled{ color:var(--c-text-3); opacity:.6; pointer-events:none; }

/* --------------------------------------------------------------------------
   15. 面包屑
   -------------------------------------------------------------------------- */
.breadcrumb{ padding:18px 0 0; font-size:13.5px; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.breadcrumb li{ margin:0; color:var(--c-text-3); }
.breadcrumb li::after{ content:"/"; margin-left:8px; color:var(--c-border); }
.breadcrumb li:last-child::after{ display:none; }
.breadcrumb a{ color:var(--c-text-2); }
.breadcrumb a:hover{ color:var(--c-primary); }
.breadcrumb [aria-current="page"]{ color:var(--c-primary); font-weight:600; }

/* 栏目页头 */
.page-hero{
  position:relative; margin-top:16px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary-light));
  color:#fff; padding:52px 48px;
}
.page-hero::before{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  border-radius:50%; background:rgba(255,255,255,.12);
}
.page-hero::after{
  content:""; position:absolute; right:60px; bottom:-90px; width:200px; height:200px;
  border-radius:50%; background:rgba(255,255,255,.08);
}
.page-hero > *{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size:36px; margin-bottom:10px; }
.page-hero p{ color:#D6F7EC; max-width:620px; margin-bottom:18px; }
.page-hero .hero-crumbs{ font-size:13px; color:#B8ECDB; }
.page-hero .hero-crumbs a{ color:#D6F7EC; }

/* 文章头 */
.article-hero{ border-radius:var(--r-lg); overflow:hidden; margin:26px 0 30px; box-shadow:var(--sh-sm); }
.article-hero img{ width:100%; height:auto; }
.article-head h1{ font-size:34px; line-height:1.32; margin:14px 0 16px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:var(--c-text-3); align-items:center; }
.article-meta svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }

/* --------------------------------------------------------------------------
   16. 时间轴
   -------------------------------------------------------------------------- */
.timeline{ position:relative; margin:0; padding:8px 0 8px 42px; list-style:none; }
.timeline::before{
  content:""; position:absolute; left:13px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--c-accent),var(--c-accent-soft));
}
.timeline li{ position:relative; padding-bottom:30px; margin:0; }
.timeline li::before{
  content:""; position:absolute; left:-36px; top:4px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--c-accent); box-shadow:0 0 0 4px rgba(52,211,153,.16);
}
.timeline time{ display:block; font-family:var(--font-num); font-size:15px; font-weight:800; color:var(--c-primary); margin-bottom:4px; }
.timeline h3{ font-size:17px; margin-bottom:6px; }
.timeline p{ color:var(--c-text-2); font-size:14.5px; margin-bottom:0; }

/* --------------------------------------------------------------------------
   17. FAQ 折叠
   -------------------------------------------------------------------------- */
.faq-list{ max-width:860px; margin:0 auto; }
.faq-item{
  background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-md);
  margin-bottom:12px; overflow:hidden; transition:box-shadow var(--t-base), border-color var(--t-base);
}
.faq-item.is-open{ box-shadow:var(--sh-sm); border-color:var(--c-accent-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:18px 22px; font-size:16px; font-weight:700; color:var(--c-text);
}
.faq-q .q-mark{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-accent-pale); color:var(--c-primary); font-family:var(--font-num); font-size:14px; font-weight:800;
}
.faq-q .arrow{ margin-left:auto; flex:0 0 auto; width:18px; height:18px; color:var(--c-text-3); transition:transform var(--t-base); }
.faq-item.is-open .faq-q .arrow{ transform:rotate(180deg); color:var(--c-primary); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height var(--t-base);
}
.faq-a p{ padding:0 22px 20px 62px; margin:0; color:var(--c-text-2); font-size:14.5px; }

/* --------------------------------------------------------------------------
   18. 表单
   -------------------------------------------------------------------------- */
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:13.5px; font-weight:600; color:var(--c-text-2); margin-bottom:7px; }
.input,.select,.textarea{
  width:100%; padding:12px 15px; border:1px solid var(--c-border); border-radius:var(--r-sm);
  background:#fff; font-size:14.5px; transition:all var(--t-base);
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(52,211,153,.15); outline:none;
}
.textarea{ min-height:110px; resize:vertical; }
.form-hint{ font-size:12.5px; color:var(--c-text-3); margin-top:6px; }
.form-msg{ font-size:13.5px; margin-top:10px; min-height:20px; }
.form-msg.is-ok{ color:var(--c-primary); }
.form-msg.is-err{ color:var(--c-hot); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* 筛选器 */
.filter-bar{
  background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--sh-xs); display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
}
.filter-field{ flex:1 1 180px; }
.filter-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--c-text-3); margin-bottom:6px; }
.seg{ display:inline-flex; background:var(--c-bg); border-radius:var(--r-pill); padding:4px; gap:3px; flex-wrap:wrap; }
.seg button{
  padding:7px 16px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:var(--c-text-2);
  transition:all var(--t-fast);
}
.seg button:hover{ color:var(--c-primary); }
.seg button.is-active{ background:#fff; color:var(--c-primary-dark); box-shadow:var(--sh-xs); }

/* --------------------------------------------------------------------------
   19. 侧边栏
   -------------------------------------------------------------------------- */
.layout-side{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; }
.sidebar{ position:sticky; top:calc(var(--header-h) + 18px); display:flex; flex-direction:column; gap:22px; }
.widget{
  background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--sh-xs);
}
.widget h3{
  font-size:16px; margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px dashed var(--c-border); display:flex; align-items:center; gap:8px;
}
.widget h3 svg{ width:17px; height:17px; color:var(--c-primary); }
.widget-list{ list-style:none; margin:0; padding:0; counter-reset:wl; }
.widget-list li{ margin:0; }
.widget-list a{
  display:flex; gap:11px; padding:9px 0; font-size:14px; color:var(--c-text-2);
  border-bottom:1px dashed var(--c-border-soft); line-height:1.55;
}
.widget-list li:last-child a{ border-bottom:0; }
.widget-list a::before{
  counter-increment:wl; content:counter(wl);
  flex:0 0 auto; width:20px; height:20px; border-radius:6px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:12px; font-weight:800;
  background:var(--c-bg-alt); color:var(--c-text-2);
}
.widget-list li:nth-child(-n+3) a::before{ background:var(--c-accent-pale); color:var(--c-primary); }
.widget-list a:hover{ color:var(--c-primary); }
.widget-cta{ background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary-light)); color:#fff; }
.widget-cta h3{ color:#fff; border-bottom-color:rgba(255,255,255,.24); }
.widget-cta h3 svg{ color:#A7F3D0; }
.widget-cta p{ color:#D6F7EC; font-size:14px; }

.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list a{ display:block; padding:7px 0 7px 14px; font-size:14px; color:var(--c-text-2); border-left:2px solid var(--c-border); }
.toc-list a:hover,.toc-list a.is-active{ color:var(--c-primary); border-left-color:var(--c-accent); background:var(--c-accent-pale); }

/* 上下篇 */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0; }
.post-nav a{
  background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-md); padding:18px 20px;
  transition:all var(--t-base);
}
.post-nav a:hover{ border-color:var(--c-accent-soft); box-shadow:var(--sh-sm); transform:translateY(-3px); }
.post-nav small{ display:block; font-size:12.5px; color:var(--c-text-3); margin-bottom:5px; }
.post-nav b{ font-size:15px; color:var(--c-text); }
.post-nav .next{ text-align:right; }

/* --------------------------------------------------------------------------
   20. 正文内容
   -------------------------------------------------------------------------- */
.article-body{ font-size:16.5px; line-height:1.9; color:#1C4A3F; }
.article-body h2{
  font-size:24px; margin:38px 0 16px; padding-left:16px;
  border-left:5px solid var(--c-accent); border-radius:2px;
}
.article-body h3{ font-size:19px; margin:26px 0 12px; color:var(--c-primary-dark); }
.article-body p{ margin-bottom:18px; }
.article-body ul,.article-body ol{ margin:0 0 18px; padding-left:1.5em; }
.article-body li{ margin-bottom:8px; }
.article-body ul li::marker{ color:var(--c-accent); }
.article-body ol li::marker{ color:var(--c-primary); font-weight:700; }
.article-body blockquote{
  margin:24px 0; padding:18px 24px; background:var(--c-accent-pale);
  border-left:4px solid var(--c-primary); border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--c-primary-dark); font-style:normal;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body figure{ margin:26px 0; }
.article-body figure img{ width:100%; border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.article-body figcaption{ text-align:center; font-size:13px; color:var(--c-text-3); margin-top:10px; }
.article-body .conclusion{
  margin:30px 0; padding:24px 26px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FFFFFF,var(--c-accent-pale));
  border:1px solid var(--c-accent-soft); box-shadow:var(--sh-xs);
}
.article-body .conclusion h3{ margin-top:0; }
.article-body .conclusion p:last-child{ margin-bottom:0; }

/* 分享按钮组 */
.share-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:30px 0; padding:18px 0; border-top:1px dashed var(--c-border); border-bottom:1px dashed var(--c-border); }
.share-row .label{ font-size:13.5px; color:var(--c-text-3); }
.share-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--c-bg); color:var(--c-text-2); transition:all var(--t-base);
}
.share-btn svg{ width:18px; height:18px; }
.share-btn:hover{ background:var(--c-primary); color:#fff; transform:translateY(-3px); }

/* 评论区 */
.comment-list{ list-style:none; margin:0 0 22px; padding:0; }
.comment-list li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px dashed var(--c-border-soft); margin:0; }
.comment-avatar{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
}
.comment-main b{ font-size:14.5px; }
.comment-main time{ font-size:12.5px; color:var(--c-text-3); margin-left:10px; }
.comment-main p{ margin:6px 0 0; font-size:14.5px; color:var(--c-text-2); }

/* --------------------------------------------------------------------------
   21. 页脚
   -------------------------------------------------------------------------- */
.site-footer{
  background:linear-gradient(180deg,#0C3F35 0%,#082A23 100%);
  color:#B8D6CC; margin-top:64px; font-size:14px;
}
.footer-top{ padding:56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:38px; }
.footer-brand .logo-name{ color:#fff; }
.footer-brand .logo-sub{ color:#6FA695; }
.footer-brand p{ color:#94B8AC; margin:16px 0 18px; font-size:13.5px; line-height:1.8; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#CFEAE0; transition:all var(--t-base);
}
.footer-social a:hover{ background:var(--c-accent); color:#04372A; transform:translateY(-3px); }
.footer-social svg{ width:18px; height:18px; }
.site-footer h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:9px; }
.footer-links a{ color:#94B8AC; font-size:13.5px; }
.footer-links a:hover{ color:var(--c-accent); }
.footer-contact{ list-style:none; margin:0; padding:0; }
.footer-contact li{ display:flex; gap:10px; margin-bottom:11px; color:#94B8AC; font-size:13.5px; }
.footer-contact svg{ width:16px; height:16px; flex:0 0 auto; margin-top:3px; color:var(--c-accent); }
.footer-sitemap{
  border-top:1px solid rgba(255,255,255,.1); padding:22px 0;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
}
.footer-sitemap span{ font-size:13px; color:#6FA695; }
.footer-sitemap a{ font-size:13px; color:#94B8AC; }
.footer-sitemap a:hover{ color:var(--c-accent); }
.footer-links-row{
  border-top:1px solid rgba(255,255,255,.1); padding:18px 0;
  font-size:13px; color:#6FA695; display:flex; flex-wrap:wrap; gap:8px 16px;
}
.footer-links-row a{ color:#8FB4A8; }
.footer-links-row a:hover{ color:var(--c-accent); }
.footer-disclaimer{
  background:rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0; font-size:12.5px; color:#7FA396; line-height:1.85;
}
.footer-disclaimer strong{ color:#B8D6CC; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:20px 0;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:#6FA695;
}
.footer-bottom a{ color:#8FB4A8; }

/* --------------------------------------------------------------------------
   22. 浮动层
   -------------------------------------------------------------------------- */
.to-top{
  position:fixed; right:26px; bottom:96px; z-index:60;
  width:48px; height:48px; border-radius:var(--r-md);
  background:#fff; color:var(--c-primary); box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px); transition:all var(--t-base);
  border:1px solid var(--c-border-soft);
}
.to-top.is-show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--c-primary); color:#fff; }
.to-top svg{ width:20px; height:20px; }
.float-service{
  position:fixed; right:26px; bottom:32px; z-index:60;
}
.float-service .fs-btn{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  color:#fff; box-shadow:var(--sh-accent); display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-base);
}
.float-service .fs-btn:hover{ transform:scale(1.06); }
.float-service .fs-btn svg{ width:25px; height:25px; }
.fs-panel{
  position:absolute; right:0; bottom:64px; width:250px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:18px; border:1px solid var(--c-border-soft);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--t-base);
}
.fs-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.fs-panel h4{ font-size:15px; margin-bottom:4px; }
.fs-panel p{ font-size:13px; color:var(--c-text-2); margin-bottom:14px; }

/* 提示 Toast */
.toast{
  position:fixed; left:50%; bottom:40px; transform:translate(-50%,24px);
  background:var(--c-text); color:#fff; padding:12px 22px; border-radius:var(--r-pill);
  font-size:14px; box-shadow:var(--sh-lg); z-index:300;
  opacity:0; visibility:hidden; transition:all var(--t-base);
}
.toast.is-show{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* --------------------------------------------------------------------------
   23. 滚动动画
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; }
.reveal-d4{ transition-delay:.32s; }

@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.float-anim{ animation:floatY 4.4s ease-in-out infinite; }

/* 柱状图（纯 CSS） */
.bar-chart{ display:flex; align-items:flex-end; gap:14px; height:220px; padding:16px 4px 0; }
.bar-chart .bar-col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar-chart .bar{
  width:100%; max-width:46px; border-radius:var(--r-sm) var(--r-sm) 6px 6px;
  background:linear-gradient(180deg,var(--c-accent),var(--c-primary));
  transition:height 1s cubic-bezier(.4,0,.2,1); box-shadow:inset 0 -4px 10px rgba(0,0,0,.06);
}
.bar-chart .bar-col span{ font-size:12px; color:var(--c-text-3); }
.bar-chart .bar-col b{ font-family:var(--font-num); font-size:13px; color:var(--c-primary-dark); }

/* 环形图（纯 CSS） */
.donut{
  width:170px; height:170px; border-radius:50%; margin:0 auto 18px; position:relative;
  background:conic-gradient(var(--c-primary) 0 42%, var(--c-accent) 42% 68%, #93C5FD 68% 86%, #F5B301 86% 100%);
}
.donut::after{
  content:""; position:absolute; inset:26px; border-radius:50%; background:#fff;
}
.donut-legend{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.donut-legend li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--c-text-2); margin:0; }
.donut-legend i{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }

/* 流程步骤 */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step{ position:relative; background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--sh-xs); }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; right:20px; top:18px;
  font-family:var(--font-num); font-size:34px; font-weight:800; color:var(--c-accent-pale);
}
.step h3{ font-size:16px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--c-text-2); margin:0; }

/* 团队卡片 */
.member{ text-align:center; background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-xs); transition:transform var(--t-base), box-shadow var(--t-base); }
.member:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.member .avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  box-shadow:0 8px 20px rgba(14,124,102,.24);
}
.member h3{ font-size:16.5px; margin-bottom:2px; }
.member .role{ font-size:13px; color:var(--c-primary); font-weight:600; margin-bottom:8px; }
.member p{ font-size:13.5px; color:var(--c-text-2); margin:0; }

/* 荣誉徽章 */
.badge-card{ text-align:center; padding:24px 16px; background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-md); box-shadow:var(--sh-xs); }
.badge-card .badge-ico{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-accent-pale); color:var(--c-primary);
}
.badge-card .badge-ico svg{ width:28px; height:28px; }
.badge-card b{ display:block; font-size:14.5px; margin-bottom:4px; }
.badge-card span{ font-size:12.5px; color:var(--c-text-3); }

/* 优势 / 承诺 */
.adv-item{ display:flex; gap:16px; align-items:flex-start; }
.adv-item .card-icon{ flex:0 0 auto; margin-bottom:0; }
.adv-item h3{ font-size:16.5px; margin-bottom:6px; }
.adv-item p{ font-size:14px; margin:0; }

/* 口碑评价 */
.quote-card{ background:#fff; border:1px solid var(--c-border-soft); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-xs); position:relative; }
.quote-card .quote-mark{ font-size:44px; line-height:1; color:var(--c-accent-soft); font-family:Georgia,serif; position:absolute; right:22px; top:14px; }
.quote-card p{ font-size:14.5px; color:var(--c-text-2); margin-bottom:16px; }
.quote-user{ display:flex; align-items:center; gap:12px; }
.quote-user .rank-avatar{ width:42px; height:42px; }
.quote-user b{ font-size:14.5px; display:block; }
.quote-user small{ font-size:12.5px; color:var(--c-text-3); }
.stars{ color:#F5B301; letter-spacing:2px; font-size:13px; }

/* 地图占位 */
.map-placeholder{
  height:250px; border-radius:var(--r-lg); border:1px dashed var(--c-border);
  background:repeating-linear-gradient(45deg,var(--c-bg),var(--c-bg) 12px,#EAF9F3 12px,#EAF9F3 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--c-text-3);
}
.map-placeholder svg{ width:34px; height:34px; color:var(--c-primary); opacity:.7; }

/* CTA 区块 */
.cta-block{
  border-radius:var(--r-xl); padding:52px 46px; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--c-primary-dark) 0%,var(--c-primary) 55%,var(--c-primary-light) 100%);
  position:relative; overflow:hidden;
}
.cta-block::after{
  content:""; position:absolute; left:-70px; bottom:-90px; width:260px; height:260px;
  border-radius:50%; background:rgba(255,255,255,.1);
}
.cta-block > *{ position:relative; z-index:1; }
.cta-block h2{ color:#fff; font-size:30px; }
.cta-block p{ color:#CFF1E5; max-width:560px; margin:0 auto 26px; }
.cta-block .hero-actions{ justify-content:center; margin-bottom:0; }

/* 筛选结果为空 */
.empty-state{ text-align:center; padding:56px 20px; color:var(--c-text-3); }
.empty-state svg{ width:44px; height:44px; margin:0 auto 14px; color:var(--c-border); display:block; }

/* --------------------------------------------------------------------------
   24. 响应式：≥1200px 基准 / 992 / 768 / 480
   -------------------------------------------------------------------------- */
@media (max-width:1200px){
  .hero h1{ font-size:40px; }
  .layout-side{ grid-template-columns:minmax(0,1fr) 300px; gap:26px; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:28px; }
}

@media (max-width:992px){
  :root{ --container:100%; }
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .search-box{ display:none; }
  .hero{ padding:52px 0 60px; }
  .hero-grid{ grid-template-columns:1fr; gap:38px; }
  .hero h1{ font-size:36px; }
  .hero-lead{ max-width:none; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .layout-side{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .section{ padding:56px 0; }
  .page-hero{ padding:42px 34px; }
  .page-hero h1{ font-size:30px; }
  .section-head h2{ font-size:27px; }
  .article-head h1{ font-size:29px; }
  .article-body{ font-size:16px; }
  .hero-stats{ grid-template-columns:repeat(4,1fr); }
  .cta-block{ padding:44px 30px; }
  .cta-block h2{ font-size:25px; }
  .bar-chart{ height:190px; }
}

@media (max-width:768px){
  body{ font-size:15.5px; }
  .container{ padding:0 18px; }
  .section{ padding:44px 0; }
  .section-head{ margin-bottom:32px; }
  .section-head h2{ font-size:24px; }
  .topbar .container{ flex-direction:column; align-items:flex-start; gap:4px; }
  .topbar-right{ gap:12px; }
  .header-inner{ gap:14px; }
  .logo-mark{ width:40px; height:40px; border-radius:12px; }
  .logo-name{ font-size:19px; }
  .hero{ padding:40px 0 46px; }
  .hero h1{ font-size:30px; }
  .hero-lead{ font-size:15.5px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .hero-float{ left:8px; bottom:12px; padding:10px 14px; }
  .hero-chip{ right:8px; top:12px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .grid-4--keep{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-top{ padding:40px 0 30px; }
  .form-grid{ grid-template-columns:1fr; }
  .post-nav{ grid-template-columns:1fr; }
  .post-nav .next{ text-align:left; }
  .page-hero{ padding:34px 22px; border-radius:var(--r-lg); }
  .page-hero h1{ font-size:25px; }
  .page-hero p{ font-size:14.5px; }
  .filter-bar{ padding:16px; gap:12px; }
  .filter-field{ flex:1 1 100%; }
  .seg{ width:100%; }
  .seg button{ flex:1 1 auto; }
  .table{ min-width:560px; font-size:14px; }
  .article-head h1{ font-size:25px; }
  .article-meta{ gap:12px; }
  .article-body{ font-size:15.5px; line-height:1.85; }
  .article-body h2{ font-size:21px; margin:30px 0 14px; }
  .article-body h3{ font-size:17.5px; }
  .article-body .conclusion{ padding:20px; }
  .cta-block{ padding:36px 22px; }
  .cta-block h2{ font-size:22px; }
  .donut{ width:150px; height:150px; }
  .bar-chart{ gap:8px; height:170px; }
  .to-top{ right:16px; bottom:88px; width:44px; height:44px; }
  .float-service{ right:16px; bottom:24px; }
  .float-service .fs-btn{ width:48px; height:48px; }
  .toast{ width:calc(100% - 36px); text-align:center; }
  .widget{ padding:18px; }
  .card{ padding:22px; }
}

@media (max-width:480px){
  .container{ padding:0 14px; }
  .section{ padding:34px 0; }
  .topbar{ font-size:12px; }
  .topbar-left,.topbar-right{ gap:10px; }
  .header-inner{ height:64px; }
  .logo-sub{ display:none; }
  .hero h1{ font-size:26px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stat b{ font-size:22px; }
  .section-head h2{ font-size:21px; }
  .page-hero h1{ font-size:22px; }
  .page-hero{ padding:28px 18px; }
  .article-head h1{ font-size:22px; }
  .card{ padding:18px; border-radius:var(--r-md); }
  .card-icon{ width:46px; height:46px; border-radius:14px; }
  .card-icon svg{ width:23px; height:23px; }
  .media-card .body,.news-card .body{ padding:16px; }
  .btn{ padding:12px 22px; font-size:14px; }
  .ball{ width:36px; height:36px; font-size:15px; }
  .ball--sm{ width:26px; height:26px; font-size:12px; }
  .pagination a,.pagination span{ min-width:38px; height:38px; padding:0 11px; font-size:13px; }
  .timeline{ padding-left:34px; }
  .faq-q{ padding:15px 16px; font-size:15px; }
  .faq-a p{ padding:0 16px 16px 16px; }
  .bar-chart{ gap:6px; height:150px; }
  .bar-chart .bar{ max-width:30px; }
  .donut{ width:130px; height:130px; }
  .rank-avatar{ width:34px; height:34px; font-size:13px; }
  .member .avatar{ width:70px; height:70px; font-size:23px; }
  .quote-card{ padding:20px; }
}

/* 打印样式 */
@media print{
  .topbar,.site-header,.site-footer,.to-top,.float-service,.cta-block,.share-row{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.widget{ box-shadow:none; border-color:#ddd; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}