.credits-framer-page {
  min-width: 1200px;
  background: #000;
  color: #e1f0ec;
  font-family: Satoshi, "Microsoft YaHei", sans-serif;
}

.credits-framer-page .site-header {
  grid-template-columns: 1fr auto 1fr;
  min-height: 74px;
  padding: 0 72px;
  background: #030807;
  border-color: rgba(133, 206, 194, .15);
}

.credits-framer-page .search { display: none; }
.credits-framer-page .header-actions { position: static; grid-column: 2; justify-self: center; gap: 30px; color: #b0ccc7; font-size: 14px; }
.credits-framer-page .nav-button { position: absolute; right: 72px; min-height: 35px; padding: 9px 16px; border: 1px solid rgba(138, 205, 197, .34); border-radius: 6px; background: rgba(62, 133, 128, .28); color: #e5f8f4; font-size: 14px; font-weight: 500; }
.credits-framer-page .account-menu { position: absolute; right: 72px; }
.credits-framer-page .brand { color: #e0f6f2; font-size: 17px; font-weight: 700; }
.credits-framer-page .brand-cn, .credits-framer-page .brand-en { color: inherit; font-size: inherit; }
.credits-framer-page .brand-en { margin-left: 3px; }

.credits-framer-page .credits-page {
  position: relative;
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
  padding: 104px 0 110px;
}

.credits-framer-page .credits-page::before {
  position: absolute;
  z-index: -1;
  top: 24px;
  left: 50%;
  width: 860px;
  height: 570px;
  content: "";
  background: radial-gradient(ellipse at center, rgba(47, 145, 132, .28) 0%, rgba(17, 70, 62, .18) 38%, transparent 72%);
  transform: translateX(-50%);
  filter: blur(8px);
}

.credits-framer-page .credits-hero {
  display: grid;
  grid-template-columns: 1fr 268px;
  align-items: end;
  gap: 72px;
  min-height: 195px;
  padding: 0 0 62px;
  border: 0;
  text-align: center;
}

.credits-framer-page .credits-hero > div { grid-column: 1 / -1; width: 100%; text-align: center; }
.credits-framer-page .credits-hero .eyebrow,
.credits-framer-page .section-heading .eyebrow { display: block; width: 100%; max-width: none; margin: 0 0 14px; color: #75b8ae; font-size: 13px; font-weight: 500; }
.credits-framer-page .credits-hero h1 { max-width: none; margin: 0 0 21px; background: linear-gradient(0deg, #f7fcfb, #82c2bb); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 56px; font-weight: 500; letter-spacing: 0; line-height: 1.1; }
.credits-framer-page .credits-hero > div > p:last-child { max-width: 650px; margin: 0 auto; color: rgba(224, 240, 237, .76); font-size: 17px; line-height: 1.65; }

.credits-framer-page .balance-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 28px;
  width: 100%;
  box-sizing: border-box;
  margin: 28px 0 0;
  padding: 22px 24px;
  border: 1px solid rgba(128, 207, 193, .25);
  border-radius: 7px;
  background: rgba(7, 24, 21, .72);
  text-align: left;
}

.credits-framer-page .balance-panel > span { grid-column: 1; grid-row: 1; color: #98b9b3; font-size: 12px; }
.credits-framer-page .balance-panel strong { grid-column: 1; grid-row: 2; color: #d8f3ed; font-size: 24px; font-weight: 500; }
.credits-framer-page .balance-panel p { grid-column: 1; grid-row: 3; margin: 2px 0 0; color: #91afa9; font-size: 13px; line-height: 1.5; }
.credits-framer-page .balance-panel .secondary-button { grid-column: 2; grid-row: 1 / span 3; min-width: 108px; padding: 0 14px; }

.credits-framer-page .credit-promotion-banner {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  margin: 0 0 68px;
  padding: 24px 30px;
  border: 1px solid rgba(125, 209, 195, .28);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(11, 45, 39, .94), rgba(18, 76, 66, .68), rgba(8, 20, 18, .86));
  box-shadow: 0 0 42px rgba(43, 162, 145, .12);
}

.credits-framer-page .credit-promotion-banner h2 { margin: 0 0 7px; color: #edfdfa; font-size: 22px; font-weight: 500; }
.credits-framer-page .credit-promotion-banner p { margin: 0; color: #a9c9c3; font-size: 14px; }
.credits-framer-page .promotion-benefit,
.credits-framer-page .promotion-countdown { min-width: 148px; padding-left: 28px; border-left: 1px solid rgba(150, 223, 211, .22); text-align: right; }
.credits-framer-page .promotion-benefit span,
.credits-framer-page .promotion-countdown span { color: #9bbcb7; font-size: 12px; }
.credits-framer-page .promotion-benefit strong,
.credits-framer-page .promotion-countdown strong { display: block; margin-top: 5px; color: #e3faf5; font-size: 18px; font-weight: 500; }
.credits-framer-page .promotion-benefit strong { color: #8be2d4; font-size: 26px; }

.credits-framer-page .pricing-section { padding: 0; }
.credits-framer-page .section-heading { width: 100%; max-width: none; margin: 0 0 34px; text-align: center; }
.credits-framer-page .section-heading h2 { margin: 0; color: #f2fbf9; font-size: 34px; font-weight: 500; line-height: 1.25; }
.credits-framer-page .pricing-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow: visible; border: 0; background: transparent; }
.credits-framer-page .pricing-head { display: none; }

.credits-framer-page .pricing-row.credit-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 398px;
  padding: 26px 22px 20px;
  border: 1px solid rgba(128, 198, 187, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 31, 28, .9), rgba(4, 10, 9, .94));
  color: #b7d0ca;
}

.credits-framer-page .pricing-row.credit-plan > strong { min-height: 48px; color: #effbf8; font-size: 21px; font-weight: 500; line-height: 1.3; }
.credits-framer-page .pricing-row.credit-plan > span { display: block; padding: 14px 0; border-top: 1px solid rgba(139, 208, 197, .16); color: #a9c5bf; font-size: 14px; line-height: 1.5; }
.credits-framer-page .pricing-row.credit-plan > .credit-price { padding-top: 4px; border: 0; color: #e4f8f4; font-size: 25px; font-weight: 500; }
.credits-framer-page .pricing-row.credit-plan > .credit-amount { color: #8bd3c7; }
.credits-framer-page .pricing-row.credit-plan > .credit-bonus { margin: 2px 0; padding: 8px 10px; border: 1px solid rgba(116, 220, 203, .22); border-radius: 5px; background: rgba(42, 124, 110, .18); color: #a9f1e4; font-weight: 600; }
.credits-framer-page .pricing-row.credit-plan > .credit-output { color: #c1dad5; }
.credits-framer-page .pricing-row.credit-plan > .credit-description { flex: 1; color: #9db9b3; }
.credits-framer-page .pricing-row.credit-plan button { width: 100%; min-height: 40px; margin-top: 17px; border-radius: 6px; font-size: 14px; }

.credits-framer-page .pricing-row.credit-plan.is-recommended {
  z-index: 1;
  border-color: rgba(135, 226, 211, .58);
  background: linear-gradient(180deg, rgba(18, 63, 54, .98), rgba(5, 16, 14, .98));
  box-shadow: 0 0 4px rgba(170, 243, 232, .46), 0 0 42px rgba(53, 181, 161, .18);
}

.credits-framer-page .pricing-row.credit-plan.is-recommended::before {
  position: absolute;
  top: -11px;
  left: 50%;
  padding: 4px 9px;
  border: 1px solid rgba(153, 238, 222, .58);
  border-radius: 999px;
  background: #1d766a;
  color: #e8fbf7;
  content: "推荐";
  font-size: 11px;
  transform: translateX(-50%);
}

.credits-framer-page .pricing-row.credit-plan.has-promotion { border-color: rgba(137, 221, 207, .42); }
.credits-framer-page .content-note { margin: 22px 0 0; border-color: rgba(128, 198, 187, .18); background: rgba(10, 31, 27, .68); color: #b8d3cd; }
.credits-framer-page .content-note.is-success { border-color: rgba(121, 223, 198, .36); color: #b9f0e2; }

.credits-framer-page .credit-rules { margin-top: 116px; padding-top: 0; border: 0; }
.credits-framer-page .rule-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.credits-framer-page .rule-grid article { min-height: 154px; padding: 24px; border: 1px solid rgba(128, 198, 187, .2); border-radius: 8px; background: #091412; }
.credits-framer-page .rule-grid strong { color: #e2f5f0; font-size: 17px; font-weight: 500; }
.credits-framer-page .rule-grid p { margin: 14px 0 0; color: #a5c0ba; font-size: 14px; line-height: 1.65; }

.credits-framer-page .site-footer { width: min(1200px, calc(100% - 80px)); margin: 0 auto; border-color: rgba(129, 200, 189, .16); color: #8faeaa; }
.credits-framer-page .site-footer a { color: #8faeaa; }

/* Framer desktop frame: 1200 canvas, 1040 content rail, 1120 section rail. */
.credits-framer-page .credits-page {
  width: 100%;
  margin: 0;
  padding: 0 0 96px;
  background: transparent !important;
}

.credits-framer-page .credits-page::before { display: none; }

.credits-framer-page .credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 104px 32px 0;
  text-align: center;
}

.credits-framer-page .credits-hero > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1040px;
  max-width: none;
  text-align: center;
}

.credits-framer-page .credits-hero .eyebrow,
.credits-framer-page .section-heading .eyebrow {
  margin: 0;
  color: #70d2c4;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.credits-framer-page .credits-hero h1 {
  margin: 18px 0;
  background: none;
  color: #edfaf8;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.14;
}

.credits-framer-page .credits-hero > div > p:last-child {
  width: 720px;
  max-width: none;
  margin: 0;
  color: #a4c5c0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.credits-framer-page .balance-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 28px;
  width: 1040px;
  margin: 52px 0 0;
  padding: 24px 28px;
  border: 1px solid rgba(117, 206, 192, .22);
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(8, 34, 30, .88), rgba(7, 18, 16, .94));
  box-shadow: 0 0 38px rgba(57, 168, 153, .13);
}

.credits-framer-page .balance-panel > span { color: #97c1bb; font-size: 14px; font-weight: 500; }
.credits-framer-page .balance-panel strong { color: #edfaf8; font-size: 27px; font-weight: 700; line-height: 1.25; }
.credits-framer-page .balance-panel p { color: #83a8a2; font-size: 13px; line-height: 1.5; }
.credits-framer-page .balance-panel .secondary-button { min-height: 40px; padding: 11px 18px; font-size: 14px; }
.credits-framer-page .credit-promotion-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  width: 1040px;
  margin: 58px auto 0;
  padding: 26px 30px;
  border-color: rgba(123, 222, 205, .36);
  background: linear-gradient(112deg, rgba(9, 42, 37, .96), rgba(25, 105, 92, .58), rgba(4, 14, 13, .94));
  box-shadow: 0 0 4px rgba(153, 241, 226, .34), 0 0 48px rgba(44, 179, 158, .16);
}
.credits-framer-page .credit-promotion-banner[hidden] { display: none; }
.credits-framer-page .credit-promotion-banner h2 { margin-bottom: 8px; font-size: 24px; font-weight: 700; }
.credits-framer-page .promotion-benefit strong { font-size: 29px; }
.credits-framer-page .credit-promotion-banner:not([hidden]) + .pricing-section { padding-top: 72px; }

.credits-framer-page .pricing-section {
  width: 1120px;
  margin: 0 auto;
  padding: 108px 32px 112px;
}

.credits-framer-page .section-heading { margin: 0 0 32px; }
.credits-framer-page .section-heading h2 { color: #ebf9f6; font-size: 34px; font-weight: 700; line-height: 1.22; }
.credits-framer-page .pricing-table { width: 1000px; margin: 0 auto; }

.credits-framer-page .pricing-row.credit-plan {
  min-height: 340px;
  padding: 24px 22px 22px;
  border-color: rgba(126, 191, 181, .24);
  background: linear-gradient(155deg, rgba(11, 37, 33, .90), rgba(4, 12, 11, .98));
}

.credits-framer-page .pricing-row.credit-plan > strong { min-height: 0; color: #edf9f7; font-size: 21px; font-weight: 700; }
.credits-framer-page .pricing-row.credit-plan > .credit-price { padding: 10px 0 16px; color: #edf9f7; font-size: 25px; font-weight: 700; }
.credits-framer-page .pricing-row.credit-plan > span { font-size: 14px; line-height: 1.55; }
.credits-framer-page .pricing-row.credit-plan button { min-height: 40px; margin-top: 18px; font-size: 14px; }

.credits-framer-page .credit-rules {
  width: 1120px;
  margin: 0 auto;
  padding: 74px 32px 96px;
  border-top-color: rgba(111, 184, 173, .16);
}

.credits-framer-page .credit-rules .section-heading h2 { font-size: 30px; line-height: 1.25; }
.credits-framer-page .credit-rules-grid { width: 1000px; margin: 0 auto; gap: 12px; }
.credits-framer-page .credit-rules-grid article { min-height: 136px; padding: 20px; border-radius: 8px; background: rgba(8, 30, 26, .72); }

.credits-framer-page .buy-button { border-color: #fff; background: #fff; color: #07100f; box-shadow: none; }
.credits-framer-page .secondary-button { border-color: rgba(122, 205, 194, .32); background: rgba(68, 143, 135, .35); color: #d6f0ea; }