/* ==========================================================================
   单 APP 跳转页 —— 自定义样式
   --------------------------------------------------------------------------
   为什么还有这个文件？
     页面的布局、间距、字号、颜色全部用 Tailwind 类写在 HTML 里。
     但下面这些用工具类表达会很啰嗦、也不好调，所以单独放这里：
       · 背景极光（三团光晕漂移）
       · 噪点层
       · 磨砂玻璃卡片的阴影细节
       · 星星的两层叠加裁切
       · 按钮上的光带和加载转圈
       · 页面外壳（body 居中 + iPhone 安全区）
   数值和上一版保持一致，观感不变。
   ========================================================================== */

/* ---------------------------------------------------------------- 配色预设 */
:root {
  --neon-1:    #8b5cf6;
  --neon-2:    #d946ef;
  --neon-glow: 139, 92, 246;

  --radius-card: 26px;
  --radius-icon: 28%;          /* ★ 大圆角软方形（不是直角方块） */
}

body.accent-violet  { --neon-1: #8b5cf6; --neon-2: #d946ef; --neon-glow: 139, 92, 246; }
body.accent-cyan    { --neon-1: #22d3ee; --neon-2: #3b82f6; --neon-glow: 34, 211, 238; }
body.accent-rose    { --neon-1: #fb7185; --neon-2: #f43f5e; --neon-glow: 251, 113, 133; }
body.accent-amber   { --neon-1: #fbbf24; --neon-2: #f97316; --neon-glow: 251, 191, 36; }
body.accent-emerald { --neon-1: #34d399; --neon-2: #14b8a6; --neon-glow: 52, 211, 153; }

/* ---------------------------------------------------------------- 页面外壳 */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;                    /* 手机地址栏收起来时更准 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  background: #07080f;
  color: #f2f4f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;

  /* iPhone 刘海 / 底部横条留出空间 */
  padding: calc(28px + env(safe-area-inset-top)) 20px
           calc(28px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- 背景极光 */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}

.aurora-blob--1 {
  width: 68vmax; height: 68vmax;
  top: -30vmax; left: -22vmax;
  background: radial-gradient(circle at 30% 30%, var(--neon-1), transparent 68%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.aurora-blob--2 {
  width: 58vmax; height: 58vmax;
  bottom: -26vmax; right: -20vmax;
  background: radial-gradient(circle at 60% 60%, var(--neon-2), transparent 68%);
  opacity: .42;
  animation: drift2 26s ease-in-out infinite alternate;
}
.aurora-blob--3 {
  width: 46vmax; height: 46vmax;
  top: 42%; left: 52%;
  background: radial-gradient(circle, #22d3ee, transparent 70%);
  opacity: .22;
  animation: drift3 30s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-9vmax, -5vmax, 0) scale(.92); }
}
@keyframes drift3 {
  from { transform: translate3d(-50%, -50%, 0) scale(1);      opacity: .18; }
  to   { transform: translate3d(-42%, -58%, 0) scale(1.25);   opacity: .30; }
}

/* 一层极细噪点，防止大面积渐变出现色带 */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 磨砂玻璃卡片 */
.glass-card {
  position: relative;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-card);

  /* 两行都要写：Safari 只认 -webkit- 前缀 */
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);

  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .03),
    0 1px 0 0 rgba(255, 255, 255, .22) inset;

  animation: cardIn .7s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s ease;
}

/* 卡片顶部一道渐隐的霓虹反光 */
.glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-glow), .9), transparent);
  opacity: .75;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* 只在真有鼠标的设备上做 hover（手机上点了会「粘住」） */
@media (hover: hover) and (pointer: fine) {
  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 32px 76px -14px rgba(0, 0, 0, .8),
      0 0 0 1px rgba(255, 255, 255, .06),
      0 0 46px -12px rgba(var(--neon-glow), .5),
      0 1px 0 0 rgba(255, 255, 255, .22) inset;
  }
}

/* ---------------------------------------------------------------- 图标 */
.icon-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 20px;
  isolation: isolate;
}

.app-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ★ 大圆角软方形：用百分比，图标尺寸变化时圆角比例保持一致 */
  border-radius: var(--radius-icon);

  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 14px 34px -8px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(0, 0, 0, .25),
    0 0 34px -6px rgba(var(--neon-glow), .55);

  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

/* 图标背后的霓虹光斑 */
.icon-wrap::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--neon-glow), .55), transparent 66%);
  filter: blur(16px);
  opacity: .8;
  animation: iconGlow 4s ease-in-out infinite alternate;
}
@keyframes iconGlow {
  from { opacity: .55; transform: scale(.96); }
  to   { opacity: .95; transform: scale(1.06); }
}

/* 没上传图标时的字母兜底 */
.app-icon--letter {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  background: linear-gradient(145deg, var(--neon-1), var(--neon-2));
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.icon-wrap.is-fallback .app-icon--letter { display: flex; }
.icon-wrap.is-fallback img.app-icon      { display: none; }

@media (hover: hover) and (pointer: fine) {
  .icon-wrap:hover .app-icon { transform: scale(1.045) rotate(-1.2deg); }
}

/* ---------------------------------------------------------------- 小标签 */
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--neon-glow));
  box-shadow: 0 0 8px rgba(var(--neon-glow), .9);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- 应用名 */
.app-name {
  background: linear-gradient(180deg, #ffffff 20%, #c7cbd8 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: break-word;
}

.app-desc { word-break: break-word; }

/* ---------------------------------------------------------------- 五星评分 */
.stars {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}
.stars-track { color: rgba(255, 255, 255, .16); }
.stars-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  color: #ffc83d;
  text-shadow: 0 0 10px rgba(255, 200, 61, .55);
  transition: width .35s cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- 跳转按钮 */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  overflow: hidden;

  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;

  background: linear-gradient(135deg, var(--neon-1), var(--neon-2));
  border-radius: 999px;

  box-shadow:
    0 10px 30px -6px rgba(var(--neon-glow), .6),
    0 0 0 1px rgba(255, 255, 255, .14) inset;

  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s ease,
              filter .22s ease;
}

/* 按钮上一道掠过的光 */
.cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  animation: sheen 3.4s ease-in-out infinite;
}
@keyframes sheen {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}

.cta-text  { position: relative; z-index: 1; }
.cta-arrow {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.cta:active { transform: scale(.975); }

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 42px -6px rgba(var(--neon-glow), .78),
      0 0 0 1px rgba(255, 255, 255, .2) inset;
    filter: brightness(1.06);
  }
  .cta:hover .cta-arrow { transform: translateX(4px); }
}

/* ---- 点击后的加载状态 ---- */
.cta-spinner {
  position: relative;
  z-index: 1;
  display: none;
  width: 17px; height: 17px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cta.is-loading { pointer-events: none; }
.cta.is-loading .cta-spinner { display: block; }
.cta.is-loading .cta-arrow   { display: none; }
.cta.is-loading::after       { animation: none; opacity: 0; }

/* ---------------------------------------------------------------- 加载动画 */
.loader-ring {
  width: 46px; height: 46px;
  border: 3px solid rgba(255, 255, 255, .1);
  border-top-color: var(--neon-1);
  border-right-color: var(--neon-2);
  border-radius: 50%;
  animation: spin .85s linear infinite;
  box-shadow: 0 0 26px -6px rgba(var(--neon-glow), .8);
}

#loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 359px) {
  .glass-card { border-radius: 22px; }
  .icon-wrap  { width: 88px; height: 88px; margin-bottom: 16px; }
  .app-icon--letter { font-size: 38px; }
  .stars { font-size: 15px; letter-spacing: 1px; }
  .cta { padding: 15px 20px; font-size: 15px; }
}

@media (min-width: 480px) {
  .icon-wrap { width: 116px; height: 116px; }
  .app-icon--letter { font-size: 50px; }
}

/* ---------------------------------------------------------------- 无障碍 */
/* 系统开了「减弱动态效果」时，把所有动画停掉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aurora-blob, .icon-wrap::after, .cta::after { animation: none; }
}

/* 键盘用户能看到焦点框 */
.cta:focus-visible {
  outline: 2px solid rgb(var(--neon-glow));
  outline-offset: 3px;
}

/* 打印时去掉装饰，只留内容 */
@media print {
  .aurora, .grain, #loader, .cta::after { display: none !important; }
  body { background: #fff; color: #000; }
  .glass-card { background: #fff; border: 1px solid #ccc; box-shadow: none; }
  .app-name { color: #000; -webkit-text-fill-color: #000; }
}