/* =============================================================
   該你順 Goodysoon — Demo Styles v20260429-4
   Device Mockup + View Router mode
   1. CSS Variables (tokens)
   2. Reset + base
   3. Splash
   4. Stage layout (3-column)
   5. iPhone mockup + status bar
   6. Phone views (base + transitions)
   7. Home view
   8. Chat view
   9. Bazi view
   10. Ziwei view
   11. Tarot view
   12. Lucky view
   13. Subscribe view + Payment modal
   14. Profile view
   15. Shared components (nav-header, tab-bar, FAB, toast, notif)
   16. Tappable / touch feedback
   ============================================================= */

/* =============================================================
   Goodysoon Demo Styles v20260429-5
   ============================================================= */

/* =============================================================
   1. CSS Variables
   ============================================================= */
:root {
  /* 主背景 — 墨黑 */
  --ink-900: #0a0a0c;
  --ink-800: #15151a;
  --ink-700: #1f1f26;
  --ink-600: #2a2a34;

  /* 月白主字 */
  --moon-100: #fafaf7;
  --text-moon: #f5f1e8;
  --text-moon-soft: #d8d2c4;
  --text-moon-mute: #8a857a;

  /* 金箔點綴 */
  --gold-500: #c9a66b;
  --gold-400: #e0bc7d;
  --gold-300: #f0d4a0;

  /* 狀態色 */
  --cyan-500: #6ec1e4;
  --rose-500: #d4827a;
  --sage-500: #93b59a;

  /* 卡片 */
  --card-bg: rgba(22, 24, 29, 0.85);
  --card-border: rgba(201, 169, 97, 0.18);
  --card-border-active: rgba(201, 169, 97, 0.40);

  /* 動畫 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-en: 'Inter', -apple-system, sans-serif;
  --font-zh: 'Noto Serif TC', 'Inter', serif;
}

/* =============================================================
   2. Reset + base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink-900);
  font-family: var(--font-zh);
  color: var(--text-moon);
  -webkit-font-smoothing: antialiased;
}

ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
svg { display: block; }
input[type="radio"] { accent-color: var(--gold-500); }

/* =============================================================
   3. Splash
   ============================================================= */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-logo { text-align: center; }
.splash-taichi {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
  opacity: 0;
  transform: scale(0.6);
}
.splash-brand {
  font-family: var(--font-zh);
  font-size: 28px;
  font-weight: 600;
  color: var(--gold-400);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(10px);
}
.splash-sub {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--text-moon-mute);
  letter-spacing: 0.25em;
  margin-top: 4px;
  opacity: 0;
}

/* =============================================================
   4. Stage layout (3-column)
   ============================================================= */
#stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  min-width: 1100px;
  opacity: 0;
}

/* Left panel */
.stage-left {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.brand-taichi {
  font-size: 42px;
  color: var(--gold-400);
  filter: drop-shadow(0 0 12px rgba(201,166,107,0.4));
  margin-bottom: 8px;
}
.brand-name {
  font-family: var(--font-zh);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-400);
  letter-spacing: 0.1em;
}
.brand-en {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--text-moon-mute);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.brand-slogan {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-moon-soft);
  line-height: 1.8;
  font-weight: 300;
}
.brand-badge {
  font-size: 11px;
  color: var(--text-moon-mute);
  border: 1px solid var(--card-border);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.1em;
}

/* Center panel */
.stage-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right panel */
.stage-right {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.guide-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px 20px;
  width: 100%;
}
.guide-title {
  font-size: 12px;
  color: var(--gold-400);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  font-weight: 600;
}
.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-moon-soft);
  line-height: 1.5;
  margin-bottom: 10px;
}
.guide-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gold-400);
}

.view-indicator {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
}
.vi-label {
  font-size: 10px;
  color: var(--text-moon-mute);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.vi-view {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-400);
}

/* =============================================================
   5. iPhone mockup + status bar
   ============================================================= */
.phone-frame {
  width: 375px;
  height: 812px;
  background: #000;
  border-radius: 56px;
  padding: 12px;
  box-shadow:
    0 30px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transform: scale(1.0);
  position: relative;
}

/* Outer frame buttons (volume / power) */
.phone-frame::before {
  content: '';
  position: absolute;
  top: 120px;
  left: -4px;
  width: 4px;
  height: 36px;
  background: #1a1a1a;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 50px 0 #1a1a1a;
}
.phone-frame::after {
  content: '';
  position: absolute;
  top: 150px;
  right: -4px;
  width: 4px;
  height: 64px;
  background: #1a1a1a;
  border-radius: 0 2px 2px 0;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--ink-900);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 35px;
  background: #000;
  border-radius: 20px;
  z-index: 200;
  pointer-events: none;
}

/* Status Bar */
.status-bar {
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 150;
  pointer-events: none;
}
.status-time {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-moon);
}
.status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.status-signal span {
  width: 3px;
  background: var(--text-moon);
  border-radius: 1px;
}
.status-signal span:nth-child(1) { height: 4px; }
.status-signal span:nth-child(2) { height: 6px; }
.status-signal span:nth-child(3) { height: 9px; }
.status-signal span:nth-child(4) { height: 12px; }
.status-wifi {
  width: 15px;
  height: 11px;
}
.status-battery {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-moon);
}

/* Home Indicator */
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: #fff;
  border-radius: 3px;
  opacity: 0.4;
  z-index: 150;
  pointer-events: none;
}

/* Pull hint — only shown on home view, z-index above tab-bar */
.pull-hint {
  position: absolute;
  bottom: 102px; /* above tab-bar (88px + some gap) */
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-moon-soft);
  background: rgba(10,10,12,0.7);
  border: 1px solid var(--card-border);
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 55; /* above tab-bar, below fab-overlay */
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Notification banner */
.notif-banner {
  position: absolute;
  top: 52px;
  left: 12px;
  right: 12px;
  background: rgba(15,15,20,0.92);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 190;
  backdrop-filter: blur(20px);
}
.notif-icon {
  width: 36px;
  height: 36px;
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.notif-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-moon);
  margin-bottom: 2px;
}
.notif-body {
  font-size: 11px;
  color: var(--text-moon-soft);
}

/* Toast */
.toast-msg {
  position: absolute;
  bottom: 108px; /* above tab bar */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,38,0.95);
  border: 1px solid var(--card-border);
  color: var(--text-moon-soft);
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* =============================================================
   6. Phone views (base + transitions)
   ============================================================= */
.phone-view {
  position: absolute;
  top: 52px;    /* below status bar */
  bottom: 88px; /* above tab bar (64px height + 24px home-indicator space) */
  left: 0;
  right: 0;
  display: none;
  opacity: 0;
  flex-direction: column;
  overflow: hidden;
}
.phone-view.active {
  display: flex;
  opacity: 1;
}

.view-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 20px 0;
  scrollbar-width: none;
}
.view-scroll::-webkit-scrollbar { display: none; }

/* Nav header (shared) */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid rgba(201,169,97,0.1);
  flex-shrink: 0;
}
.nav-header.no-back { }
.nav-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gold-400);
  border-radius: 8px;
}
.nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
  letter-spacing: 0.04em;
}
.nav-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-moon-mute);
  border-radius: 8px;
}

/* Tab bar — global, always visible above all views */
.tab-bar {
  position: absolute;
  bottom: 24px; /* above home-indicator */
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 0 8px;
  background: rgba(10,10,12,0.95);
  border-top: 1px solid rgba(201,169,97,0.12);
  z-index: 50;
  backdrop-filter: blur(8px);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.tab-icon { font-size: 20px; }
.tab-label {
  font-size: 10px;
  color: var(--text-moon-mute);
}
.tab-item.active .tab-label { color: var(--gold-400); }
.tab-item.active .tab-icon { filter: sepia(1) saturate(3) hue-rotate(-10deg); }

.tab-fab {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(201,166,107,0.4);
  margin-top: -16px;
  flex-shrink: 0;
}
.tab-fab-icon {
  font-size: 28px;
  color: var(--ink-900);
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s var(--ease-out);
}
.tab-fab.open .tab-fab-icon { transform: rotate(45deg); }

/* FAB overlay */
.fab-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 60; /* above tab-bar (50) but below modals (300) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 100px; /* clear tab bar */
}
.fab-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 20px;
  min-width: 180px;
  opacity: 0;
  transform: translateY(20px);
}
.fab-item-icon { font-size: 20px; }
.fab-item-label { font-size: 14px; color: var(--text-moon); }

/* Tappable */
.tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tappable:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* Modal overlay — MUST be position:absolute, inside phone-screen */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,5,8,0.7);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(4px);
}

/* =============================================================
   7. Home view
   ============================================================= */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
}
.home-greeting { display: flex; flex-direction: column; gap: 2px; }
.home-hi { font-size: 17px; font-weight: 600; color: var(--text-moon); }
.home-date { font-size: 11px; color: var(--text-moon-mute); }
.home-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ink-900);
  font-weight: 700;
}

/* Hero card */
.hero-card {
  margin: 0 12px 10px;
  background: linear-gradient(135deg, rgba(30,26,18,0.95) 0%, rgba(20,22,28,0.95) 100%);
  border: 1px solid var(--card-border-active);
  border-radius: 18px;
  padding: 14px 16px;
}
.hero-card-label {
  font-size: 10px;
  color: var(--gold-400);
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
.hero-card-icon { font-size: 20px; margin-bottom: 4px; }
.hero-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
  margin-bottom: 4px;
  line-height: 1.4;
}
.hero-card-desc {
  font-size: 12px;
  color: var(--text-moon-soft);
  line-height: 1.5;
}

/* Expand section — anti-pattern 4 */
.hero-card-expand,
.ai-read-expand,
.chat-expand {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  background: rgba(15,15,20,0.6);
  border-radius: 10px;
  padding: 10px 12px;
  overflow: hidden;
}
.expand-border-left {
  width: 4px;
  background: var(--cyan-500);
  border-radius: 2px;
  flex-shrink: 0;
}
.expand-content { flex: 1; }
.expand-title {
  font-size: 11px;
  color: var(--cyan-500);
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.08em;
}
.expand-text {
  font-size: 12px;
  color: var(--text-moon-soft);
  line-height: 1.6;
}

/* Home row */
.home-row {
  display: flex;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.home-chat-entry {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px;
}
.hce-label { font-size: 10px; color: var(--gold-400); margin-bottom: 4px; }
.hce-placeholder { font-size: 12px; color: var(--text-moon-mute); margin-bottom: 8px; }
.hce-arrow { font-size: 16px; color: var(--gold-500); }

.home-lucky-card {
  flex: 0 0 90px;
  background: linear-gradient(160deg, rgba(30,26,18,0.9) 0%, rgba(20,20,26,0.9) 100%);
  border: 1px solid var(--card-border-active);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.hlc-number {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}
.hlc-label { font-size: 10px; color: var(--text-moon-mute); }
.hlc-star { font-size: 14px; margin-top: 2px; }

/* Shortcuts */
.home-shortcuts-title {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 0 16px;
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}
.home-shortcuts {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-shortcuts::-webkit-scrollbar { display: none; }
.home-shortcut {
  flex: 0 0 60px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.home-shortcut.featured {
  border-color: var(--card-border-active);
  background: linear-gradient(160deg, rgba(30,26,18,0.9) 0%, rgba(20,20,26,0.9) 100%);
}
.shortcut-icon { font-size: 20px; }
.shortcut-label { font-size: 10px; color: var(--text-moon-soft); text-align: center; }

/* =============================================================
   8. Chat view
   ============================================================= */
.chat-scroll {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-bubble {
  max-width: 85%;
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.user-bubble {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--ink-900);
  border-bottom-right-radius: 4px;
}
.ai-bubble {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-bottom-left-radius: 4px;
  width: 100%;
  max-width: 100%;
}

/* AI thinking dots */
.ai-thinking {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.thinking-dot {
  width: 7px;
  height: 7px;
  background: var(--gold-400);
  border-radius: 50%;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-chip {
  font-size: 10px;
  color: var(--cyan-500);
  border: 1px solid rgba(110,193,228,0.3);
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(110,193,228,0.08);
}

.ai-reply-text {
  font-size: 13px;
  color: var(--text-moon-soft);
  line-height: 1.6;
  margin-bottom: 10px;
}
.ai-expand-btn {
  font-size: 12px;
  color: var(--gold-400);
  padding: 6px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: rgba(201,166,107,0.08);
  display: inline-block;
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 16px;
  border-top: 1px solid rgba(201,169,97,0.1);
  background: var(--ink-900);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-moon-mute);
}
.chat-input.typing { color: var(--text-moon); }
.chat-send {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-900);
  flex-shrink: 0;
}

/* =============================================================
   9. Bazi view
   ============================================================= */
.bazi-label, .wuxing-label, .dayun-label {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 8px 16px 6px;
  letter-spacing: 0.1em;
}
.bazi-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.bazi-pillar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.bazi-pillar.featured {
  border-color: var(--gold-400);
  background: linear-gradient(160deg, rgba(30,26,18,0.9), rgba(20,20,26,0.9));
}
.pillar-name { font-size: 10px; color: var(--text-moon-mute); margin-bottom: 4px; }
.pillar-gz { font-size: 18px; font-weight: 600; color: var(--text-moon); margin-bottom: 3px; }
.pillar-ten { font-size: 10px; color: var(--gold-400); }

.wuxing-bars { padding: 0 16px; margin-bottom: 12px; }
.wuxing-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wuxing-name { font-size: 12px; width: 18px; text-align: right; flex-shrink: 0; font-weight: 600; }
.wuxing-name.gold { color: var(--gold-400); }
.wuxing-name.cyan { color: var(--cyan-500); }
.wuxing-name.blue { color: #7aa9d4; }
.wuxing-name.rose { color: var(--rose-500); }
.wuxing-name.sage { color: var(--sage-500); }
.wuxing-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.wuxing-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: 4px;
  transition: width 1s var(--ease-out);
}

.dayun-row {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dayun-row::-webkit-scrollbar { display: none; }
.dayun-item {
  flex: 0 0 70px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--text-moon-mute);
}
.dayun-item.active { border-color: var(--gold-400); color: var(--gold-400); }
.dayun-gz { font-size: 12px; font-weight: 600; color: var(--text-moon); margin-top: 3px; }

.ai-read-btn {
  margin: 0 12px 8px;
  width: calc(100% - 24px);
  padding: 10px;
  background: rgba(110,193,228,0.08);
  border: 1px solid rgba(110,193,228,0.25);
  border-radius: 12px;
  font-size: 13px;
  color: var(--cyan-500);
  text-align: center;
}

.ai-read-expand {
  margin: 0 12px 8px;
  display: flex;
  gap: 10px;
  background: rgba(10,10,15,0.6);
  border: 1px solid rgba(110,193,228,0.15);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}

/* =============================================================
   10. Ziwei view
   ============================================================= */
.ziwei-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 4px;
  padding: 8px;
  margin-bottom: 8px;
}
.ziwei-cell {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.ziwei-center {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: linear-gradient(135deg, rgba(20,22,28,0.95), rgba(15,15,20,0.95));
  border: 1px solid var(--card-border-active);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.ziwei-center-label {
  font-size: 10px;
  color: var(--gold-400);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.ziwei-lines { width: 100%; height: auto; }
.cell-palace { font-size: 9px; color: var(--text-moon-mute); margin-bottom: 3px; }
.cell-star { font-size: 11px; color: var(--text-moon-soft); font-weight: 600; }
.cell-star.gold { color: var(--gold-400); }
.cell-star.cyan { color: var(--cyan-500); }
.cell-star.rose { color: var(--rose-500); }
.cell-star.sage { color: var(--sage-500); }
.cell-star.featured { color: #c084fc; }
.cell-star.star-self { color: var(--gold-400); font-size: 14px; }

/* =============================================================
   11. Tarot view
   ============================================================= */

/* Tarot view: allow overflow-visible for deck animations within bounds */
#view-tarot .view-scroll {
  overflow-x: clip; /* clip but don't affect layout like overflow:hidden */
  overflow-y: auto;
}

.tarot-q-label, .tarot-spread-label {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 10px 16px 6px;
  letter-spacing: 0.1em;
}
.tarot-chips {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.tarot-chip {
  padding: 5px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
}
.tarot-chip.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
}

.tarot-spread-opts {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 14px;
}
.spread-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-moon-mute);
  padding: 5px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
}
.spread-opt.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.tarot-deck-area {
  padding: 0 12px;
  margin-bottom: 12px;
  overflow: visible; /* allow cards to animate without clipping */
}
.tarot-deck {
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow: visible; /* allow flip/spread animations */
}
.tarot-card {
  width: 80px;
  height: 130px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* transform-origin stays center for scaleX flip */
  transform-origin: center center;
}
.tarot-card.back {
  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-800) 100%);
  border-color: var(--card-border);
}
.tarot-card.back::after {
  content: '☯';
  position: absolute;
  font-size: 32px;
  opacity: 0.15;
}
.tarot-card.revealed {
  background: linear-gradient(160deg, rgba(30,26,18,0.95) 0%, rgba(20,20,26,0.95) 100%);
  border-color: var(--gold-400);
  flex-direction: column;
  gap: 5px;
}
.tarot-card-icon { font-size: 28px; }
.tarot-card-name { font-size: 9px; color: var(--gold-400); text-align: center; font-weight: 600; }

.tarot-card-labels {
  display: flex;
  justify-content: space-around;
  padding: 6px 8px 0;
}
.tarot-card-labels span { font-size: 10px; color: var(--text-moon-mute); }

.tarot-start-btn {
  margin: 0 12px 10px;
  width: calc(100% - 24px);
  padding: 13px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  text-align: center;
  box-shadow: 0 4px 20px rgba(201,166,107,0.3);
}

.tarot-actions {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
}
.tarot-retry, .tarot-share {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-moon-soft);
  text-align: center;
  background: var(--card-bg);
}
.tarot-share { color: var(--gold-400); border-color: var(--card-border-active); }

/* =============================================================
   12. Lucky view
   ============================================================= */
.lucky-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 12px auto;
}
.lucky-ring { width: 100%; height: 100%; }
.lucky-number-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lucky-number {
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}
.lucky-sublabel { font-size: 11px; color: var(--text-moon-mute); margin-top: 4px; }

.lucky-scene-label {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 4px 16px 6px;
  letter-spacing: 0.1em;
}
.lucky-tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.lucky-tab {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
}
.lucky-tab.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
}

.lucky-candidates { padding: 0 12px; margin-bottom: 10px; }
.lucky-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 8px;
  opacity: 0.15;
}
.cand-icon { font-size: 18px; }
.cand-num { flex: 1; font-size: 13px; color: var(--text-moon); font-family: var(--font-en); }
.cand-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
}
.cand-tag.strong { color: var(--sage-500); border: 1px solid rgba(147,181,154,0.3); background: rgba(147,181,154,0.08); }
.cand-tag.mid { color: var(--gold-400); border: 1px solid rgba(201,166,107,0.3); background: rgba(201,166,107,0.08); }
.cand-tag.weak { color: var(--rose-500); border: 1px solid rgba(212,130,122,0.3); background: rgba(212,130,122,0.08); }

.lucky-extra { padding: 0 12px 20px; }
.lucky-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lucky-extra-label { font-size: 12px; color: var(--text-moon-mute); }
.lucky-extra-val { font-size: 13px; color: var(--text-moon-soft); }
.lucky-extra-val.gold-pill {
  background: rgba(201,166,107,0.15);
  color: var(--gold-400);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* =============================================================
   13. Subscribe view + Payment modal
   ============================================================= */
.sub-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-moon);
  padding: 10px 16px 8px;
}
.sub-plan-card {
  margin: 0 12px 10px;
  background: linear-gradient(160deg, rgba(30,26,18,0.95) 0%, rgba(20,20,26,0.95) 100%);
  border: 1px solid var(--card-border-active);
  border-radius: 18px;
  padding: 16px;
}
.sub-plan-tag {
  font-size: 10px;
  color: var(--gold-400);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sub-plan-title { font-size: 16px; font-weight: 700; color: var(--text-moon); margin-bottom: 4px; }
.sub-plan-price { font-size: 13px; color: var(--text-moon-soft); margin-bottom: 10px; }
.sub-plan-promo { color: var(--gold-400); font-weight: 600; }
.sub-plan-features { margin-bottom: 14px; }
.sub-plan-features li { font-size: 12px; color: var(--text-moon-soft); padding: 3px 0; }

.subscribe-cta {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
  box-shadow: 0 4px 20px rgba(201,166,107,0.3);
}

.sub-plans-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 16px;
}
.sub-plan-mini {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}
.sub-plan-mini.active-plan { border-color: var(--gold-400); }
.sub-mini-title { font-size: 12px; color: var(--text-moon-mute); margin-bottom: 4px; }
.sub-mini-price { font-size: 17px; font-weight: 700; color: var(--text-moon); margin-bottom: 2px; }
.sub-mini-save { font-size: 10px; color: var(--sage-500); }
.sub-mini-sub { font-size: 10px; color: var(--text-moon-mute); }

/* Payment modal */
.pay-modal {
  background: var(--ink-800);
  border: 1px solid var(--card-border);
  border-radius: 24px 24px 0 0;
  padding: 16px;
  width: 100%;
  transform: translateY(100%);
}
.pay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pay-modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--ink-700);
  border-radius: 10px;
  padding: 3px;
}
.pay-modal-tab {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-moon-mute);
}
.pay-modal-tab.active {
  background: var(--ink-900);
  color: var(--text-moon);
  font-weight: 600;
}
.pay-modal-close {
  width: 28px;
  height: 28px;
  background: var(--ink-700);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-moon-mute);
}

.pay-amount {
  font-size: 14px;
  color: var(--text-moon);
  font-weight: 600;
  margin-bottom: 14px;
  text-align: center;
}
.pay-form { display: flex; flex-direction: column; gap: 10px; }
.pay-field { display: flex; flex-direction: column; gap: 4px; }
.pay-field-row { display: flex; gap: 10px; }
.pay-field.half { flex: 1; }
.pay-field label { font-size: 10px; color: var(--text-moon-mute); letter-spacing: 0.08em; }
.pay-input {
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-moon-mute);
  font-family: var(--font-en);
}
.pay-input.demo-filled { color: var(--text-moon); border-color: var(--card-border-active); }
.pay-confirm-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 4px;
}
.pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 8px;
}
.pay-checkmark {
  width: 52px;
  height: 52px;
  background: rgba(147,181,154,0.15);
  border: 2px solid var(--sage-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--sage-500);
}
.pay-success-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
}

/* Apple Pay sheet */
.applepay-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.applepay-user { text-align: center; }
.applepay-avatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-900);
  font-weight: 700;
  margin: 0 auto 8px;
}
.applepay-name { font-size: 15px; font-weight: 600; color: var(--text-moon); margin-bottom: 2px; }
.applepay-appleid { font-size: 11px; color: var(--text-moon-mute); }

.applepay-item {
  width: 100%;
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
}
.applepay-app {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.applepay-app-icon {
  width: 28px;
  height: 28px;
  background: var(--ink-900);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.applepay-app-name { font-size: 13px; color: var(--text-moon); font-weight: 600; }
.applepay-desc { font-size: 12px; color: var(--text-moon-soft); margin-bottom: 4px; }
.applepay-total { font-size: 15px; font-weight: 700; color: var(--text-moon); }

.applepay-confirm {
  width: 100%;
  padding: 13px;
  background: #000;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.15);
}
.applepay-btn-apple { font-size: 18px; }
.applepay-hint { font-size: 11px; color: var(--text-moon-mute); }

/* Face ID overlay — stays inside phone-screen via modal-overlay */
.faceid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: inherit;
}
.faceid-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--cyan-500);
  animation: faceid-spin 1.2s linear infinite;
  position: absolute;
}
@keyframes faceid-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.faceid-face-icon { position: relative; z-index: 1; }
.faceid-label {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}
.faceid-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.faceid-check {
  width: 52px;
  height: 52px;
  background: rgba(147,181,154,0.15);
  border: 2px solid var(--sage-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--sage-500);
}
.faceid-done-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
}

/* =============================================================
   14. Profile view
   ============================================================= */
.profile-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.profile-avatar {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ink-900);
  font-weight: 700;
  flex-shrink: 0;
}
.profile-name { font-size: 17px; font-weight: 600; color: var(--text-moon); margin-bottom: 3px; }
.profile-tier {
  font-size: 12px;
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
  border: 1px solid rgba(201,166,107,0.25);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.profile-section-title {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 4px 16px 6px;
  letter-spacing: 0.1em;
}
.profile-astro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.profile-astro-item {
  font-size: 11px;
  color: var(--text-moon-soft);
  border: 1px solid var(--card-border);
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--card-bg);
}

.profile-divider {
  height: 1px;
  background: rgba(201,169,97,0.1);
  margin: 6px 12px 6px;
}

.profile-upgrade-btn,
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-upgrade-btn {
  background: rgba(201,166,107,0.05);
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
}
.profile-menu-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.profile-menu-label { flex: 1; font-size: 14px; color: var(--text-moon-soft); text-align: left; }
.profile-menu-arrow { font-size: 18px; color: var(--text-moon-mute); }
.profile-upgrade-btn .profile-menu-label { color: var(--gold-400); font-weight: 600; }

/* =============================================================
   15. Share modal
   ============================================================= */
.share-modal {
  background: var(--ink-800);
  border: 1px solid var(--card-border);
  border-radius: 24px 24px 0 0;
  padding: 16px;
  width: 100%;
  transform: translateY(100%);
}
.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.share-title { font-size: 15px; font-weight: 600; color: var(--text-moon); }
.share-preview { display: flex; justify-content: center; margin-bottom: 14px; }
.share-card {
  background: linear-gradient(135deg, rgba(30,26,18,0.95) 0%, rgba(20,20,26,0.95) 100%);
  border: 1px solid var(--card-border-active);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  width: 80%;
}
.share-card-title { font-size: 12px; color: var(--gold-400); margin-bottom: 8px; letter-spacing: 0.1em; }
.share-card-cards { font-size: 28px; margin-bottom: 8px; }
.share-card-desc { font-size: 13px; color: var(--text-moon-soft); margin-bottom: 8px; }
.share-card-by { font-size: 10px; color: var(--text-moon-mute); }
.share-actions { display: flex; gap: 10px; }
.share-btn {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-moon-soft);
  background: var(--card-bg);
  text-align: center;
}

/* =============================================================
   16. Scrollbar hide + misc
   ============================================================= */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

/* =============================================================
   17. Home Bonus Section (方案 A-2)
   ============================================================= */
.home-bonus {
  margin: 10px 12px 4px;
  border: 1px solid var(--gold-500);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(30,26,18,0.7) 0%, rgba(15,15,22,0.7) 100%);
}
.bonus-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-400);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bonus-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  width: 100%;
}
.bonus-icon { font-size: 22px; }
.bonus-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-moon);
}
.bonus-desc {
  font-size: 10px;
  color: var(--text-moon-mute);
  line-height: 1.4;
}

/* =============================================================
   18. Badge bonus (加分 tag in nav header)
   ============================================================= */
.badge-bonus {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-900);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-300));
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* nav-title as h1 inside nav-header resets */
.nav-header h1.nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-moon);
  letter-spacing: 0.04em;
  margin: 0;
}

/* =============================================================
   19. Share View (F15)
   ============================================================= */
.share-v-section-label {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 10px 16px 6px;
  letter-spacing: 0.1em;
}
.share-v-chips {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.share-v-chip {
  padding: 5px 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
}
.share-v-chip.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
}

.share-v-gen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 10px;
  font-size: 12px;
  color: var(--text-moon-mute);
}
.share-v-spinner {
  font-size: 16px;
  color: var(--gold-400);
  animation: spin-cw 1s linear infinite;
  display: inline-block;
}
@keyframes spin-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.share-v-gen-row.done .share-v-spinner { animation: none; }

.share-v-preview {
  padding: 0 12px;
  margin-bottom: 10px;
}
.share-v-card {
  background: linear-gradient(160deg, rgba(30,26,18,0.97) 0%, rgba(15,15,26,0.97) 100%);
  border: 1px solid var(--card-border-active);
  border-radius: 18px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.share-v-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,166,107,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.share-v-card-label {
  font-size: 10px;
  color: var(--gold-400);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  font-weight: 600;
}
.share-v-card-cards {
  font-size: 32px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.share-v-card-names {
  font-size: 12px;
  color: var(--text-moon);
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.share-v-card-ai {
  font-size: 11px;
  color: var(--text-moon-soft);
  line-height: 1.7;
  margin-bottom: 14px;
  font-style: italic;
}
.share-v-card-logo {
  font-size: 11px;
  color: var(--text-moon-mute);
  letter-spacing: 0.1em;
}

.share-v-platforms {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.share-v-platform {
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
}
.share-v-platform.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
}

.share-v-cta {
  margin: 4px 12px 16px;
  width: calc(100% - 24px);
  padding: 13px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
  box-shadow: 0 4px 20px rgba(201,166,107,0.3);
}

/* iOS Share Sheet overlay */
.ios-share-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,5,8,0.6);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(4px);
}
.ios-share-sheet {
  background: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: 24px 24px 0 0;
  padding: 14px 14px 24px;
  width: 100%;
  transform: translateY(100%);
}
.ios-share-header {
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.ios-share-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ios-share-app-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ios-share-app-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-moon);
  margin-bottom: 2px;
}
.ios-share-app-url {
  font-size: 11px;
  color: var(--text-moon-mute);
}

.ios-share-apps {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 10px;
}
.ios-share-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.ios-share-app-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--ink-600);
  border: 1px solid var(--card-border);
}
.ios-share-app-icon-wrap.ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366); }
.ios-share-app-icon-wrap.line { background: #06c755; }
.ios-share-app-icon-wrap.msg { background: #1996f2; }
.ios-share-app-icon-wrap.copy { background: var(--ink-600); }
.ios-share-app-icon-wrap.save { background: var(--ink-600); }
.ios-share-app-label {
  font-size: 9px;
  color: var(--text-moon-mute);
  text-align: center;
  white-space: nowrap;
}

.ios-share-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
}
.ios-share-action-btn {
  width: 100%;
  padding: 14px;
  background: var(--ink-600);
  font-size: 14px;
  color: var(--text-moon);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ios-share-action-btn:last-child { border-bottom: none; }
.ios-share-cancel {
  width: 100%;
  padding: 14px;
  background: var(--ink-600);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-400);
  text-align: center;
}

/* =============================================================
   20. Checkin View (F16)
   ============================================================= */
.checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
}
.checkin-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-moon);
}
.checkin-fire { font-size: 18px; }
.checkin-streak-text strong { color: var(--gold-400); }
.checkin-points {
  font-size: 13px;
  color: var(--text-moon-soft);
}
.checkin-points-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-400);
  font-family: var(--font-en);
}

.checkin-cal-label {
  font-size: 11px;
  color: var(--text-moon-mute);
  padding: 2px 16px 6px;
  letter-spacing: 0.1em;
}
.checkin-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  position: relative;
  opacity: 0.15;
}
.cal-day.today {
  border-color: var(--gold-400);
  color: var(--gold-400);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(201,166,107,0.3);
}
.cal-day.today.pulse {
  animation: cal-pulse 2s ease-in-out infinite;
}
@keyframes cal-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(201,166,107,0.3); }
  50% { box-shadow: 0 0 14px rgba(201,166,107,0.7); }
}
.cal-day.checked::after {
  content: '✓';
  font-size: 9px;
  color: var(--sage-500);
  position: absolute;
  bottom: 2px;
  right: 2px;
}
.cal-day.checked {
  border-color: rgba(147,181,154,0.4);
}
.cal-day.checked-today {
  border-color: var(--sage-500);
  animation: none;
}
.cal-day.checked-today::after {
  content: '✓';
  font-size: 9px;
  color: var(--sage-500);
  position: absolute;
  bottom: 2px;
  right: 2px;
}
.cal-day.empty {
  background: transparent;
  border-color: transparent;
}

/* Floating +10 pts animation */
.points-float {
  position: absolute;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-400);
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
}

.checkin-cta {
  margin: 4px 12px 12px;
  width: calc(100% - 24px);
  padding: 13px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
  box-shadow: 0 4px 20px rgba(201,166,107,0.3);
}
.checkin-cta.done {
  background: rgba(147,181,154,0.15);
  color: var(--sage-500);
  border: 1px solid rgba(147,181,154,0.4);
  box-shadow: none;
  pointer-events: none;
}

.checkin-redeem-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-400);
  padding: 6px 16px 8px;
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(201,169,97,0.1);
  margin-top: 4px;
}
.checkin-redeem-list { padding: 0 12px 20px; }
.checkin-redeem-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 8px;
}
.checkin-redeem-item.locked {
  opacity: 0.45;
}
.cri-icon { font-size: 20px; flex-shrink: 0; }
.cri-info { flex: 1; }
.cri-name { font-size: 13px; color: var(--text-moon); margin-bottom: 2px; }
.cri-cost { font-size: 11px; color: var(--gold-400); }
.cri-btn {
  padding: 6px 12px;
  background: rgba(201,166,107,0.15);
  border: 1px solid rgba(201,166,107,0.35);
  border-radius: 10px;
  font-size: 12px;
  color: var(--gold-400);
  flex-shrink: 0;
}
.cri-btn.locked {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-moon-mute);
  pointer-events: none;
}

/* =============================================================
   21. Compatibility View (F17)
   ============================================================= */
.compat-charts-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px 10px;
  gap: 0;
}
.compat-chart {
  flex: 0 0 90px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
}
.compat-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.compat-avatar.you {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
}
.compat-avatar.other {
  background: linear-gradient(135deg, var(--cyan-500), #4aa8cc);
}
.compat-name { font-size: 13px; font-weight: 600; color: var(--text-moon); }
.compat-sign { font-size: 11px; color: var(--text-moon-soft); }
.compat-blood { font-size: 10px; color: var(--text-moon-mute); }

.compat-beam-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-top: -20px; /* align with avatar center */
}
.compat-beam-svg {
  width: 100%;
  height: 40px;
}

.compat-mode-row {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 12px;
}
.compat-mode {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-moon-mute);
  background: var(--card-bg);
  text-align: center;
}
.compat-mode.active {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(201,166,107,0.1);
}

.compat-score-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 0 12px;
}
.compat-ring-container {
  position: relative;
  width: 130px;
  height: 130px;
}
.compat-ring-svg { width: 100%; height: 100%; }
.compat-score-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.compat-score-num {
  font-family: var(--font-en);
  font-size: 38px;
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}
.compat-score-label {
  font-size: 10px;
  color: var(--text-moon-mute);
  margin-top: 2px;
}

.compat-ai-box {
  margin: 0 12px 12px;
  display: flex;
  gap: 10px;
  background: rgba(10,10,15,0.6);
  border: 1px solid rgba(110,193,228,0.15);
  border-radius: 12px;
  padding: 12px;
}

.compat-save-btn {
  margin: 4px 12px 20px;
  width: calc(100% - 24px);
  padding: 12px;
  background: rgba(201,166,107,0.1);
  border: 1px solid var(--card-border-active);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-400);
  text-align: center;
}