/* ============================================================
   广东省21地市入户政策查询站 - 统一样式表
   设计原则：移动优先、语义化、CSS 变量管理主题、无外部依赖（可离线）
   配色：沿用政策汇总表的分类色（人才蓝/稳定居住绿/投靠黄/企业投资紫/其他灰）
   ============================================================ */
:root{
  --primary:#1F4E78;          /* 深蓝主色（与表格标题一致） */
  --primary-light:#2E75B6;
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#1f2933;
  --muted:#5b6675;
  --border:#e2e8f0;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(16,42,67,.06);
  /* 五大入户方式分类色 */
  --c-talent:#2E75B6;
  --c-stable:#548235;
  --c-depend:#BF8F00;
  --c-firm:#7030A0;
  --c-other:#7F7F7F;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.75;
}
a{color:var(--primary-light);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- 顶部导航（统一、吸顶） ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--primary);color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);}
.header-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 18px;flex-wrap:wrap;}
.brand{font-size:18px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.brand:hover{text-decoration:none;}
.city-menu{position:relative;}
.city-menu summary{list-style:none;cursor:pointer;background:rgba(255,255,255,.15);
  color:#fff;padding:7px 14px;border-radius:8px;font-size:14px;user-select:none;}
.city-menu summary::-webkit-details-marker{display:none;}
.city-menu summary::after{content:" ▾";}
.city-menu[open] summary::after{content:" ▴";}
.city-links{position:absolute;right:0;top:46px;background:#fff;color:var(--text);
  border-radius:10px;box-shadow:var(--shadow);padding:10px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;
  width:min(440px,86vw);max-height:62vh;overflow:auto;}
.city-links a{display:block;padding:5px 8px;border-radius:6px;font-size:13px;color:var(--text);}
.city-links a:hover{background:var(--bg);text-decoration:none;}

/* ---------- 容器 ---------- */
.container{max-width:1180px;margin:0 auto;padding:24px 18px 60px;}

/* ---------- 首页 Hero ---------- */
.hero{background:linear-gradient(135deg,#1F4E78,#2E75B6);color:#fff;
  border-radius:16px;padding:40px 28px;margin:24px 0;}
.hero h1{margin:0 0 10px;font-size:30px;}
.hero p{margin:0;max-width:780px;color:#eaf2fb;font-size:15px;}

/* ---------- 说明条 ---------- */
.intro{background:var(--card);border-radius:var(--radius);padding:18px 22px;
  box-shadow:var(--shadow);margin-bottom:24px;font-size:14px;color:var(--muted);}
.intro strong{color:var(--text);}
.intro ul{margin:8px 0 0;padding-left:20px;}
.intro li{margin:4px 0;}

/* ---------- 城市卡片网格（首页） ---------- */
.section-title{font-size:20px;color:var(--primary);margin:4px 0 14px;}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
/* 首页 21 城市卡片 — 共享样式（背景由 :nth-child 覆盖为渐变） */
.city-grid .city-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:26px 14px 22px;text-align:center;color:#fff;
  box-shadow:0 4px 14px rgba(16,42,67,.10),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;}
.city-grid .city-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.28),transparent 55%);
  pointer-events:none;}
.city-grid .city-card:hover{transform:translateY(-5px) scale(1.02);
  box-shadow:0 12px 26px rgba(16,42,67,.22),inset 0 1px 0 rgba(255,255,255,.28);
  text-decoration:none;filter:brightness(1.06) saturate(1.08);}
.city-grid .city-card .name{font-size:18px;font-weight:700;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.35);position:relative;z-index:1;}
.city-grid .city-card .count{font-size:12px;color:rgba(255,255,255,.95);margin-top:8px;
  text-shadow:0 1px 3px rgba(0,0,0,.30);position:relative;z-index:1;}

/* ---------- 21 城市独立渐变背景（线性/径向交替，色彩过渡自然） ---------- */
.city-grid .city-card:nth-child(1) {background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);}            /* 广州  深邃蓝 */
.city-grid .city-card:nth-child(2) {background:linear-gradient(135deg,#0f2027 0%,#2c5364 100%);}            /* 深圳  科技深青 */
.city-grid .city-card:nth-child(3) {background:radial-gradient(circle at 30% 25%,#00c6ff 0%,#0072ff 100%);}  /* 珠海  海洋径向 */
.city-grid .city-card:nth-child(4) {background:linear-gradient(135deg,#c31432 0%,#240b36 100%);}            /* 汕头  潮红深紫 */
.city-grid .city-card:nth-child(5) {background:linear-gradient(135deg,#42275a 0%,#734b6d 100%);}            /* 佛山  古韵紫 */
.city-grid .city-card:nth-child(6) {background:linear-gradient(135deg,#134e5e 0%,#71b280 100%);}            /* 韶关  粤北林海 */
.city-grid .city-card:nth-child(7) {background:linear-gradient(135deg,#005c97 0%,#363795 100%);}            /* 湛江  港口深蓝 */
.city-grid .city-card:nth-child(8) {background:radial-gradient(circle at 70% 20%,#11998e 0%,#1eb980 100%);} /* 肇庆  山水翠径向 */
.city-grid .city-card:nth-child(9) {background:linear-gradient(135deg,#f7b733 0%,#fc4a1a 100%);}            /* 江门  侨乡金橙 */
.city-grid .city-card:nth-child(10){background:linear-gradient(135deg,#e53935 0%,#e35d5b 100%);}            /* 茂名  油城暖红 */
.city-grid .city-card:nth-child(11){background:linear-gradient(135deg,#0575e6 0%,#021b79 100%);}            /* 惠州  湾蓝深空 */
.city-grid .city-card:nth-child(12){background:linear-gradient(135deg,#373b44 0%,#4286f4 100%);}            /* 梅州  客乡石青 */
.city-grid .city-card:nth-child(13){background:linear-gradient(135deg,#076585 0%,#002e60 100%);}            /* 汕尾  滨海冷青 */
.city-grid .city-card:nth-child(14){background:radial-gradient(circle at 30% 75%,#1d976c 0%,#16a085 100%);} /* 河源  万绿湖径向 */
.city-grid .city-card:nth-child(15){background:linear-gradient(135deg,#232526 0%,#414345 100%);}            /* 阳江  海岸乌金 */
.city-grid .city-card:nth-child(16){background:linear-gradient(135deg,#005c97 0%,#363795 100%);}            /* 清远  北江靛蓝 */
.city-grid .city-card:nth-child(17){background:linear-gradient(135deg,#8e2de2 0%,#4a00e0 100%);}            /* 东莞  制造紫 */
.city-grid .city-card:nth-child(18){background:linear-gradient(135deg,#fc4a1a 0%,#f7b733 100%);}            /* 中山  伟人故里橙金 */
.city-grid .city-card:nth-child(19){background:linear-gradient(135deg,#3a1c71 0%,#d76d77 100%);}            /* 潮州  工夫茶褐紫 */
.city-grid .city-card:nth-child(20){background:radial-gradient(circle at 50% 0%,#283c86 0%,#45a247 100%);}  /* 揭阳  玉都蓝绿径向 */
.city-grid .city-card:nth-child(21){background:linear-gradient(135deg,#4b6cb7 0%,#182848 100%);}            /* 云浮  石都夜色 */

/* ---------- 面包屑 ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin:18px 0 4px;}
.breadcrumb a{color:var(--primary-light);}

/* ---------- 城市页 ---------- */
.city-title{font-size:26px;margin:6px 0 4px;color:var(--primary);}
.city-sub{color:var(--muted);font-size:14px;margin-bottom:16px;}
.overview{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.chip{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:8px;padding:8px 14px;font-size:13px;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;display:inline-block;line-height:1.4;}
.chip b{color:var(--primary);}
.chip.empty{border-left-color:var(--border);color:var(--muted);}
/* 可点击 chip 的鼠标态 + 活跃态 */
a.chip{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;}
a.chip:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(16,42,67,.14);text-decoration:none;}
a.chip:focus-visible{outline:2px solid #ffd166;outline-offset:3px;}
/* 当前正在浏览的模块 — 高亮对应 chip */
a.chip.is-active{background:#eaf2fb;border-left-color:#ffd166;box-shadow:0 0 0 2px #ffd166 inset,0 4px 12px rgba(16,42,67,.10);}

/* ---------- 入户方式分区 ---------- */
.method{margin-bottom:34px;scroll-margin-top:80px;}
.method h2{font-size:20px;padding:10px 16px;border-radius:10px 10px 0 0;color:#fff;
  margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  scroll-margin-top:80px;transition:box-shadow .25s ease;}
.method:target h2{box-shadow:0 0 0 3px #ffd166,0 4px 16px rgba(16,42,67,.18);}
.method h2 .badge{font-size:12px;background:rgba(255,255,255,.25);padding:2px 10px;border-radius:20px;font-weight:400;}
.method-body{background:var(--card);border:1px solid var(--border);border-top:none;
  border-radius:0 0 10px 10px;padding:8px 16px 16px;box-shadow:var(--shadow);}
.method-talent h2{background:var(--c-talent);}
.method-stable h2{background:var(--c-stable);}
.method-depend h2{background:var(--c-depend);}
.method-firm   h2{background:var(--c-firm);}
.method-other  h2{background:var(--c-other);}
.method-note{padding:16px;color:var(--muted);font-size:14px;background:#fbfcfe;
  border:1px dashed var(--border);border-radius:8px;margin-top:10px;}

/* ---------- 政策明细卡片 ---------- */
.policy{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-top:12px;background:#fff;}
.policy h3{margin:0 0 8px;font-size:16px;color:var(--text);}
.policy dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:6px 12px;}
.policy dt{font-weight:700;color:var(--muted);font-size:13px;}
.policy dd{margin:0;font-size:14px;white-space:pre-wrap;}
.policy .meta{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;}
.policy .meta a{font-weight:600;word-break:break-all;}

/* ---------- 页脚 ---------- */
.site-footer{background:#0f2c47;color:#cbd8e6;text-align:center;padding:22px 16px;
  font-size:13px;margin-top:30px;line-height:1.8;}
.site-footer a{color:#9ec5ef;}
.site-footer .disc{max-width:880px;margin:8px auto 0;color:#9fb3c8;}

/* ---------- 响应式（移动端） ---------- */
@media (max-width:640px){
  .hero{padding:28px 18px;}
  .hero h1{font-size:23px;}
  .city-links{grid-template-columns:repeat(2,1fr);width:min(330px,92vw);}
  .policy dl{grid-template-columns:1fr;gap:2px;}
  .policy dt{margin-top:8px;}
  .header-inner{padding:8px 12px;}
  .brand{font-size:16px;}
  .container{padding:18px 12px 50px;}
  .float-actions{right:10px;gap:8px;}
  .float-btn{width:44px;height:44px;font-size:18px;}
  .float-popover{right:54px;}
  .float-popover .qr-img{width:130px;height:130px;}
}

/* ============================================================
   右侧悬浮按钮组（统一插入到所有页面）
   - 三个按钮：返回顶部 / 微信二维码 / 联系电话
   - position: fixed 视口右侧垂直居中，滚动始终可见
   ============================================================ */
.float-actions{position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:10px;}
.float-btn{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#1F4E78,#2E75B6);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(16,42,67,.28),inset 0 1px 0 rgba(255,255,255,.22);
  font-size:20px;line-height:1;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;}
.float-btn:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.08);
  box-shadow:0 8px 20px rgba(16,42,67,.35);}
.float-btn:active{transform:translateY(0) scale(.96);}
.float-btn:focus-visible{outline:2px solid #ffd166;outline-offset:3px;}
.float-btn svg{width:22px;height:22px;display:block;}
/* 三个按钮主题色 */
.float-btn[data-act="top"]   {background:linear-gradient(135deg,#1F4E78,#2E75B6);}
.float-btn[data-act="wechat"] {background:linear-gradient(135deg,#2E7D32,#43A047);}
.float-btn[data-act="phone"]  {background:linear-gradient(135deg,#C62828,#E53935);}
/* 顶部按钮在接近顶部时淡出 */
.float-btn[data-act="top"].is-hidden{opacity:0;pointer-events:none;transform:translateY(8px);}

/* 微信二维码弹出面板 */
.float-popover{position:absolute;right:60px;top:50%;transform:translateY(-50%) scale(.95);
  background:#fff;box-shadow:0 10px 30px rgba(16,42,67,.25);
  border-radius:12px;padding:14px 14px 10px;width:200px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.float-popover.is-open{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);}
.float-popover .qr-img{width:170px;height:170px;display:block;margin:0 auto;
  border:1px solid #e2e8f0;border-radius:6px;background:#fff;}
.float-popover .qr-title{font-size:14px;font-weight:700;color:#1f2933;margin:8px 0 2px;}
.float-popover .qr-tip{font-size:12px;color:#5b6675;line-height:1.5;margin:0;}
.float-popover::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-left-color:#fff;}
/* 联系电话 tooltip */
.float-tooltip{position:absolute;right:60px;top:50%;transform:translateY(-50%);
  background:#1f2933;color:#fff;font-size:14px;font-weight:600;
  padding:8px 14px;border-radius:8px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;
  transition:opacity .15s ease;}
.float-popover-host:hover .float-tooltip,
.float-popover-host:focus-within .float-tooltip{opacity:1;}
.float-tooltip::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:#1f2933;}
.float-popover-host{position:relative;}