:root {
  --themeTxtColor: #2f885f;
  --pageBg: #f5f7fb;
  --textColor: #191919;
  --mutedColor: #a0a1a2;
  --mobileMax: 375px;
  --shellBg: #f1f5f8;
  --panelBg: rgba(255, 255, 255, .92);
  --panelBorder: #dfe8ed;
  --deepInk: #11231f;
  --softInk: #62736d;
  --accentGold: #b69045;
  --cardShadow: 0 18px 45px rgba(25, 48, 41, .1);
  /* WeChat 导航栏精确值 */
  --wechatStatusH: 10px;     /* 对齐截图中的微信顶部留白 */
  --wechatNavH: 44px;        /* 微信导航栏固定高度 */
  --wechatHeaderH: calc(var(--wechatStatusH) + var(--wechatNavH));
}

@supports (padding-top: env(safe-area-inset-top)) {
  :root {
    --wechatStatusH: max(10px, env(safe-area-inset-top));
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
}

body {
  align-items: flex-start;
  background:
    linear-gradient(135deg, #e7edf2 0%, #f7f9fb 48%, #e9f0ed 100%);
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  justify-content: center;
  overflow-x: hidden;
}

button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

[hidden],
.is-hidden {
  display: none !important;
}

input {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #d7e2e7;
  border-radius: 10px;
  color: var(--deepInk);
  font: inherit;
  height: 46px;
  outline: none;
  padding: 0 13px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  width: 100%;
}

input:focus {
  border-color: #2f885f;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47, 136, 95, .12);
}

label {
  color: var(--softInk);
  display: grid;
  font-size: 13px;
  gap: 8px;
}

.appShell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 210px),
    var(--shellBg);
  color: var(--deepInk);
  min-height: 100vh;
  overflow: hidden;
  padding: 34px 22px 44px;
  position: relative;
  width: 100%;
}

.appShell::before {
  background:
    linear-gradient(90deg, rgba(47, 136, 95, .12), transparent 58%),
    repeating-linear-gradient(135deg, rgba(47, 136, 95, .055) 0 1px, transparent 1px 13px);
  content: "";
  height: 210px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.appShell > * {
  position: relative;
  z-index: 1;
}

body.card-mode {
  overflow: hidden;
}

body.card-mode .appShell {
  display: none;
}

body.card-mode .alumniCardScreen {
  display: block;
}

.alumniCardScreen {
  display: none;
}

.authPanel {
  align-items: center;
  display: grid;
  gap: clamp(28px, 6vw, 86px);
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  margin: 0 auto;
  max-width: 1060px;
  min-height: calc(100vh - 78px);
}

.authIntro {
  padding: 0 8px;
  position: relative;
}

.authIntro::before {
  background: #fff;
  border: 1px solid rgba(47, 136, 95, .18);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(20, 48, 40, .11);
  content: "";
  display: block;
  height: 118px;
  margin-bottom: 34px;
  max-width: 338px;
  position: relative;
  width: 72%;
}

.authIntro::after {
  background:
    linear-gradient(90deg, #2f885f 0 42%, transparent 42%),
    linear-gradient(#dfe8e3 0 0),
    linear-gradient(#b69045 0 0),
    linear-gradient(#edf3f1 0 0);
  background-position: 26px 28px, 26px 52px, right 28px top 26px, right 22px bottom 20px;
  background-repeat: no-repeat;
  background-size: 120px 10px, 168px 8px, 34px 34px, 130px 42px;
  border-radius: 7px;
  content: "";
  height: 118px;
  left: 8px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: min(338px, 72%);
}

.eyebrow {
  color: #2f885f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.authIntro h1,
.dashboardTop h1 {
  color: var(--deepInk);
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.12;
  margin: 0;
}

.authIntro p {
  color: var(--softInk);
  font-size: 16px;
  line-height: 1.7;
  margin: 18px 0 0;
  max-width: 420px;
}

.authCard,
.profilePanel,
.adminPanel,
.statusPanel {
  background: var(--panelBg);
  border: 1px solid var(--panelBorder);
  border-radius: 8px;
  box-shadow: var(--cardShadow);
}

.authCard {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 20px;
}

.segmented {
  background: #e9f0f3;
  border: 1px solid #dde7ec;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  padding: 4px;
}

.segmentBtn {
  background: transparent;
  border-radius: 7px;
  color: #60716b;
  height: 38px;
}

.segmentBtn.is-active {
  background: #fff;
  box-shadow: 0 6px 16px rgba(28, 43, 38, .08);
  color: var(--deepInk);
}

.authForm,
.profilePanel {
  gap: 15px;
}

.authForm {
  display: none;
}

.authForm.is-active,
.profilePanel {
  display: grid;
}

.formRow {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.primaryBtn,
.ghostBtn,
.cardLaunchBtn {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease, transform .12s ease;
}

.primaryBtn {
  background: #2f885f;
  color: #fff;
  font-weight: 500;
  height: 46px;
  margin-top: 2px;
}

.primaryBtn:hover,
.cardLaunchBtn:hover {
  background: #277551;
  transform: translateY(-1px);
}

.ghostBtn {
  background: rgba(255,255,255,.8);
  border: 1px solid #d9e1e8;
  color: #51625c;
  height: 40px;
  padding: 0 16px;
}

.dashboardTop {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 20px;
  max-width: 920px;
  padding-top: 4px;
}

.dashboardTop h1 {
  font-size: 30px;
}

.statusPanel {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 20px;
  max-width: 920px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.statusPanel::after {
  background: linear-gradient(180deg, rgba(47, 136, 95, .14), rgba(47, 136, 95, 0));
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
}

.statusPanel h2 {
  color: var(--deepInk);
  font-size: 22px;
  margin: 12px 0 8px;
  position: relative;
  z-index: 1;
}

.statusPanel p {
  color: var(--softInk);
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

.statusBadge {
  background: rgba(47, 136, 95, .12);
  border-radius: 999px;
  color: #2f885f;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
}

.statusBadge.is-approved {
  background: rgba(47, 136, 95, .12);
  color: #2f885f;
}

.statusBadge.is-pending {
  background: rgba(211, 144, 32, .12);
  color: #9b6718;
}

.statusBadge.is-rejected {
  background: rgba(198, 50, 48, .1);
  color: #b12e2c;
}

.cardLaunchBtn {
  background: #2f885f;
  box-shadow: 0 12px 26px rgba(47, 136, 95, .22);
  color: #fff;
  flex: 0 0 auto;
  font-weight: 500;
  height: 46px;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

.cardLaunchBtn:disabled {
  background: #b9c6c1;
  cursor: not-allowed;
  opacity: .8;
}

.workGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  margin: 0 auto;
  max-width: 920px;
}

.profilePanel,
.adminPanel {
  padding: 20px;
}

.panelHeader {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.panelHeader h2 {
  color: var(--deepInk);
  font-size: 19px;
  margin: 0;
}

.panelHeader span {
  color: #879590;
  font-size: 12px;
}

.photoUploader {
  align-items: center;
  background: #f8fbfa;
  border: 1px dashed #b0c4bb;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  padding: 13px;
  transition: border-color .12s ease, background .12s ease;
}

.photoUploader:hover {
  background: #f2f8f5;
  border-color: #2f885f;
}

.photoUploader input {
  display: none;
}

.photoPreview {
  background: #df0505;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(28, 43, 38, .12);
  display: block;
  height: 84px;
  overflow: hidden;
  position: relative;
  width: 60px;
}

.photoPreview::before {
  background: #10151a;
  border-radius: 50% 50% 44% 44%;
  content: "";
  height: 24px;
  left: 18px;
  position: absolute;
  top: 20px;
  width: 24px;
}

.photoPreview::after {
  background: linear-gradient(135deg, #25313a, #101820 48%, #1e2b34);
  border-radius: 36px 36px 4px 4px;
  bottom: -2px;
  content: "";
  height: 42px;
  left: 11px;
  position: absolute;
  width: 38px;
}

.photoPreview.has-photo {
  background-position: center center;
  background-size: cover;
}

.photoPreview.has-photo::before,
.photoPreview.has-photo::after {
  display: none;
}

.photoText {
  color: #2f885f;
  font-size: 14px;
  font-weight: 500;
}

body.photo-cropper-open {
  overflow: hidden;
  touch-action: none;
}

.photoCropper {
  background: #101514;
  color: #fff;
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 5000;
}

.photoCropper[hidden] {
  display: none !important;
}

.photoCropperShell {
  background: #101514;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  width: min(100%, var(--mobileMax));
}

.photoCropperHeader {
  align-items: center;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  min-height: calc(54px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
}

.photoCropperHeader h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.photoCropperHeader button,
.photoCropControls button {
  background: transparent;
  color: #fff;
  font-size: 15px;
  height: 40px;
  padding: 0;
}

.photoCropperHeader button:first-child {
  color: rgba(255, 255, 255, .72);
  text-align: left;
}

.photoCropperHeader button:last-child {
  color: #74d29b;
  font-weight: 600;
  text-align: right;
}

.photoCropStage {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 42%),
    #101514;
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 18px 0;
  touch-action: none;
}

.photoCropFrame {
  aspect-ratio: 5 / 7;
  background: #df0505;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44);
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: min(72vw, calc(62dvh * 5 / 7), 280px);
}

.photoCropFrame::after {
  border: 1px solid rgba(255, 255, 255, .28);
  content: "";
  inset: 33.333% 0;
  pointer-events: none;
  position: absolute;
}

.photoCropFrame img {
  left: 50%;
  max-width: none;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform-origin: center center;
  user-select: none;
  will-change: transform;
}

.photoCropControls {
  background: #151b1a;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: grid;
  gap: 14px;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
}

.photoCropControls p {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.photoScaleControl {
  align-items: center;
  color: rgba(255, 255, 255, .82);
  display: grid;
  font-size: 13px;
  gap: 12px;
  grid-template-columns: 36px 1fr;
}

.photoScaleControl input[type="range"] {
  accent-color: #74d29b;
  background: transparent;
  border: 0;
  box-shadow: none;
  height: 28px;
  padding: 0;
}

.photoCropControls button {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: rgba(255, 255, 255, .84);
}

.pendingList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.pendingItem {
  background: #fbfcfd;
  border: 1px solid #e6eef2;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.userConfigItem {
  gap: 12px;
}

.adminUserMain {
  align-items: center;
  display: flex;
  gap: 12px;
}

.adminPhoto {
  background: #df0505;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0 6px 14px rgba(28, 43, 38, .12);
  flex: 0 0 auto;
  height: 64px;
  overflow: hidden;
  position: relative;
  width: 46px;
}

.adminPhoto::before {
  background: #10151a;
  border-radius: 50% 50% 44% 44%;
  content: "";
  height: 18px;
  left: 12px;
  position: absolute;
  top: 15px;
  width: 18px;
}

.adminPhoto::after {
  background: linear-gradient(135deg, #25313a, #101820 48%, #1e2b34);
  border-radius: 28px 28px 4px 4px;
  bottom: -1px;
  content: "";
  height: 32px;
  left: 8px;
  position: absolute;
  width: 30px;
}

.adminPhoto.has-photo {
  background-position: center center;
  background-size: cover;
}

.adminPhoto.has-photo::before,
.adminPhoto.has-photo::after {
  display: none;
}

.adminUserInfo {
  min-width: 0;
}

.adminUserTitle {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.pendingItem h3 {
  font-size: 15px;
  margin: 0;
}

.pendingItem p {
  color: #74827d;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.configGrid {
  background: #f5f8fa;
  border-radius: 7px;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin: 0;
  overflow: hidden;
}

.configGrid div {
  background: #fff;
  display: grid;
  gap: 4px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 8px 10px;
}

.configGrid dt,
.configGrid dd {
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.configGrid dt {
  color: #82908b;
}

.configGrid dd {
  color: var(--deepInk);
  overflow-wrap: anywhere;
}

.pendingActions {
  display: flex;
  gap: 8px;
}

.pendingActions button {
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
}

.approveBtn {
  background: #2f885f;
  color: #fff;
}

.rejectBtn {
  background: #f2f4f6;
  color: #6e3d3b;
}

@media (max-width: 760px) {
  body {
    background: var(--shellBg);
    display: block;
  }

  .appShell {
    min-height: 100dvh;
    padding: 22px 14px max(26px, env(safe-area-inset-bottom));
  }

  .appShell::before {
    height: 176px;
  }

  .authPanel,
  .workGrid {
    grid-template-columns: 1fr;
  }

  .authPanel {
    align-items: start;
    gap: 22px;
    min-height: auto;
  }

  .authIntro {
    padding: 8px 10px 0;
  }

  .authIntro::before {
    height: 76px;
    margin-bottom: 22px;
    max-width: 230px;
    width: 62%;
  }

  .authIntro::after {
    background-position: 18px 18px, 18px 36px, right 18px top 16px, right 16px bottom 14px;
    background-size: 82px 8px, 118px 6px, 24px 24px, 88px 30px;
    height: 76px;
    left: 10px;
    width: min(230px, 62%);
  }

  .authIntro h1 {
    font-size: 38px;
  }

  .authIntro p {
    font-size: 14px;
    line-height: 1.65;
    margin-top: 14px;
  }

  .authCard,
  .profilePanel,
  .adminPanel,
  .statusPanel {
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(25, 48, 41, .08);
  }

  .authCard,
  .profilePanel,
  .adminPanel {
    padding: 18px;
  }

  input,
  .primaryBtn {
    height: 48px;
  }

  .segmented {
    margin-bottom: 18px;
  }

  .segmentBtn {
    height: 40px;
  }

  .dashboardTop {
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 4px 2px 0;
  }

  .dashboardTop h1 {
    font-size: 26px;
  }

  .ghostBtn {
    height: 38px;
    padding: 0 14px;
  }

  .statusPanel {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .statusPanel::after {
    height: 90px;
    opacity: .85;
    width: 100%;
  }

  .statusPanel h2 {
    font-size: 20px;
  }

  .cardLaunchBtn {
    height: 48px;
    width: 100%;
  }

  .formRow {
    grid-template-columns: 1fr;
  }

  .workGrid {
    gap: 14px;
  }

  .photoUploader {
    gap: 12px;
  }

  .pendingActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pendingActions button {
    height: 36px;
  }
}

@media (max-width: 380px) {
  .appShell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .authIntro h1 {
    font-size: 34px;
  }

  .authCard,
  .profilePanel,
  .adminPanel,
  .statusPanel {
    padding: 16px;
  }
}

/* ==================== 微信导航栏 ==================== */
/* 1rpx = 100cqw/750 = 0.133333cqw */
.pageArea {
  background: var(--pageBg);
  color: var(--textColor);
  container-type: inline-size;
  min-height: 100vh;
  max-width: var(--mobileMax);
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

body.card-mode .pageArea {
  height: 100dvh;
  inset: 0;
  margin: 0 auto;
  overflow-y: auto;
  position: fixed;
  z-index: 1000;
}

body.card-mode .pageArea::-webkit-scrollbar {
  display: none;
}

/* 导航栏: 固定顶部, 毛玻璃效果, 白色半透明 */
.wechatNav {
  align-items: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 -0.5px rgba(0, 0, 0, 0.16);
  display: flex;
  height: var(--wechatHeaderH);
  justify-content: center;
  left: 50%;
  max-width: var(--mobileMax);
  padding-top: var(--wechatStatusH);
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 100;
}

/* 返回按钮: 左侧44x44可点击区 */
.wechatNavBack {
  align-items: center;
  background: transparent;
  display: flex;
  height: var(--wechatNavH);
  justify-content: center;
  left: 2px;
  position: absolute;
  top: calc(var(--wechatStatusH) + 22px);
  transform: translateY(-50%);
  width: var(--wechatNavH);
}

.wechatNavBack img { display: none; }

/* 返回箭头: CSS绘制, 匹配微信原生箭头 */
.wechatNavBack::before {
  border-color: #000;
  border-style: solid;
  border-width: 0 0 1.6px 1.6px;
  content: "";
  display: block;
  height: 9px;
  margin-left: 0;
  transform: rotate(45deg);
  width: 9px;
}

/* 标题: 居中, 17px加粗 */
.wechatNavTitle {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  height: var(--wechatNavH);
  justify-content: center;
  left: 50%;
  line-height: var(--wechatNavH);
  margin: 0;
  max-width: 60%;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  top: calc(var(--wechatStatusH) + 22px);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  width: auto;
}

/* 胶囊按钮: 右侧87x32, 圆角16px */
.wechatNavCapsule {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  color: #000;
  display: grid;
  grid-template-columns: 31px 1px 22px 1px 32px;
  height: 32px;
  position: absolute;
  right: 9px;
  top: calc(var(--wechatStatusH) + 22px);
  transform: translateY(-50%);
  width: 87px;
}

.wechatNavMore {
  align-items: center;
  display: flex;
  gap: 2.1px;
  justify-content: center;
  transform: translateX(0.8px);
  width: 31px;
}

.wechatNavMore i {
  background: #000;
  border-radius: 50%;
  display: block;
  height: 3.5px;
  width: 3.5px;
}

.wechatNavMore i:nth-child(2) {
  height: 5.4px;
  width: 5.4px;
}

.wechatNavDivider {
  background: rgba(0, 0, 0, 0.11);
  height: 21px;
  width: 1px;
}

.wechatNavMinus {
  background: #000;
  border-radius: 2px;
  display: block;
  height: 3px;
  justify-self: center;
  opacity: 0.92;
  width: 13px;
}

.wechatNavCircle {
  border: 2.2px solid #000;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: 16px;
  justify-self: center;
  opacity: 0.92;
  position: relative;
  width: 16px;
}

.wechatNavCircle::after {
  background: #000;
  border-radius: 50%;
  content: "";
  display: block;
  height: 6px;
  inset: 0;
  margin: auto;
  opacity: 0.92;
  position: absolute;
  width: 6px;
}

/* ==================== 页面内容 ==================== */
/* 背景图: 导航栏下方 90rpx=12cqw */
.myBg {
  display: block;
  height: auto;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 12cqw; /* 90rpx, 相对于 .pageArea 顶部 */
  width: 100cqw;
  z-index: 0;
}

/* 卡面: 690x400rpx, 圆角20rpx */
.mycard {
  background-size: cover;
  border-radius: 2.666667cqw;
  height: 53.333333cqw;
  margin: calc(var(--wechatHeaderH) + 2cqw) auto 2cqw;
  overflow: hidden;
  padding-top: 14.666667cqw;
  position: relative;
  width: 92cqw;
  z-index: 2;
}

.mycardBox {
  height: 51.333333cqw;
  left: 0;
  position: absolute;
  top: 1.333333cqw;
  width: 100%;
  z-index: 2;
}

/* 校友卡组件 */
.alumniCard { box-sizing: border-box; height: 100%; width: 100%; }
.wapper { height: 100%; position: relative; width: 100%; }

.alumniLogo {
  border-radius: 2.666667cqw;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.alumniCon {
  box-sizing: border-box;
  height: 100%;
  left: 0;
  padding: 0 3.333333cqw 0 5.333333cqw;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}

.main { height: 100%; position: relative; width: 100%; }

.header {
  align-items: center;
  display: flex;
  height: 6.4cqw;
  justify-content: space-between;
  left: 0;
  position: absolute;
  top: 4cqw;
  width: 100%;
  z-index: 6;
}

.header .img1 { height: 6.4cqw; width: auto; }

.conInfo {
  display: flex;
  flex-direction: row;
  height: calc(100% - 10.666667cqw);
  padding: 4.666667cqw 1.066667cqw 1.333333cqw;
  position: absolute;
  top: 12.666667cqw;
  width: 100%;
}

/* 二维码按钮 */
.conInfo .ewmCord {
  align-items: center;
  background-color: #fff;
  border-radius: 1.066667cqw;
  display: flex;
  height: 9.333333cqw;
  justify-content: center;
  padding: 1.333333cqw 1.066667cqw 1.066667cqw;
  position: absolute;
  right: 0;
  top: 2.666667cqw;
  width: 9.333333cqw;
}

.pageArea.share-mode .conInfo .ewmCord { display: none; }
.ewmCord .img1 { height: 100%; width: 100%; }

/* 照片区 */
.infoLeft {
  background-color: #fff;
  border: 0.266667cqw solid hsla(0, 0%, 100%, 0.5);
  border-radius: 0.8cqw;
  box-sizing: border-box;
  height: 28cqw;
  width: 20cqw;
}

.infoLeft .img1 { border-radius: 0.8cqw; height: 100%; width: 100%; }

/* 模拟证件照 */
.photoMock { background: #df0505; overflow: hidden; position: relative; }
.photoMock.has-photo {
  background-position: center center;
  background-size: cover;
}

.photoMock.has-photo .photoHead,
.photoMock.has-photo .photoBody {
  display: none;
}

.photoHead {
  background: #10151a;
  border-radius: 50% 50% 44% 44%;
  height: 7.733333cqw;
  left: 6.133333cqw;
  position: absolute;
  top: 6.933333cqw;
  width: 7.733333cqw;
}
.photoHead::after {
  background: #ead1bd;
  border-radius: 46% 46% 50% 50%;
  content: "";
  height: 6.4cqw;
  left: 0.8cqw;
  position: absolute;
  top: 1.866667cqw;
  width: 6.133333cqw;
}
.photoBody {
  background: linear-gradient(135deg, #25313a, #101820 48%, #1e2b34);
  border-radius: 9.6cqw 9.6cqw 1.066667cqw 1.066667cqw;
  bottom: -0.266667cqw;
  height: 14.666667cqw;
  left: 3.733333cqw;
  position: absolute;
  width: 12.533333cqw;
}
.photoBody::before {
  background: #f2f2ee;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: "";
  height: 6.933333cqw;
  left: 4.266667cqw;
  position: absolute;
  top: 0;
  width: 4.266667cqw;
}
.photoBody::after {
  background: #11161c;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: "";
  height: 5.333333cqw;
  left: 5.333333cqw;
  position: absolute;
  top: 1.066667cqw;
  width: 2.133333cqw;
}

/* 文字信息区 */
.infoRight {
  box-sizing: border-box;
  color: #172824;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 28cqw;
  justify-content: flex-start;
  padding: 1.2cqw 0 0 6.4cqw;
  width: calc(100% - 16.533333cqw);
}

.infoRight .t1 {
  color: #172824;
  font-size: 4.933333cqw;
  font-weight: 500;
  -webkit-text-stroke: 0.6px #172824;
  letter-spacing: 0.7cqw;
  line-height: 1.15;
  margin: 0 0 2.4cqw;
}

.infoRight .t2 {
  box-sizing: border-box;
  color: #172824;
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
  font-size: 3.466667cqw;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  padding-bottom: 0.533333cqw;
}

.t2 .le1 {
  letter-spacing: 0;
  overflow: hidden;
  text-align-last: justify;
  white-space: nowrap;
  width: 16.533333cqw;
}

.t2 .le2 {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
  padding-left: 0.266667cqw;
}

.t2 .le3 {
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
  min-width: 0;
  overflow: visible;
  padding-left: 1.333333cqw;
  white-space: nowrap;
}

.t2 .numValue {
  font-family: "Times New Roman", "SimSun", serif;
}

.cardNo {
  color: #172824;
  font-family: "Times New Roman", "SimSun", serif;
  font-size: 3.333333cqw;
  font-weight: 400;
  line-height: 1.2;
  margin: 1.866667cqw 0 0;
  padding-top: 0;
}

/* 保存按钮 */
.saveBox {
  align-items: center;
  background: var(--themeTxtColor);
  border-radius: 10cqw;
  color: #fff;
  display: none;
  font-size: 3.733333cqw;
  height: 10cqw;
  justify-content: center;
  left: 50%;
  margin: 4cqw auto;
  position: absolute;
  top: 60cqw;
  transform: translateX(-50%);
  transition: all .12s ease-in-out;
  width: 40cqw;
  z-index: 2;
}

.saveBox:hover { box-shadow: 0 0 1.6cqw rgba(0,0,0,.15); opacity: .9; }

/* 当前时间 */
.currentTime {
  color: #939393;
  font-size: 4cqw;
  font-weight: 400;
  margin: 0;
  padding: 0.8cqw 0 1.6cqw;
  position: relative;
  text-align: center;
}

/* 按钮区 */
.btns {
  background-color: #f5f7fb;
  display: flex;
  margin-bottom: 3.333333cqw;
  position: relative;
  width: 100%;
}

/* 分享按钮 */
.shareCode {
  align-items: center;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cg%20stroke%3D%27%232f885f%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13.1%2016.4L22.9%2010.2%27/%3E%3Cpath%20d%3D%27M13.1%2019.6L22.9%2025.8%27/%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2718%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%278%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%2728%27%20r%3D%273%27/%3E%3C/g%3E%3C/svg%3E") no-repeat 8.266667cqw center;
  background-size: 5.6cqw 5.6cqw;
  border: 1px solid #2f885f;
  border-radius: 2.666667cqw;
  color: #2f885f;
  display: flex;
  font-size: 4cqw;
  font-weight: 400;
  height: 10.4cqw;
  justify-content: center;
  margin: 0 auto;
  padding: 0 0 0.533333cqw 6.4cqw;
  transition: all .12s ease-in-out;
  width: 44cqw;
}

.shareCode:hover,
.shareCode:active,
.shareCode.shareCodeHover {
  box-shadow: 0 0 2.666667cqw rgba(47,136,95,.1);
}

/* 权益列表 */
.cardcode {
  max-height: none;
  overflow-y: visible;
  position: relative;
  scrollbar-width: none;
  z-index: 1;
}

.combinedCardItem {
  background-color: #fff;
  border-radius: 2.666667cqw;
  margin: 0 auto 2.666667cqw;
  padding: 0 0 2cqw;
  position: relative;
  width: 90%;
}

.equity {
  align-items: center;
  border-bottom: 0.266667cqw solid #f7f2f2;
  box-sizing: border-box;
  color: #191919;
  display: flex;
  font-size: 4.533333cqw;
  font-weight: 400;
  height: 12cqw;
  margin: 0 0 2.666667cqw;
  padding: 0 5.333333cqw;
}

.equitySmall {
  color: #a0a1a2;
  font-size: 3.2cqw;
  margin-left: 4cqw;
  padding-top: 0.533333cqw;
  white-space: nowrap;
}

.equityItem {
  background: transparent;
  display: flex;
  height: 16cqw;
  transition: all .12s;
  width: 100%;
}

.equityItem:hover { background: rgba(0,0,0,.03); }

.equityItem > span:first-child {
  height: 16cqw;
  width: 14.666667cqw;
}

.equityItem > span:last-child {
  align-items: center;
  box-sizing: border-box;
  color: #191919;
  display: flex;
  flex: 1;
  font-size: 4cqw;
  height: 16cqw;
  margin-right: 6.666667cqw;
}

.equityItem:not(:last-child) > span:last-child {
  border-bottom: 1px solid #eaebec;
}

.equityItem1 {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 4.666667cqw;
}

.equityItem1-right {
  display: flex;
}

.description {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #b4b4b4;
  display: -webkit-box;
  flex: 1;
  font-size: 3.2cqw;
  line-height: 1.5;
  margin-left: 1.333333cqw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Nine-grid {
  box-sizing: border-box;
  display: grid;
  gap: 1.333333cqw;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 2.666667cqw;
  width: 100%;
}

.Nine-grid-item {
  align-items: center;
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  display: flex;
  flex-direction: column;
  font: inherit;
  min-width: 0;
  padding: 1.333333cqw 0;
  text-align: center;
  width: 100%;
}

.Nine-grid-item-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 10.666667cqw;
  width: 10.666667cqw;
}

.Nine-grid-title {
  box-sizing: border-box;
  color: #191919;
  font-size: 3.733333cqw;
  font-weight: 400;
  line-height: 1.48;
  margin-top: 2.666667cqw;
  overflow-wrap: normal;
  padding: 0 0.666667cqw;
  text-align: center;
  width: 100%;
  word-break: normal;
}

.Nine-grid-title-line {
  display: block;
  white-space: nowrap;
}

.cardcodeFooter { height: env(safe-area-inset-bottom); width: 100%; }

/* 动画 */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInRight { animation-name: fadeInRight; }
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%,0,0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0,100%,0); }
  to { opacity: 1; transform: none; }
}