/* 强制全站统一壳铺满视口，禁止各页面通过 CSS 缩窄 */
body > #swgg_top, body > #swgg_title, body > #swgg_foot { width: 100% !important; min-width: 100vw !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; }

/* ============================================================
   社考60分 · 统一页头/页尾壳子（shell.css）  v2 2026-10-12
   页头严格对齐标准稿（图1）：深蓝通栏 + 60蓝logo + 双行品牌文案
   + 图3 八标签胶囊导航 + 最右蓝色「学员登录」。
   页尾严格对齐图2：中央宣传语 + 绿色「加老师微信 · 点击复制」
   + 右侧「返回首页」。顶栏 sticky 固定（同点点星光效果）。
   ============================================================ */
#swgg_top {
  position: sticky; top: 0; z-index: 999989;
  /* ⚠ 必须显式清零：部分页面自带 `header { padding:18px 20px 14px }` 这类规则，
     而 #swgg_top 本身就是 <header> 元素 → 会把全站页头额外撑高 30px 左右。
     这里用 ID 优先级压掉（内部留白由 .swgg_inner 负责）。 */
  padding: 0;
  background: linear-gradient(100deg, #0b1426 0%, #11244a 50%, #0e2a52 100%);
  border-bottom: 1px solid rgba(90, 160, 245, .35);
  box-shadow: 0 6px 26px rgba(8, 30, 80, .35);
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  color: #cfe0f5;
}
#swgg_top .swgg_inner {
  max-width: 1680px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px;
  /* 顶栏三块（logo / 导航 / 登录）永远不整体换行，
     保证「学员登录」始终落在第一行最右侧；
     导航项过多时由 .swgg_nav 内部自行折行，不挤掉登录 */
  flex-wrap: nowrap;
}
#swgg_top .swgg_logo {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff;
  flex: 0 0 auto; min-width: 0;
}
#swgg_top .swgg_logo60 {
  width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, #1f6ae0, #00b4ff) !important;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px; color: #fff;
  box-shadow: 0 4px 16px rgba(31, 106, 224, .65), inset 0 0 10px rgba(255, 255, 255, .25);
  border: 1px solid rgba(255, 255, 255, .18);
}
#swgg_top .swgg_brand { display: flex; flex-direction: column; line-height: 1.3; justify-content: center; }
#swgg_top .swgg_brand .swgg_b1 { font-size: 17px; color: #fff; letter-spacing: .5px; font-weight: 800; }
#swgg_top .swgg_brand .swgg_b2 { font-size: 12px; color: rgba(190, 215, 255, .82); margin-top: 3px; white-space: nowrap; }
#swgg_top .swgg_brand .swgg_b2a { color: #fff; font-weight: 700; }
#swgg_top .swgg_brand .swgg_b2b { color: #ffd76a; font-weight: 700; }
#swgg_top .swgg_brand .swgg_sep { color: rgba(255, 255, 255, .35); margin: 0 8px; }

/* ---- 导航：横向单行 + 溢出可滑动（2026-10-28 改版）----
   旧版 flex-wrap:wrap 在手机端把 8 个胶囊竖排成 8 行，页头直接占掉半屏，
   还把「学员登录」按钮挤出了屏幕（用户实机反馈）。
   现在固定单行：桌面端一次排完；手机端变成一条可左右滑动的胶囊带，
   与 ddxg 的 .tabs 同一套手势（手指按住左滑，后续项直接滑出来）。 */
#swgg_top .swgg_nav {
  display: flex; flex-wrap: nowrap; gap: 7px;
  /* safe center：内容溢出时不会把首项裁掉（老浏览器不认 safe 就退回 center） */
  justify-content: center; justify-content: safe center;
  flex: 1 1 auto; margin: 0; min-width: 0;
  /* ⚠ 必须 border-box：手机端 nav 是 flex:1 0 100% 独占一行，
     content-box 下自身的左右 padding(12px+12px) 会额外撑出 24px 横向溢出。 */
  box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;   /* 隐藏滚动条（Firefox / IE） */
  -webkit-overflow-scrolling: touch;                 /* iOS 惯性滑动 */
  scroll-snap-type: x proximity;                     /* 滑到接近某项时轻轻吸附 */
  scroll-padding-left: 12px;
}
#swgg_top .swgg_nav::-webkit-scrollbar { display: none; }
#swgg_top .swgg_nav a { flex: 0 0 auto; scroll-snap-align: start; }
/* 当前项：吸附到正中（JS 已经把当前项滚到中间，snap 若是 start 会把它拉回左侧） */
#swgg_top .swgg_nav a.cur { scroll-snap-align: center; }
/* 右侧还有内容没露出来时做渐隐，提示"还能继续往左滑" */
#swgg_top .swgg_nav[data-scroll="1"] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}
#swgg_top .swgg_nav a {
  padding: 7px 14px; border-radius: 999px; font-size: 14px; letter-spacing: .5px;
  white-space: nowrap; color: #bcd4f5; text-decoration: none;
  border: 1px solid rgba(90, 150, 240, .28); background: rgba(12, 24, 50, .55); transition: .18s;
}
#swgg_top .swgg_nav a:hover {
  color: #fff; border-color: #4dc3ff; background: rgba(0, 150, 255, .24);
  box-shadow: 0 0 14px rgba(0, 180, 255, .25);
}
#swgg_top .swgg_nav a.cur {
  background: linear-gradient(135deg, #1f6ae0, #00b4ff); color: #fff; border-color: #4dc3ff;
  font-weight: 700; box-shadow: 0 0 16px rgba(0, 180, 255, .45);
}
#swgg_top .swgg_nav a.swgg_home { border-color: rgba(245, 158, 11, .55); color: #ffd76a; }
/* 未上线功能的「建设中」小标（数据源：auth/config.php $LINKS online=false） */
#swgg_top .swgg_nav a .swgg_navbuild {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-style: normal; line-height: 1.5; letter-spacing: 0;
  color: #b9cbe4; background: rgba(140, 160, 190, .18); border: 1px solid rgba(140, 160, 190, .4);
}

#swgg_top .swgg_acc { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
#swgg_top .swgg_acc .swgg_name { color: #dbe8f7; opacity: .9; }
#swgg_top .swgg_acc a {
  color: #7cc0ff; text-decoration: none; padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(120, 170, 220, .3);
}
#swgg_top .swgg_acc a:hover { background: rgba(120, 170, 220, .15); }
#swgg_top .swgg_login_btn {
  background: linear-gradient(135deg, #1f6feb, #00a2ff) !important; color: #fff !important;
  border: 0 !important; font-weight: 700; cursor: pointer; padding: 8px 20px !important;
  border-radius: 999px !important; font-size: 14px;
  box-shadow: 0 4px 14px rgba(31, 111, 235, .45) !important;
}

/* 第二栏：系统主题（由页面 data-title 注入） */
#swgg_title {
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  background: linear-gradient(100deg, rgba(10, 20, 44, .92), rgba(14, 40, 82, .9));
  color: #eaf3ff; border-bottom: 1px solid rgba(90, 160, 245, .18);
}
#swgg_title .swgg_tin {
  max-width: 1680px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
#swgg_title .swgg_tmain { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
#swgg_title .swgg_tsub { font-size: 13px; color: rgba(190, 215, 255, .72); }
#swgg_title .swgg_tip {
  margin-left: auto; font-size: 12.5px; color: rgba(255, 215, 106, .9);
  border: 1px solid rgba(255, 215, 106, .35); padding: 4px 12px; border-radius: 999px;
}

/* 页尾（对齐图2：中央文案 + 绿色微信复制按钮；右侧返回首页） */
#swgg_foot {
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  background: linear-gradient(100deg, #0b1426 0%, #11244a 60%, #0e2a52 100%);
  border-top: 1px solid rgba(90, 160, 245, .35);
  color: #c4d6ee; margin-top: 40px;
}
#swgg_foot .swgg_fin {
  max-width: 1680px; margin: 0 auto; padding: 20px 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
}
#swgg_foot .swgg_fside { display: flex; align-items: center; }
#swgg_foot .swgg_fright { justify-content: flex-end; }
#swgg_foot .swgg_fmid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#swgg_foot .swgg_fp { font-size: 14px; line-height: 1.7; color: rgba(206, 222, 245, .92); text-align: center; }
#swgg_foot .swgg_fp b { color: #ffd76a; }
#swgg_foot .swgg_fp .swgg_fp_brand { color: #ffd76a; font-weight: 900; font-size: 16px; letter-spacing: .5px; }
#swgg_foot .swgg_wxbtn {
  font-family: inherit; font-size: 14px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #0ea36b, #059669);
  border: 1px solid rgba(255, 255, 255, .22); padding: 9px 22px; border-radius: 999px;
  font-weight: 600; box-shadow: 0 4px 16px rgba(5, 150, 105, .4); transition: .18s;
}
#swgg_foot .swgg_wxbtn:hover { filter: brightness(1.08); }
#swgg_foot .swgg_wxbtn b { color: #ffe9b8; }
#swgg_foot .swgg_home_btn {
  font-size: 13.5px; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #1f6ae0, #00b4ff); padding: 8px 18px; border-radius: 999px;
  font-weight: 600; box-shadow: 0 0 14px rgba(0, 180, 255, .35);
}
#swgg_foot .swgg_home_btn:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
  #swgg_foot .swgg_fin { grid-template-columns: 1fr; justify-items: center; }
  #swgg_foot .swgg_fside { display: none; }
  #swgg_foot .swgg_fright { display: flex; }
}
@media (max-width: 760px) {
  /* ---- 手机端页头改成两行（2026-10-28）----
     第 1 行：60 徽标 + 品牌名 + 学员登录（一行放下，不再被导航挤走）
     第 2 行：导航独占一条，可左右滑动（手指按住左滑，后续项滑出来）
     原来导航竖排 8 行，页头能占掉半个屏幕。 */
  #swgg_top .swgg_inner {
    flex-wrap: wrap;
    gap: 0;
    padding: 7px 0 0;
  }
  #swgg_top .swgg_logo {
    order: 1; flex: 1 1 auto; min-width: 0;
    padding-left: 12px; gap: 9px;
  }
  #swgg_top .swgg_logo60 { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
  #swgg_top .swgg_brand { min-width: 0; overflow: hidden; }
  #swgg_top .swgg_brand .swgg_b2 { display: none; }
  #swgg_top .swgg_brand .swgg_b1 {
    font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #swgg_top .swgg_acc {
    order: 2; flex: 0 0 auto; margin-left: auto;
    padding-right: 12px; font-size: 12.5px; gap: 8px;
  }
  #swgg_top .swgg_login_btn { padding: 6px 14px !important; font-size: 13px !important; }
  #swgg_top .swgg_nav {
    order: 3;
    flex: 1 0 100%; width: 100%;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 7px;
    padding: 7px 12px 9px;
    border-top: 1px solid rgba(90, 160, 245, .16);
    scroll-padding-left: 12px;
  }
  #swgg_top .swgg_nav a { padding: 5px 12px; font-size: 13px; }
  #swgg_title .swgg_tin { padding: 9px 14px; }
  #swgg_title .swgg_tmain { font-size: 16px; }
}

/* ============================================================
   分享文案按钮（2026-10-28）
   页尾「复制分享文案」+ 手机端右下角悬浮 📤 按钮。
   作用：微信朋友圈转发时，把「中文标题 + 说明 + 链接」一起复制过去，
        朋友圈里显示的是中文文字，点链接直达当前页，而不是一条光秃秃的网址。
   ============================================================ */
#swgg_foot .swgg_sharebtn {
  margin-top: 12px;
  display: inline-block;
  border: 1px solid rgba(120, 190, 255, .45);
  background: rgba(31, 106, 224, .16);
  color: #cfe4ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
#swgg_foot .swgg_sharebtn:hover { background: rgba(31, 106, 224, .32); color: #fff; }
#swgg_foot .swgg_sharebtn.swgg_ok {
  background: rgba(52, 199, 123, .2);
  border-color: rgba(52, 199, 123, .6);
  color: #b6f5cf;
}

/* 手机端右下角悬浮按钮：贴着屏幕边，够得着 */
#swgg_share_fab {
  position: fixed;
  right: 14px;
  bottom: 84px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(120, 190, 255, .5);
  background: linear-gradient(135deg, #1f6ae0, #00b4ff);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  z-index: 999991;
  box-shadow: 0 6px 20px rgba(31, 106, 224, .5);
  transition: transform .16s;
}
#swgg_share_fab:active { transform: scale(.92); }
#swgg_share_fab.swgg_ok { background: linear-gradient(135deg, #1e9e5a, #34c77b); font-size: 18px; }
@media (max-width: 760px) {
  #swgg_share_fab { bottom: 78px; right: 12px; width: 44px; height: 44px; font-size: 20px; }
}

/* ============================================================
   分享面板（2026-10-29）
   微信朋友圈对网页链接的 og: 支持很差（安卓端基本无视），
   粘贴网址到朋友圈往往只剩一条裸链接。这里提供保底方案：
   竖版海报 → 长按存图 → 发朋友圈，标题和二维码一定正常显示。
   ============================================================ */
#swgg_sharemask {
  position: fixed; inset: 0; z-index: 999998;
  background: rgba(4, 10, 22, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  animation: swgg_fade .18s ease;
}
@keyframes swgg_fade { from { opacity: 0 } to { opacity: 1 } }
#swgg_sharemask .swgg_sp {
  width: 100%; max-width: 380px; max-height: 100%;
  display: flex; flex-direction: column;
  background: #0d1729;
  border: 1px solid rgba(90, 160, 245, .32);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
  overflow: hidden;
}
#swgg_sharemask .swgg_sp_head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(90, 160, 245, .16);
  flex: 0 0 auto;
}
#swgg_sharemask .swgg_sp_head b { font-size: 15.5px; color: #fff; letter-spacing: .5px; }
#swgg_sharemask .swgg_sp_x {
  width: 30px; height: 30px; line-height: 27px; text-align: center;
  font-size: 22px; color: #9db6d6; text-decoration: none;
  border-radius: 50%; background: rgba(255, 255, 255, .07);
}
#swgg_sharemask .swgg_sp_x:hover { background: rgba(255, 255, 255, .15); color: #fff; }
#swgg_sharemask .swgg_sp_tip {
  padding: 11px 16px; font-size: 12.5px; line-height: 1.6;
  color: #b9cde6; background: rgba(255, 215, 106, .09);
  border-bottom: 1px solid rgba(255, 215, 106, .18);
  flex: 0 0 auto;
}
#swgg_sharemask .swgg_sp_tip b { color: #ffd76a; }
#swgg_sharemask .swgg_sp_img {
  padding: 12px; overflow-y: auto; flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
}
#swgg_sharemask .swgg_sp_img img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  -webkit-touch-callout: default;   /* 允许长按弹出「保存图片」 */
  user-select: auto;
}
#swgg_sharemask .swgg_sp_btns {
  display: flex; gap: 9px; padding: 12px 14px 14px; flex: 0 0 auto;
  border-top: 1px solid rgba(90, 160, 245, .14);
}
#swgg_sharemask .swgg_sp_copy,
#swgg_sharemask .swgg_sp_ok {
  flex: 1; border: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; padding: 11px 8px;
  border-radius: 10px; transition: background .16s, color .16s;
}
#swgg_sharemask .swgg_sp_copy {
  background: rgba(31, 106, 224, .22); color: #cfe4ff;
  border: 1px solid rgba(90, 160, 245, .45);
}
#swgg_sharemask .swgg_sp_copy:hover { background: rgba(31, 106, 224, .38); color: #fff; }
#swgg_sharemask .swgg_sp_copy.swgg_ok {
  background: rgba(52, 199, 123, .2); border-color: rgba(52, 199, 123, .6); color: #b6f5cf;
}
#swgg_sharemask .swgg_sp_ok {
  background: linear-gradient(135deg, #1f6ae0, #00b4ff); color: #fff;
  box-shadow: 0 6px 18px rgba(31, 106, 224, .4);
}
#swgg_sharemask .swgg_sp_ok:hover { filter: brightness(1.1); }