ai-human/miniprogram/pages/index/index.wxss

page {
  min-height: 100vh;
  background: #f8faff;
  color: #101522;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.home-page {
  width: 750rpx;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* background:
    radial-gradient(circle at 74% 11%, rgba(116, 114, 255, 0.13), transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 56%, #ffffff 100%); */
}

.home-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 22rpx 28rpx 22rpx;
  box-sizing: border-box;
}

.topbar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.brand {
  font-size: 32rpx;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  color: #121521;
}

.coin-pill {
  display: flex;
  align-items: center;
  gap: 8rpx;
  height: 52rpx;
  margin-right: 160rpx;
  margin-bottom: 10rpx;
  padding: 0 22rpx 0 12rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6rpx 18rpx rgba(84, 91, 167, 0.14);
  border: 1rpx solid rgba(222, 226, 255, 0.88);
}

.coin-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd875, #ff9f25);
}

.coin-label {
  font-size: 26rpx;
  font-weight: 700;
  color: #25283a;
}

.coin-count {
  font-size: 26rpx;
  font-weight: 800;
  color: #6763ff;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 238rpx;
  padding-top: 16rpx;
}

.hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-title-accent,
.hero-title-main {
  display: block;
  font-size: 44rpx;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.hero-title-accent {
  color: #6356ff;
  text-shadow: 0 5rpx 0 rgba(99, 86, 255, 0.12);
}

.hero-title-main {
  margin-top: 10rpx;
  color: #070a16;
}

.hero-subtitle {
  margin-top: 32rpx;
  font-size: 24rpx;
  line-height: 1.4;
  color: #4a4e5d;
}

.hero-visual {
  width: 236rpx;
  min-height: 202rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8rpx;
}

.visual-halo {
  width: 162rpx;
  height: 162rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(111, 107, 255, 0.18), rgba(92, 191, 255, 0.05));
  margin-bottom: -138rpx;
  transform: translateX(18rpx);
}

.visual-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -16rpx;
}

.video-tile {
  width: 110rpx;
  height: 100rpx;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7d6dff 0%, #358cf3 100%);
  box-shadow: 22rpx 12rpx 0 rgba(81, 210, 255, 0.34), 0 16rpx 34rpx rgba(77, 83, 234, 0.34);
  transform: translateY(-18rpx);
}

.play-mark {
  width: 0;
  height: 0;
  border-top: 24rpx solid transparent;
  border-bottom: 24rpx solid transparent;
  border-left: 34rpx solid #ffffff;
  margin-left: 8rpx;
}

.ai-chip {
  width: 48rpx;
  height: 50rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 23rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #579dff, #8852ff);
  box-shadow: 0 10rpx 22rpx rgba(109, 88, 255, 0.28);
  margin-left: -4rpx;
  transform: translateY(8rpx);
}

.orbital-base {
  width: 178rpx;
  height: 58rpx;
  border-radius: 50%;
  background: linear-gradient(90deg, #6c55f8, #edf6ff 46%, #8873ff);
  box-shadow: 0 12rpx 22rpx rgba(96, 116, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.base-center {
  width: 110rpx;
  height: 34rpx;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 14rpx rgba(92, 115, 255, 0.2);
}

.card,
.sample-card,
.success-strip,
.tip-strip {
  /* border: 1rpx solid rgba(215, 220, 249, 0.95); */
  box-shadow: 0 8rpx 24rpx rgba(74, 88, 148, 0.06);
  background: rgba(255, 255, 255, 0.94);
  box-sizing: border-box;
}

.card {
  border-radius: 18rpx;
  padding: 26rpx 24rpx;
  display: flex;
  flex-direction: column;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 26rpx;
  line-height: 1.2;
  font-weight: 800;
  color: #141720;
}

.step-dot {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #506bff, #8155ff);
}

.help-link {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #8389a5;
  font-size: 21rpx;
  font-weight: 600;
  white-space: nowrap;
}

.help-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #a7add3;
  font-size: 17rpx;
  line-height: 1;
  box-sizing: border-box;
}

.input-row {
  margin-top: 26rpx;
  height: 84rpx;
  padding: 0 16rpx 0 22rpx;
  border-radius: 14rpx;
  border: 2rpx solid #d8d5ff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background: #ffffff;
}

.link-input {
  flex: 1;
  min-width: 0;
  height: 80rpx;
  font-size: 25rpx;
  color: #2a3041;
}

.input-placeholder {
  color: #a9aec6;
  font-weight: 500;
}

.paste-btn {
  width: 124rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 10rpx;
  color: #ffffff;
  font-size: 22rpx;
  font-weight: 800;
  background: linear-gradient(135deg, #528bff, #7b52ff);
}

.primary-action,
.polish-btn,
.generate-btn,
.sample-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #4f85ff 0%, #8b3df0 100%);
  box-shadow: 0 8rpx 18rpx rgba(84, 96, 255, 0.18);
}

.primary-action {
  margin-top: 28rpx;
  height: 74rpx;
  border-radius: 14rpx;
  gap: 18rpx;
  font-size: 28rpx;
  font-weight: 800;
}

.plane-icon {
  width: 28rpx;
  height: 22rpx;
  display: block;
  border-top: 10rpx solid transparent;
  border-bottom: 10rpx solid transparent;
  border-left: 32rpx solid #ffffff;
  box-sizing: border-box;
  transform: rotate(-22deg);
}

.success-strip {
  min-height: 70rpx;
  border-radius: 18rpx;
  padding: 12rpx 16rpx;
  display: flex;
  align-items: center;
  gap: 14rpx;
  background: linear-gradient(90deg, #e7fbf0 0%, #f6fffb 100%);
  border-color: #c8f1dc;
}

.success-icon {
  width: 42rpx;
  height: 42rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #24c878;
}

.check-mark {
  width: 18rpx;
  height: 10rpx;
  display: block;
  border-left: 5rpx solid #ffffff;
  border-bottom: 5rpx solid #ffffff;
  transform: rotate(-45deg) translateY(-2rpx);
}

.success-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.success-title {
  color: #131720;
  font-size: 25rpx;
  font-weight: 800;
  line-height: 1.18;
}

.success-subtitle {
  margin-top: 4rpx;
  color: #747b8d;
  font-size: 21rpx;
  line-height: 1.15;
}

.outline-btn {
  width: 118rpx;
  height: 46rpx;
  border-radius: 999rpx;
  border: 2rpx solid #c4c4ff;
  color: #7165ff;
  text-align: center;
  line-height: 46rpx;
  font-size: 21rpx;
  font-weight: 800;
  background: #ffffff;
}

.copy-card {
  gap: 18rpx;
  padding-bottom: 18rpx;
}

.copy-head {
  min-height: 36rpx;
}

.copy-title {
  font-size: 26rpx;
  font-weight: 800;
  color: #121722;
}

.copy-btn {
  height: 38rpx;
  padding: 0 12rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  border: 1rpx solid #e0ddff;
  color: #665fff;
  background: #ffffff;
  font-size: 21rpx;
  font-weight: 800;
}

.copy-icon {
  width: 18rpx;
  height: 18rpx;
  display: block;
  border: 3rpx solid currentColor;
  border-radius: 3rpx;
  box-sizing: border-box;
  box-shadow: 6rpx -5rpx 0 -2rpx #ffffff, 6rpx -5rpx 0 0 currentColor;
}

.copy-box {
  min-height: 168rpx;
  padding: 12rpx 16rpx;
  border-radius: 12rpx;
  border: 2rpx solid #d7d5ff;
  color: #232838;
  font-size: 22rpx;
  line-height: 1.55;
  font-weight: 600;
  background: #ffffff;
  box-sizing: border-box;
}

.polish-btn {
  height: 72rpx;
  border-radius: 13rpx;
  display: flex;
  flex-direction: column;
}

.spark-icon {
  width: 26rpx;
  height: 26rpx;
  display: block;
  margin-right: 10rpx;
  background: #ffffff;
  border-radius: 4rpx;
  transform: rotate(45deg);
}

.polish-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* gap: 4rpx; */
}

.polish-title {
  font-size: 28rpx;
  line-height: 1;
  font-weight: 800;
}

.polish-subtitle {
  font-size: 20rpx;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
}

.tip-strip {
  min-height: 44rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  color: #6569ff;
  font-size: 22rpx;
  font-weight: 700;
  background: #f8faff;
}

.tip-icon {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #6867ff;
  box-sizing: border-box;
  font-size: 18rpx;
  font-weight: 900;
}

.generate-btn {
  height: 58rpx;
  border-radius: 13rpx;
  gap: 28rpx;
  font-size: 27rpx;
  font-weight: 800;
}

.arrow-icon {
  width: 18rpx;
  height: 18rpx;
  display: block;
  border-top: 5rpx solid #ffffff;
  border-right: 5rpx solid #ffffff;
  transform: rotate(45deg);
}

.flow-card {
  /* padding-top: 28rpx;
  padding-bottom: 30rpx;
   */
}

.flow-heading {
  font-size: 27rpx;
  font-weight: 800;
  color: #161923;
}

.flow-list {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-item {
  width: 178rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.flow-icon {
  width: 86rpx;
  height: 82rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6455ff;
  font-weight: 900;
  background: linear-gradient(145deg, #ffffff, #eef1ff);
  box-shadow: inset 0 0 0 2rpx rgba(213, 218, 255, 0.9), 0 8rpx 16rpx rgba(85, 96, 160, 0.08);
}

.chain-icon text,
.chain-icon::after {
  width: 34rpx;
  height: 20rpx;
  border: 6rpx solid currentColor;
  border-radius: 999rpx;
  box-sizing: border-box;
  display: block;
}

.chain-icon {
  gap: 0;
  transform: rotate(-36deg);
}

.chain-icon::after {
  content: "";
  margin-left: -10rpx;
}

.doc-icon {
  font-size: 24rpx;
}

.bot-icon text {
  width: 48rpx;
  height: 34rpx;
  display: block;
  border-radius: 16rpx;
  background: currentColor;
}

.bot-icon text::before,
.bot-icon text::after {
  content: "";
  display: block;
}

.flow-title {
  margin-top: 18rpx;
  color: #141720;
  font-size: 22rpx;
  font-weight: 800;
  line-height: 1.2;
}

.flow-desc {
  margin-top: 10rpx;
  color: #888fa5;
  font-size: 19rpx;
  line-height: 1.2;
  white-space: nowrap;
}

.flow-arrow {
  width: 28rpx;
  height: 4rpx;
  border-radius: 999rpx;
  background: #c1c2ec;
  align-self: center;
  margin-bottom: 50rpx;
}

.flow-arrow::after {
  content: "";
  display: block;
  width: 12rpx;
  height: 12rpx;
  border-top: 4rpx solid #c1c2ec;
  border-right: 4rpx solid #c1c2ec;
  transform: rotate(45deg) translate(8rpx, -9rpx);
}

.sample-card {
  /* min-height: 124rpx; */
  border-radius: 18rpx;
  /* padding: 18rpx 28rpx 18rpx 24rpx; */
  display: flex;
  align-items: center;
  /* gap: 20rpx; */
  background: linear-gradient(100deg, #f0f4ff 0%, #fbfcff 100%);
}

.gift-box {
  width: 88rpx;
  height: 86rpx;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  filter: drop-shadow(0 8rpx 14rpx rgba(112, 111, 255, 0.22));
}

.gift-top {
  width: 72rpx;
  height: 18rpx;
  border-radius: 7rpx 7rpx 3rpx 3rpx;
  background: linear-gradient(90deg, #dfe8ff, #7874ff, #dfe8ff);
}

.gift-body {
  width: 62rpx;
  height: 54rpx;
  border-radius: 4rpx 4rpx 9rpx 9rpx;
  background: linear-gradient(90deg, #d7e3ff 0 35%, #8777ff 35% 52%, #c8d9ff 52% 100%);
}

.sample-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.sample-title {
  color: #141721;
  font-size: 26rpx;
  font-weight: 800;
  line-height: 1.1;
}

.sample-desc {
  color: #7f859b;
  font-size: 20rpx;
  line-height: 1.2;
  white-space: nowrap;
}

.sample-btn {
  width: 150rpx;
  height: 62rpx;
  border-radius: 999rpx;
  flex-shrink: 0;
  font-size: 23rpx;
  font-weight: 800;
}

.tabbar {
  height: 110rpx;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1rpx solid rgba(219, 224, 241, 0.86);
  box-sizing: content-box;
}

.tab-item {
  width: 170rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  color: #626777;
  font-size: 21rpx;
  font-weight: 600;
}

.tab-item.active {
  color: #665cff;
  font-weight: 800;
}

.tab-icon {
  width: 34rpx;
  height: 34rpx;
  border-radius: 9rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  line-height: 1;
  color: currentColor;
  box-sizing: border-box;
}

.tab-item.active .tab-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #536dff, #7b55ff);
}

.record-icon {
  border: 4rpx solid currentColor;
  border-radius: 9rpx;
}

.record-icon text {
  width: 0;
  height: 0;
  display: block;
  border-top: 7rpx solid transparent;
  border-bottom: 7rpx solid transparent;
  border-left: 11rpx solid currentColor;
  margin-left: 3rpx;
}

.mine-icon {
  border: 4rpx solid currentColor;
  border-radius: 50%;
}

.home-icon text {
  width: 14rpx;
  height: 14rpx;
  display: block;
  border-radius: 4rpx;
  background: currentColor;
  transform: rotate(45deg);
}







.icon-placeholder {
  display: block;
  flex-shrink: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}