/* Dollar Fortunes — Production CSS */
/* Warm kitsch. NOT dark/cosmic/mystical. Cosmo's world. */
/* Design System v3.0 — 2026-03-31 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Core colors */
  --color-primary:       #FF6B9D;
  --color-primary-dark:  #E85588;
  --color-primary-light: #FFB3CE;
  --color-accent:        #FFD166;
  --color-accent-dark:   #F5C233;
  --color-accent-light:  #FFF0B3;
  --color-purple:        #C8B5E8;
  --color-text:          #2D2D2D;
  --color-text-muted:    #888888;
  --color-bg:            #FFFDF7;
  --color-bg-card:       #FFFFFF;
  --color-bg-warm:       #FFF3E0;

  /* Service card backgrounds */
  --color-card-1:        #EDE0FF;  /* Dollar Fortune — light purple */
  --color-card-2:        #FFE4F0;  /* Match — pink */
  --color-card-3:        #D4EFFF;  /* Grand Fortune — ocean blue */
  --color-card-4:        #FFF3DC;  /* Lucky Day — beige */
  --color-card-5:        #E8FFE4;  /* Yearly Fortune — mint */
  --color-card-6:        #FFE8CC;  /* Daily — peach */

  /* Typography */
  --font-display: 'Fredoka One', cursive;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Geometry */
  --radius-card:    20px;
  --radius-modal:   28px;
  --radius-sm:      12px;
  --radius-xs:       8px;
  --radius-pill:    50px;

  /* Shadows */
  --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-md: 0 6px 28px rgba(0, 0, 0, 0.12);
  --shadow-modal:   0 8px 40px rgba(0, 0, 0, 0.16);
  --shadow-nav:     0 -2px 20px rgba(0, 0, 0, 0.06);

  /* Layout */
  --max-width:      480px;
  --nav-height:     64px;
  --header-height:  56px;
  --page-pad:       16px;

  /* Transitions */
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
}

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

button {
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea {
  font-family: var(--font-body);
}

ul, ol {
  list-style: none;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--header-height);
  padding-bottom: calc(var(--nav-height) + 16px);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  }
  .app {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 16px);
  }
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  height: var(--header-height);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  z-index: 90;
}

.header-logo {
  height: 32px;
  width: auto;
}

.header-logo img,
.header-logo svg {
  height: 32px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-balance {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-accent-light);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
}

.cookie-balance:hover {
  background: var(--color-accent);
}

.cookie-balance .balance-num {
  font-weight: 400;
}

.crumb-balance {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
}

.crumb-balance:hover {
  background: var(--color-primary);
}

.crumb-balance .balance-num {
  font-weight: 400;
}

.profile-count-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-primary-dark);
  border: none;
}

.hamburger-btn {
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ============================================================
   AUTH UI
   ============================================================ */
.auth-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.auth-login-btn:hover {
  background: var(--color-primary-dark);
}

.auth-user-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.auth-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--color-primary-light);
  flex-shrink: 0;
}

.auth-user-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-text);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition);
}

.auth-logout-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Login prompt modal */
.login-prompt-modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-modal);
  padding: 32px 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-modal);
}

.login-prompt-modal h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.login-prompt-modal p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.login-prompt-modal .btn {
  margin-bottom: 8px;
}

/* ============================================================
   PAGES
   ============================================================ */
.page {
  display: none;
  padding: 20px var(--page-pad);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.page.active {
  display: block;
}

.page.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--color-bg-card);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-nav);
  display: flex;
  justify-content: center;
  z-index: 100;
}

.bottom-nav-inner {
  display: flex;
  align-items: stretch;
  max-width: var(--max-width);
  width: 100%;
  position: relative;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 10px;
  font-family: var(--font-display);
  padding: 6px 2px;
  transition: color var(--transition);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform var(--transition);
}

.nav-item.active {
  color: var(--color-primary);
}

.nav-item.active svg {
  transform: scale(1.15);
}

.nav-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 28px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 0 0 3px 3px;
  transition: transform var(--transition);
}

.nav-item.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Daily center button — protrudes upward */
.nav-item-daily {
  position: relative;
  flex: 1.2;
  /* Override flex center alignment for the protruding button */
  justify-content: flex-end;
  padding-bottom: 8px;
}

.nav-item-daily::after {
  display: none; /* No accent line on daily */
}

.nav-daily-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 -3px 16px rgba(255, 107, 157, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border: 3px solid var(--color-bg-card);
  transition: all var(--transition);
}

.nav-daily-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 -5px 20px rgba(255, 107, 157, 0.5);
}

.nav-daily-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nav-daily-btn svg {
  width: 28px;
  height: 28px;
  color: white;
  transform: none !important; /* Override nav-item svg transform */
}

.nav-daily-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 0;
  line-height: 1;
}

.nav-item-daily.active .nav-daily-label {
  color: var(--color-primary);
}

.nav-item-daily.active .nav-daily-btn {
  background: var(--color-primary-dark);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.2;
}

.heading-xl {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.heading-lg {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin-bottom: 6px;
}

.heading-md {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.heading-sm {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-small {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.text-center {
  text-align: center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.35);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 107, 157, 0.45);
}

.btn-pay {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-text);
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(255, 209, 102, 0.45);
  position: relative;
  overflow: hidden;
}

.btn-pay::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transition: left 0.55s ease;
}

.btn-pay:hover::after {
  left: 100%;
}

.btn-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 209, 102, 0.55);
}

.btn-secondary {
  background: rgba(200, 181, 232, 0.2);
  color: var(--color-text);
  border: 1.5px solid rgba(200, 181, 232, 0.5);
}

.btn-secondary:hover {
  background: var(--color-purple);
  color: #fff;
  border-color: var(--color-purple);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

/* Service card CTA pill */
.btn-cta-pill {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-cta-pill:hover {
  background: var(--color-primary-dark);
  transform: translateX(2px);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-md);
}

.card-accent {
  border-left: 4px solid var(--color-primary);
}

.card-warm {
  background: linear-gradient(135deg, var(--color-bg-card), var(--color-bg-warm));
}

/* ============================================================
   HOME PAGE — HERO BANNER
   ============================================================ */
.home-header-offset {
  padding-top: 8px;
}

.hero-slider {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 20px;
  height: 220px;
  background: var(--color-card-2);
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
  width: 100%;
}

.hero-slide-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1.2;
  margin-bottom: 4px;
}

.hero-slide-sub {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* Hero slider stickers/decorations */
.hero-sticker {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.hero-sticker-star {
  top: 12px;
  right: 16px;
  font-size: 1.5rem;
}

.hero-sticker-sparkle {
  top: 40px;
  right: 48px;
  font-size: 1rem;
  opacity: 0.8;
}

/* Hero dots */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(45, 45, 45, 0.15);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}

.hero-dot.active {
  width: 18px;
  border-radius: 3px;
  background: var(--color-primary);
}

/* ============================================================
   HOME PAGE — SERVICE CARD GRID
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.service-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-md);
}

.service-card:active {
  transform: scale(0.98);
}

/* Top 70%: colored background + Cosmo photo + service title */
.service-card-top {
  flex: 1;
  min-height: 140px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
}

.service-card-top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.service-card-name-overlay {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  line-height: 1.2;
}

/* Service card color variants */
.service-card-1 .service-card-top { background: var(--color-card-1); }
.service-card-2 .service-card-top { background: var(--color-card-2); }
.service-card-3 .service-card-top { background: var(--color-card-3); }
.service-card-4 .service-card-top { background: var(--color-card-4); }
.service-card-5 .service-card-top { background: var(--color-card-5); }
.service-card-6 .service-card-top { background: var(--color-card-6); }

/* Bottom 30%: white, name + desc + price + CTA */
.service-card-bottom {
  background: var(--color-bg-card);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-card-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.2;
}

.service-card-desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.service-card-price {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Daily card free badge */
.service-card-free-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   HOME PAGE — FOOTER
   ============================================================ */
.home-footer {
  text-align: center;
  padding: 24px 16px 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 16px;
}

.home-footer p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.footer-social a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: underline;
}

.footer-watermark {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  opacity: 0.55;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 999;
}

.loading-cosmo-wrap {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-quip {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 240px;
  line-height: 1.4;
}

.loading-dots {
  display: flex;
  gap: 6px;
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dotBounce 1.2s infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.15s; }
.loading-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   MODAL OVERLAY (shared)
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

/* Centered modal variant */
.modal-overlay.modal-centered {
  align-items: center;
  padding: 20px;
}

/* ============================================================
   PROFILE SELECTION — BOTTOM SHEET
   ============================================================ */
.bottom-sheet {
  background: var(--color-bg-card);
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  padding: 8px 0 0;
  width: 100%;
  max-width: var(--max-width);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.15);
}

.modal-overlay.active .bottom-sheet {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin: 0 auto 16px;
  flex-shrink: 0;
}

.bottom-sheet-header {
  padding: 0 20px 16px;
  flex-shrink: 0;
}

.bottom-sheet-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-text);
}

.bottom-sheet-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.bottom-sheet-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
}

.bottom-sheet-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Profile list items */
.profile-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background var(--transition);
  border-radius: var(--radius-xs);
}

.profile-list-item:last-child {
  border-bottom: none;
}

.profile-list-item:hover {
  background: var(--color-bg-warm);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.profile-list-item.selected {
  background: rgba(255, 107, 157, 0.06);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Profile avatar circle */
.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.profile-avatar-info {
  flex: 1;
  min-width: 0;
}

.profile-avatar-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.profile-avatar-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

.profile-avatar-meta .relationship-tag {
  background: var(--color-bg-warm);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* Selected checkmark */
.profile-select-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition);
}

.profile-list-item.selected .profile-select-check {
  opacity: 1;
}

.profile-select-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Existing reading badge */
.reading-count-badge {
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Add new person button */
.add-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 2px dashed rgba(255, 107, 157, 0.35);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition);
}

.add-profile-btn:hover {
  background: rgba(255, 107, 157, 0.06);
  border-color: var(--color-primary);
}

/* ============================================================
   PURCHASE CONFIRMATION MODAL
   ============================================================ */
.purchase-modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-modal);
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-modal);
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .purchase-modal {
  transform: scale(1);
  opacity: 1;
}

.purchase-modal-cosmo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.purchase-modal-cosmo img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}

.purchase-modal h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.purchase-modal-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.purchase-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.purchase-balance-row .label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.purchase-balance-row .value-green {
  font-family: var(--font-display);
  color: #3CB878;
  font-size: 1rem;
}

.purchase-balance-row .value-pink {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-size: 1rem;
}

.purchase-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Processing state within purchase modal */
.purchase-processing {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.purchase-processing.active {
  display: flex;
}

.purchase-ready {
  display: block;
}

.purchase-ready.hidden {
  display: none;
}

/* ============================================================
   PREVIOUS READING MODAL
   ============================================================ */
.prev-reading-modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-modal);
  padding: 28px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-modal);
}

.prev-reading-modal h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.prev-reading-modal p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.prev-reading-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   READING RESULTS — COMMON STRUCTURE
   ============================================================ */

/* Service-specific reading header */
.reading-result-header {
  margin: -20px -16px 24px;
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reading-result-header.header-dollar-fortune { background: var(--color-card-1); }
.reading-result-header.header-match          { background: var(--color-card-2); }
.reading-result-header.header-grand-fortune  { background: var(--color-card-3); }
.reading-result-header.header-lucky-day      { background: var(--color-card-4); }
.reading-result-header.header-yearly-fortune { background: var(--color-card-5); }
.reading-result-header.header-daily          { background: var(--color-card-6); }

.reading-header-cosmo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.reading-header-profile-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-text);
}

.reading-header-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.reading-header-tag {
  background: rgba(255,255,255,0.75);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.reading-header-scroll-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Reading opening section */
.reading-opening {
  text-align: center;
  padding: 8px 0 24px;
}

.reading-opening-sparkle {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.reading-opening-headline {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 16px;
}

.reading-opening-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  text-align: left;
}

.reading-overview-body {
  padding: 0 0 20px;
}

.reading-overview-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  text-align: left;
}

.reading-overview-content p {
  margin-bottom: 12px;
}

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion {
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-card);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.accordion-trigger:hover {
  background: var(--color-bg-warm);
}

.accordion-trigger.open {
  background: var(--color-bg-warm);
}

.accordion-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.accordion-info {
  flex: 1;
  min-width: 0;
}

.accordion-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.accordion-headline {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.3;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}

.accordion-trigger.open .accordion-arrow {
  transform: rotate(90deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-body.open {
  max-height: 2000px;
}

.accordion-content {
  margin-top: 1em;
  padding: 0 16px 20px;
  background: var(--color-bg-card);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* ============================================================
   FLOATING SHARE BUTTON
   ============================================================ */
.share-float-btn {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  right: 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.45);
  cursor: pointer;
  z-index: 80;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.share-float-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 107, 157, 0.55);
}

.share-float-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.share-inline-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.share-inline-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.35);
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.share-inline-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 107, 157, 0.5);
}

.share-inline-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* ============================================================
   CROSS-SELL SECTION
   ============================================================ */
.cross-sell {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.cross-sell-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 14px;
  text-align: center;
}

.cross-sell-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cross-sell-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.cross-sell-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-card-md);
}

.cross-sell-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg-warm);
}

.cross-sell-thumb-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.cross-sell-info {
  flex: 1;
}

.cross-sell-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.cross-sell-price {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cross-sell-arrow {
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

/* ============================================================
   COMPATIBILITY — MATCH READING
   ============================================================ */
.match-header-card {
  background: var(--color-card-2);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 16px;
}

.match-pair-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.match-sign-info {
  text-align: center;
}

.match-sign-name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-top: 4px;
}

.match-divider {
  font-size: 1.25rem;
  color: var(--color-primary);
}

.match-score-display {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 8px;
}

.match-headline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
}

.match-label-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

.compat-score-bar {
  margin: 12px 0;
}

.compat-bar-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.compat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
  border-radius: 4px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}

/* ============================================================
   GRAND FORTUNE — DECADE SELECTOR
   ============================================================ */
.decade-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.decade-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.decade-item:hover {
  border-color: var(--color-primary-light);
  transform: translateX(4px);
}

.decade-item.purchased {
  border-color: var(--color-primary);
  background: rgba(255, 107, 157, 0.04);
}

.decade-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-text);
  flex: 1;
}

.decade-current-badge {
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.decade-price-badge {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Year-by-year timeline */
.year-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}

.year-entry {
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.year-entry-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.year-entry-trigger:hover {
  background: var(--color-bg-warm);
}

.year-entry-num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-primary);
  width: 32px;
  flex-shrink: 0;
}

.year-entry-headline {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.year-entry-body {
  padding: 0 14px;
  background: var(--color-bg);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
}

.year-entry-body.open {
  max-height: 1000px;
  padding-bottom: 14px;
}

/* Secret Solution */
.secret-solution {
  background: linear-gradient(135deg, var(--color-accent-light), rgba(255,255,255,0.8));
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 20px;
}

.secret-solution-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.secret-solution-text {
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 600;
  color: var(--color-text);
}

/* ============================================================
   LUCKY DAY — PURPOSE SELECTOR
   ============================================================ */
.purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.purpose-item {
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.purpose-item:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.purpose-item.selected {
  border-color: var(--color-primary);
  background: rgba(255, 107, 157, 0.04);
}

.purpose-icon {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.purpose-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-text);
}

/* Lucky dates display */
.lucky-dates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.lucky-date-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.lucky-date-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lucky-date-value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.lucky-date-reason {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ============================================================
   YEARLY FORTUNE — YEAR SELECTOR
   ============================================================ */
.year-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.year-btn {
  background: var(--color-bg-card);
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.year-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.year-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.year-btn .this-year-badge {
  font-size: 0.6875rem;
  font-family: var(--font-body);
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  padding: 1px 5px;
  border-radius: 4px;
}

.year-custom-input {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.year-custom-input input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-card);
}

.year-custom-input input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Monthly breakdown */
.monthly-accordion .accordion-trigger {
  padding: 12px 16px;
}

.monthly-accordion .accordion-headline {
  font-size: 0.875rem;
}

/* ============================================================
   DAILY HOROSCOPE PAGE
   ============================================================ */
.daily-page-header {
  text-align: center;
  padding: 8px 0 20px;
}

.daily-date-display {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Zodiac sign grid for daily */
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.zodiac-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 14px 8px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.zodiac-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-md);
  border-color: var(--color-primary-light);
}

.zodiac-card.selected {
  border-color: var(--color-primary);
  background: rgba(255, 107, 157, 0.04);
}

.zodiac-card-glyph {
  font-size: 1.5rem;
  margin-bottom: 4px;
  line-height: 1;
}

.zodiac-card-name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.zodiac-card-dates {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* Daily reading display */
.daily-reading-wrap {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card-md);
  animation: readingExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  margin-bottom: 20px;
}

@keyframes readingExpand {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.daily-reading-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.875rem;
  padding: 8px 0;
  margin-bottom: 12px;
  cursor: pointer;
}

.daily-reading-back:hover {
  color: var(--color-primary);
}

/* Lucky items row */
.lucky-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.lucky-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-warm);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

.lucky-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

/* ============================================================
   AUTH — LOGIN PAGE
   ============================================================ */
.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px var(--page-pad) 20px;
  min-height: 80vh;
}

.auth-cosmo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.5;
  max-width: 280px;
}

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
}

/* Social login buttons */
.btn-social {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.btn-social svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-social-google {
  background: #4285F4;
  color: #fff;
}

.btn-social-google:hover {
  background: #3574DE;
}

.btn-social-facebook {
  background: #1877F2;
  color: #fff;
}

.btn-social-facebook:hover {
  background: #1266D8;
}

.btn-social-apple {
  background: #000000;
  color: #fff;
}

.btn-social-apple:hover {
  background: #1a1a1a;
}

.btn-social-email {
  background: #6B7280;
  color: #fff;
}

.btn-social-email:hover {
  background: #556070;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.auth-divider span {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ============================================================
   PROFILE CREATION FORM
   ============================================================ */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  transition: border-color var(--transition);
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

/* MM/DD/YYYY date input group */
.date-field-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.date-field-group .date-sep {
  color: var(--color-text-muted);
  font-weight: 700;
}

.date-field-group input {
  text-align: center;
}

.date-mm, .date-dd {
  width: 72px;
}

.date-yyyy {
  width: 96px;
}

/* Time of birth optional toggle */
.tob-optional {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.tob-optional input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.tob-optional span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Relationship selector */
.relationship-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rel-option {
  padding: 8px 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-bg-card);
  color: var(--color-text);
  transition: all var(--transition);
}

.rel-option:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.rel-option.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ============================================================
   COOKIE SHOP
   ============================================================ */
.shop-page {
  padding: 20px var(--page-pad);
}

.shop-banner {
  background: linear-gradient(135deg, var(--color-accent-light), rgba(255, 232, 204, 0.6));
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.shop-banner-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.shop-banner-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Cookie/Crumb system explainer */
.cookie-explainer {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.cookie-explainer-item {
  text-align: center;
}

.cookie-explainer-emoji {
  font-size: 1.75rem;
  margin-bottom: 4px;
}

.cookie-explainer-label {
  font-family: var(--font-display);
  font-size: 0.875rem;
}

.cookie-explainer-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Shop tier cards */
.shop-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-tier {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: all var(--transition);
  border: 2px solid transparent;
}

.shop-tier:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.shop-tier-best {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg-card), var(--color-accent-light));
}

.best-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.75rem;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(255, 209, 102, 0.4);
}

.shop-tier-amount {
  flex: 1;
}

.shop-tier-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin-bottom: 4px;
}

.shop-tier-cookies {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-tier-bonus {
  font-size: 0.8125rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 2px;
}

.shop-tier-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text);
  white-space: nowrap;
}

.paypal-btn-container {
  min-height: 35px;
  width: 100%;
  max-width: 200px;
}

/* ============================================================
   LIBRARY PAGE
   ============================================================ */
.library-banner {
  background: var(--color-card-1);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.library-banner-cosmo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.library-banner-text h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.library-banner-text p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Profile filter row */
.library-profile-filter {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.library-profile-filter::-webkit-scrollbar {
  display: none;
}

.lib-profile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lib-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
  border: 2.5px solid transparent;
  transition: all var(--transition);
}

.lib-profile-btn.active .lib-profile-avatar {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.25);
}

.lib-profile-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.lib-profile-btn.active .lib-profile-name {
  color: var(--color-primary);
}

/* Service filter tabs */
.library-service-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.library-service-filter::-webkit-scrollbar {
  display: none;
}

.lib-service-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.lib-service-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Library service sections */
.library-section {
  margin-bottom: 16px;
}

.library-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.library-section-header:hover {
  background: var(--color-accent-dark);
}

.library-section-header.collapsed {
  border-radius: var(--radius-sm);
}

.library-section-header:not(.collapsed) {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.library-section-body {
  background: var(--color-bg-card);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Library reading items */
.lib-reading-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background var(--transition);
}

.lib-reading-item:last-child {
  border-bottom: none;
}

.lib-reading-item:hover {
  background: var(--color-bg-warm);
}

.lib-reading-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.lib-reading-info {
  flex: 1;
  min-width: 0;
}

.lib-reading-profile {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.lib-reading-detail {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.lib-reading-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lib-reading-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.lib-reading-btn-share {
  background: rgba(255, 107, 157, 0.1);
  color: var(--color-primary);
}

.lib-reading-btn-share:hover {
  background: var(--color-primary);
  color: #fff;
}

.lib-reading-btn-delete {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-muted);
}

.lib-reading-btn-delete:hover {
  background: #FFE4E4;
  color: #E04040;
}

.lib-reading-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
}

.empty-state p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  max-width: 240px;
  line-height: 1.5;
}

/* ============================================================
   ADD PROFILE PAGE
   ============================================================ */
.add-profile-page {
  padding: 20px var(--page-pad);
}

.add-profile-page h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin-bottom: 4px;
}

.add-profile-page .page-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Avatar preview */
.avatar-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-preview-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #fff;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   MY READINGS PAGE
   ============================================================ */
.my-readings-page {
  padding: 20px var(--page-pad);
}

/* ============================================================
   SHARE CARD PREVIEW & MODAL
   ============================================================ */
.share-card-modal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
}

.share-canvas-container {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

.share-canvas-container canvas {
  display: block;
  width: 100%;
  height: auto;
}

.share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   TAGS / PILLS
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.tag-primary {
  background: rgba(255, 107, 157, 0.12);
  color: var(--color-primary-dark);
}

.tag-accent {
  background: var(--color-accent-light);
  color: #9A7A00;
}

.tag-muted {
  background: rgba(0, 0, 0, 0.07);
  color: var(--color-text-muted);
}

/* ============================================================
   DIVIDERS & MISC
   ============================================================ */
.divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin: 16px 0;
}

.watermark {
  text-align: center;
  padding: 20px 0 6px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  opacity: 0.55;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cusp-note {
  background: var(--color-accent-light);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.8125rem;
  margin: 8px 0;
  border-left: 3px solid var(--color-accent);
  line-height: 1.5;
}

/* ============================================================
   TABS (generic)
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab.active {
  background: var(--color-bg-card);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay */
.animate-in:nth-child(2)  { transition-delay: 0.05s; }
.animate-in:nth-child(3)  { transition-delay: 0.10s; }
.animate-in:nth-child(4)  { transition-delay: 0.15s; }
.animate-in:nth-child(5)  { transition-delay: 0.20s; }
.animate-in:nth-child(6)  { transition-delay: 0.25s; }
.animate-in:nth-child(7)  { transition-delay: 0.30s; }
.animate-in:nth-child(8)  { transition-delay: 0.35s; }
.animate-in:nth-child(9)  { transition-delay: 0.40s; }
.animate-in:nth-child(10) { transition-delay: 0.45s; }
.animate-in:nth-child(11) { transition-delay: 0.50s; }
.animate-in:nth-child(12) { transition-delay: 0.55s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 481px) {
  .app {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 600px) {
  .bottom-nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .app-header {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .zodiac-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   ACCESSIBILITY FOCUS STATES
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}