/* app.css (UTF-8, no BOM) */
/* 最终敲定：浅色高端 + 可见背景图 + 强烈但克制的粒子/光效/烟雾 + 抽奖爆发光圈 + 进入复制弹窗 */
/* 红线：不改 API / 不改关键 id（纯样式） */

:root{
  color-scheme: light;

  /* 字体 */
  --font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-brand: "Noto Serif SC", serif;

  /* 颜色（高端浅色） */
  --ink:#121724;
  --ink85:rgba(18,23,36,.85);
  --ink72:rgba(18,23,36,.72);
  --ink55:rgba(18,23,36,.55);
  --ink45:rgba(18,23,36,.45);

  --panel: rgba(255,255,255,.72);
  --panel2: rgba(255,255,255,.62);
  --line: rgba(18,23,36,.12);

  --gold:#C9A24B;
  --gold2:#E9D6A4;

  /* 圆角/阴影 */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;

  --shadow: 0 22px 70px rgba(16, 20, 32, .14);
  --shadow2: 0 14px 40px rgba(16, 20, 32, .10);

  /* 字号（精细：你要的那套） */
  --fz-logo-m: 18px;
  --fz-logo-d: 22px;

  --fz-h1-m: 28px;
  --fz-h1-d: 42px;

  --fz-body-m: 14px;
  --fz-body-d: 15px;

  --fz-input: 15px;
  --fz-btn: 15px;
}

*{ font-family: var(--font-ui); }
.title-font{ font-family: var(--font-brand); }

html,body{ height:100%; }
body{
  margin:0;
  background:#F5F6FA;
  color: var(--ink);
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

/* Tailwind text-white 兼容：统一映射为深色系（避免你页面 class 改来改去） */
.text-white{ color: var(--ink) !important; }
.text-white\/85{ color: var(--ink85) !important; }
.text-white\/72{ color: var(--ink72) !important; }
.text-white\/70{ color: rgba(18,23,36,.70) !important; }
.text-white\/62{ color: rgba(18,23,36,.62) !important; }
.text-white\/60{ color: rgba(18,23,36,.60) !important; }
.text-white\/55{ color: rgba(18,23,36,.55) !important; }
.text-white\/50{ color: rgba(18,23,36,.50) !important; }
.text-white\/45{ color: rgba(18,23,36,.45) !important; }
.text-white\/40{ color: rgba(18,23,36,.40) !important; }

/* ========== 背景图层（必须露出） ========== */
/* 注意：这里会使用你已经存在的：/图片/bg-desktop.png、/图片/bg-mobile.png */
.bg{
  position: fixed; inset:0; z-index:-6;
  background:
    linear-gradient(180deg, rgba(245,246,250,.62), rgba(245,246,250,.72)),
    url("/图片/bg-desktop.png") center / cover no-repeat;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}
@media (max-width: 640px){
  .bg{
    background:
      linear-gradient(180deg, rgba(245,246,250,.62), rgba(245,246,250,.74)),
      url("/图片/bg-mobile.png") center / cover no-repeat;
  }
}

/* 镜头扫光层（让它看起来“花钱做的”） */
.veil{
  position: fixed; inset:0; z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(1100px 700px at 16% 10%, rgba(201,162,75,0.18), transparent 58%),
    radial-gradient(900px 650px at 78% 14%, rgba(140,170,255,0.16), transparent 60%),
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,0.18) 25%,
      rgba(255,255,255,0.05) 42%,
      transparent 62%);
  mix-blend-mode: soft-light;
  opacity:.85;
  animation: sweep 7.5s ease-in-out infinite;
}
@keyframes sweep{
  0%{ transform: translateX(-6%) translateY(0%); }
  50%{ transform: translateX(6%) translateY(-1%); }
  100%{ transform: translateX(-6%) translateY(0%); }
}

/* 低调烟雾（呼吸感） */
.smoke{
  position: fixed; inset:-18vh -18vw; z-index:-4;
  pointer-events:none;
  opacity:.68;
  filter: blur(18px);
  background:
    radial-gradient(60vw 40vh at 22% 42%, rgba(18,23,36,0.07), transparent 62%),
    radial-gradient(60vw 38vh at 70% 55%, rgba(201,162,75,0.10), transparent 62%),
    radial-gradient(70vw 52vh at 55% 25%, rgba(140,170,255,0.09), transparent 65%);
  animation: smokeDrift 10s ease-in-out infinite alternate;
}
@keyframes smokeDrift{
  0%{ transform: translate3d(-1.4vw,-0.7vh,0) scale(1.02); opacity:.56; }
  100%{ transform: translate3d(1.6vw,1.1vh,0) scale(1.06); opacity:.72; }
}

/* 金尘：更亮更多，并且有轻微漂动 */
.dust{
  position: fixed; inset:0; z-index:-3;
  pointer-events:none;
  opacity:.78;
  background:
    radial-gradient(2px 2px at 12% 28%, rgba(201,162,75,0.42), transparent 60%),
    radial-gradient(2px 2px at 22% 66%, rgba(201,162,75,0.32), transparent 60%),
    radial-gradient(1.8px 1.8px at 70% 22%, rgba(201,162,75,0.35), transparent 60%),
    radial-gradient(1.8px 1.8px at 55% 68%, rgba(18,23,36,0.22), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 72%, rgba(201,162,75,0.32), transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 78%, rgba(18,23,36,0.18), transparent 60%),
    radial-gradient(2px 2px at 88% 18%, rgba(201,162,75,0.30), transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 18%, rgba(201,162,75,0.26), transparent 60%);
  animation: dustTwinkle 5.8s ease-in-out infinite, dustDrift 10.5s ease-in-out infinite alternate;
}
@keyframes dustTwinkle{
  0%,100%{ filter: brightness(1.00); opacity:.64; }
  50%{ filter: brightness(1.30); opacity:.90; }
}
@keyframes dustDrift{
  0%{ transform: translate3d(-0.4vw,0.1vh,0); }
  100%{ transform: translate3d(0.6vw,-0.2vh,0); }
}

/* ========== 品牌标记 ========== */
.mark{
  width:40px; height:40px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
}
.mark-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  box-shadow: 0 0 0 6px rgba(201,162,75,0.20);
}

/* ========== 面板（透明度更高级，不能像一块塑料） ========== */
.panel{
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
  border: 1px solid rgba(18,23,36,0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

/* 字号映射 */
header .text-xl,
header .text-2xl{
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--fz-logo-m);
  line-height: 1.15;
}
@media (min-width: 640px){
  header .text-xl,
  header .text-2xl{ font-size: var(--fz-logo-d); }
}
h1{
  font-family: var(--font-brand);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: var(--fz-h1-m);
  line-height: 1.05;
}
@media (min-width: 640px){
  h1{ font-size: var(--fz-h1-d); }
}
p, li{ font-size: var(--fz-body-m); line-height: 1.65; }
@media (min-width: 640px){
  p, li{ font-size: var(--fz-body-d); }
}

/* 小组件 */
.badge-line{ display:flex; align-items:center; gap:10px; }
.badge{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(18,23,36,0.72);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.52);
}
.sep{ flex:1; height:1px; background: rgba(18,23,36,0.10); }

.input{
  height: 50px;
  border-radius: var(--r-md);
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(18,23,36,0.14);
  outline: none;
  font-size: var(--fz-input);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.input::placeholder{ color: rgba(18,23,36,0.38); }
.input:focus{
  border-color: rgba(201,162,75,0.55);
  box-shadow: 0 0 0 4px rgba(201,162,75,0.18);
}

/* 按钮：带高级光泽与轻微“呼吸” */
.btn{
  position: relative;
  height: 50px;
  border-radius: var(--r-md);
  padding: 0 18px;
  font-size: var(--fz-btn);
  font-weight: 900;
  letter-spacing: 0.10em;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: rgba(18,23,36,0.92);
  border: 1px solid rgba(18,23,36,0.10);
  box-shadow: 0 18px 46px rgba(201,162,75,0.28);
  transition: transform .14s ease, filter .14s ease;
  overflow:hidden;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0); filter: brightness(0.99); }
.btn[disabled]{ opacity:.65; cursor:not-allowed; transform:none; }

.btn .btn-glow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%);
  transform: translateX(-22%);
  opacity:.55;
  animation: btnGlow 2.6s ease-in-out infinite;
}
@keyframes btnGlow{
  0%{ transform: translateX(-22%) rotate(0deg); opacity:.40; }
  50%{ transform: translateX(22%) rotate(4deg); opacity:.62; }
  100%{ transform: translateX(-22%) rotate(0deg); opacity:.40; }
}
.btn.is-loading .btn-glow{ animation-duration: 1.2s; opacity:.75; }

/* 结果框：弹出更“有钱” */
.result{
  border-radius: var(--r-lg);
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.70);
  padding: 16px;
  box-shadow: 0 16px 44px rgba(16,20,32,.10);
}
.result-title{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(18,23,36,0.62);
}
.result-chip{
  font-size: 12px;
  color: rgba(18,23,36,0.72);
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.50);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.result-body{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.result-foot{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(18,23,36,0.55);
}

/* 结果弹出动画 */
.pop-on .result-pop{
  animation: pop 520ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pop{
  0%{ transform: translateY(10px) scale(.98); opacity: 0; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}

.divider{ height:1px; background: rgba(18,23,36,0.12); }

.mini{
  border-radius: var(--r-md);
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.58);
  padding: 12px 14px;
}
.mini-k{
  font-size: 12px;
  color: rgba(18,23,36,0.58);
  letter-spacing: 0.08em;
}
.mini-v{
  margin-top: 4px;
  font-weight: 900;
  color: rgba(18,23,36,0.88);
}
.li{
  padding-left: 12px;
  border-left: 2px solid rgba(201,162,75,0.35);
}

/* ========== 抽奖爆发光圈（强烈获得感） ========== */
.burst{
  position: fixed; inset:0; z-index: 5;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(420px 420px at 50% 55%, rgba(201,162,75,0.55), transparent 60%),
    radial-gradient(900px 520px at 50% 55%, rgba(255,255,255,0.35), transparent 62%),
    radial-gradient(1200px 700px at 50% 60%, rgba(201,162,75,0.22), transparent 65%);
  filter: blur(0px);
}
.burst.on{
  animation: burstAnim 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes burstAnim{
  0%{ opacity:0; transform: scale(.96); filter: blur(2px); }
  35%{ opacity:1; transform: scale(1.02); filter: blur(0px); }
  100%{ opacity:0; transform: scale(1.06); filter: blur(2px); }
}

/* ========== 进入复制弹窗 ========== */
.modal{
  position: fixed; inset:0; z-index: 20;
  display:grid;
  place-items:center;
  padding: 18px;
}
.modal.hidden{ display:none; }

.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(15,18,28,.22);
  backdrop-filter: blur(6px);
}

.modal-card{
  position:relative;
  width: min(560px, 100%);
  padding: 18px 18px;
  border-radius: var(--r-xl);
  box-shadow: 0 26px 90px rgba(10,12,18,.22);
  animation: modalIn 360ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes modalIn{
  0%{ transform: translateY(12px) scale(.98); opacity:0; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

.modal-head{
  display:flex; align-items:center; gap:10px;
}
.modal-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 18px;
  flex:1;
}
.modal-x{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.55);
  cursor:pointer;
}

.modal-code{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(18,23,36,0.12);
  background: rgba(255,255,255,0.78);
  font-weight: 900;
  letter-spacing: 0.10em;
  font-size: 16px;
  user-select: all;
  word-break: break-all;
}

.modal-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 420px){
  .modal-actions{ grid-template-columns: 1fr; }
}

.btn-ghost{
  background: rgba(255,255,255,0.68);
  box-shadow: 0 16px 44px rgba(16,20,32,.08);
  border: 1px solid rgba(18,23,36,0.12);
  letter-spacing: 0.06em;
}

.modal-tip{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(18,23,36,0.55);
}

/* 降低动态偏好 */
@media (prefers-reduced-motion: reduce){
  .veil,.smoke,.dust,.btn .btn-glow{ animation:none !important; }
}