/* 宝瓶占星学院官网 · 全站样式 */
:root {
  --gold: #d5b67e;
  --gold-deep: #c9a86a;
  --gold-dim: #a8894f;
  --bg: #050403;
  --panel: #14110d;
  --text: #e8e2d6;
  --text-dim: #b3aa99;
  --serif: Georgia, "Times New Roman", "STZhongsong", "SimSun", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ============ 顶部（PC） ============ */
.site-header { background: #060504; }
.site-header .topbar {
  display: flex; justify-content: center; align-items: center;
  padding: 14px 0 12px;
}
.site-header .topbar img { height: 44px; }
.mainnav {
  display: flex; justify-content: center; gap: 64px;
  background: #171310; border-top: 1px solid #23201b;
  padding: 13px 0 15px;
}
.mainnav a {
  color: #d8d2c6; font-size: 15px; letter-spacing: 2px;
  padding-bottom: 12px; position: relative;
}
.mainnav a:hover { color: var(--gold); }
.mainnav a.active { color: var(--gold); }
.mainnav a.active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -4px; width: 81px; height: 12px;
  background: url(/assets/nav-orn.png) center/contain no-repeat;
}

/* ============ 顶部（移动端） ============ */
.m-header {
  display: none; position: sticky; top: 0; z-index: 90;
  background: #0a0908; border-bottom: 1px solid #1e1a15;
  height: 52px; align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.m-header .m-logo { height: 38px; display: block; }
.m-right { display: flex; align-items: center; gap: 14px; }
.m-label { text-align: right; line-height: 1.2; }
.m-label .en { display: block; color: #f3efe6; font-family: var(--serif); font-size: 13px; letter-spacing: .5px; }
.m-label .cn { display: block; color: var(--gold); font-size: 11px; letter-spacing: 2px; margin-top: 1px; }
.hamburger {
  width: 30px; height: 26px; background: none; border: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.hamburger span { display: block; height: 2px; background: #d8d2c6; border-radius: 1px; }
.m-menu {
  display: none; position: fixed; z-index: 89; top: 52px; right: 0;
  width: 62%; min-width: 230px; background: rgba(8, 7, 5, 0.96);
  border: 1px solid #2a241b; border-right: 0;
  padding: 18px 0 26px; flex-direction: column;
}
.m-menu.open { display: flex; }
.m-menu a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #ddd6c8; font-size: 17px; letter-spacing: 2px;
  padding: 17px 0; border-bottom: 1px solid #1c1812;
}
.m-menu a:last-child { border-bottom: 0; }
.m-menu a.active { color: var(--gold); }
.m-menu a .orn { width: 17px; height: 21px; display: none; }
.m-menu a.active .orn { display: block; }
.m-menu a .orn.flip { transform: scaleX(-1); }
.m-mask { display: none; position: fixed; inset: 52px 0 0 0; z-index: 88; background: rgba(0,0,0,.45); }
.m-mask.show { display: block; }

/* ============ 页脚 ============ */
/* 间距用页脚内部 padding 实现，避免 margin 区域透出 body 的深色背景形成黑带 */
.site-footer { background: #131110; border-top: 1px solid #201c16; }
.f-main {
  display: flex; justify-content: center; align-items: center;
  gap: 44px; padding: 42px 0 4px;
}
.f-qr img {
  width: 112px; height: 112px; display: block;
  background: #fff; border-radius: 10px; padding: 2px; cursor: pointer;
}
.f-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.f-logo img { height: 40px; display: block; }
.f-pill {
  border: 1px solid #4a4133; border-radius: 999px;
  color: #cfc6b5; font-size: 13px; padding: 6px 22px; letter-spacing: 2px;
  background: none; cursor: pointer; font-family: inherit;
}
.f-pill:hover { color: var(--gold); border-color: var(--gold-dim); }
.f-icp {
  color: #7d7565; font-size: 12.5px; line-height: 2.1;
  text-align: center; margin-top: 28px; padding: 0 16px 24px;
}
/* 备案号：链接到工信部备案管理系统首页 */
.f-icp a {
  color: #7d7565; text-decoration: none;
  border-bottom: 1px solid rgba(125,117,101,.45);
  transition: color .2s, border-color .2s;
}
.f-icp a:hover { color: var(--gold); border-color: var(--gold-dim); }

/* ============ 学位查询页 ============ */
.query-hero {
  min-height: calc(100vh - 190px);
  background: url(/assets/bg-query.png) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  position: relative; overflow: hidden; /* 涟漪扩散出圆盘后在此裁切，不产生滚动条 */
}
.dial {
  width: min(680px, 92vw); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding-top: 5%; position: relative;
}
/* 星空星盘：缓慢自转，60s 一圈（旋转层与内容分离，文字不跟着转） */
.dial::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/assets/dial.png) center/contain no-repeat;
  animation: dial-spin 60s linear infinite;
}
/* 圆形涟漪：每 5s 从盘缘向外扩散一圈淡金色光环 */
.dial::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%;
  border: 1px solid rgba(226, 199, 138, .55);
  box-shadow: inset 0 0 40px rgba(226, 199, 138, .12);
  animation: dial-ripple 5s cubic-bezier(.22, .61, .36, 1) infinite;
}
.dial > * { position: relative; z-index: 1; }
@keyframes dial-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dial-ripple {
  0%   { transform: scale(.92); opacity: 0; }
  12%  { opacity: .55; }
  100% { transform: scale(1.75); opacity: 0; }
}
.dial .t-en {
  font-family: var(--serif); color: rgba(245, 241, 230, .88); font-size: clamp(14px, 2vw, 20px);
  font-weight: 400; letter-spacing: 4px; order: 2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
  transform: translateY(-50px);
}
.dial .t-cn {
  order: 1; margin: -20px 0 10px; font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px); letter-spacing: 8px;
  background: linear-gradient(180deg, #9c7426 0%, #e8c87c 55%, #f6e6b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(-50px);
}
.dial .q-input, .dial .q-select {
  order: 3; width: min(240px, 37%);
  height: clamp(44px, 6.6vw, 58px); border-radius: 10px; border: 0; outline: 0;
  background: #ede8db; color: #333; text-align: center;
  font-size: clamp(14px, 1.8vw, 18px); margin-bottom: 14px;
  appearance: none; -webkit-appearance: none;
  transform: translateY(-30px);
}
.dial .q-input::placeholder { color: #9b958a; }
.dial .q-select { height: clamp(40px, 5.6vw, 48px); margin-bottom: 20px; color: #555; }
.dial .btn-query {
  order: 4; width: min(252px, 46%); aspect-ratio: 397 / 103;
  border: 0; padding: 0; margin-top: 24px;
  background: url(/assets/btn-query.png) center / 100% 100% no-repeat;
  transform: translateY(-50px);   /* 相对原设计整体上移 20px */
  transition: transform .15s, filter .15s;
}
.dial .btn-query:hover { transform: translateY(-50px) scale(1.04); filter: brightness(1.06); }

/* 查询结果弹层（多条匹配） */
.pick-mask {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.pick-mask.show { display: flex; }
.pick-box {
  background: #17130e; border: 1px solid #3d3323; border-radius: 10px;
  width: min(480px, 94vw); max-height: 70vh; overflow: auto; padding: 22px;
}
.pick-box h3 { color: var(--gold); font-family: var(--serif); letter-spacing: 3px; margin-bottom: 14px; text-align: center; }
.pick-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #201a12; border: 1px solid #3a3122; border-radius: 8px;
  padding: 13px 16px; margin-bottom: 10px; cursor: pointer; color: var(--text);
}
.pick-item:hover { border-color: var(--gold-dim); }
.pick-item .n { font-size: 16px; }
.pick-item .m { color: #9a8f7b; font-size: 12.5px; }

/* toast */
.toast {
  position: fixed; z-index: 130; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(20,16,10,.94); color: var(--gold); border: 1px solid #4a3d26;
  padding: 12px 26px; border-radius: 8px; font-size: 14.5px; letter-spacing: 1px;
  display: none;
}
.toast.show { display: block; }

/* ============ 证书结果页 ============ */
.result-hero {
  min-height: calc(100vh - 190px);
  background: url(/assets/cert-stage.png) center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 16px 60px;
}
.result-hero .wish {
  font-family: var(--serif); color: var(--gold); letter-spacing: 4px;
  font-size: clamp(18px, 2.4vw, 26px); margin-bottom: 10px; text-align: center;
}
.result-hero .wish-en {
  font-family: var(--serif); color: #cfc7b4; text-align: center; font-weight: 400;
  font-size: clamp(13px, 1.5vw, 17px); letter-spacing: 1px; line-height: 1.7; margin-bottom: 30px;
}
.cert-wrap { position: relative; width: min(1360px, 96vw); }
.cert-wrap .frame { display: block; width: 100%; }
.cert-wrap .cert {
  /* 金框内沿实测：left 9.82% / right 10.39% / top 2.11% / bottom 13.29%（内沿高 84.6%）
     宽度取内沿内缩 4%（76.6%），高度按证书自身比例自适应并垂直居中于内沿。
     这样不同尺寸的底图都能完整显示：绝不再出现被裁边（旧写法 object-fit:cover 会切边）。 */
  position: absolute; left: 11.4%; top: 44.5%; transform: translateY(-50%);
  width: 76.6%; height: auto; max-height: 84.6%;
  object-fit: contain; background: #0b0906;
}
.cert-ops {
  position: absolute; right: 9%; bottom: 4.5%;
  display: flex; gap: 26px;
}
.cert-ops button {
  background: none; border: 0; color: #e5ded0; font-size: 14px;
  display: flex; align-items: center; gap: 6px; letter-spacing: 1px;
}
.cert-ops button:hover { color: var(--gold); }
.cert-ops img { width: 15px; height: 15px; }

/* ============ 课程介绍页 ============ */
.courses-wrap { max-width: 1240px; margin: 0 auto; padding: 60px 20px 0; }
.course-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
/* 课程卡片 · CSS 金色古典边框（渐变外框 + 内细线 + 四角回纹装饰） */
.course-card {
  position: relative;
  border: 2px solid transparent; border-radius: 3px;
  background:
    linear-gradient(180deg, #16120a, #0e0b06) padding-box,
    linear-gradient(160deg, #f0d9a0 0%, #a67c3d 30%, #6e5226 55%, #d9b877 80%, #8a6a35 100%) border-box;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  padding: 28px 20px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.course-card::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(198, 158, 89, .42);
}
.course-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(#e8cf96, #e8cf96) left 3px top 3px / 18px 2px,
    linear-gradient(#e8cf96, #e8cf96) left 3px top 3px / 2px 18px,
    linear-gradient(#e8cf96, #e8cf96) right 3px top 3px / 18px 2px,
    linear-gradient(#e8cf96, #e8cf96) right 3px top 3px / 2px 18px,
    linear-gradient(#e8cf96, #e8cf96) left 3px bottom 3px / 18px 2px,
    linear-gradient(#e8cf96, #e8cf96) left 3px bottom 3px / 2px 18px,
    linear-gradient(#e8cf96, #e8cf96) right 3px bottom 3px / 18px 2px,
    linear-gradient(#e8cf96, #e8cf96) right 3px bottom 3px / 2px 18px;
  background-repeat: no-repeat;
}
.course-card .c-img { width: 100%; aspect-ratio: 424/286; object-fit: cover; display: block; background: #221c13; }
.course-card .c-title { color: #f0eae0; font-size: 16.5px; font-weight: 700; margin: 18px 0 10px; align-self: flex-start; line-height: 1.5; }
.course-card .c-desc { color: #b6ac9a; font-size: 12.8px; line-height: 1.9; align-self: flex-start; flex: 1; }
.course-card .c-price { margin: 0 0 12px; font-style: italic; font-weight: 800; }
.course-card .c-price .rmb { color: #e08a2c; font-size: 18px; margin-right: 4px; }
.course-card .c-price .num {
  font-size: 30px; letter-spacing: 1px;
  background: linear-gradient(180deg, #f3d898, #d8a955);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--serif);
}
.course-card .c-btn {
  width: 72%; padding: 11px 0; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #e8cf96, #c39a52);
  color: #3d2c10; font-size: 16.5px; font-weight: 800; letter-spacing: 3px;
}
.course-card .c-btn:hover { filter: brightness(1.08); }
.course-banner { display: block; margin: 54px auto 0; width: min(1200px, 94vw); }

/* ============ 占星研究页 ============ */
.research-wrap { max-width: 1200px; margin: 0 auto; padding: 56px 20px 0; }
.research-banner { border: 1px solid #8a6d3f; outline: 4px solid #211a10; background: #000; padding: 5px; }
.research-banner img { display: block; width: 100%; }
.r-list { margin: 60px auto 0; max-width: 980px; padding-left: 26px; border-left: 1px solid #4a4133; position: relative; }
.r-item { position: relative; padding-left: 34px; margin-bottom: 44px; }
.r-item::before {
  content: ""; position: absolute; left: -30px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold-dim);
}
.r-item h3 { color: var(--gold); font-size: 20px; font-weight: 700; margin-bottom: 12px; letter-spacing: 1px; }
.r-item h3 .en-t { display: none; }
.r-item p { color: #cfc7b8; font-size: 15px; line-height: 2.1; }
.r-item .en-p { display: none; }
.research-bottom { display: block; width: 100%; margin-top: 30px; }

/* ============ 学院介绍页 ============ */
/* 动态星空：全屏 canvas 绘制，星星闪烁 + 缓慢漂移 + 偶发流星（见 main.js） */
.about-page { background: #060509; }
#starCanvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; display: block;
}
/* 头部/页脚保持在星空 canvas 之上 */
.site-header, .site-footer { position: relative; z-index: 1; }
.about-wrap, .about-band, .about-cta-band { position: relative; z-index: 1; }
.about-wrap { max-width: 920px; margin: 0 auto; padding: 60px 22px 0; }
.about-top { text-align: center; }
.about-top .circle-logo { width: 104px; opacity: .85; margin-bottom: 40px; }
.sec-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 40px;
}
.sec-title h1, .sec-title h2 {
  font-family: var(--serif); color: var(--gold); font-weight: 400;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: 2px;
}
.sec-title .orn { width: 20px; height: 25px; }
.sec-title .orn.flip { transform: scaleX(-1); }
.about-en { text-align: justify; }
.about-en p {
  color: #c9c1b1; font-family: var(--serif); font-size: 15.5px; line-height: 2;
  margin-bottom: 22px;
}
.about-en b { color: #e8e0d0; }
.about-cn h2.cn-title { color: var(--gold); font-size: 24px; font-weight: 700; margin: 44px 0 22px; letter-spacing: 2px; }
.about-cn p { color: #c9c1b1; font-size: 15px; line-height: 2.15; margin-bottom: 18px; text-align: justify; }
.about-cn p b { color: #e8e0d0; }
.quote-box {
  background: rgba(38, 42, 52, .55); border-radius: 6px;
  padding: 30px 24px; text-align: center; margin: 38px 0 10px;
}
.quote-box p { color: #c2b9a6; font-size: 14.5px !important; line-height: 2.2 !important; margin: 0 !important; text-align: center !important; }
.about-split { display: flex; gap: 40px; align-items: flex-start; margin-top: 70px; }
.about-split .img-side { flex: 0 0 40%; }
.about-split .img-side img { display: block; width: 100%; }
.about-split .txt-side { flex: 1; }
.about-split h3 { color: #f0eae0; font-size: 21px; font-weight: 700; margin-bottom: 18px; letter-spacing: 1px; }
.about-split p { color: #bdb4a2; font-size: 14.5px; line-height: 2.1; margin-bottom: 14px; text-align: justify; }
.about-band { background: #23262d; margin-top: 80px; padding: 64px 24px; text-align: center; }
.about-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; margin-bottom: 26px; letter-spacing: 2px; }
.about-band p { color: #b8b2a6; font-size: 14.5px; line-height: 2.15; max-width: 780px; margin: 0 auto; text-align: justify; }
.about-lead { margin-top: 74px; }
.about-lead .lead-title { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.about-lead .lead-title img { width: 17px; height: 22px; }
.about-lead .lead-title h3 { color: #f0eae0; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.about-lead p { color: #bdb4a2; font-size: 14.5px; line-height: 2.15; margin-bottom: 14px; }
/* 即刻行动 · 黑色通屏带 */
.about-cta-band {
  background: #0a0908; border-top: 1px solid #1c1812; border-bottom: 1px solid #1c1812;
  margin-top: 84px; padding: 68px 24px 72px; text-align: center;
}
.about-cta-band h2 { font-family: var(--serif); color: var(--gold); font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; letter-spacing: 3px; margin-bottom: 24px; }
.about-cta-band p { color: #a79e8c; font-size: 14.5px; line-height: 2.2; }
.about-img-full { display: block; width: 100%; margin-top: 40px; }

/* ============ 二维码弹窗 ============ */
.qr-mask {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.78);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.qr-mask.show { display: flex; }
.qr-box {
  background: #17130e; border: 1px solid #4a3d26; border-radius: 12px;
  padding: 34px 44px; text-align: center;
}
.qr-box img { width: 190px; height: 190px; display: block; margin: 0 auto 16px; background: #fff; padding: 2px; border-radius: 6px; }
.qr-box p { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.qr-box .close-x { margin-top: 18px; background: none; border: 1px solid #4a4133; color: #a99e88; border-radius: 999px; padding: 7px 26px; font-size: 13px; }

/* ============ 移动端适配 ============ */
@media (max-width: 760px) {
  .site-header { display: none; }
  .m-header { display: flex; }
  .m-menu { display: none; }
  .m-menu.open { display: flex; }

  /* ========== 移动端首页 · 独立适配区（与 PC 完全解耦，改这里不影响 PC） ==========
     可调参数：圆盘宽度 DSIZE / 标题字号 T_CN、T_EN / 输入框宽度 IW、行间距 / 按钮宽度 BW */
  .query-hero {
    min-height: calc(100dvh - 52px);   /* 52px = 移动端 sticky 头部高度 */
    padding: 16px 12px 24px;
  }
  .dial { width: 96vw; padding-top: 0; }        /* DSIZE 圆盘宽度 */
  /* 移动端取消 PC 的上移偏移，整组在圆盘内垂直居中，靠 margin 控制间距 */
  .dial .t-cn {
    order: 1; font-size: 32px; letter-spacing: 8px;   /* T_CN */
    margin: 0 0 6px; transform: none;
  }
  .dial .t-en {
    order: 2; font-size: 12px; letter-spacing: 3px;   /* T_EN */
    margin: 0 0 28px; transform: none;
  }
  .dial .q-input {
    order: 3; width: 64%; height: 46px; font-size: 15px;  /* IW */
    margin: 0 0 12px; transform: none;
  }
  .dial .q-select {
    order: 4; width: 64%; height: 42px; font-size: 14px;
    margin: 0 0 24px; transform: none;
  }
  .dial .btn-query {
    order: 5; width: 60%; margin-top: 0; padding: 0;   /* BW */
    transform: none;
  }
  /* 移动端背景星盘素材放大 50%（想再改幅度时改 keyframes 里的 scale 值即可，
     下面 dial-ripple-m 的起始 scale 需同步调整为约 SCALE×0.95） */
  .dial::before { animation: dial-spin-m 60s linear infinite; }
  .dial::after { animation: dial-ripple-m 5s cubic-bezier(.22, .61, .36, 1) infinite; }
  @keyframes dial-spin-m {
    from { transform: scale(1.5) rotate(0deg); }
    to   { transform: scale(1.5) rotate(360deg); }
  }
  @keyframes dial-ripple-m {
    0%   { transform: scale(1.42); opacity: 0; }
    12%  { opacity: .5; }
    100% { transform: scale(2.15); opacity: 0; }
  }

  .result-hero { background: #060504; padding-top: 24px; justify-content: flex-start; }
  .result-hero .wish { font-size: 15px; letter-spacing: 2px; margin-bottom: 8px; }
  .result-hero .wish-en { font-size: 12px; margin-bottom: 16px; }
  .cert-wrap { width: min(560px, 94vw); margin-top: 18px; }
  .cert-ops { display: none; }

  .course-grid { grid-template-columns: 1fr; gap: 20px; }
  .courses-wrap { padding-top: 34px; }
  .course-card { padding: 24px 16px 20px; }
  .course-card .c-title { font-size: 15px; }
  .course-card .c-desc { font-size: 12.5px; }
  .course-card .c-price .num { font-size: 26px; }
  .course-card .c-btn { font-size: 15px; padding: 10px 0; }

  .research-wrap { padding-top: 30px; }
  .r-list { margin-top: 36px; }
  .r-item { padding-left: 17px; } /* 中文与左侧点线距离减半 */
  .r-item h3 .en-t { display: block; font-family: var(--serif); font-weight: 400; font-size: 16px; margin-bottom: 6px; color: var(--gold); }
  .r-item .en-p { display: block; color: #a89f8d; font-family: var(--serif); font-size: 13.5px; line-height: 1.9; margin-bottom: 12px; text-align: justify; }
  .r-item p { font-size: 13.5px; }

  .about-split { flex-direction: column; }
  .about-split .img-side { flex: none; width: 70%; }

  .site-footer { margin-top: 0; }
  .f-main { gap: 24px; padding-top: 30px; }
  .f-qr img { width: 84px; height: 84px; }
  .f-logo img { height: 30px; }
}