@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap");

:root {
  /* Brand and background */
  --bg-start: #16171b;
  --bg-end: #141519;
  --surface-1: #15161a;
  --surface-2: rgba(255, 255, 255, 0.1);
  --surface-3: rgba(0, 0, 0, 0.6);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-soft: rgba(255, 255, 255, 0.2);

  /* Accent */
  --accent-cyan: #9fe1f8;
  --accent-violet: #a0afff;
  --accent-periwinkle: #beccff;
  --accent-gold: #ffc85b;
  --accent-warm: #fdf5d7;
  --accent-rose-soft: #e1b1d4;
  --accent-pink: #ff8aae;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-pill: 30px;
  --radius-nav: 60px;

  /* Spacing rhythm */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 20px;

  /* Typography */
  --font-display: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", sans-serif;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-32: 32px;
  --fs-36: 36px;

  /* Effects */
  --blur-1: blur(4px);
  --blur-2: blur(10px);
  --blur-3: blur(20px);
  --glow-cyan: 0 4px 20px 0 rgba(159, 225, 248, 0.6);

  /* Layout tokens from design */
  --w-content: min(350px, calc(100vw - 40px));
  --w-topbar: min(342px, calc(100vw - 48px));
  --w-bottom-nav: calc(100vw - 40px);
  --w-fortune-copy: min(310px, calc(100vw - 80px));
  --h-hero: 90px;
  --h-fortune: 292px;
  --h-horoscope: 196px;
  --h-event: 118px;
  --h-bottom-nav: 66px;
  --safe-top: max(0px, env(safe-area-inset-top, 0px));
  --safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --bottom-nav-offset: 20px;
  --page-bottom-with-nav: calc(var(--h-bottom-nav) + var(--bottom-nav-offset) + 22px + var(--safe-bottom));

  /* Component gradients */
  --grad-page: linear-gradient(180deg, #16171b 0%, #141519 100%);
  --grad-pill-cyan: linear-gradient(270deg, rgba(159, 225, 248, 0.2) 0%, rgba(159, 225, 248, 0.2) 100%);
  --grad-score-blue: linear-gradient(180deg, rgba(190, 204, 255, 0) 0%, rgba(190, 204, 255, 0.6) 100%);
  --grad-score-pink: linear-gradient(180deg, rgba(225, 177, 212, 0) 0%, rgba(225, 177, 212, 0.6) 100%);
  --grad-score-cyan: linear-gradient(180deg, rgba(159, 225, 248, 0) 0%, rgba(159, 225, 248, 0.6) 100%);
  --grad-gold-glass: linear-gradient(180deg, rgba(253, 245, 215, 0) 0%, rgba(253, 245, 215, 0.6) 100%);
  --grad-border-blue: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #beccff 100%);
  --grad-border-pink: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #e1b1d4 100%);
  --grad-border-cyan: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #9fe1f8 100%);

  /* Borders and shadows */
  --border-main: 1px solid var(--accent-violet);
  --border-cyan-soft: 1px solid rgba(159, 225, 248, 0.6);
  --border-warm-soft: 1px solid rgba(253, 245, 215, 0.45);
  --shadow-card-cyan: 0 4px 20px 0 rgba(159, 225, 248, 0.6);
  --shadow-card-cyan-soft: 0 4px 20px 0 rgba(159, 225, 248, 0.32);
  --shadow-inset-soft: inset 0.56px 1.67px 1.11px 0 rgba(255, 255, 255, 0.15);
  --shadow-chip-active: 0 0 0 1px rgba(160, 175, 255, 0.85), 0 0 16px rgba(122, 156, 255, 0.28);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--grad-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  -webkit-user-select: text;
  user-select: text;
}

a,
button,
input,
textarea,
select,
div,
span {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: transparent;
  color: inherit;
}

.app-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--grad-page);
  overflow-x: clip;
}

@media (min-width: 768px) {
  :root {
    --w-bottom-nav: 354px;
  }

  .app-page {
    max-width: 394px;
    margin: 0 auto;
  }
}

.title-display {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: 1.2;
}

.brand-home-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand-home-link img {
  width: 98px;
  height: 30px;
}

.title-section {
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.25;
}

.text-primary {
  font-size: var(--fs-14);
  color: var(--text-primary);
}

.text-muted {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.card {
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-violet);
  background: var(--surface-1);
  overflow: hidden;
}

.card-soft {
  border-radius: var(--radius-md);
  background: var(--surface-2);
  backdrop-filter: var(--blur-2);
}

.btn-primary {
  height: 45px;
  border: 0;
  border-radius: var(--radius-pill);
  color: #15161a;
  background: linear-gradient(180deg, #fce499 0%, #feb835 100%);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
}

.bottom-nav {
  border-radius: var(--radius-nav);
  background: var(--surface-3);
  backdrop-filter: var(--blur-2);
}

[hidden] {
  display: none !important;
}

/* ── i18n 防闪烁门控 ──────────────────────────────────────────────────────────
   在翻译就绪（html.i18n-ready）之前隐藏所有待翻译文本节点，
   防止用户看到英文 fallback 文案。
   bootstrap.js 完成翻译后调用 classList.add('i18n-ready') 解除隐藏。
   使用 visibility:hidden 而非 display:none，保留布局占位避免 CLS。
──────────────────────────────────────────────────────────────────────────── */
html:not(.i18n-ready) [data-i18n],
html:not(.i18n-ready) [data-i18n-placeholder],
html:not(.i18n-ready) [data-i18n-aria-label],
html:not(.i18n-ready) [data-i18n-alt],
html:not(.i18n-ready) [data-i18n-title] {
  visibility: hidden;
}