* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #eef4fb;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, #f3f7ff 0%, #f6fbff 45%, #eef5fb 100%);
  overflow-x: hidden;
  position: relative;
  box-shadow: 0 0 28px rgba(18, 39, 79, 0.12);
}

.hero {
  height: 205px;
  position: relative;
  overflow: hidden;
  background: #eaf1fb;
}

.hero::before,
.hero::after {
  display: none;
}

.hero::before {
  width: 86px;
  height: 86px;
  left: 24px;
  top: 63px;
  background:
    radial-gradient(circle at 48% 48%, rgba(255,255,255,.18) 0 15px, transparent 16px),
    radial-gradient(circle, rgba(166, 185, 218, .22), rgba(166, 185, 218, .05) 66%);
  box-shadow: inset 16px 4px 18px rgba(175, 192, 225, .22);
}

.hero::after {
  width: 60px;
  height: 60px;
  right: 40px;
  top: 78px;
  background:
    radial-gradient(circle at 35% 30%, #fff8df 0 7px, transparent 8px),
    radial-gradient(circle at 53% 58%, #caa86e 0 14px, #dfc692 15px 25px, #b9955a 26px 30px, transparent 31px);
  box-shadow: 0 14px 22px rgba(128, 96, 54, .24);
  animation-delay: .45s;
}

.banner-carousel {
  background: linear-gradient(135deg, #eaf1ff, #f7fbff);
}

.banner-track {
  height: 100%;
  display: flex;
  transition: transform .42s ease;
}

.banner-slide {
  min-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf1ff, #f7fbff);
}

.banner-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.banner-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 32%, rgba(255, 255, 255, .72) 0 34px, transparent 92px),
    radial-gradient(circle at 82% 48%, rgba(239, 208, 160, .66) 0 28px, transparent 86px),
    linear-gradient(135deg, #5364ff, #7f55ff 48%, #f0ca8d);
  color: #fff;
  text-align: center;
}

.banner-fallback strong {
  font-size: 32px;
  font-weight: 900;
  text-shadow: 0 8px 22px rgba(25, 37, 88, .3);
}

.banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.banner-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 1px 4px rgba(20, 31, 58, .18);
  cursor: pointer;
}

.banner-dots button.active {
  width: 18px;
  background: #fff;
}

.logo-card {
  width: 98px;
  height: 92px;
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  background: #071018;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(4, 13, 24, .13);
}

.logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-card span {
  color: #fff;
  font-size: 46px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -6px;
  text-shadow: 0 0 12px rgba(255,255,255,.25);
}

.logo-card span::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 8px;
  background: rgba(255,255,255,.88);
  transform: rotate(-24deg);
  left: -18px;
  top: 43px;
  clip-path: polygon(0 42%, 82% 0, 100% 100%, 18% 58%);
}

.domain-pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(360px, calc(100% - 44px));
  height: 37px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 58px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #525aff, #614cff, #4861ff);
  color: #fff;
  font-size: clamp(14px, 4.3vw, 18px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  box-shadow: 0 9px 22px rgba(79, 82, 239, .32);
  z-index: 3;
  animation: pillPulse 2.2s ease-in-out infinite;
}

.dice,
.chip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  animation: bob 3s ease-in-out infinite;
}

.dice {
  width: 48px;
  height: 48px;
  left: calc(50% - 176px);
  bottom: 16px;
  transform: rotate(18deg);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #e7edf8);
  box-shadow: 0 9px 16px rgba(80, 102, 145, .2);
}

.dice i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c08d45;
}

.dice i:nth-child(1) { left: 12px; top: 12px; }
.dice i:nth-child(2) { right: 12px; top: 12px; }
.dice i:nth-child(3) { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dice i:nth-child(4) { left: 12px; bottom: 12px; }
.dice i:nth-child(5) { right: 12px; bottom: 12px; }

.chip {
  width: 74px;
  height: 40px;
  right: calc(50% - 184px);
  bottom: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 48%, rgba(255,255,255,.7) 0 11px, transparent 12px), linear-gradient(135deg, #8b79ff, #dad8ff 45%, #b7945c 46%, #fff6df 70%, #c0a26d);
  box-shadow: 0 8px 18px rgba(80, 72, 135, .2);
  animation-delay: .65s;
}

.notice {
  height: 68px;
  margin: 0 8px 10px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  color: #7887b5;
  font-size: 14px;
  overflow: hidden;
}

.notice-icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  background: #7785b7;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  line-height: 17px;
  position: relative;
  z-index: 2;
}

.notice-text-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 22px;
  display: flex;
  align-items: center;
}

.notice-marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 13s linear infinite;
  font-weight: 500;
  padding-left: 100%;
}

.tabs {
  margin: 0 8px 10px;
  padding: 15px 10px 19px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  background: #fff;
}

.tab-btn {
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.tab-btn.active {
  background: #efd0a0;
}

.tab-btn:active {
  transform: scale(.97);
}

.content {
  padding: 10px 18px 34px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 7px;
}

.item {
  height: 86px;
  border-radius: 9px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 14px rgba(76, 95, 134, .16);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(76, 95, 134, .22);
}

.app-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  padding: 3px;
  background: #fff;
  border: 1px solid #ecedf3;
  box-shadow: inset 0 0 0 3px #fff, 0 2px 6px rgba(24, 35, 65, .08);
}

.app-icon-inner {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  line-height: 1.05;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #5764ff, #d7a860);
}

.app-icon-inner::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: conic-gradient(from 120deg, transparent, rgba(255,255,255,.45), transparent 34%);
  animation: rotateLight 2.8s linear infinite;
}

.app-icon-inner span {
  position: relative;
  z-index: 1;
}

.app-icon-img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
  display: block;
}

.title {
  margin-top: 7px;
  max-width: 68px;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(90deg, #ff9200, #fff000, #00e646, #00b7ff, #102dff, #fa00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 180% 100%;
  animation: rainbow 2.4s linear infinite;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-panel {
  display: none;
}

.menu-panel.active {
  display: block;
}

.empty {
  grid-column: 1 / -1;
  padding: 24px 0;
  color: #8a95b4;
  text-align: center;
  font-size: 14px;
}

.footer-line {
  height: 4px;
  width: 28px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(31, 41, 55, .35);
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(18deg); }
  50% { transform: translateY(-7px) rotate(12deg); }
}

@keyframes pillPulse {
  0%, 100% { box-shadow: 0 9px 22px rgba(79, 82, 239, .28); }
  50% { box-shadow: 0 11px 30px rgba(79, 82, 239, .48); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes loadProgress {
  0% { width: 0; }
  65% { width: 78%; }
  100% { width: 100%; }
}

@keyframes rainbow {
  0% { background-position: 0 0; }
  100% { background-position: -180% 0; }
}

@keyframes rotateLight {
  to { transform: rotate(360deg); }
}

@media (max-width: 380px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .grid { gap: 14px 6px; }
  .item { height: 82px; }
  .app-icon { width: 39px; height: 39px; }
  .title { font-size: 12px; max-width: 62px; }
}