/* ========== Mobile App — Aligned with landing palette ==========
   Single brand voice: amber primary, honey-gold secondary, lavender
   for accent variation, all on a warm cream base. The dawn gradient
   (lilac → peach → cream) matches public/landing.css so the
   marketing page and the app feel like one product, not two.
   See public/landing.css :root for the canonical palette source. */
:root {
  /* — Surfaces ——————————————————————————————————————— */
  --bg-light:        #fefaf3;   /* matches landing --bg-cream */
  --bg-cream:        #fefaf3;
  --bg-cream-soft:   #fff6e8;
  --bg-lilac-wash:   #f4eefb;
  --bg-mint-wash:    #ecf5ee;
  --bg-white:        #ffffff;
  --bg-card:         rgba(255, 255, 255, 0.95);
  --bg-input:        #ffffff;

  /* — Brand accents — human-eye friendly, not flashy ——————
     Slightly desaturated from neon amber to a softer warm-amber
     that reads well on cream surfaces without screaming. */
  --accent:          #f59e0b;             /* refined amber — primary CTAs */
  --accent-strong:   #d97706;             /* hover states */
  --accent-light:    #fbbf24;             /* warm honey — gradient endpoints */
  --accent-soft:     rgba(245, 158, 11, 0.08);

  --gold:            #d4a574;             /* honey gold — secondary, dividers */
  --gold-soft:       #e9c79a;
  --gold-light:      #fcd34d;

  --lavender:        #a78bfa;             /* lavender accent — kept from landing */
  --lavender-soft:   #c8b8fc;

  /* — Chat-specific calm blue —————————————————————————
     Chat is a long-form, contemplative interface; the amber
     bubble was too loud message-after-message. This is a soft
     dawn-sky blue that pairs with the amber/cream palette
     without competing for attention. */
  --chat-accent:        #5b9bd5;          /* dawn sky blue */
  --chat-accent-strong: #4682b4;          /* steel-blue hover */
  --chat-accent-light:  #93c5e8;          /* aurora-light blue */
  --chat-accent-soft:   rgba(91, 155, 213, 0.10);

  --peach:           #ffab91;
  --mint:            #80cbc4;
  --sky-blue:        #5b9bd5;             /* alias of --chat-accent */

  /* — Gradients ——————————————————————————————————————— */
  --hero-grad:       linear-gradient(180deg, #efe4ff 0%, #fde6d3 50%, #fff3e0 100%);
  --sunrise:         linear-gradient(135deg, #ff9a56 0%, #ffb74d 50%, #ffd54f 100%);
  --amber-warm:      linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);

  /* — Text (matches landing's warm plum) ————————————— */
  --text:            #3d3548;             /* warm plum, never pure black */
  --text-muted:      #7a7088;
  --text-soft:       #9a90a8;
  --text-light:      #ffffff;

  /* — Borders ——————————————————————————————————————— */
  --border:          rgba(61, 53, 72, 0.10);
  --border-soft:     rgba(61, 53, 72, 0.08);
  --border-mid:      rgba(61, 53, 72, 0.14);

  /* — Status colors (kept) ————————————————————————— */
  --success:         #4caf50;
  --success-light:   #81c784;
  --error:           #e53935;
  --error-soft:      rgba(229, 57, 53, 0.08);
  --danger:          #f44336;

  /* — Elevation (matches landing shadow language) —————— */
  --shadow-sm:       0 1px 3px rgba(61, 53, 72, 0.04), 0 4px 12px rgba(61, 53, 72, 0.06);
  --shadow-md:       0 4px 14px rgba(61, 53, 72, 0.08), 0 12px 40px rgba(61, 53, 72, 0.06);
  --shadow-glow:     0 8px 28px rgba(255, 152, 0, 0.22);

  /* — Typography ————————————————————————————————————— */
  --font-serif:      'Cormorant Garamond', Georgia, serif;
  --font-sans:       'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* — Type scale (canonical sizes — replaces ad-hoc px values) */
  --t-xs:    10px;
  --t-sm:    11px;
  --t-base:  12px;
  --t-md:    13px;
  --t-lg:    14px;
  --t-xl:    16px;
  --t-2xl:   18px;
  --t-3xl:   22px;
  --t-4xl:   28px;
  --t-5xl:   38px;

  /* — Wellness palette (score-tier semantics — used by orbs,
        trend pills, score numbers, ring fills). Centralised here
        so any UI surface that renders score-tier color reads
        from ONE source of truth. */
  --tier-peak-text:     #5e8868;     /* sage — score ≥ 85 */
  --tier-peak-wash:     #dee9d8;
  --tier-strong-text:   #a07a4a;     /* deep honey — score ≥ 70 */
  --tier-strong-wash:   #f0deb9;
  --tier-workable-text: #8a715f;     /* warm taupe (brand-aligned) — ≥ 55 */
  --tier-workable-wash: #e8d8c6;
  --tier-quiet-text:    #6e6788;     /* muted heather — ≥ 35 */
  --tier-quiet-wash:    #dcd5e7;
  --tier-restful-text:  #576a7c;     /* misty slate — < 35 */
  --tier-restful-wash:  #d2dae3;

  /* — Pillar identity colors (kept on rings + borders + glows) */
  --pillar-physical:    #c89770;     /* saturated honey */
  --pillar-mental:      #a59ec0;     /* soft mauve */
  --pillar-emotional:   #c89eaf;     /* dusty rose */

  /* — Body text variants for cream backgrounds (WCAG AA on cream) */
  --text-cocoa:         #4a3d2e;     /* deep cocoa — primary readable */
  --text-taupe:         #8a715f;     /* warm taupe — secondary */
  --text-honey-deep:    #a07a4a;     /* deep honey — eyebrow / kicker */

  /* — Canonical card surface (wellness journal aesthetic):
        warm-cream-aware border + warm-undertone shadow.
        Use these on every card-like surface for consistent feel. */
  --card-border:        rgba(180, 140, 90, 0.16);
  --card-shadow:        0 4px 14px rgba(60, 40, 0, 0.05);
  --card-shadow-md:     0 8px 24px rgba(60, 40, 0, 0.08);
  --card-radius:        18px;        /* matches existing --radius-xl fallback */
  --card-radius-sm:     14px;        /* tight cards (last-year-widget) */
  --card-padding:       16px 14px;
  --card-padding-lg:    18px 14px 14px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg-light);
  color: var(--text);
  overflow: hidden;
  overflow-x: hidden;
}

/* ========== Soft Gradient Background ========== */
.stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(206, 147, 216, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(100, 181, 246, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 183, 77, 0.2) 0%, transparent 50%);
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ========== Auth Screen ========== */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: env(safe-area-inset-top, 20px);
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

.auth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(167, 139, 250, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(245, 158, 11, 0.10) 0%, transparent 55%),
    var(--bg-cream);
}

.auth-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  text-align: center;
  z-index: 1;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.auth-logo {
  margin: 0 auto 14px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .auth-logo { animation: authLogoFloat 6s ease-in-out infinite; }
}

@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.auth-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 7vw, 38px);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text);
  margin: 12px 0 10px;
  line-height: 1.15;
}
.auth-title .brand-name-aura {
  font-style: italic;
  color: var(--accent-strong);
  font-weight: 600;
}

.auth-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-taupe);
  font-size: var(--t-lg);
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  opacity: 0.95;
}

.auth-dev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--lavender);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.7;
}

.auth-dev-dot {
  width: 5px;
  height: 5px;
  background: var(--lavender);
  border-radius: 50%;
  animation: devPulse 2.5s ease-in-out infinite;
}

@keyframes devPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.3; }
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
  font-family: inherit;
}

.auth-btn:active {
  transform: scale(0.98);
}

.auth-btn.primary {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.22), 0 1px 2px rgba(217, 119, 6, 0.18);
}
.auth-btn.primary:hover { box-shadow: 0 6px 20px rgba(217, 119, 6, 0.32), 0 1px 2px rgba(217, 119, 6, 0.18); }

.auth-btn.secondary {
  background: var(--bg-white);
  color: var(--text);
  border: 1.5px solid var(--border-mid);
}
.auth-btn.secondary:hover { border-color: var(--accent); color: var(--accent-strong); }

.auth-btn.text {
  background: transparent;
  color: var(--text-muted);
  min-height: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
}
.auth-btn.text:hover { color: var(--text); }

.auth-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========== Auth Forms ========== */
.auth-form {
  text-align: left;
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 4px 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Back buttons — visibility controlled by JS in showAuthForm() */

/* Consistent button spacing within auth forms */
.auth-form > .auth-btn {
  margin-top: 10px;
}
.auth-form > .auth-btn + .auth-btn.text {
  margin-top: 4px;
}
.auth-form > .auth-btn.text + .auth-btn.text {
  margin-top: 2px;
}

.auth-form h2 {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-3xl);
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-cocoa);
  letter-spacing: 0.3px;
}

/* --- Grouped form card (iOS-style) --- */
.form-group {
  margin-bottom: 14px;
  position: relative;
}

.form-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-group.flex-1 {
  flex: 1;
  min-width: 0;
}

.form-group.flex-1 input {
  width: 100%;
  box-sizing: border-box;
}

.input-hint {
  display: block;
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 2px;
  line-height: 1.4;
}

.form-group label {
  display: block;
  font-size: var(--t-md);
  color: var(--text);
  margin-bottom: 5px;
  font-weight: 500;
  padding-left: 2px;
}
.referral-optional { font-size: var(--t-sm); color: var(--text-muted); font-weight: 400; }
.auth-subtitle-form { font-family: var(--font-serif); font-style: italic; font-size: var(--t-lg); color: var(--text-taupe); text-align: center; margin-bottom: 20px; }
.auth-step-caption { font-size: var(--t-lg); color: var(--accent); text-align: center; font-weight: 600; margin-bottom: 16px; }
.auth-step-prize { font-size: var(--t-sm); color: var(--text-muted); text-align: center; line-height: 1.5; margin: 0 auto 22px; max-width: 320px; padding: 10px 14px; background: rgba(220, 196, 158, 0.08); border-radius: 10px; border: 1px solid rgba(220, 196, 158, 0.20); }
.form-section-hint { font-size: var(--t-sm); color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
.form-trust-line { font-size: var(--t-sm); color: var(--text-muted); margin-bottom: 16px; opacity: 0.85; }
.form-divider-optional { font-size: var(--t-sm); font-weight: 400; color: var(--text-muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }

/* Time-unknown helper link + window picker */
.time-unknown-link { display: inline-block; margin-top: 6px; padding: 4px 0; background: none; border: none; color: var(--accent); font-size: var(--t-sm); font-weight: 500; cursor: pointer; text-align: left; }
.time-unknown-link:hover { text-decoration: underline; }
.time-window-panel { margin: -8px 0 20px 0; padding: 14px; background: rgba(220, 196, 158, 0.06); border-radius: 12px; border: 1px solid rgba(220, 196, 158, 0.15); }
.time-window-hint { font-size: var(--t-sm); color: var(--text-muted); margin: 0 0 12px 0; line-height: 1.4; }
.time-window-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.time-window-chip { display: flex; flex-direction: column; align-items: flex-start; padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: var(--t-base); font-weight: 500; cursor: pointer; transition: all 0.15s ease; text-align: left; }
.time-window-chip small { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.time-window-chip:hover { border-color: var(--accent); background: rgba(220, 196, 158, 0.08); }
.time-window-chip.selected { border-color: var(--accent); background: rgba(220, 196, 158, 0.15); }
.time-window-confidence { font-size: var(--t-xs); color: var(--text-muted); margin: 6px 0 0 0; min-height: 14px; opacity: 0.9; }
.auth-field-status { font-size: var(--t-base); margin-top: 6px; min-height: 16px; line-height: 1.4; }
.auth-field-status.error { color: var(--error); }
.auth-field-status.success { color: var(--success); }
.auth-field-status.info { color: var(--text-muted); }
.auth-inline-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.auth-field-status.info { color: var(--accent); }

.form-group input,
.form-group select {
  width: 100%;
  padding: 14px 14px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  color: var(--text);
  font-size: 16px; /* 16px prevents iOS Safari from auto-zooming on focus */
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff9800' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group input::placeholder {
  color: rgba(45, 45, 58, 0.35);
}

/* Password input with toggle */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  flex: 1;
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  min-width: 36px;
  min-height: 36px;
}
.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.password-toggle:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.password-toggle.visible {
  color: var(--accent-strong);
}

/* Password match status */
.password-match-status {
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500;
  padding-left: 2px;
}

.password-match-status.error {
  color: var(--error);
}

.password-match-status.success {
  color: var(--success);
}

.form-divider {
  text-align: center;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 14px;
  position: relative;
  font-weight: 600;
}

.form-divider::before,
.form-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--border);
}

.form-divider::before { left: 0; }
.form-divider::after { right: 0; }

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.form-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.city-dropdown.show {
  display: block;
}

.city-dropdown .item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.city-dropdown .item:last-child {
  border-bottom: none;
}

.city-dropdown .item:active {
  background: var(--accent-soft);
}

/* Subtitle line that sits under each section/card title and previews
 * what the section is about. Keeps the same vertical rhythm everywhere. */
.section-tagline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #888);
  margin: -6px 0 12px;
  padding: 0 4px;
  font-style: italic;
  letter-spacing: 0.2px;
}
.card-tagline {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted, #888);
  margin: 6px 0 0;
  padding-left: 32px; /* indent past the card-icon */
  font-style: italic;
}
.birth-star-tagline {
  font-size: 13px;
  color: var(--text-muted, #888);
  font-style: italic;
  margin: 4px 0 0 36px; /* indent past the icon */
}

/* ========== Loading Overlay ========== */
/* When the reading is being prepared after login, the homescreen behind
 * is blurred and dimmed so user can see the app shell taking shape, not a
 * blank wall. backdrop-filter: blur lets the home content show through. */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-overlay.show {
  display: flex;
}

/* Spinning ring (CSS-only) — replaces the older floating-emoji loader. */
.loading-spinner-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent, #ff9800);
  border-right-color: var(--gold, #ffc107);
  margin: 0 auto 24px;
  animation: spinner-rotate 0.9s linear infinite;
  filter: drop-shadow(0 4px 14px rgba(255, 152, 0, 0.35));
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.loading-content {
  text-align: center;
  padding: 40px;
}

.loading-icon {
  font-size: 72px;
  animation: float 2s ease-in-out infinite;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 20px rgba(255, 152, 0, 0.4));
}

.loading-stars {
  font-size: 28px;
  margin-bottom: 20px;
  letter-spacing: 8px;
}

.loading-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.loading-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.loading-dots span {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--gold), var(--peach));
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
  box-shadow: 0 2px 10px rgba(255, 152, 0, 0.3);
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ========== App Container ========== */
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
}

/* ========== App Header ========== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header-logo-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.app-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.app-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 5px;
}

.app-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-tagline {
  font-family: var(--font-sans);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding-left: 22px;
  margin-top: -1px;
}

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

.credit-glow {
  animation: creditGlow 2s ease-out;
}
@keyframes creditGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); transform: scale(1); }
  20% { box-shadow: 0 0 14px 5px rgba(255, 193, 7, 0.6); transform: scale(1.12); }
  50% { box-shadow: 0 0 22px 10px rgba(255, 193, 7, 0.3); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); transform: scale(1); }
}

.header-badge-label {
  display: block;
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.5;
  text-align: center;
  line-height: 1;
}
.header-refresh-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  opacity: 0.35;
  transition: opacity 0.2s, transform 0.3s;
  line-height: 1;
}
.header-refresh-btn:not(:disabled) {
  opacity: 1;
  color: var(--accent);
}
.header-refresh-btn:not(:disabled):active {
  transform: rotate(180deg);
}
.header-refresh-btn.spinning {
  opacity: 0.7;
  animation: refreshSpin 1s linear infinite;
  pointer-events: none;
}
@keyframes refreshSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.header-refresh-btn:disabled {
  cursor: default;
}
.header-streak-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,152,0,0.08);
  border: 1px solid rgba(255,152,0,0.2);
  border-radius: 10px;
  padding: 3px 8px 2px;
  white-space: nowrap;
  line-height: 1.2;
}
.header-credit-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 8px 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
}

.header-credit-badge:active {
  transform: scale(0.95);
  background: var(--accent-soft);
}

.header-credit-icon {
  font-size: 14px;
  line-height: 1;
}

.header-credit-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.header-credit-badge.low-balance {
  border-color: #f0ad4e;
  background: #fff8ed;
}

.header-credit-badge.low-balance .header-credit-count {
  color: #e68a00;
}

.header-credit-badge.zero-balance {
  border-color: #e74c3c;
  background: #fdf0ef;
}

.header-credit-badge.zero-balance .header-credit-count {
  color: #e74c3c;
}

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
}

/* ========== Tab Navigation ========== */
.tab-nav {
  display: flex;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.tab-btn.active {
  color: var(--accent);
}

/* Chat tab uses the calmer dawn-blue accent so the tab indicator
   matches the in-conversation accent inside the tab body. */
#tabChat.active {
  color: var(--chat-accent-strong);
}
#tabChat.active::after {
  background: linear-gradient(90deg, var(--chat-accent), var(--chat-accent-light)) !important;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 3px 3px 0 0;
}

.tab-icon {
  font-size: 20px;
}

.tab-label {
  font-weight: 600;
}

/* ========== Tab Content ========== */
.tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tab-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ========== Insights Tab ========== */
.insights-container {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ========== Welcome Banner ========== */
.welcome-banner {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.08));
  border: 1px solid rgba(255, 152, 0, 0.15);
  border-radius: 16px;
  margin-bottom: 14px;
  animation: bannerSlideIn 0.5s ease-out;
}
.welcome-greeting {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.welcome-teaser {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}
.welcome-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  opacity: 0.5;
  padding: 4px;
}

.reading-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.1));
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.status-icon {
  font-size: 32px;
}

.status-text {
  flex: 1;
}

.status-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
}

.status-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.quick-link {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  text-decoration: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(255, 152, 0, 0.3);
}

/* ========== Insight Cards ========== */
.insight-card {
  background: var(--bg-white);
  border-radius: var(--card-radius);
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}

.card-icon {
  font-size: 24px;
}

.card-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.card-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 50%;
  font-size: 16px;
  color: var(--accent);
  font-weight: 700;
}

.card-content {
  padding: 0 16px 16px;
}

.card-content.collapsed {
  display: none;
}

/* ========== Data Rows ========== */
.data-section {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 12px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.data-row:last-child {
  border-bottom: none;
}

.data-label {
  color: var(--text-muted);
  font-size: 13px;
}

.data-value {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}

/* ========== Sub-sections ========== */
.sub-section {
  margin-top: 12px;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 152, 0, 0.1));
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

.sub-toggle {
  font-size: 14px;
  font-weight: 700;
}

.sub-content {
  padding-top: 12px;
}

.sub-content.collapsed {
  display: none;
}

/* ========== Charts ========== */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.chart-box {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

.chart-box .chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 10px;
}

.chart-box .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-box .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chart-box .legend-dot.asc {
  background: var(--accent);
}

.chart-label {
  font-size: 13px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.chart-tap-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--chat-accent-strong);
  background: var(--chat-accent-soft);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(91, 155, 213, 0.25);
}

/* Yoga list — Phase A profile section */
.yoga-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}
.yoga-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yoga-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yoga-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.yoga-card.active-now {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg-white) 0%, var(--accent-soft) 100%);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.10);
}
.yoga-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.yoga-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.yoga-strength-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}
.yoga-strength-pill.high { background: rgba(245, 158, 11, 0.15); color: var(--accent-strong); }
.yoga-strength-pill.medium { background: rgba(212, 165, 116, 0.18); color: var(--gold); }

/* Yoga state pills (Phase Y1) — multi-state classification */
.yoga-state-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.yoga-state-pill.state-active    { background: rgba(34, 197, 94, 0.15);  color: #15803d; }
.yoga-state-pill.state-maturing  { background: rgba(245, 158, 11, 0.18); color: var(--accent-strong); }
.yoga-state-pill.state-dormant   { background: rgba(167, 139, 250, 0.15); color: #6d28d9; }
.yoga-state-pill.state-spent     { background: rgba(122, 112, 136, 0.12); color: var(--text-muted); }
.yoga-state-pill.state-weak      { background: rgba(122, 112, 136, 0.12); color: var(--text-soft); }
.yoga-state-pill.state-cancelled { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }

/* Card subtle border tint reflecting state */
.yoga-card.state-active { border-color: rgba(34, 197, 94, 0.4); background: linear-gradient(135deg, var(--bg-white) 0%, rgba(34, 197, 94, 0.05) 100%); }
.yoga-card.state-maturing { border-color: rgba(245, 158, 11, 0.4); }
.yoga-card.state-cancelled { opacity: 0.75; }
.yoga-card.state-weak { opacity: 0.85; }
.yoga-card.state-spent { opacity: 0.85; }

/* Status dot variants */
.yoga-status.active .yoga-dot { background: #22c55e; }
.yoga-status.maturing .yoga-dot { background: var(--accent); }
.yoga-status.dormant .yoga-dot { background: #a78bfa; animation: none; }
.yoga-status.spent .yoga-dot { background: var(--text-soft); animation: none; }
.yoga-status.weak .yoga-dot { background: var(--text-soft); animation: none; }
.yoga-status.cancelled .yoga-dot { background: #dc2626; animation: none; }
.yoga-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.yoga-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.yoga-status.active {
  color: var(--accent-strong);
  font-weight: 600;
}
.yoga-status.upcoming {
  color: var(--text-soft);
}
.yoga-status .yoga-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: yoga-pulse 2s infinite;
}
.yoga-status.upcoming .yoga-dot {
  background: var(--text-soft);
  animation: none;
}
@keyframes yoga-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.yoga-show-all-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--border-mid);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color .15s ease, color .15s ease;
}
.yoga-show-all-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

.chart-container {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 280px;
  width: 100%;
}

/* ========== Dasha List ========== */
.dasha-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dasha Drill-Down */
.dasha-drill-level { margin-bottom: 6px; }
.dasha-drill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s;
}
.dasha-drill-header.expandable { cursor: pointer; }
.dasha-drill-header.expandable:active { background: var(--accent-soft); border-color: var(--accent); }
.drill-header-left { flex: 1; }
.drill-level-name { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.drill-level-planet { font-size: 15px; font-weight: 700; color: var(--text); }
.drill-header-right { display: flex; align-items: center; gap: 8px; }
.drill-remaining { font-size: 11px; color: var(--accent); font-weight: 600; }
.drill-arrow { font-size: 10px; color: var(--text-muted); }
.dasha-drill-children { padding-left: 16px; border-left: 2px solid var(--border); margin: 4px 0 4px 14px; }
.dasha-drill-children.collapsed { display: none; }
.dasha-drill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
  font-size: 13px;
}
.dasha-drill-item:active { background: var(--accent-soft); }
.dasha-drill-item.past { opacity: 0.4; }
.dasha-drill-item.current { font-weight: 600; color: var(--accent); }
.dasha-drill-item.future { opacity: 0.7; }
.drill-planet { font-weight: 600; min-width: 50px; }
.drill-dates { font-size: 11px; color: var(--text-muted); flex: 1; }
.drill-remaining { font-size: 10px; color: var(--accent); font-weight: 600; }
.drill-current-badge { color: var(--accent); font-size: 12px; }

/* What's Next section */
.dasha-whats-next {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.06), rgba(255, 152, 0, 0.06));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.whats-next-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.next-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
}
.next-label { color: var(--text-muted); font-size: 11px; min-width: 80px; }
.next-date { font-size: 11px; color: var(--text-muted); }

.dasha-level {
  margin-bottom: 0;
}

.dasha-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(145deg, rgba(248, 250, 255, 0.95), rgba(240, 245, 255, 0.85));
  border-radius: 12px;
  border: 1px solid rgba(100, 181, 246, 0.2);
  box-shadow: 0 2px 8px rgba(100, 181, 246, 0.06);
  transition: all 0.3s ease;
}

.dasha-item.current {
  background: linear-gradient(145deg, rgba(245, 251, 255, 0.98), rgba(230, 244, 255, 0.95));
  border: 2px solid rgba(100, 181, 246, 0.35);
  box-shadow: 0 4px 12px rgba(100, 181, 246, 0.1);
}

.dasha-level .dasha-item {
  cursor: pointer;
}

.dasha-level .dasha-item:active {
  transform: scale(0.98);
}

.dasha-item.expanded {
  background: linear-gradient(145deg, rgba(240, 248, 255, 0.98), rgba(225, 240, 255, 0.95));
  border-color: var(--sky-blue);
  box-shadow: 0 4px 16px rgba(100, 181, 246, 0.15);
}

.dasha-item .dasha-left {
  flex: 1;
  min-width: 0;
}

.dasha-planet {
  font-weight: 700;
  font-size: 15px;
  color: var(--sky-blue);
  text-shadow: 0 1px 2px rgba(100, 181, 246, 0.1);
}

.dasha-item.expanded .dasha-planet {
  color: var(--sky-blue);
}

.dasha-dates {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dasha-item .dasha-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dasha-item .dasha-period {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
}

.dasha-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  color: var(--sky-blue);
  background: rgba(100, 181, 246, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.dasha-expand.expanded {
  background: rgba(100, 181, 246, 0.2);
  color: var(--sky-blue);
  transform: rotate(180deg);
}

/* Dasha Timeline Expansion */
.dasha-timeline-list {
  margin-top: 12px;
  margin-left: 8px;
  padding: 12px;
  padding-left: 16px;
  border-left: 3px solid rgba(100, 181, 246, 0.4);
  background: rgba(240, 248, 255, 0.5);
  border-radius: 0 12px 12px 0;
  max-height: 350px;
  overflow-y: auto;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dasha-timeline-list.collapsed {
  display: none;
}

.dasha-timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 255, 0.9));
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(100, 181, 246, 0.1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.dasha-timeline-item:last-child {
  margin-bottom: 0;
}

.dasha-timeline-item.current {
  background: linear-gradient(135deg, rgba(232, 250, 248, 0.98), rgba(200, 240, 235, 0.9));
  border: 2px solid var(--mint);
  box-shadow: 0 2px 8px rgba(128, 203, 196, 0.15);
}

.dasha-timeline-item .timeline-planet {
  font-weight: 700;
  font-size: 14px;
  color: var(--sky-blue);
}

.dasha-timeline-item.current .timeline-planet {
  color: var(--mint);
}

.dasha-timeline-item .timeline-dates {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

/* ========== Upcoming Changes ========== */
.upcoming-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}

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

.upcoming-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(255, 253, 250, 0.98), rgba(255, 248, 240, 0.95));
  border-radius: 12px;
  border: 1px solid rgba(255, 183, 77, 0.2);
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.06);
}

.upcoming-item.dasha-change {
  background: linear-gradient(145deg, rgba(248, 250, 255, 0.98), rgba(235, 245, 255, 0.95));
  border-color: rgba(100, 181, 246, 0.25);
  box-shadow: 0 2px 8px rgba(100, 181, 246, 0.08);
}

.upcoming-item.pa-change {
  background: linear-gradient(145deg, rgba(245, 253, 252, 0.98), rgba(230, 250, 248, 0.95));
  border-color: rgba(128, 203, 196, 0.25);
  box-shadow: 0 2px 8px rgba(128, 203, 196, 0.08);
}

.upcoming-item.pas-change {
  background: linear-gradient(145deg, rgba(252, 248, 255, 0.98), rgba(245, 238, 255, 0.95));
  border-color: rgba(206, 147, 216, 0.25);
  box-shadow: 0 2px 8px rgba(206, 147, 216, 0.08);
}

.upcoming-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.upcoming-details {
  flex: 1;
  min-width: 0;
}

.upcoming-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.upcoming-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.upcoming-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.upcoming-countdown {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 152, 0, 0.1);
  color: var(--gold);
}

.upcoming-item.dasha-change .upcoming-countdown {
  background: rgba(100, 181, 246, 0.1);
  color: var(--sky-blue);
}

.upcoming-item.pa-change .upcoming-countdown {
  background: rgba(128, 203, 196, 0.1);
  color: #4db6ac;
}

.upcoming-item.pas-change .upcoming-countdown {
  background: rgba(206, 147, 216, 0.1);
  color: var(--lavender);
}

.upcoming-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-style: italic;
}
.upcoming-item { cursor: pointer; transition: all 0.15s; }
.upcoming-item:active { opacity: 0.7; transform: scale(0.98); }
.upcoming-summary {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}
.upcoming-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
}
.explain-upcoming-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: var(--bg-white);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.explain-upcoming-btn:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(0.97);
}

/* ========== Explain Section ========== */
.explain-section {
  margin-top: 10px;
}

.explain-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: var(--bg-white);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.explain-btn:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(0.97);
}
.explain-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.explain-result {
  margin-top: 12px;
  display: none;
}

.explain-result.visible {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.explain-content {
  padding: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 255, 0.95));
  border-radius: 12px;
  border: 1px solid rgba(255, 152, 0, 0.15);
  box-shadow: 0 2px 12px rgba(255, 152, 0, 0.08);
}

.explain-content p {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.explain-content p:last-child {
  margin-bottom: 0;
}

.explain-content strong {
  color: var(--accent);
}

.explain-content .highlight {
  background: linear-gradient(135deg, rgba(255, 243, 220, 0.6), rgba(255, 235, 200, 0.4));
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.explain-error {
  padding: 12px 16px;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 8px;
  color: var(--danger);
  font-size: 13px;
}

/* ========== Explain Modal ========== */
.explain-modal {
  max-width: 90%;
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: center;
  padding: 24px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explain-modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.explain-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.explain-modal-body {
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.explain-modal-body p {
  margin-bottom: 12px;
}

.explain-modal-body p:last-child {
  margin-bottom: 0;
}

.explain-modal-body strong {
  color: var(--accent);
}

.explain-modal-body .highlight {
  background: linear-gradient(135deg, rgba(255, 243, 220, 0.6), rgba(255, 235, 200, 0.4));
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Guidance List - Clean bullet points */
.explain-modal-body .guidance-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.explain-modal-body .guidance-list li {
  position: relative;
  padding: 12px 12px 12px 24px;
  margin-bottom: 8px;
  background: var(--bg-light);
  border-radius: 10px;
  line-height: 1.6;
}

.explain-modal-body .guidance-list li::before {
  content: '•';
  position: absolute;
  left: 10px;
  top: 12px;
  color: var(--accent);
  font-weight: bold;
  font-size: 16px;
}

.explain-modal-body .guidance-list li.emoji-bullet {
  padding-left: 12px;
}

.explain-modal-body .guidance-list li.emoji-bullet::before {
  content: none;
}

.explain-modal-body .guidance-list li:last-child {
  margin-bottom: 0;
}

.explain-modal-body .guidance-list li strong {
  color: var(--text);
  font-weight: 700;
}

.explain-modal-body .guidance-list li strong:first-child {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
}

.explain-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  color: var(--text-muted);
}

.explain-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 152, 0, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.chat-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(100, 181, 246, 0.1));
  border: 2px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
  transition: all 0.2s;
}

.chat-prompt:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(100, 181, 246, 0.2));
}

/* ========== Horoscope Cards ========== */
.horoscope-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.horoscope-card {
  padding: 20px 14px;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.horoscope-card.daily {
  background: linear-gradient(145deg, rgba(255, 213, 79, 0.25), rgba(255, 167, 38, 0.15));
  border-color: rgba(255, 183, 77, 0.25);
  box-shadow: 0 4px 16px rgba(255, 167, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.horoscope-card.weekly {
  background: linear-gradient(145deg, rgba(100, 181, 246, 0.2), rgba(66, 165, 245, 0.12));
  border-color: rgba(100, 181, 246, 0.25);
  box-shadow: 0 4px 16px rgba(66, 165, 245, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.horoscope-card.tomorrow {
  background: linear-gradient(145deg, rgba(255, 183, 77, 0.2), rgba(255, 138, 101, 0.15));
  border-color: rgba(255, 183, 77, 0.25);
  box-shadow: 0 4px 16px rgba(255, 138, 101, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.horoscope-card:active {
  transform: scale(0.95);
}

.horoscope-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.horoscope-date {
  margin-bottom: 6px;
}

.horoscope-date .date-day {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.5px;
}

.horoscope-date .date-month {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  display: block;
  margin-top: 2px;
}

.horoscope-date .date-range {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.3px;
}

.horoscope-date .date-range-months {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  display: block;
  margin-top: 2px;
}

/* Modal date badge (replaces emoji icon) */
.modal-date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 152, 0, 0.04));
  border: 1px solid rgba(255, 152, 0, 0.15);
  margin-bottom: 12px;
}

.modal-date-badge .badge-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent);
  margin-bottom: 2px;
}

.modal-date-badge .badge-date {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.horoscope-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.horoscope-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Refresh Reading Button - styles moved to bottom of file */

/* ========== Chat Tab ========== */
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fafafa 0%, #f5f0ff 50%, #fff8e1 100%);
  z-index: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  z-index: 1;
  position: relative;
}

.chat-message {
  margin-bottom: 16px;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 1px 4px rgba(91, 155, 213, 0.18);
}

.message-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}

.message-content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.message-content strong, .message-content b {
  font-weight: 600;
  color: var(--text);
}
.message-content p {
  margin: 0 0 8px;
}
.message-content p:last-child {
  margin-bottom: 0;
}

/* Analysis Mode message — server returned a structured {read, analysis}
   payload, rendered as two visually distinct beats inside Aura's bubble:
     • THE READ at top in standard prose
     • A small label "✦ ANALYSIS" with sparkle accent
     • THE ANALYSIS in a tinted card with a left rule, signalling premium */
.why-mode-message .why-read {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 16px;
  white-space: pre-wrap;
}
.why-mode-message .why-analysis-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
  padding: 3px 10px 3px 8px;
  background: var(--accent-soft);
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.22);
}
.why-mode-message .why-analysis-label::before {
  content: '✦';
  font-size: 12px;
  color: var(--accent);
}
.why-mode-message .why-analysis {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  background: linear-gradient(135deg, var(--accent-soft), rgba(245, 158, 11, 0.04));
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

/* ========== Chat Mode Bar (top, sticky Analysis toggle) ==========
   Persistent header with the Analysis Mode toggle. Visible only when
   the user is owner-unlocked; mounted at the top of the chat tab. */
.chat-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;                          /* slimmer than 10px */
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 252, 247, 0.82));
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 5;
  /* Force the inner content (Aura name + sub) to stay on one line. */
  white-space: nowrap;
}
.chat-mode-bar-info {
  display: flex;
  align-items: baseline;          /* baseline so name + caption sit on the same line */
  gap: 8px;
  min-width: 0;
}
.chat-mode-bar-icon {
  font-size: 16px;
  line-height: 1;
  align-self: center;             /* keep the orb centered against the larger serif name */
}
.chat-mode-bar-text {
  display: flex;
  flex-direction: row;            /* WAS: column — now inline so caption sits next to "Aura" */
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.chat-mode-bar-text strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-2xl);        /* 18px italic-serif Aura — matches match-session header */
  font-weight: 600;
  color: var(--text-cocoa);
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.chat-mode-bar-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-md);         /* 13px — readable, not microscopic */
  color: var(--text-taupe);
  letter-spacing: 0.1px;
  font-weight: 500;
  white-space: nowrap;
  text-transform: none;           /* drop the ALL-CAPS shout */
}
.chat-mode-bar-sub::before {
  content: '· ';
  color: var(--text-taupe);
  opacity: 0.5;
}
.chat-mode-bar.analysis-on .chat-mode-bar-sub {
  color: var(--accent-strong);
  font-weight: 600;
}

/* Pill toggle — checkbox-y switch */
.chat-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.chat-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}
.chat-mode-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.chat-mode-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.chat-mode-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.chat-mode-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: rgba(245, 158, 11, 0.4);
}
.chat-mode-toggle[aria-pressed="true"] .chat-mode-toggle-track {
  background: var(--accent);
}
.chat-mode-toggle[aria-pressed="true"] .chat-mode-toggle-thumb {
  transform: translateX(14px);
}
.chat-mode-toggle[aria-pressed="true"] .chat-mode-toggle-label {
  color: var(--accent-strong);
}

/* When Analysis Mode is on, give the chat bar a subtle tinted background
   so the user has a permanent visual cue that they're in premium mode. */
.chat-mode-bar.analysis-on {
  background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.85));
  border-bottom-color: rgba(245, 158, 11, 0.25);
}

/* (Aura-chat tile-strip removed — replaced by free-form input only.) */

/* ========== Streak Explainer Modal ==========
   Opens when the user taps the 🔥 streak badge in the header. */
.streak-modal {
  max-width: 420px;
  text-align: left;
  padding: 28px 24px 22px;
  position: relative;
}
.streak-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted, #9a8c7a);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 50%;
}
.streak-modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }

.streak-modal-flame {
  font-size: 44px;
  text-align: center;
  margin: 4px 0 10px;
  line-height: 1;
}
.streak-modal-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.streak-modal-current {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #7a6a55);
  margin-bottom: 18px;
}
.streak-modal-current strong {
  color: var(--accent-strong);
  font-size: 16px;
}

.streak-modal-section {
  margin-bottom: 16px;
}
.streak-modal-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 6px;
}
.streak-modal-p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.streak-modal-rewards {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.streak-modal-rewards li {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--accent-soft, #fdf6e8) 0%, rgba(255,255,255,0.6) 100%);
  border-left: 3px solid var(--accent, #f59e0b);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.streak-reward-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent, #f59e0b);
  color: white;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 1px;
}

.streak-modal-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(193, 97, 75, 0.08);
  border-left: 3px solid #c1614b;
  border-radius: 8px;
  margin-bottom: 18px;
}
.streak-modal-warn-icon {
  font-size: 20px;
  line-height: 1.2;
}
.streak-modal-warn-body strong {
  font-size: 13px;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.streak-modal-warn-sub {
  font-size: 11px;
  color: var(--text-muted, #7a6a55);
}

.streak-modal-cta {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent, #f59e0b) 0%, var(--accent-strong, #d97e0b) 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.streak-modal-cta:hover { transform: translateY(-1px); }
.streak-modal-cta:active { transform: translateY(0); }

/* The streak badge is a button now — give it the right cursor */
.header-streak-badge {
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.header-streak-badge:hover { transform: translateY(-1px); }
.header-streak-badge:active { transform: translateY(0); }

.message-user {
  text-align: right;
}

.message-user .message-bubble {
  display: inline-block;
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-strong));
  color: white;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 80%;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(91, 155, 213, 0.20);
}

/* ========== Chat Suggestions ========== */
.chat-suggestions {
  padding: 0 16px;
  z-index: 1;
  position: relative;
}

.suggestion-btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.suggestion-btn:active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.suggestions-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-left: 4px;
}

/* ========== Chat suggestions (collapsed pill → vertical list) ==========
   Default state: a single small "💡 Suggested questions ⌄" pill sits
   under each Aura reply. Tap to expand a vertical list of topic-anchored
   follow-up questions. Keeps the chat thread clean by default; depth is
   opt-in. The expansion is driven by the .expanded class on the
   wrapper; the list uses a max-height transition for a smooth reveal. */
.chat-suggestion-wrap {
  margin: 6px 0 4px;
  padding: 0 4px;
}

.chat-suggestion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 999px;
  color: var(--text-muted, #777);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-family: inherit;
  user-select: none;
}
/* Aura chat — cool dawn-sky blue palette (personal identity). */
.chat-suggestion-toggle:hover {
  border-color: var(--chat-accent, #5b9bd5);
  color: var(--text, #2a2a2a);
}
.chat-suggestion-toggle:active {
  background: var(--chat-accent-soft, rgba(91,155,213,0.10));
}
.chat-suggestion-toggle-icon {
  font-size: 13px;
  line-height: 1;
}
.chat-suggestion-toggle-label {
  font-weight: 500;
}
.chat-suggestion-toggle-chev {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.18s ease;
  display: inline-block;
}
.chat-suggestion-wrap.expanded .chat-suggestion-toggle-chev {
  transform: rotate(180deg);
}
.chat-suggestion-wrap.expanded .chat-suggestion-toggle {
  border-color: var(--chat-accent, #5b9bd5);
  color: var(--text, #2a2a2a);
}

/* Collapsible vertical list — closed by default via max-height: 0. */
.chat-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease;
  margin-top: 0;
}
.chat-suggestion-wrap.expanded .chat-suggestion-list {
  max-height: 480px;      /* enough for 6 items + padding */
  opacity: 1;
  margin-top: 10px;
}

.chat-suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 12px;
  color: var(--text, #2a2a2a);
  font-size: 13.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  font-family: inherit;
}
.chat-suggestion-item:hover {
  border-color: var(--chat-accent, #5b9bd5);
  background: var(--chat-accent-soft, rgba(91,155,213,0.08));
}
.chat-suggestion-item:active {
  transform: scale(0.99);
  background: var(--chat-accent-soft, rgba(91,155,213,0.12));
  border-color: var(--chat-accent, #5b9bd5);
}

/* ========== Match chat suggestions — amber palette (compatibility identity) ==========
   Same collapsed-pill → vertical expansion pattern as Aura chat, but
   warmed up to keep Match Chat visually distinct. Uses --accent (amber)
   throughout instead of --chat-accent (blue). */
.match-suggestion-wrap {
  margin: 8px 4px 4px;
  padding: 0 4px;
}
.match-suggestion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--card-border, rgba(180, 140, 90, 0.16));
  border-radius: 999px;
  color: var(--text-taupe, #8a7556);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-family: inherit;
  user-select: none;
}
.match-suggestion-toggle:hover {
  border-color: var(--accent, #f59e0b);
  color: var(--text-cocoa, #4a3d2e);
}
.match-suggestion-toggle:active {
  background: var(--accent-soft, rgba(245,158,11,0.08));
}
.match-suggestion-toggle-icon { font-size: 13px; line-height: 1; }
.match-suggestion-toggle-label { font-weight: 500; }
.match-suggestion-toggle-chev {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.18s ease;
  display: inline-block;
}
.match-suggestion-wrap.expanded .match-suggestion-toggle-chev { transform: rotate(180deg); }
.match-suggestion-wrap.expanded .match-suggestion-toggle {
  border-color: var(--accent, #f59e0b);
  color: var(--text-cocoa, #4a3d2e);
}

.match-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease;
  margin-top: 0;
}
.match-suggestion-wrap.expanded .match-suggestion-list {
  max-height: 480px;
  opacity: 1;
  margin-top: 10px;
}

.match-suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: var(--bg-white, #fff);
  border: 1.5px solid var(--card-border, rgba(180, 140, 90, 0.16));
  border-radius: 12px;
  color: var(--text-cocoa, #4a3d2e);
  font-size: 13.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  font-family: inherit;
}
.match-suggestion-item:hover {
  border-color: var(--accent, #f59e0b);
  background: var(--accent-soft, rgba(245,158,11,0.08));
}
.match-suggestion-item:active {
  transform: scale(0.99);
  background: var(--accent-soft, rgba(245,158,11,0.12));
  border-color: var(--accent, #f59e0b);
}

/* ========== Starter Question Pills ========== */
.starter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  z-index: 1;
  position: relative;
}

.starter-pill {
  padding: 10px 18px;
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.starter-pill:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(0.96);
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

/* Thinking animation */
.thinking-text {
  color: var(--accent);
  font-style: italic;
}

.thinking-text::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* ========== Question Counter ========== */
.question-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 16px;
  padding: 8px 14px;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  z-index: 1;
  position: relative;
}

.counter-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.counter-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#questionsLeft {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.buy-btn {
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Low/zero balance warnings */
.question-counter.low-balance {
  border-color: var(--accent);
}
.question-counter.low-balance .counter-icon path {
  fill: var(--accent);
  stroke: var(--accent);
}
.question-counter.zero-balance {
  border-color: #ef4444;
}
.question-counter.zero-balance .counter-icon path {
  fill: #ef4444;
  stroke: #ef4444;
}

/* ========== "Go deeper" hint on short responses ========== */
.deeper-hint {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  line-height: 1.4;
}
.deeper-hint-clickable {
  cursor: pointer;
}
.deeper-hint-clickable:active {
  opacity: 0.7;
}
.deeper-hint strong {
  color: var(--accent);
}

/* ========== Chat Input ========== */
.chat-input-area {
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  position: relative;
}

.chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 20px;
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chat-encrypted-badge {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.3px;
}

#chatInput {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  min-height: 22px;
  overflow-y: hidden;
  transition: all 0.2s ease;
}

#chatInput::placeholder {
  color: var(--text-muted);
}

/* Expanded state — textarea grows modestly */
.chat-input-area.expanded #chatInput {
  min-height: 80px;
  max-height: 120px;
  overflow-y: auto;
  padding-top: 4px;
}

.chat-input-area.expanded .chat-input-wrap {
  align-items: flex-end;
  border-radius: 18px;
}

.mic-btn,
.send-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mic-btn {
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-strong));
  color: white;
  box-shadow: 0 2px 8px rgba(91, 155, 213, 0.25);
}

.send-btn {
  background: var(--bg-light);
  color: var(--text-muted);
}

.send-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-strong));
  color: white;
  box-shadow: 0 2px 8px rgba(91, 155, 213, 0.25);
}

/* Why Mode toggle — sits next to the send button. Pill-shaped so it
   reads as a "mode" rather than a one-shot action. Animated state
   change when active so the user knows their next message will use
   the analysis surface. */
.why-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  height: 36px;
}
.why-mode-btn:hover { transform: translateY(-1px); }
.why-mode-btn:active { transform: translateY(0); }
.why-mode-btn .why-mode-icon { font-size: 13px; line-height: 1; }
.why-mode-btn .why-mode-label { letter-spacing: 0.02em; }
.why-mode-btn.active {
  background: linear-gradient(135deg, var(--accent-soft), rgba(245, 158, 11, 0.12));
  color: var(--accent-strong);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

/* Locked / "Coming soon" state — feature is gated to OWNER_USER_IDS
   during beta. Pill stays visible so users know it exists, but is
   visibly disabled with a label change to "Coming soon". A short
   pulse animation fires when a non-owner taps it (locked-pulse). */
.why-mode-btn.locked {
  background: var(--bg-light);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.7;
}
.why-mode-btn.locked:hover { transform: none; }
.why-mode-btn.locked .why-mode-icon { filter: grayscale(0.6); opacity: 0.7; }
.why-mode-btn.locked .why-mode-label { font-size: 11px; letter-spacing: 0.04em; }
@keyframes whyModeLockedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  40%  { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.why-mode-btn.locked.locked-pulse {
  animation: whyModeLockedPulse 1.4s ease-out;
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--accent-strong);
}

/* Inline mode-hint pill that appears briefly above the chat composer
   when Why Mode is toggled (or when a non-owner taps the locked pill).
   Phone-screen-friendly: small, low-stakes, auto-dismisses. */
.chat-mode-hint {
  display: block;
  width: fit-content;
  max-width: 92%;
  margin: 0 auto 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.chat-mode-hint.show { opacity: 1; transform: translateY(0); }
.chat-mode-hint-on {
  background: linear-gradient(135deg, var(--accent-soft), rgba(245, 158, 11, 0.14));
  color: var(--accent-strong);
  border-color: rgba(245, 158, 11, 0.4);
}
.chat-mode-hint-locked {
  background: var(--bg-light);
  color: var(--text-muted);
}

/* Mic button listening state */
.mic-btn.listening {
  background: linear-gradient(135deg, #f44336, #ff5252);
  animation: pulse-mic 1s ease-in-out infinite;
}

@keyframes pulse-mic {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
}

/* Like button on messages */
.message-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px 4px;
}
.like-btn {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  transition: all 0.2s ease;
}
.like-btn:hover {
  background: rgba(255, 152, 0, 0.08);
  color: var(--accent);
  border-color: var(--accent);
}
.like-btn.liked {
  background: rgba(255, 152, 0, 0.12);
  color: var(--accent);
  border-color: var(--accent);
  animation: like-pop 0.3s ease;
}
@keyframes like-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Speaker button on messages */
.speak-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.speak-btn:hover {
  background: rgba(255, 152, 0, 0.2);
  color: var(--accent);
}

.speak-btn:active {
  transform: scale(0.9);
}

.speak-btn.speaking {
  background: rgba(255, 152, 0, 0.3);
  color: var(--accent);
  animation: pulse-speak 1.5s ease-in-out infinite;
}

@keyframes pulse-speak {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Floating link removed — Insights accessible via tab bar */

/* ========== Profile Tab ========== */
.profile-container {
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  /* Flex column lets us reorder children via `order` without touching
     HTML — keeps existing element IDs / handlers intact. The order
     values group sections into meaningful chunks: who you are → your
     chart → premium reports → credits & community → account actions. */
  display: flex;
  flex-direction: column;
}

/* Group labels — italic-serif section dividers that match the
   match-session-title / chat-mode-bar patterns elsewhere in the app.
   Was uppercase 11px (different idiom from every other tab). Now
   the same brand-aligned italic-serif used across Insights / Match /
   Chat surfaces — visual consistency. */
.profile-group-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-2xl);                /* 18px */
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-cocoa);
  margin: 28px 6px 12px;
  display: block;
  text-transform: none;                   /* drop the all-caps shout */
}
.profile-group-label[data-group="you"]      { order: 1; margin-top: 8px; }
.profile-group-label[data-group="chart"]    { order: 4; }
.profile-group-label[data-group="premium"]  { order: 7; }
.profile-group-label[data-group="account"]  { order: 9; }

/* Profile header (avatar / name / streak) stays at the very top */
.profile-header { order: 0; }

/* WHO YOU ARE — birth details + life status (the inputs) */
#paneProfile .profile-section:has(#birthDetailsToggle)   { order: 2; }
#paneProfile .profile-section:has(#lifeStatusToggle)     { order: 3; }

/* YOUR CHART — birth star + astrological data (the readings) */
#paneProfile .birth-star-card  { order: 5; }
#paneProfile #astroDataCard    { order: 6; }

/* PREMIUM — reports & tools */
#paneProfile .profile-section:has(#reportsToggle) { order: 8; }

/* CREDITS & COMMUNITY — credits, referral, testimonial */
#paneProfile .payment-card                                   { order: 10; }
#paneProfile .referral-section                               { order: 11; }
#paneProfile .profile-section:has(#testimonialToggle)        { order: 12; }

/* Account actions + footer go last */
#paneProfile .profile-actions { order: 20; margin-top: 18px; }
#paneProfile .app-footer      { order: 21; }

.profile-header {
  text-align: center;
  margin-bottom: 24px;
}

.profile-avatar-wrap {
  position: relative;
  width: 88px;
  margin: 0 auto 12px;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(255, 152, 0, 0.3);
  overflow: hidden;
}
.avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: 2px solid white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 0;
}

.profile-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.profile-email {
  font-size: 14px;
  color: var(--text-muted);
}

/* Profile section card — was using legacy 16px radius, generic
   var(--border), and a cool-grey shadow. Updated to use the canonical
   card tokens shared with insight-card, match-form, today-radar,
   week-grid-card, etc. — same warm-cream-aware border + warm-undertone
   shadow on every card surface across the app. */
.profile-section {
  background: var(--bg-white);
  border-radius: var(--card-radius);     /* 18px — was 16px */
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--card-border);  /* warm cream-aware */
  box-shadow: var(--card-shadow);        /* warm-undertone shadow */
}

/* Eyebrow inside a card — same family as other tabs' card eyebrows:
   small caps, tracked, deep-honey accent. Used by ":Birth details"
   "Life status", "Account actions" etc. */
.section-title {
  font-family: var(--font-sans);
  font-size: var(--t-sm);                /* 11px */
  color: var(--text-honey-deep);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  font-weight: 700;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border);
}

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

.profile-label {
  color: var(--text-taupe);
  font-size: var(--t-md);                /* 13px */
  font-family: var(--font-sans);
}

.profile-value {
  font-weight: 600;
  font-size: var(--t-md);                /* 13px */
  color: var(--text-cocoa);
  font-family: var(--font-sans);
}

/* Toggle row alignment */
.profile-row.toggle-row {
  align-items: center;
}

.profile-row-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0 8px;
  margin-top: -8px;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-light);
  border-radius: 28px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
}

.profile-btn {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  box-sizing: border-box;
}

.profile-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  box-shadow: 0 2px 10px rgba(255, 152, 0, 0.25);
}

.profile-btn.primary:active {
  box-shadow: 0 1px 4px rgba(255, 152, 0, 0.2);
  transform: scale(0.98);
}

.profile-btn.logout {
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}

.profile-btn.logout:active {
  background: rgba(0, 0, 0, 0.03);
}

.profile-btn.danger {
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: none;
  color: rgba(244, 67, 54, 0.7);
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}

.profile-btn.danger:active {
  color: var(--danger);
}

/* ========== Payment Section ========== */
.payment-card {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  color: white;
  box-shadow: 0 4px 20px rgba(255, 152, 0, 0.3);
}

.payment-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.payment-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 16px;
}

.payment-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin-bottom: 16px;
}

.balance-label {
  font-size: 13px;
  opacity: 0.9;
}

.balance-value {
  font-size: 20px;
  font-weight: 700;
}

/* Credit cost reference table */
.credit-costs {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 14px;
}
.credit-costs-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 6px;
}
.credit-cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  opacity: 0.9;
}

/* Payment badge (Popular, Best Value) */
.payment-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
}
.payment-badge.best {
  background: rgba(255, 255, 255, 0.45);
}
.payment-label {
  margin-top: 2px;
}

.payment-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.payment-option {
  position: relative;
  padding: 14px 10px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid transparent;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.payment-option.popular {
  background: rgba(255, 152, 0, 0.15);
  border-color: rgba(255, 152, 0, 0.4);
}

.payment-option.best {
  background: rgba(255, 152, 0, 0.15);
  border-color: rgba(255, 152, 0, 0.4);
}

.payment-option:active,
.payment-option.selected {
  background: rgba(255, 255, 255, 0.35);
  border-color: white;
  transform: scale(0.97);
}

.payment-option.popular.selected {
  border-color: var(--gold);
}

.payment-option.best.selected {
  border-color: var(--accent-light);
}

.payment-badge {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 6px;
  border-radius: 6px;
  margin-bottom: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.payment-qty {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.payment-label {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 1px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.payment-price {
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}

.payment-per {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.payment-option.coming-soon {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.payment-coming-soon {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
  opacity: 0.7;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  display: inline-block;
}

.buy-questions-btn {
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  background: white;
  border: none;
  border-radius: 12px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.credit-referral-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 152, 0, 0.06);
  border: 1px solid rgba(255, 152, 0, 0.15);
  border-radius: 12px;
}
.credit-referral-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}
.credit-referral-row {
  display: flex;
  gap: 8px;
}
.credit-referral-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: white;
  color: var(--text);
}
.credit-referral-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.credit-referral-status {
  font-size: 11px;
  margin-top: 6px;
  min-height: 14px;
}
.credit-referral-status.success { color: var(--success); }
.credit-referral-status.error { color: var(--error); }

/* ========== Modal ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

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

.modal-content {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.modal-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Inline Section Edit */
.section-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-edit-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.section-edit-btn:active {
  background: var(--accent-soft);
}
.inline-form-group {
  margin-bottom: 12px;
  position: relative;
}
.inline-form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.inline-form-group input[type="date"],
.inline-form-group input[type="time"],
.inline-form-group input[type="text"],
.inline-form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-sans);
}
.inline-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  font-style: italic;
}
.inline-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.inline-save-btn {
  flex: 1;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
}
.inline-cancel-btn {
  padding: 10px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Aura Preferences Sliders */
.edit-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}
.edit-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.pref-slider-group {
  margin-bottom: 16px;
}
.pref-slider-group:last-child {
  margin-bottom: 4px;
}
.pref-slider-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  display: block;
}
.pref-slider-wrap {
  padding: 0 2px;
}
.pref-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 152, 0, 0.15);
  border-radius: 2px;
  outline: none;
}
.pref-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}
.pref-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.pref-slider-labels-3 {
  justify-content: space-between;
  padding: 0 4px;
}
.pref-slider-labels span {
  text-align: center;
}
.pref-slider-labels small {
  color: var(--accent);
  font-weight: 600;
  font-size: 9px;
}
.pref-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* Preferences Nudge Banner */
.prefs-nudge {
  position: fixed;
  bottom: 80px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.prefs-nudge.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.prefs-nudge-content {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.prefs-nudge-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.prefs-nudge-text {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.prefs-nudge-actions {
  display: flex;
  gap: 8px;
}
.prefs-nudge-btn {
  flex: 1;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.prefs-nudge-dismiss {
  padding: 10px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.modal-btn {
  flex: 1;
  padding: 13px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

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

.modal-btn.cancel {
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.modal-btn.confirm {
  background: var(--danger);
  color: white;
}

.modal-btn.save {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  box-shadow: 0 2px 10px rgba(255, 152, 0, 0.25);
}

/* Edit Profile Modal */
.edit-modal {
  max-width: 380px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
  padding: 24px 20px;
  border-radius: 20px;
}

.edit-modal .modal-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--text);
}

.edit-form .form-group {
  margin-bottom: 14px;
}

.edit-form .form-group label {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 5px;
  font-weight: 500;
  padding-left: 2px;
}

.edit-form .form-group input,
.edit-form .form-group select {
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.edit-form .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff9800' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: var(--bg-light);
  padding-right: 36px;
}

.edit-form .form-group input:focus,
.edit-form .form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.edit-form .city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.edit-form .city-dropdown.show {
  display: block;
}

.edit-form .city-dropdown .item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.edit-form .city-dropdown .item:last-child {
  border-bottom: none;
}

.edit-form .city-dropdown .item:active {
  background: var(--accent-soft);
}

/* ========== Chat Status Messages ========== */
.chat-status {
  text-align: center;
  padding: 40px 20px;
}

.chat-status-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: float 3s ease-in-out infinite;
}

.chat-status-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
}

.chat-status-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-light);
  border-radius: 4px;
}

/* ========== Suggestions Header & Toggle ========== */
/* Suggestion toggle link */
.suggestion-toggle-link {
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  padding: 6px 0;
  opacity: 0.8;
}
.suggestion-toggle-link:active { opacity: 1; }

/* Pill-style suggestion buttons */
.suggestion-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  align-items: center;
}
.suggestion-pill {
  padding: 7px 14px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-pill:active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(0.96);
}
.suggestion-refresh-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.suggestion-refresh-btn:active {
  background: var(--accent-soft);
  color: var(--accent);
  transform: rotate(180deg);
}

/* ========== Vertical Chart Layout ========== */
.chart-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-stack .chart-box {
  width: 100%;
}

/* ========== Chart Link List (replaces the old 4-chart grid) ========== */
.chart-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-link-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background-color: rgba(255, 152, 0, 0.04);
  border: 1px solid rgba(255, 152, 0, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.chart-link-item:hover {
  background-color: rgba(255, 152, 0, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.10);
}
.chart-link-item:active {
  transform: translateY(0);
}
.chart-link-item:focus-visible {
  outline: 2px solid var(--accent, #FF9800);
  outline-offset: 2px;
}

.chart-link-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  color: var(--accent, #FF9800);
  flex-shrink: 0;
}

.chart-link-body {
  flex: 1;
  min-width: 0;
}

.chart-link-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  line-height: 1.3;
}

.chart-link-sub {
  font-size: 12.5px;
  color: var(--text-muted, #6b6b6b);
  margin-top: 2px;
  line-height: 1.3;
}

.chart-link-chev {
  font-size: 22px;
  color: var(--text-muted, #b0b0b0);
  font-weight: 300;
  flex-shrink: 0;
}

/* ========== Chart Modal ========== */
.chart-modal-card {
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
}

.chart-modal-header {
  text-align: center;
  margin-bottom: 16px;
  padding: 0 32px;
}

.chart-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #1a1a1a);
  margin-bottom: 2px;
}

.chart-modal-sub {
  font-size: 13px;
  color: var(--text-muted, #6b6b6b);
  font-style: italic;
}

.chart-modal-body {
  flex: 1;
  margin-bottom: 16px;
  min-height: 280px;
}

.chart-modal-body .chart-container {
  width: 100%;
}

.chart-modal-ask {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chart-modal-ask:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.30);
}
.chart-modal-ask:active {
  transform: translateY(0);
}

.chart-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.chart-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.12);
  background-color: rgba(255, 152, 0, 0.04);
}
.chart-clickable:active {
  transform: translateY(0);
}
.chart-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========== Voice Cloning ========== */
.voice-section {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.05), rgba(179, 136, 255, 0.1));
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.voice-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-white);
  border-radius: 12px;
  margin-bottom: 16px;
}

.voice-status-icon {
  font-size: 24px;
}

.voice-status-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.voice-status-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.voice-status.cloned .voice-status-icon {
  color: var(--success);
}

.voice-clone-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
  color: white !important;
  border: none !important;
}

.voice-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}
.voice-expiry-warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: #856404;
  text-align: center;
  line-height: 1.4;
}

/* Voice Modal */
.voice-modal {
  max-width: 360px;
  text-align: center;
}

.voice-modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.voice-modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text);
}

.voice-step {
  animation: fadeIn 0.3s ease;
}

.voice-step.hidden {
  display: none;
}

.voice-instructions p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.voice-sample-text {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(179, 136, 255, 0.12));
  border-radius: 12px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  margin-bottom: 16px;
  text-align: left;
}

.voice-sample-text.recording-text {
  font-size: 14px;
  opacity: 0.8;
}

.voice-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.voice-tips .tip {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-record-btn:active {
  transform: scale(0.98);
}

.voice-record-btn.stop-btn {
  background: linear-gradient(135deg, #f44336, #ff5252);
}

.record-icon {
  font-size: 20px;
}

/* Recording Indicator */
.recording-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.recording-pulse {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f44336;
  animation: recordPulse 1s ease-in-out infinite;
  margin-bottom: 16px;
}

@keyframes recordPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(244, 67, 54, 0); }
}

.recording-time {
  font-size: 32px;
  font-weight: 700;
  color: #f44336;
  font-variant-numeric: tabular-nums;
}

/* Voice Preview */
/* Microphone Selector */
.mic-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-light);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.mic-selector-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
}

.mic-selector-label .mic-icon {
  flex-shrink: 0;
}

#selectedMicName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.mic-change-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.mic-change-btn:active {
  transform: scale(0.95);
}

.mic-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mic-dropdown.hidden {
  display: none;
}

.mic-dropdown-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}

.mic-list {
  max-height: 200px;
  overflow-y: auto;
}

.mic-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.mic-option:last-child {
  border-bottom: none;
}

.mic-option:active {
  background: var(--bg-light);
}

.mic-option.selected {
  background: rgba(108, 92, 231, 0.1);
}

.mic-option-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.mic-option-info {
  flex: 1;
  overflow: hidden;
}

.mic-option-name {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mic-option-type {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.mic-option-check {
  color: var(--accent);
  font-size: 16px;
  flex-shrink: 0;
}

.mic-bluetooth {
  color: #3498db;
}

.voice-preview {
  margin-bottom: 20px;
}

.preview-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.voice-preview audio {
  width: 100%;
  height: 44px;
}

.voice-actions {
  display: flex;
  gap: 12px;
}

.voice-action-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-action-btn.secondary {
  background: var(--bg-light);
  color: var(--text-muted);
}

.voice-action-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
}

.voice-action-btn:active {
  transform: scale(0.98);
}

/* Voice Processing */
.voice-processing {
  padding: 40px 0;
}

.voice-processing .loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

.processing-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.processing-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Voice Success */
.voice-success {
  padding: 30px 0;
}

.success-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.success-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 8px;
}

.success-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ========== Toast Notification ========== */
.toast-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--text-light);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  text-align: center;
  max-width: 90vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========== Refresh Suggestion Banner ========== */
.refresh-suggestion-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 152, 0, 0.1));
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: 16px;
  margin-bottom: 14px;
  animation: bannerSlideIn 0.4s ease-out;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.08);
}

@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.refresh-suggestion-banner .banner-text {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.refresh-suggestion-banner .banner-text strong {
  color: var(--accent);
  font-weight: 700;
}

.refresh-suggestion-banner .banner-refresh-btn {
  padding: 9px 16px;
  background: var(--bg-white);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.refresh-suggestion-banner .banner-refresh-btn:active {
  transform: scale(0.95);
}

.refresh-suggestion-banner .banner-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  opacity: 0.6;
}

/* ========== Refresh Reading Button (own row) ========== */
.refresh-reading-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 18px 0 10px;
  padding-left: 2px;
}
.section-tap-hint {
  font-size: 10px;
  color: var(--accent-light);
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

.top-actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.ask-aura-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-white);
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ask-aura-btn:active {
  background: var(--accent);
  color: white;
  transform: scale(0.95);
}
.ask-aura-btn.listening {
  background: var(--accent);
  color: white;
  animation: auraPulse 1.5s ease-in-out infinite;
}
@keyframes auraPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.3); }
  50% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
}
.ask-aura-mic { font-size: 15px; }

.greeting-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.last-refresh-date {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

.refresh-reading-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-reading-btn:active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.refresh-reading-btn .refresh-icon {
  font-size: 14px;
}

/* ========== Google Auth ========== */
.auth-btn.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #3c4043;
  border: 1.5px solid #dadce0;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-btn.google:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.google-icon {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--text-muted);
  font-size: 13px;
}

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

/* ========== Auth Tabs (Email / Phone) ========== */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.auth-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

/* ========== Phone OTP Input ========== */
.phone-input-wrapper {
  display: flex;
  gap: 8px;
}

.phone-input-wrapper > select.country-code-select {
  width: 100px !important;
  min-width: 100px;
  padding: 12px 4px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  background-image: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  -webkit-appearance: menulist;
  appearance: menulist;
}

.phone-input-wrapper > input[type="tel"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 15px;
}

.otp-sent-info {
  text-align: center;
  color: var(--success);
  font-size: 13px;
  margin-bottom: 12px;
  font-weight: 500;
}

#otpCode {
  text-align: center;
  font-size: 22px;
  letter-spacing: 8px;
  font-weight: 700;
  padding: 14px;
}

.otp-resend {
  text-align: center;
  margin-top: 8px;
}

.otp-timer {
  color: var(--text-muted);
  font-size: 13px;
}

.otp-resend-btn {
  font-size: 14px !important;
  color: var(--accent) !important;
  font-weight: 600;
}

/* Google welcome text in profile completion (kept for backward compat) */
.google-welcome, .oauth-welcome {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Google badge on profile page */
.google-auth-status {
  margin-top: 6px;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #f0f4ff;
  border: 1px solid #d2e3fc;
  border-radius: 16px;
  font-size: 12px;
  color: #1a73e8;
  font-weight: 500;
}

.google-icon-sm {
  flex-shrink: 0;
}

.link-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1.5px solid #dadce0;
  border-radius: 20px;
  font-size: 13px;
  color: #3c4043;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.link-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ========== Apple Auth ========== */
.auth-btn.apple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #000000;
  color: #ffffff;
  border: 1.5px solid #000000;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.auth-btn.apple:hover {
  background: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.apple-icon {
  flex-shrink: 0;
}

/* Apple badge on profile page */
.apple-auth-status {
  margin-top: 6px;
}

.apple-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 16px;
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
}

.apple-icon-sm {
  flex-shrink: 0;
}

.auth-btn.phone-signup {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1.5px solid var(--accent-light);
  font-weight: 600;
}

.auth-btn.phone-signup:hover {
  background: var(--accent);
  color: #fff;
}

.phone-auth-status {
  margin-top: 6px;
}

.phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-light);
  border-radius: 16px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

/* OAuth welcome text (shared by Google + Apple) */
.oauth-welcome {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 8px;
}

/* App disclaimer link */
.app-disclaimer-link {
  text-align: center;
  padding: 16px 0 8px;
}
.app-disclaimer-link a {
  font-size: 11px;
  color: #aaa;
  text-decoration: none;
}
.legal-links {
  text-align: center;
  padding: 16px 0 8px;
}
.legal-links a {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}
.legal-links a:hover { text-decoration: underline; }
.legal-dot {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 4px;
  opacity: 0.5;
}
.auth-daily-quote {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
  font-style: italic;
  padding: 0 12px;
  opacity: 0.8;
}
.app-version {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 4px 0 12px;
}

/* Unified app footer (Insights + Profile) */
.app-footer {
  text-align: center;
  padding: 24px 16px 28px;
  margin-top: 12px;
}
.footer-tagline {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 12px;
  opacity: 0.85;
  line-height: 1.5;
}
.footer-links {
  margin-bottom: 10px;
}
.footer-links a {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-dot {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 6px;
  opacity: 0.5;
}
.footer-support {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.footer-support a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.footer-support a:hover {
  text-decoration: underline;
}
.footer-meta {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
}
.optional-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.modal-legal .modal-text {
  max-height: 60vh;
  overflow-y: auto;
}

/* ========== Match Tab ========== */
.match-container {
  padding: 16px;
  padding-bottom: 120px;
  overflow-y: auto;
  height: 100%;
}

.match-header {
  text-align: center;
  padding: 20px 0 16px;
}
.match-header-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.match-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--text-cocoa);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.match-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--text-taupe);
  letter-spacing: 0.1px;
}

.match-form {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 20px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
}

.match-dob-row {
  display: flex;
  gap: 8px;
}
.match-dob-select {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  font-size: var(--t-lg);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}

.optional-badge {
  font-size: var(--t-sm);
  color: var(--text-muted);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
}

.match-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #e91e63, #ff5252);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(233,30,99,0.3);
}
.match-submit-btn:active {
  transform: scale(0.97);
}
.match-cost-badge {
  font-size: var(--t-sm);
  background: rgba(255,255,255,0.25);
  padding: 3px 8px;
  border-radius: 8px;
}

/* Compat-quota chip — sits below the Submit button on the Match form.
   Three variants: free-monthly (Plus, "2 of 2 free this month"),
   unlimited (Premium/Founder, "Premium · unlimited"), credit-paid
   (Free/Plus-overflow, "15 credits each"). Same .lock-chip-style pill
   so it visually slots into the rest of the app's tier-gating idiom. */
.match-quota-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--bg-cream-soft, #f9efe1);
  border: 1px solid var(--card-border);
  color: var(--text-cocoa);
}
.match-quota-chip-icon { font-size: 12px; line-height: 1; }
.match-quota-chip.tier-unlimited {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #fff 100%);
  border-color: rgba(245, 158, 11, 0.32);
  color: var(--accent-strong);
}
.match-quota-chip.tier-credits {
  background: var(--bg-white);
  border-color: var(--card-border);
  color: var(--text-taupe);
}
.match-quota-chip.tier-free-this-month {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
  color: #15803d;
}

/* Match Loading */
.match-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}
.match-loading-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(233,30,99,0.15);
  border-top-color: #e91e63;
  animation: matchSpin 1s linear infinite;
  margin-bottom: 20px;
  position: relative;
}
.match-loading-ring::after {
  content: '💕';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  animation: matchPulse 1.5s ease-in-out infinite;
}
@keyframes matchSpin {
  to { transform: rotate(360deg); }
}
@keyframes matchPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}
.match-loading-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Match Results */
.match-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.match-back-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.match-partner-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Gauge */
.match-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.partner-snapshot {
  background: rgba(255, 152, 0, 0.06);
  border: 1px solid rgba(255, 152, 0, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  width: 120px;
  flex-shrink: 0;
}

.partner-snapshot-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.partner-snapshot-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.partner-snapshot-detail {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

.match-gauge-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.match-gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gauge-bg {
  fill: none;
  stroke: rgba(233,30,99,0.1);
  stroke-width: 12;
}
.gauge-fill {
  fill: none;
  stroke: url(#gaugeGradient);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 534;
  stroke-dashoffset: 534;
  transition: stroke-dashoffset 1.5s ease-out;
}
.gauge-score {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff5252);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gauge-label {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.gauge-desc {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
  margin-top: -8px;
  margin-bottom: 20px;
  padding: 0 24px;
  line-height: 1.4;
}

.match-tap-hint {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 16px;
  opacity: 0.7;
}

/* Category Cards */
.match-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.match-cat-card {
  background: var(--bg-card);
  border-radius: var(--card-radius-sm);
  padding: 14px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.match-cat-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
.match-cat-label {
  font-size: var(--t-base);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.match-cat-score {
  font-size: var(--t-3xl);
  font-weight: 700;
  color: var(--text-cocoa);
}
.match-cat-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(233,30,99,0.1);
  margin-top: 8px;
  overflow: hidden;
}
.match-cat-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #e91e63, #ff5252);
  transition: width 1s ease-out;
  width: 0;
}
.match-cat-desc {
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  color: var(--text-taupe);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.2px;
}

/* Breakdown (collapsible) */
.match-breakdown {
  background: var(--bg-card);
  border-radius: var(--card-radius-sm);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-cocoa);
}
.breakdown-toggle-icon {
  font-size: 18px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.breakdown-content {
  padding: 0 16px 16px;
}
.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-label {
  font-size: 13px;
  color: var(--text);
  flex: 1;
}
.breakdown-score {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
  margin-right: 10px;
}
.breakdown-bar {
  width: 80px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 152, 0,0.1);
  overflow: hidden;
}
.breakdown-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.8s ease-out;
}

/* Narrative */
.match-narrative {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.match-narrative p {
  margin-bottom: 12px;
}
.match-narrative p:last-child {
  margin-bottom: 0;
}

/* Ask Aura CTA */
.match-ask-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(255, 152, 0,0.3);
}

/* Report CTA — secondary to Ask Aura. Cream-tinted, deep cocoa text,
   honey accent border. Loads the long-form Sonnet report in a new tab. */
.match-report-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-white);
  color: var(--text-cocoa);
  border: 1.5px solid var(--pillar-physical);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  margin-bottom: 24px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.match-report-btn:hover,
.match-report-btn:focus-visible {
  background: linear-gradient(135deg, #fdf8f0 0%, #f9efe1 100%);
  box-shadow: var(--card-shadow-md);
  transform: translateY(-1px);
  outline: none;
}
.match-report-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.match-report-btn small {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-taupe);
  font-size: var(--t-base);
  margin-left: 4px;
}

/* Saved-match card: report icon button next to delete */
.match-saved-report-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  margin-right: 4px;
  border-radius: 8px;
  transition: background 0.15s;
}
.match-saved-report-btn:hover { background: var(--accent-soft); }

/* ============================================================
 * ASHTAKOOT CREATIVE TILES — each of the 8 factors gets a unique
 * SVG primitive that visually encodes the score (1/2/3/.../8).
 * Replaces the flat numeric tiles with a memorable graph language:
 *   varna  → radiant orb (1 max)
 *   vashya → yin-yang spin (2 max)
 *   tara   → 3-bar stack (3 max)
 *   yoni   → 4-petal lotus (4 max)
 *   grahaMaitri → 5-step ladder (5 max)
 *   gana   → hexagon fill (6 max)
 *   bhakut → 7-bar wave (7 max)
 *   nadi   → 8-segment ring (8 max)
 * ============================================================ */
.ashtakoot-tile {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-sm);
  box-shadow: var(--card-shadow);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
}
.ashtakoot-tile:hover,
.ashtakoot-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-md);
  border-color: rgba(255, 152, 0, 0.32);
  outline: none;
}
.ashtakoot-tile-graphic {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ashtakoot-tile-graphic svg { width: 100%; height: 100%; }
.ashtakoot-tile-label {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-cocoa);
  letter-spacing: 0.2px;
}
.ashtakoot-tile-score {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--text-taupe);
  font-weight: 600;
}
.ashtakoot-tile-score b {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: var(--text-cocoa);
  font-size: var(--t-lg);
}

/* ============================================================
 * MATCH-CHAT SESSION — full-screen overlay for partner-scoped
 * chat. Mounts above the Match tab. Has its own header (partner
 * + quota counter), tile strip, transcript, input row, and a
 * quota-exhausted upgrade overlay.
 * ============================================================ */
/* In-tab compatibility chat. Positioned absolutely inside the
   .tab-pane (which is itself position:absolute, inset:0) so the
   chat fills exactly the visible tab content area on every device.
   On iPhone it fills the screen below the tab bar; on web it fills
   the app-shell column without overflowing or floating. No
   z-index — siblings inside .match-container are already hidden
   by the .match-session-active selector below.

   The amber gradient + serif "You & X" header stay — that's Match
   Chat's warm "compatibility" identity, distinct from Aura chat's
   cool blue "personal" palette. */
.match-session {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fdf8f0 0%, #f9efe1 100%);
  animation: matchSessionIn 0.22s cubic-bezier(0.22, 0.9, 0.4, 1);
}
.match-session.hidden { display: none; }
/* When the chat is active, hide the form / loading / results inside
   the .match-container wrapper, leaving matchSession visible. The
   original selector targeted direct children of #paneMatch — but
   paneMatch only has ONE direct child (.match-container) which
   contains matchSession itself, so the rule hid the entire tab.
   Correct level: children of .match-container. */
#paneMatch.match-session-active .match-container > :not(#matchSession) {
  display: none !important;
}
@keyframes matchSessionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.match-session-header {
  display: grid;
  /* back-arrow | title-block | analysis-toggle — the toggle now lives
     inline with the title (parity with Aura chat). Quota chip is no
     longer a dedicated cell; it inlines under the title. */
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  background: rgba(255, 252, 247, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
}
/* Inline quota — small italic chip after "Compatibility chat" subtitle.
   Stays empty when there's nothing meaningful to show (founder ∞). */
.match-session-sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.match-session-quota-inline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--text-honey-deep);
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
}
.match-session-quota-inline:empty { display: none; }
.match-session-quota-inline::before {
  content: '· ';
  color: var(--text-taupe);
  opacity: 0.5;
}
.match-session-back {
  width: 36px; height: 36px;
  border: none;
  background: var(--bg-white);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-cocoa);
  border: 1px solid var(--card-border);
}
.match-session-id {
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.match-session-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--text-cocoa);
  line-height: 1.2;
}
.match-session-sub {
  font-size: var(--t-sm);
  color: var(--text-taupe);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
}
.match-session-quota {
  text-align: right;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--text-honey-deep);
  font-weight: 600;
  white-space: nowrap;
}
.match-session-quota b {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--text-cocoa);
}

/* Sub-bar with Analysis Mode toggle — sits between header and tile strip.
   Mirrors the Aura-chat toggle pattern but tighter (single line). */
.match-session-modebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 8px;
  background: rgba(255, 252, 247, 0.4);
  border-bottom: 1px solid var(--card-border);
}
.match-session-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.match-session-mode-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.match-session-mode-track {
  position: relative;
  width: 28px;
  height: 16px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.match-session-mode-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.match-session-mode-label {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-cocoa);
  letter-spacing: 0.2px;
}
.match-session-mode-lock {
  font-size: 11px;
  margin-left: 2px;
  opacity: 0.6;
}
.match-session-mode-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: rgba(245, 158, 11, 0.4);
}
.match-session-mode-toggle[aria-pressed="true"] .match-session-mode-track {
  background: var(--accent);
}
.match-session-mode-toggle[aria-pressed="true"] .match-session-mode-thumb {
  transform: translateX(12px);
}
.match-session-mode-toggle[aria-pressed="true"] .match-session-mode-label {
  color: var(--accent-strong, #c8842b);
}
.match-session-mode-state {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--text-taupe);
  letter-spacing: 0.2px;
}
.match-session-modebar.is-on .match-session-mode-state {
  color: var(--accent-strong, #c8842b);
  font-weight: 600;
}

/* Tile strip — 8 horizontal pills, scrollable */
.match-session-tilestrip {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 252, 247, 0.4);
}
.match-session-tilestrip::-webkit-scrollbar { display: none; }
.match-session-tile-pill {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  min-width: 64px;
  transition: transform 0.15s, border-color 0.15s;
}
.match-session-tile-pill:hover,
.match-session-tile-pill:focus-visible {
  border-color: rgba(255, 152, 0, 0.4);
  transform: translateY(-1px);
  outline: none;
}
.match-session-tile-pill svg { width: 24px; height: 24px; }
.match-session-tile-pill-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-cocoa);
  text-transform: uppercase;
}

/* Transcript */
.match-session-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.match-session-msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: var(--t-lg);
  line-height: 1.55;
  white-space: pre-wrap;
}
.match-session-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border-bottom-right-radius: 4px;
  font-family: var(--font-sans);
}
.match-session-msg.aura {
  align-self: flex-start;
  background: var(--bg-white);
  color: var(--text-cocoa);
  border: 1px solid var(--card-border);
  border-bottom-left-radius: 4px;
  font-family: var(--font-sans);
}
/* Markdown rendered inside Aura's bubble — Sonnet emits **bold**, lists,
   paragraphs. Style them so they look like real prose, not raw text. */
.match-session-msg.aura p { margin: 0 0 10px; }
.match-session-msg.aura p:last-child { margin-bottom: 0; }
.match-session-msg.aura strong { font-weight: 700; color: var(--text-cocoa); }
.match-session-msg.aura em { font-style: italic; color: var(--text-cocoa); }
.match-session-msg.aura ol,
.match-session-msg.aura ul { margin: 8px 0; padding-left: 20px; }
.match-session-msg.aura li { margin-bottom: 4px; }
.match-session-msg.aura ol li::marker { color: var(--accent); font-weight: 700; }
.match-session-msg.aura ul li::marker { color: var(--accent); }

/* Markdown tables — Sonnet emits | col | col | layouts for dasha
   timelines, comparisons, and structured periods. Rendered as clean,
   compact, MOBILE-SAFE tables. The wrapper enables horizontal scroll
   when content exceeds viewport width so the layout never overflows.
   These selectors apply in BOTH main chat (.message-content) and
   match chat (.match-session-msg.aura) so the experience is uniform. */
.message-content .aura-md-table,
.match-session-msg.aura .aura-md-table {
  /* Make the table scroll horizontally instead of overflowing the bubble */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 10px 0;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  background: var(--bg-white);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  /* Internal padding kept tight — mobile screens are precious */
}
.message-content .aura-md-table thead tr,
.match-session-msg.aura .aura-md-table thead tr {
  background: rgba(245, 158, 11, 0.08);
}
.message-content .aura-md-table th,
.match-session-msg.aura .aura-md-table th {
  text-align: left;
  padding: 7px 9px;
  font-weight: 700;
  color: var(--text-honey-deep);
  font-size: var(--t-xs);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
  /* Header row never wraps — full table scrolls instead */
}
.message-content .aura-md-table td,
.match-session-msg.aura .aura-md-table td {
  padding: 7px 9px;
  vertical-align: top;
  color: var(--text-cocoa);
  border-bottom: 1px solid rgba(180, 140, 90, 0.08);
  /* Long cell content can wrap inside its column */
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 90px;
  max-width: 220px;
}
.message-content .aura-md-table tbody tr:last-child td,
.match-session-msg.aura .aura-md-table tbody tr:last-child td { border-bottom: none; }
.message-content .aura-md-table tbody tr:nth-child(even),
.match-session-msg.aura .aura-md-table tbody tr:nth-child(even) {
  background: rgba(255, 252, 247, 0.5);
}

/* Narrow-screen tweaks: pad tighter, hint that the table is scrollable */
@media (max-width: 420px) {
  .message-content .aura-md-table,
  .match-session-msg.aura .aura-md-table {
    font-size: 12.5px;
  }
  .message-content .aura-md-table th,
  .match-session-msg.aura .aura-md-table th {
    padding: 6px 7px;
    font-size: 10.5px;
  }
  .message-content .aura-md-table td,
  .match-session-msg.aura .aura-md-table td {
    padding: 6px 7px;
    min-width: 80px;
    max-width: 180px;
  }
}

/* Lists in main chat — same as match chat for consistency.
   Previously the main chat had no <ul>/<ol> styles, so when the new
   markdown renderer emits them they had no spacing or bullets. */
.message-content ul,
.message-content ol {
  margin: 8px 0 8px 18px;
  padding: 0;
}
.message-content ul li,
.message-content ol li {
  margin: 4px 0;
  line-height: 1.5;
}
.message-content ul li::marker {
  color: var(--accent, #FF9800);
}
.message-content ol li {
  padding-left: 4px;
}

/* Paragraphs from the markdown renderer — kept tight for chat-feel */
.message-content p {
  margin: 0 0 8px 0;
  line-height: 1.55;
}
.message-content p:last-child {
  margin-bottom: 0;
}

/* Headers — if the LLM uses ### for sections, render them compact */
.message-content h1,
.message-content h2,
.message-content h3 {
  font-size: var(--t-md, 15px);
  font-weight: 700;
  margin: 12px 0 6px 0;
  color: var(--text-honey-deep, #1a1a1a);
  line-height: 1.3;
}

/* Long content (URLs, single long words) wraps cleanly */
.message-content {
  word-break: break-word;
  overflow-wrap: break-word;
}
.match-session-msg.aura.typing { font-style: italic; opacity: 0.7; }
.match-session-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-taupe);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.5;
}
.match-session-empty strong {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-honey-deep);
  margin-bottom: 8px;
}

/* Tap-to-ask suggestion chips — appear under each Aura reply (LLM-
   generated follow-ups) AND on the empty-state (seed prompts). One-
   shot: tapping a chip consumes the strip and sends the question. */
.match-session-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
  margin-top: 4px;
  animation: matchSuggIn 0.22s cubic-bezier(0.22, 0.9, 0.4, 1);
}
.match-session-suggestions.is-seed {
  align-self: center;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 12px;
}
@keyframes matchSuggIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* iOS Safari + some Android browsers REPAINT <button> with their own
   default styling (rounded blue pill, system font), which makes our
   chips look like plain links/text. Force-disable browser defaults
   with !important so our cream-card look always wins. */
.match-session-sugg-chip {
  display: block !important;
  width: 100%;
  text-align: left;
  background: var(--bg-white) !important;
  color: var(--text-cocoa) !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.match-session-sugg-chip::before {
  content: '↳';
  color: var(--accent);
  font-weight: 700;
  margin-right: 8px;
  display: inline-block;
}
.match-session-sugg-chip:hover,
.match-session-sugg-chip:focus-visible,
.match-session-sugg-chip:active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-md);
  outline: none;
}
.match-session-suggestions.is-seed .match-session-sugg-chip {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: var(--t-lg);
  text-align: center;
  background: linear-gradient(135deg, #fdf8f0 0%, #f9efe1 100%) !important;
  border-color: var(--pillar-physical) !important;
}

/* Input area */
.match-session-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(255, 252, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--card-border);
}
.match-session-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  color: var(--text);
  background: var(--bg-white);
  outline: none;
  max-height: 120px;
  line-height: 1.45;
}
.match-session-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.match-session-send {
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.match-session-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Quota-exhausted overlay */
.match-session-quota-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 252, 247, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 16px;
}
.match-session-quota-overlay.hidden { display: none; }
.match-session-quota-card {
  text-align: center;
  max-width: 320px;
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-md);
  padding: 28px 24px;
}
.match-session-quota-glyph {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 10px;
}
.match-session-quota-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--text-cocoa);
  margin-bottom: 10px;
  line-height: 1.3;
}
.match-session-quota-body {
  font-size: var(--t-lg);
  color: var(--text-taupe);
  margin-bottom: 18px;
  line-height: 1.55;
}
.match-session-quota-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.match-session-quota-cta {
  border: none;
  border-radius: 14px;
  padding: 12px 20px;
  font-size: var(--t-xl);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  width: 100%;
}
.match-session-quota-cta.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.match-session-quota-cta.secondary {
  background: var(--bg-white);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.match-session-quota-credits {
  margin-top: 12px;
  font-size: var(--t-sm);
  color: var(--text-taupe);
  font-style: italic;
  font-family: var(--font-serif);
  letter-spacing: 0.2px;
}
.match-session-quota-credits.no-credits {
  color: var(--error);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Saved Partners */
.match-saved {
  margin-top: 8px;
}
.match-saved-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.match-saved-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-saved-card {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.1s;
  position: relative;
}
.match-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.15s;
}
.match-delete-btn:active {
  background: rgba(244, 67, 54, 0.1);
  border-color: #f44336;
  color: #f44336;
}
.match-saved-card:active {
  transform: scale(0.98);
}
.match-saved-score {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(233,30,99,0.1), rgba(255,82,82,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #e91e63;
  margin-right: 12px;
  flex-shrink: 0;
}
.match-saved-info {
  flex: 1;
}
.match-saved-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.match-saved-date {
  font-size: 11px;
  color: var(--text-muted);
}
.match-saved-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

/* ========== Right Now Pulse ========== */
.right-now-pulse {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.06), rgba(255, 152, 0, 0.06));
  border-radius: 14px;
  margin-bottom: 14px;
  animation: pulseGlow 3s ease-in-out infinite;
  position: relative;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

.pulse-icon { font-size: 18px; }
.pulse-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
  font-style: italic;
}


/* ========== Today's Focus ========== */
.todays-focus {
  padding: 14px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
}
.focus-header { margin-bottom: 14px; }
.focus-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.focus-subtitle {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Vertical focus bars */
.focus-bars {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 0 4px;
}
.focus-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  gap: 4px;
}
.focus-col:active { opacity: 0.7; }
.focus-col-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.focus-col-track {
  width: 20px;
  height: 80px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.focus-col-fill {
  width: 100%;
  border-radius: 10px;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.focus-col-fill.high   { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.focus-col-fill.medium { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.focus-col-fill.low    { background: linear-gradient(180deg, #fda4af, #e11d48); }
.focus-col-icon {
  font-size: 16px;
  margin-top: 2px;
}
.focus-col-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.15;
  max-width: 56px;
}
.focus-col-cue {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.1;
  max-width: 56px;
}

/* ========== Life Metrics ========== */
.life-metrics { margin-bottom: 14px; }
.metrics-desc {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.metrics-grid {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2px 14px;
}
.metric-row {
  padding: 11px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
}
.metric-row-top {
  display: grid;
  grid-template-columns: 108px 1fr 48px;
  align-items: center;
  gap: 10px;
}
.metric-row:last-child { border-bottom: none; }
.metric-row:active { opacity: 0.7; }
.metric-row-left { display: flex; align-items: center; gap: 7px; }
.metric-row-icon { font-size: 16px; flex-shrink: 0; }
.metric-row-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}
.metric-row-track {
  height: 8px;
  background: rgba(0,0,0,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.metric-row-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.metric-row-fill.high   { background: #6bcb77; }
.metric-row-fill.medium { background: #ffd93d; }
.metric-row-fill.low    { background: #ff6b6b; }
.metric-row-right { text-align: right; }
.metric-row-score { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.metric-row-hint { display: block; font-size: 10px; color: var(--text-muted); }
/* Contextual one-liner under each metric — score-tier × profile-aware. */
.metric-row-summary {
  margin: 6px 0 0 23px; /* indent past the icon column */
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #777);
  font-style: italic;
  letter-spacing: 0.1px;
}

/* Testimonial-submission section in profile — give the textarea room
   to breathe so writing a few sentences feels generous, not cramped. */
.testimonial-blurb {
  font-size: 13.5px;
  color: var(--text-muted, #7a6a55);
  line-height: 1.6;
  margin: 4px 2px 16px;
  font-style: italic;
}

/* Scope the textarea + city input styling specifically inside the
   testimonial section so we don't disturb other inline-form-groups. */
#testimonialBody .inline-form-group {
  margin-bottom: 14px;
}
#testimonialBody .inline-form-group label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #9a8c7a);
  margin-bottom: 8px;
}
#testimonialBody textarea#testimonialText {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft, #fdf6e8) 100%);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text, #3a322b);
  font-family: var(--font-sans);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
#testimonialBody textarea#testimonialText::placeholder {
  color: var(--text-muted, #b5a795);
  font-style: italic;
  line-height: 1.6;
}
#testimonialBody textarea#testimonialText:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
#testimonialBody input#testimonialCity {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 10px;
  background: var(--bg-input, #ffffff);
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-sans);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#testimonialBody input#testimonialCity:focus {
  outline: none;
  border-color: var(--accent, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
#testimonialBody .inline-form-actions {
  margin-top: 18px;
}
#testimonialBody .inline-save-btn {
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.testimonial-counter {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted, #9a8c7a);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.testimonial-counter span {
  color: var(--accent-strong, #d97e0b);
  font-weight: 700;
}
.testimonial-status {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 18px;
  padding: 0 2px;
}
.testimonial-status.success { color: #2e7d32; }
.testimonial-status.error { color: #c62828; }

.hidden { display: none !important; }

/* Mood Ring Widget */
.mood-ring-widget {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.mood-ring-widget:active { transform: scale(0.98); border-color: var(--accent); }
.mood-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.mood-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.mood-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mood-emoji { font-size: 36px; }
.mood-word { font-size: 16px; font-weight: 700; color: var(--text); }
.mood-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Last Year Widget */
.last-year-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-sm);
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.last-year-widget:active { transform: scale(0.98); border-color: var(--accent); }
.last-year-icon { font-size: 28px; }
.last-year-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.last-year-text { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; }

/* ========== Streak Counter Widget ========== */
.streak-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fff8f0, #fff3e6);
  border: 1px solid #ffd6a0;
  border-radius: 14px;
  margin-bottom: 12px;
}
.streak-flame { font-size: 28px; line-height: 1; }
.streak-details { display: flex; align-items: baseline; gap: 6px; }
.streak-count { font-size: 28px; font-weight: 800; color: #e65100; line-height: 1; }
.streak-label { font-size: 12px; color: #bf6000; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.streak-badge {
  margin-left: auto;
  padding: 3px 10px;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  animation: streakPulse 1.5s ease-in-out infinite;
}
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ========== Birth Star Card ========== */
.birth-star-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.15s;
}
.birth-star-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.birth-star-header + .birth-star-expandable:not(.collapsed) { margin-top: 12px; }
.birth-star-header:active { opacity: 0.7; }
.birth-star-icon { font-size: 20px; }
.birth-star-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.birth-star-toggle-icon {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
}
.birth-star-headline { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.4; }

/* ─── Trait Constellation — daily-rotating hero visual.
   Users look at it before they read it. The highlighted trait
   ("trait of the day") rotates by date hash so every visit feels
   slightly different — same data, fresh angle. */
.birth-star-constellation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0 14px;
}
.birth-star-constellation {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  /* Allow text labels to extend slightly outside viewBox bounds — SVG
     overflow defaults vary by browser. Explicit visible keeps long
     trait labels from being chopped on narrow viewports. */
  overflow: visible;
}
.birth-star-theme-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--text-taupe);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.2px;
  line-height: 1.4;
  max-width: 32ch;
}

/* Today's lens — bridges static personality to current life.
   Bright honey-amber so it's the first thing the eye lands on
   after the constellation. Changes wording with each new dasha
   sub-period (every few months) so feels alive. */
.birth-star-lens {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(212,165,116,0.04) 100%);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 0 12px 12px 0;
  margin: 10px 0 14px;
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--text-cocoa);
}
.birth-star-lens-icon {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.birth-star-lens strong {
  color: var(--accent-strong, #d97e0b);
  font-weight: 700;
}
.birth-star-personality { font-size: 14px; color: var(--text); line-height: 1.6; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
/* UX-4: trait pills (compact card) + detail (behind expand) */
/* UX-5: Hook cards (Insights tab) */
.biggest-shift-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--bg-cream-soft) 0%, #fff 100%);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.biggest-shift-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.biggest-shift-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.biggest-shift-body { flex: 1; min-width: 0; }
.biggest-shift-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 4px;
}
.biggest-shift-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}
.biggest-shift-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.biggest-shift-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-strong);
  flex-shrink: 0;
  white-space: nowrap;
}

.qotd-card {
  background: linear-gradient(135deg, var(--chat-accent-soft) 0%, #fff 100%);
  border: 1px solid rgba(91, 155, 213, 0.20);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qotd-card:hover { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(91, 155, 213, 0.15); }
.qotd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chat-accent-strong);
  margin-bottom: 6px;
}
.qotd-topic {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.qotd-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #5a4a35);
  line-height: 1.5;
  margin-bottom: 8px;
}
.qotd-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--chat-accent-strong);
}

/* UX-5: Profile streak surface */
.profile-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 152, 0, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
}
.profile-streak-flame {
  font-size: 14px;
  animation: streak-flame 1.4s ease-in-out infinite;
}
.profile-streak-count {
  font-size: 13px;
  font-weight: 700;
}
.profile-streak-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@keyframes streak-flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.birth-star-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.birth-star-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid rgba(245, 158, 11, 0.18);
  letter-spacing: 0.01em;
}
.birth-star-detail {
  margin-bottom: 10px;
}
.birth-star-detail-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
.birth-star-theme { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 6px; }
.birth-star-knowmore { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 10px; cursor: pointer; }
.birth-star-knowmore:active { opacity: 0.7; }
.birth-star-combo {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.birth-star-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}
.birth-star-badge.moon-badge {
  background: rgba(138, 180, 248, 0.15);
  color: #5b9cf6;
  border: 1px solid rgba(138, 180, 248, 0.3);
}
.birth-star-badge.lagna-badge {
  background: rgba(255, 183, 77, 0.15);
  color: #e09730;
  border: 1px solid rgba(255, 183, 77, 0.3);
}
.birth-star-name { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
/* Expandable section — holds the entire Inner Nature payload now
   (tagline, headline, pills, badges, paragraph, strengths-chart),
   so the cap is generous. The card is collapsed by default; the
   user must tap the + to reveal anything. */
.birth-star-expandable {
  overflow: hidden;
  max-height: 1500px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}
.birth-star-expandable.collapsed {
  max-height: 0;
  opacity: 0;
}

/* ========== Strengths & Weaknesses Chart ========== */
.sw-chart-preview {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.sw-chart-preview:active { opacity: 0.8; }
.sw-chart-preview-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.sw-chart-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sw-chart-tap-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  opacity: 0.7;
}

/* Mini section labels (kept) */
.sw-mini-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  margin-top: 14px;
}
.sw-mini-section-label:first-child { margin-top: 0; }
.sw-mini-strength-label { color: var(--success); }
.sw-mini-weakness-label { color: var(--gold); }

/* Chip grid — replaces the old fake-percentage bar layout. Each chip
   is tappable and routes to a topic-specific Aura question. Matches
   the .birth-star-pill aesthetic for visual cohesion across the card. */
.sw-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.sw-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
}
.sw-chip:hover { transform: translateY(-1px); }
.sw-chip:active { transform: translateY(0); }
.sw-chip-strength {
  background: rgba(76, 175, 80, 0.10);
  color: var(--success);
  border: 1px solid rgba(76, 175, 80, 0.25);
}
.sw-chip-strength:hover { background: rgba(76, 175, 80, 0.15); }
.sw-chip-weakness {
  background: rgba(245, 158, 11, 0.10);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.sw-chip-weakness:hover { background: rgba(245, 158, 11, 0.15); }

/* Modal expanded chart */
.sw-chart-modal {
  max-width: 95%;
  width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 16px;
  position: relative;
}
.sw-chart-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}
.sw-chart-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}
.sw-chart-container-full {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 4px;
  margin-bottom: 12px;
}

/* Full chart rows */
.sw-full-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  margin-top: 14px;
}
.sw-full-section-label:first-child { margin-top: 0; }
.sw-full-strength-label { color: var(--success); }
.sw-full-weakness-label { color: var(--gold); }
.sw-full-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 8px;
  transition: background 0.15s;
}
.sw-full-row:active { background: var(--accent-soft); }
.sw-full-label {
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.sw-full-bar-wrap {
  flex: 1.5;
  height: 12px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.sw-full-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}
.sw-full-bar.strength {
  background: linear-gradient(90deg, var(--success), var(--success-light));
}
.sw-full-bar.weakness {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.sw-chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sw-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.sw-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.sw-legend-strength { background: var(--success); }
.sw-legend-weakness { background: var(--gold); }
.sw-chart-tap-row-hint {
  font-size: 10px;
  color: var(--accent);
  text-align: center;
  margin-top: 10px;
  font-weight: 600;
}

/* ========== Birthday Banner ========== */
.birthday-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff4e0, #ffe0f0, #fff0e8);
  border: 1px solid #ffd1a0;
  border-radius: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s;
  animation: birthdayGlow 3s ease-in-out infinite;
}
@keyframes birthdayGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 100, 0); }
  50% { box-shadow: 0 0 16px 2px rgba(255, 180, 100, 0.25); }
}
.birthday-banner:active { transform: scale(0.98); }
.birthday-emoji { font-size: 36px; line-height: 1; }
.birthday-details { flex: 1; }
.birthday-greeting { font-size: 16px; font-weight: 700; color: #b85400; margin-bottom: 4px; }
.birthday-message { font-size: 13px; color: #a06030; }

/* ========== Retro-validation Card ========== */
.retro-card {
  background: var(--bg-white);
  border: 2px solid #d4b0ff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.retro-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(167, 139, 250, 0.12);
  border-radius: 50%;
  color: #9c7fd4;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.retro-dismiss:hover { background: rgba(167, 139, 250, 0.25); }
.retro-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.retro-actions { display: flex; gap: 10px; }
.retro-btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.retro-btn:active { transform: scale(0.96); }
.retro-btn.yes {
  background: linear-gradient(135deg, #ff9800, #e87f00);
  color: #fff;
}
.retro-btn.more {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ========== Referral Section ========== */
.referral-section {
  padding: 16px;
  background: rgba(255, 152, 0, 0.04);
  border: 1px solid rgba(255, 152, 0, 0.12);
  border-radius: 14px;
  margin-bottom: 14px;
  text-align: center;
}
.referral-header { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.referral-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.referral-code-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 12px; }
.referral-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  padding: 10px 20px;
  background: white;
  border: 1.5px dashed var(--accent);
  border-radius: 10px;
}
.referral-copy-btn {
  padding: 8px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.referral-share-btn {
  width: 100%; padding: 10px; background: var(--accent); color: white; border: none;
  border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.referral-reward-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}
.referral-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}
.referral-redeem-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.referral-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  background: var(--bg-white);
  color: var(--text);
}
.referral-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text-muted);
}
.referral-redeem-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.referral-redeem-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.referral-redeem-status {
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}
.referral-redeem-status.success { color: var(--success); }
.referral-redeem-status.error { color: var(--error); }

/* Collapsible profile sections */
.section-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.section-toggle-icon {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.section-body.collapsed {
  display: none;
}

/* ========== Life Timeline ========== */
.timeline-container { padding: 12px 0; }
.timeline-item { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.timeline-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  background: var(--border);
}
.timeline-item.current .timeline-dot { background: var(--accent); box-shadow: 0 0 8px rgba(255, 152, 0,0.4); }
.timeline-item.past .timeline-dot { background: var(--text-muted); opacity: 0.5; }
.timeline-line {
  position: absolute; left: 5px; top: 20px; bottom: -8px; width: 2px; background: var(--border);
}
.timeline-item:last-child .timeline-line { display: none; }
.timeline-content { flex: 1; }
.timeline-planet { font-size: 14px; font-weight: 600; color: var(--text); }
.timeline-item.past .timeline-planet { color: var(--text-muted); }
.timeline-item.current .timeline-planet { color: var(--accent); }
.timeline-dates { font-size: 12px; color: var(--text-muted); }
.timeline-duration { font-size: 11px; color: var(--text-muted); opacity: 0.7; }

/* ========== Share Insight Button ========== */
.share-insight-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 152, 0, 0.08);
  color: var(--accent, #ff9800);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s, transform 0.15s;
  z-index: 2;
  padding: 0;
  line-height: 1;
}
.share-insight-btn:hover {
  opacity: 1;
  background: rgba(255, 152, 0, 0.15);
}
.share-insight-btn:active {
  transform: scale(0.9);
}

/* ========== Daily Personalized Insight Card ========== */
.daily-insight-card {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fdf6ec 0%, #fef0e0 50%, #fce8d5 100%);
  border: 1px solid rgba(200, 164, 78, 0.2);
  border-radius: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(200, 164, 78, 0.08);
}
.daily-insight-card:active {
  transform: scale(0.98);
}
.daily-insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.daily-insight-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, #c8a44e, #e0b85c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 20px;
}
.daily-insight-card .share-insight-btn {
  position: static;
  flex-shrink: 0;
}
.daily-insight-text {
  font-size: 15px;
  font-weight: 600;
  color: #3d2e1a;
  line-height: 1.5;
}

/* Dark mode overrides for daily insight card */
@media (prefers-color-scheme: dark) {
  .daily-insight-card {
    background: linear-gradient(135deg, #2a2218 0%, #302820 50%, #352d22 100%);
    border-color: rgba(200, 164, 78, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  .daily-insight-text {
    color: #f0e6d2;
  }
  .daily-insight-badge {
    background: linear-gradient(135deg, #a08040, #c8a44e);
  }
}

/* ========== Milestone Toast (fixed overlay) ========== */
.milestone-toast {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  z-index: 1000;
  animation: milestoneSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.milestone-toast-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ffd54f 0%, #ce93d8 50%, #b388ff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 152, 0,0.25);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.milestone-toast-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: milestoneShimmer 2s ease-in-out infinite;
}
@keyframes milestoneSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes milestoneShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.milestone-emoji {
  font-size: 30px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  animation: milestoneBounce 1s ease-in-out infinite alternate;
}
@keyframes milestoneBounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}
.milestone-details {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.milestone-title {
  font-size: 14px;
  font-weight: 700;
  color: #2d2d3a;
  margin-bottom: 2px;
}
.milestone-subtitle {
  font-size: 12px;
  color: rgba(45, 45, 58, 0.7);
  line-height: 1.3;
}
.milestone-dismiss {
  background: none;
  border: none;
  color: rgba(45, 45, 58, 0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}

/* ========== Thinking of You Card ========== */
.thinking-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.15) 0%, rgba(179, 136, 255, 0.12) 100%);
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  animation: thinkingFadeIn 0.8s ease-out;
  box-shadow: 0 2px 16px rgba(100, 181, 246, 0.1), inset 0 0 20px rgba(179, 136, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.thinking-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 181, 246, 0.06) 0%, transparent 70%);
  animation: thinkingGlow 4s ease-in-out infinite;
}
@keyframes thinkingFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes thinkingGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, 5%); }
}
.thinking-emoji {
  font-size: 30px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.thinking-details {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.thinking-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.4;
}
.thinking-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* ========== Journey Card ========== */
.journey-card {
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.1) 0%, rgba(206, 147, 216, 0.08) 50%, rgba(255, 152, 0, 0.06) 100%);
  border: 1px solid rgba(255, 183, 77, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.journey-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.journey-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.journey-stat {
  background: var(--bg-white);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  border: 1px solid rgba(255, 152, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.15s;
}
.journey-stat:active {
  transform: scale(0.97);
}
.journey-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
  line-height: 1.2;
}
.journey-stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ========== Daily Letter from Aura ========== */
.daily-letter {
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(255, 248, 240, 0.9));
  border: 1px solid rgba(255, 200, 150, 0.2);
  border-radius: 16px;
  margin-bottom: 16px;
}
.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.letter-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.letter-date {
  font-size: 11px;
  color: var(--text-muted);
}
.refresh-reading-btn-minimal {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 0 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
  line-height: 1;
}
.refresh-reading-btn-minimal:active { opacity: 1; }
.letter-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0em;
}
.letter-action {
  margin-top: 14px;
}
.letter-ask-btn {
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.letter-ask-btn:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== Upcoming Changes - Horizontal Dot Timeline ========== */
.upcoming-timeline {
  margin-bottom: 14px;
  padding: 0 4px;
}
.timeline-track {
  position: relative;
  background: linear-gradient(to right, var(--accent) 0%, var(--border) 100%);
  border-radius: 4px;
  height: 3px;
  margin: 30px 0 20px;
}
.timeline-now {
  position: absolute;
  left: 0;
  top: -20px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.timeline-dot-marker {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  text-align: center;
}
.dot-icon {
  width: 14px;
  height: 14px;
  background: var(--bg-white);
  border: 2px solid var(--accent);
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.dot-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
}

/* ========== Dasha Timeline - Horizontal Bar Charts ========== */
.dasha-bar-level {
  margin-bottom: 12px;
}
.dasha-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.bar-level-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bar-current-info {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.dasha-bar-track {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
}
.dasha-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: pointer;
  transition: all 0.15s;
  border-right: 1px solid rgba(255,255,255,0.3);
}
.dasha-bar-segment:last-child { border-right: none; }
.dasha-bar-segment.past {
  background: rgba(200, 200, 210, 0.4);
}
.dasha-bar-segment.current {
  background: var(--accent);
}
.dasha-bar-segment.future {
  background: rgba(255, 152, 0, 0.15);
}
.dasha-bar-segment:active {
  opacity: 0.7;
  transform: scaleY(1.1);
}
.bar-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dasha-bar-segment.current .bar-label {
  color: white;
}
.dasha-text-level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

/* ========== Aura Status Banner ========== */
.aura-status-banner {
  background: linear-gradient(135deg, #2d1b4e 0%, #1a1a2e 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aura-status-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.aura-status-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* ========== Yesterday's Review Card ========== */
.yesterday-review-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(212, 176, 255, 0.3);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.yesterday-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.yesterday-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a78bfa;
}
.yesterday-date {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.yesterday-text {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  margin-bottom: 14px;
}
.yesterday-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating-prompt {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-right: auto;
}
.rating-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating-btn:active {
  transform: scale(0.92);
}
.rating-btn.selected {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.2);
  transform: scale(1.1);
}
.yesterday-rated {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding: 8px 0 0;
}

/* ========== Accuracy + Streak Bar ========== */
.accuracy-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(167, 139, 250, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  overflow: hidden;
}
.accuracy-stat, .streak-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  gap: 2px;
  text-align: center;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #7c5cbf !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #5b21b6 !important;
  line-height: 1.1;
}
.stat-sub {
  font-size: 11px;
  color: #9d78d8 !important;
}
.accuracy-bar-divider {
  width: 1px;
  height: 36px;
  background: rgba(167, 139, 250, 0.35);
  align-self: center;
}

/* ========== Streak Credits Label ========== */
.streak-credits-label {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 600;
}

/* ========== Streak Conversion Teaser (in chat) ========== */
.streak-conversion-teaser {
  padding: 0;
}
.streak-teaser-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 152, 0, 0.06));
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin: 8px 0 4px;
}
.streak-teaser-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.streak-teaser-body {
  flex: 1;
}
.streak-teaser-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, #ff9800);
  margin-bottom: 6px;
}
.streak-teaser-text {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
  margin-bottom: 12px;
}
.streak-teaser-text strong {
  color: var(--accent, #ff9800);
}
.streak-teaser-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff9800, #ff9800);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.streak-teaser-btn:hover {
  opacity: 0.9;
}

/* ========== Retry Question Button ========== */
.retry-question-btn {
  display: inline-block;
  background: var(--accent, #ff9800);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}
.retry-question-btn:hover:not(:disabled) {
  opacity: 0.85;
}
.retry-question-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ========== Reports & Tools section + Mahurat Picker ========== */

.report-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--bg-cream-soft) 0%, #fff 100%);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.report-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.report-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-tile-icon { font-size: 28px; flex-shrink: 0; }
.report-tile-body { flex: 1; min-width: 0; }
.report-tile-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.report-tile-sub   { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.report-tile-cta   { font-size: 12px; font-weight: 600; color: var(--accent-strong); flex-shrink: 0; white-space: nowrap; }

/* Coming-soon variant — same tile shape, muted treatment, unmistakable
   "not yet available" cue. Tile is still tappable (shows the description
   modal in case we ever want to wire one). Pricing chip slots inline next
   to the title. */
.report-tile-soon {
  background: var(--bg-light);
  border-left-color: var(--text-muted);
  cursor: pointer;
}
.report-tile-soon:hover { transform: translateY(-1px); border-color: var(--accent); }
.report-tile-soon .report-tile-icon { opacity: 0.85; }
.report-tile-cta-soon {
  background: var(--bg-white);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.report-tile-price {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Email-delivery row at the top of Reports & Tools.
   Shows where reports get sent. Pre-fills with the user's auth email
   (or blank for phone-only users). Tap edit pencil to change. */
.reports-email-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-cream-soft);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
}
.reports-email-icon { font-size: 22px; flex-shrink: 0; line-height: 1.4; }
.reports-email-body { flex: 1; min-width: 0; }
.reports-email-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.reports-email-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.reports-email-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  cursor: pointer;
}
.reports-email-value-empty {
  color: var(--text-muted);
  font-weight: 500;
  font-style: italic;
}
.reports-email-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.reports-email-status-confirmed {
  background: rgba(76, 175, 80, 0.10);
  color: var(--success);
  border: 1px solid rgba(76, 175, 80, 0.25);
}
.reports-email-status-suggested {
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.reports-email-edit { display: flex; flex-direction: column; gap: 8px; }
.reports-email-edit input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg-white);
  color: var(--text);
}
.reports-email-edit input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.reports-email-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.reports-email-cancel,
.reports-email-save {
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.reports-email-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.reports-email-save {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: none;
  color: white;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.reports-email-edit-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.reports-email-edit-btn:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Coming-soon report preview modal — opens when a Coming-Soon tile is
   tapped. Same overlay/card frame as Mahurat. Lays out the report's
   icon + title + price + status + "what's inside" + delivery. */
.report-soon-card {
  background: var(--bg-white);
  border-radius: 18px;
  padding: 24px 22px 22px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  position: relative;
  text-align: left;
}
.report-soon-icon {
  font-size: 44px;
  text-align: center;
  margin-bottom: 6px;
}
.report-soon-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}
.report-soon-price {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 14px;
}
.report-soon-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.report-soon-pill {
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.report-soon-eta {
  font-size: 12px;
  color: var(--accent-strong);
  font-weight: 600;
}
.report-soon-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
}
.report-soon-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.report-soon-list li { margin-bottom: 5px; }
.report-soon-delivery {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-cream-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Owner-only preview row — appears at the bottom of the Coming-soon
   modal for OWNER_USER_IDS. Sends a real branded email so the
   rendering can be verified in-inbox before the PDF pipeline lands. */
.report-soon-preview-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.report-soon-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.report-soon-preview-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--bg-white);
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.report-soon-preview-btn:hover { background: var(--accent-soft); transform: translateY(-1px); }
.report-soon-preview-btn:disabled { opacity: 0.7; cursor: wait; }
.report-soon-preview-status {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.report-soon-preview-status-ok  { color: var(--success); }
.report-soon-preview-status-err { color: #c1614b; }

/* Mahurat modal */
.muhurta-card {
  background: var(--bg-white);
  border-radius: 18px;
  padding: 20px 18px 24px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
}
.modal-close:hover { background: var(--bg-light); color: var(--text); }

.muhurta-stage-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  margin-top: 6px;
}
.muhurta-stage-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.muhurta-stage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

/* Locked / Coming-soon stage */
.muhurta-locked-icon { font-size: 56px; text-align: center; padding-top: 12px; }
.muhurta-locked-title { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; margin: 12px 0 8px; }
.muhurta-locked-sub { font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.5; padding: 0 8px 12px; }

/* Activity grid */
.muhurta-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.muhurta-activity-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  text-align: center;
}
.muhurta-activity-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.muhurta-activity-icon { font-size: 26px; }
.muhurta-activity-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }

/* Range buttons */
.muhurta-range-list { display: flex; flex-direction: column; gap: 8px; }
.muhurta-range-btn {
  padding: 12px 14px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  text-align: center;
}
.muhurta-range-btn:hover { border-color: var(--accent); }
.muhurta-range-btn.active {
  background: linear-gradient(135deg, var(--accent-soft), rgba(245, 158, 11, 0.12));
  border-color: var(--accent);
  color: var(--accent-strong);
}

.muhurta-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.muhurta-back-btn:hover { color: var(--text); border-color: var(--text-muted); }
.muhurta-find-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.muhurta-find-btn:hover { transform: translateY(-1px); }

/* Loading stage */
.muhurta-loading-spinner {
  font-size: 48px;
  text-align: center;
  margin: 32px 0 12px;
  animation: muhurtaSpin 2.4s ease-in-out infinite;
}
@keyframes muhurtaSpin {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.muhurta-loading-text { text-align: center; color: var(--text-muted); font-size: 13px; padding-bottom: 24px; }

/* Results list */
.muhurta-results-list { display: flex; flex-direction: column; gap: 12px; }
.muhurta-empty {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 24px 12px;
}

.muhurta-result-card {
  background: var(--bg-white);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 14px 16px;
  border-left-width: 4px;
}
/* Four-tier color accent — matches the strength label */
.muhurta-result-card.muhurta-tier-excellent { border-left-color: #22c55e; background: linear-gradient(135deg, rgba(34,197,94,0.06), var(--bg-white)); }
.muhurta-result-card.muhurta-tier-strong    { border-left-color: var(--accent); }
.muhurta-result-card.muhurta-tier-workable  { border-left-color: #d4a050; opacity: 0.95; }
.muhurta-result-card.muhurta-tier-weak      { border-left-color: #c1614b; opacity: 0.85; background: rgba(0,0,0,0.02); }
.muhurta-result-card.muhurta-tier-excellent .muhurta-result-rating-label { color: #16a34a; }
.muhurta-result-card.muhurta-tier-workable  .muhurta-result-rating-label { color: #b8860b; }
.muhurta-result-card.muhurta-tier-weak      .muhurta-result-rating-label { color: #c1614b; }
.muhurta-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.muhurta-result-rating {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.muhurta-result-rating-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-left: 8px;
}
.muhurta-result-score { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.muhurta-result-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.muhurta-result-date { font-size: 15px; font-weight: 700; color: var(--text); }
.muhurta-result-time { font-size: 13px; color: var(--text-muted); }
.muhurta-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.muhurta-meta-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid rgba(245, 158, 11, 0.18);
}
.muhurta-meta-chip-en { color: var(--text-muted); font-weight: 500; }

.muhurta-result-reasons summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.muhurta-result-reasons summary::before { content: '▸ '; transition: transform .15s ease; display: inline-block; }
.muhurta-result-reasons[open] summary::before { content: '▾ '; }
.muhurta-result-reasons ul {
  margin: 6px 0 4px 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.muhurta-result-reasons li { margin-bottom: 4px; }

/* ========== Subscription Row in Profile ========== */
.subscription-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-soft, #fdf6e8), rgba(245,158,11,0.04));
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 12px;
  margin-bottom: 14px;
}
.subscription-row-icon { font-size: 24px; line-height: 1; }
.subscription-row-body { flex: 1; min-width: 0; }
.subscription-row-current { display: flex; gap: 8px; align-items: baseline; }
.subscription-row-current-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted, #9a8c7a);
}
.subscription-row-current-tier {
  font-size: 14px; font-weight: 700; color: var(--accent-strong, #d97e0b);
}
.subscription-row-cta-text {
  font-size: 12px; color: var(--text); margin-top: 4px;
}
.subscription-row-cta {
  background: var(--accent, #f59e0b);
  color: white; border: none; padding: 8px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
}
.subscription-row-cta:hover { transform: translateY(-1px); }

/* ========== Plans Modal ========== */
.plans-modal {
  max-width: 520px; max-height: 85vh; overflow-y: auto;
  padding: 24px 20px 18px; position: relative;
}
.plans-modal-close {
  position: absolute; top: 8px; right: 12px; background: none;
  border: none; font-size: 26px; color: var(--text-muted);
  cursor: pointer; line-height: 1; padding: 4px 8px;
}
.plans-modal-header { text-align: center; margin-bottom: 14px; }
.plans-modal-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.plans-modal-current { font-size: 12px; color: var(--text-muted, #7a6a55); }

.plans-billing-toggle {
  display: flex; gap: 4px; padding: 3px;
  background: rgba(0,0,0,0.04); border-radius: 999px;
  margin: 0 auto 16px; max-width: 320px;
}
.plans-billing-btn {
  flex: 1; padding: 8px 12px; border: none; background: transparent;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; position: relative;
}
.plans-billing-btn.active {
  background: white; color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.plans-billing-save {
  font-size: 9px; font-weight: 700; color: #16a34a;
  letter-spacing: 0.04em; margin-left: 4px;
}

.plans-list { display: flex; flex-direction: column; gap: 12px; }
.plans-loading { text-align: center; color: var(--text-muted); padding: 24px; }

.plan-card {
  border: 1px solid var(--border-mid, rgba(0,0,0,0.08));
  border-radius: 14px; padding: 16px; position: relative;
  background: white;
}
.plan-card-recommended-style {
  border-color: var(--accent, #f59e0b); border-width: 2px;
  background: linear-gradient(135deg, var(--accent-soft, #fdf6e8), white);
}
.plan-card-current { background: rgba(34,197,94,0.04); border-color: #22c55e; }
.plan-card-recommended {
  position: absolute; top: -10px; right: 12px;
  background: var(--accent, #f59e0b); color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.plan-card-limited {
  font-size: 10px; font-weight: 700; color: #c1614b;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.plan-card-name { font-size: 18px; font-weight: 700; color: var(--text); }
.plan-card-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.plan-card-price-amt { font-size: 28px; font-weight: 700; color: var(--accent-strong, #d97e0b); }
.plan-card-price-unit { font-size: 13px; color: var(--text-muted); }
.plan-card-save { font-size: 11px; color: #16a34a; font-weight: 700; margin-top: 2px; }
.plan-card-benefits {
  margin: 10px 0; padding: 0 0 0 18px;
  font-size: 13px; color: var(--text); line-height: 1.55;
}
.plan-card-benefits li { margin-bottom: 4px; }
.plan-card-cta {
  width: 100%; padding: 11px 14px; margin-top: 8px;
  background: var(--accent, #f59e0b); color: white;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.plan-card-cta:hover:not(:disabled) { transform: translateY(-1px); }
.plan-card-cta:disabled {
  background: rgba(0,0,0,0.08); color: var(--text-muted); cursor: default;
}

.plans-modal-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-mid, rgba(0,0,0,0.06));
  text-align: center;
}
.plans-foot-note { font-size: 11px; color: var(--text-muted, #9a8c7a); }
.plans-cancel-sub {
  margin-top: 8px; background: none; border: none;
  font-size: 12px; color: #c1614b; cursor: pointer;
  text-decoration: underline;
}

/* ========== Razorpay-Simulated Checkout Modal ========== */
.razorpay-sim-modal {
  max-width: 380px; padding: 0; overflow: hidden;
}
.razorpay-sim-brand {
  background: #1f2937; color: white;
  padding: 14px 18px; display: flex;
  align-items: center; justify-content: space-between;
}
.razorpay-sim-logo {
  font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.razorpay-sim-logo-test {
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  background: var(--accent); color: #1f2937;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.razorpay-sim-merchant { font-size: 12px; color: rgba(255,255,255,0.7); }

.razorpay-sim-amount {
  padding: 18px 20px; text-align: center;
  border-bottom: 1px solid var(--border-mid, rgba(0,0,0,0.06));
}
.razorpay-sim-amount-label {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.razorpay-sim-amount-value {
  font-size: 30px; font-weight: 700; color: var(--text);
}
.razorpay-sim-amount-sub {
  font-size: 12px; color: var(--text-muted, #7a6a55); margin-top: 2px;
}

.razorpay-sim-methods { padding: 14px 20px; }
.razorpay-sim-method-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.razorpay-sim-method {
  width: 100%; text-align: left; padding: 12px 14px;
  background: white; border: 2px solid var(--accent, #f59e0b);
  border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.razorpay-sim-method-hint {
  font-size: 11px; font-weight: 400; color: var(--text-muted);
  margin-left: 6px;
}

.razorpay-sim-actions {
  padding: 12px 20px; display: flex; gap: 10px;
}
.razorpay-sim-cancel {
  flex: 1; padding: 11px 14px;
  background: rgba(0,0,0,0.05); border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.razorpay-sim-pay {
  flex: 2; padding: 11px 14px;
  background: var(--accent, #f59e0b); color: white;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.razorpay-sim-pay:disabled { opacity: 0.6; cursor: default; }
.razorpay-sim-footnote {
  padding: 8px 20px 16px; text-align: center;
  font-size: 10px; color: var(--text-muted, #9a8c7a);
  font-style: italic;
}

/* ========== Locked Report Tile (free / non-eligible users) ========== */
.report-tile-locked {
  position: relative;
  opacity: 0.92;
}
.report-tile-locked::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.04);
  border-radius: inherit;
  pointer-events: none;
}
.report-tile-locked .report-tile-cta {
  background: rgba(0,0,0,0.04);
  color: var(--accent-strong, #d97e0b) !important;
  font-weight: 700;
}

/* ========== Tier-locked overlay (frosted blur) ==========
   Applied to premium widgets visible to free users so they SEE the
   SHAPE of value (radar polygon, gauge ring, dasha bands, mini-bars)
   but the words/numbers stay unreadable. Calibrated balance:
   shapes glanceable → curiosity, text obscured → upgrade pull.
   Tap → Plans modal. */
.tier-locked {
  position: relative;
  overflow: hidden;
}
.tier-locked > *:not(.tier-lock-overlay) {
  filter: blur(3px);                 /* was 5px — text now unreadable but shapes clearer */
  pointer-events: none;
  user-select: none;
  opacity: 0.72;                     /* was 0.55 — content shows through more */
}
.tier-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.28);    /* was 0.45 — lighter wash */
  backdrop-filter: blur(0.8px);              /* was 2px — much lighter */
  -webkit-backdrop-filter: blur(0.8px);
  z-index: 2;
  cursor: pointer;
  text-align: center;
  padding: 12px;
  transition: background 0.18s ease;
}
.tier-lock-overlay:hover { background: rgba(255, 255, 255, 0.42); }
.tier-lock-overlay-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #2c1f0f);
  letter-spacing: -0.005em;
  margin-top: 2px;
  line-height: 1.25;
}
.tier-lock-overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--accent, #f59e0b) 0%, #ff8a3d 100%);
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 6px;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 10px rgba(255, 138, 61, 0.28);
}

/* ============================================================
 * LOCK CHIP — unified pill used wherever 🔒 + tier name appears:
 *   • tier-lock-overlay (Insights widgets)
 *   • report-tile CTAs (Year Ahead / Birthday / Dasha-Shift)
 *   • muhurta tile CTA
 * Single source of truth so the icon, tier text, padding, and
 * vertical alignment are identical across every surface.
 * ============================================================ */
.lock-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 11px;
  background: rgba(255, 152, 0, 0.10);
  border: 1px solid rgba(255, 152, 0, 0.24);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-strong, #d97e0b);
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}
.lock-chip-sm {
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.5px;
  gap: 3px;
}
.lock-chip-icon {
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  filter: saturate(0.85);
  /* nudge the emoji baseline so it visually centres with the
     adjacent uppercase letters across iOS / Android / Windows */
  transform: translateY(-0.5px);
}
.lock-chip-sm .lock-chip-icon { font-size: 10px; transform: translateY(-0.5px); }
.lock-chip-tier {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ============================================================
   TODAY CARD — modern minimalist home page hero.
   Co-Star × Apple Health × Strava aesthetic. Pure SVG/CSS.
   ============================================================ */
.today-card {
  position: relative;
  background: var(--bg-white, #ffffff);
  border: 1px solid var(--border-mid, rgba(0,0,0,0.06));
  border-radius: 20px;
  padding: 22px 20px 18px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.today-card-date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #9a8c7a);
  margin-bottom: 14px;
}

/* Daily Score gauge — Apple-Health ring */
.today-gauge-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 16px;
}
.today-gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.today-gauge-track {
  fill: none;
  stroke: rgba(120, 90, 60, 0.10);
  stroke-width: 14;
  stroke-linecap: round;
}
.today-gauge-fill {
  fill: none;
  stroke: url(#gaugeGradMid);                       /* default before JS sets it */
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 534;                            /* 2π × 85 */
  stroke-dashoffset: 534;                           /* hidden until JS sets it */
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.9, 0.4, 1.0);
}
.today-gauge-score {
  transition: color 0.4s ease;                      /* smooth tier-color swap */
}

/* ============================================================
 * GAUGE SCORE BAND — the score gets a *tone* not just a number.
 * 5 bands (Peak / Strong / Workable / Quiet / Restful) each with
 * its own palette so colour itself becomes signal.
 * ============================================================ */
.today-gauge-band-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.today-gauge-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.today-gauge-band-glyph {
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.today-gauge-band-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.today-gauge-band-peak {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.28);
}
.today-gauge-band-peak .today-gauge-band-label { color: #059669; }
.today-gauge-band-strong {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.30);
}
.today-gauge-band-strong .today-gauge-band-label { color: #b56900; }
.today-gauge-band-workable {
  background: rgba(255, 152, 0, 0.10);
  border-color: rgba(255, 152, 0, 0.26);
}
.today-gauge-band-workable .today-gauge-band-label { color: #d97e0b; }
.today-gauge-band-quiet {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.28);
}
.today-gauge-band-quiet .today-gauge-band-label { color: #7c3aed; }
.today-gauge-band-restful {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.30);
}
.today-gauge-band-restful .today-gauge-band-label { color: #4f46e5; }
/* Tone subline — hidden by default. Was visually competing with the
   headline + body for attention (3 typography layers stacked). The
   tier-band pill already conveys the same "steady / push / quiet"
   read; this italic line was redundant clutter. Kept in DOM for
   accessibility / SEO; not painted. */
.today-gauge-tone {
  display: none;
}

/* ============================================================
 * INSIGHTS SECTION HEADERS — slim labels that give the page
 * a navigable rhythm: TODAY · YOUR PATTERNS · THIS WEEK · AHEAD
 * ============================================================ */
.insights-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 28px 4px 12px;
  padding: 0;
}
.insights-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.20), transparent);
}
.insights-section-header:first-of-type {
  margin-top: 16px;
}
/* Subtitle directly under each section header — explains the
   section's intent. Cormorant Garamond italic for serif elegance —
   matches the LifeIndex Aura wordmark and reads as a wellness
   journal, not a SaaS dashboard. */
.insights-section-sub {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--text-taupe);
  letter-spacing: 0.2px;
  font-style: italic;
  font-weight: 500;
  margin: 4px 4px 16px;
  padding: 0;
  line-height: 1.45;
}

/* ============================================================
 * DAY STRENGTH POLAR POPUP — opens on tap of the gauge.
 * Shows the 6-domain breakdown behind today's score as a polar
 * bloom. Tap a petal → ask Aura about that area.
 * ============================================================ */
.today-gauge-wrap { cursor: pointer; }
.today-gauge-wrap:hover { transform: scale(1.02); transition: transform 0.18s ease; }
.day-strength-popup {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  padding: 16px;
}
.day-strength-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 14, 6, 0);
  pointer-events: auto;
  transition: background 0.25s ease;
}
.day-strength-popup.show .day-strength-popup-backdrop { background: rgba(20, 14, 6, 0.42); }
.day-strength-popup-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 22px 18px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(60, 40, 0, 0.20),
              0 6px 18px rgba(60, 40, 0, 0.10);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.4, 1), opacity 0.25s ease;
  pointer-events: auto;
}
.day-strength-popup.show .day-strength-popup-card { transform: translateY(0); opacity: 1; }
.day-strength-popup-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(60, 40, 0, 0.06);
  border-radius: 999px;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.day-strength-popup-head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 10px;
}
.day-strength-popup-title {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
}
.day-strength-popup-sub {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  color: var(--text-taupe);
  font-style: italic;
  text-align: center;
}
.day-strength-popup-body {
  display: flex; justify-content: center;
  margin: 6px 0;
}
.day-strength-popup-foot {
  text-align: center;
  margin-top: 4px;
}
.day-strength-popup-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  display: block;
}

.share-today-btn {
  margin-top: 14px;
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  color: #fffaf0;
  border: none;
  border-radius: 14px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 4px 14px rgba(245,158,11,0.32), 0 1px 2px rgba(180,83,9,0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.share-today-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(245,158,11,0.42); }
.share-today-btn:active { transform: translateY(0); }
.share-today-btn:disabled { opacity: 0.65; cursor: wait; }
.share-today-btn-icon { font-size: 17px; line-height: 1; opacity: 0.95; }

.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  background: linear-gradient(135deg, rgba(45,24,16,0.97), rgba(74,40,20,0.96));
  color: #fef9ed;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
  z-index: 99999;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  max-width: 92vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.share-toast.error { background: linear-gradient(135deg, rgba(120,30,30,0.96), rgba(160,40,40,0.96)); }

/* ─── Branded share preview state inside day-strength popup ─── */
.day-strength-popup-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 4px 2px 0;
}
.share-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.share-preview-back {
  background: transparent;
  border: none;
  color: var(--text-taupe, #8a6d2e);
  font-size: 13px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms;
}
.share-preview-back:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.share-preview-title {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-taupe, #8a6d2e);
  flex: 1;
  text-align: center;
}
.share-preview-spacer { width: 64px; flex-shrink: 0; }
.share-preview-imgwrap {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(45,24,16,0.20);
  background: #fef9ed;
  position: relative;
}
.share-preview-img {
  width: 100%;
  height: auto;
  display: block;
}
.share-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.share-preview-btn {
  padding: 12px 14px;
  border: 1px solid var(--border-soft, rgba(176,141,76,0.25));
  border-radius: 12px;
  font-family: var(--font-sans, -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform 120ms, box-shadow 120ms, background 120ms, opacity 160ms;
  -webkit-tap-highlight-color: transparent;
}
.share-preview-btn:disabled { opacity: 0.6; cursor: wait; }
.share-preview-btn-save {
  background: rgba(255,255,255,0.75);
  color: #5b4220;
}
.share-preview-btn-save:hover { background: #fff; transform: translateY(-1px); }
.share-preview-btn-share {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  color: #fffaf0;
  border-color: #d97706;
  box-shadow: 0 4px 14px rgba(245,158,11,0.32);
}
.share-preview-btn-share:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(245,158,11,0.42); }
.share-preview-btn-icon { font-size: 16px; line-height: 1; }
.share-preview-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin: 4px 0 0;
}

/* ============================================================
 * TODAY'S MOVE — motivating action callout under the daily letter.
 * Pulls the chart-derived suggestion out of the prose so the user
 * doesn't have to read 3 sentences to find the action they should
 * take. Premium feel: warm gradient + soft inset, italic serif for
 * the action line.
 * ============================================================ */
.today-move-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 6px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f9efe1 0%, #f3dec3 100%);
  border-radius: var(--radius-lg, 14px);
  border-left: 3px solid var(--pillar-physical);
  position: relative;
}
.today-move-tile::before {
  content: '✦';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: var(--t-lg);
  color: var(--pillar-physical);
  opacity: 0.55;
}
.today-move-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-honey-deep);
}
.today-move-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-cocoa);
  letter-spacing: 0.1px;
}

/* ============================================================
 * PREMIUM ELEVATION SYSTEM
 * Uniform soft shadows applied to all major card surfaces so the
 * whole app feels layered and considered, not flat-tile-ish.
 * Layered shadows = perceived premium quality.
 * ============================================================ */
.energy-pillar,
.week-grid-card,
.today-radar.week-bloom-wrap,
.biggest-shift-card,
.insight-card,
.last-year-widget,
.forecast-pill,
.forecast-pill.forecast-pill-banner {
  box-shadow:
    0 1px 2px rgba(60, 40, 0, 0.03),
    0 4px 12px rgba(60, 40, 0, 0.05),
    0 12px 28px rgba(60, 40, 0, 0.04);
}
.energy-pillar:hover,
.biggest-shift-card:hover,
.forecast-pill:hover {
  box-shadow:
    0 1px 2px rgba(60, 40, 0, 0.04),
    0 6px 16px rgba(60, 40, 0, 0.07),
    0 16px 36px rgba(60, 40, 0, 0.05);
}

/* ============================================================
 * SUBTLE FADE-UP ANIMATION on the Energy Portal cards
 * Each pillar fades in slightly staggered — gives the page a
 * cinematic "settling into view" feel on first paint without
 * being slow or distracting.
 * ============================================================ */
@keyframes pillar-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.energy-pillar {
  animation: pillar-fade-up 0.45s cubic-bezier(0.22, 0.9, 0.4, 1) both;
}
.energy-pillar:nth-of-type(1) { animation-delay: 0.04s; }
.energy-pillar:nth-of-type(2) { animation-delay: 0.12s; }
.energy-pillar:nth-of-type(3) { animation-delay: 0.20s; }
@media (prefers-reduced-motion: reduce) {
  .energy-pillar { animation: none; }
}

/* ============================================================
 * RESPONSIVE — make the Energy Portal + Week widgets read well
 * on small phones (320-375px), big phones (390-430px), and the
 * 430px-wide desktop frame.
 * ============================================================ */
@media (max-width: 380px) {
  /* Tighter padding on phones with narrow viewports */
  .energy-pillar { padding: 16px 12px 14px; }
  .energy-pillar-title { font-size: 12px; letter-spacing: 0.4px; }
  .energy-orb-wrap { height: 120px; }
  .energy-orb { width: 120px; height: 120px; }
  .energy-orb-score { font-size: 32px; }
  .energy-pillar-tip { font-size: 12px; padding: 0 4px; }
  .energy-pillar-trend { font-size: 11px; padding: 2px 6px; }
  .insights-section-header { font-size: 9.5px; letter-spacing: 1.4px; margin: 22px 4px 10px; }
  .insights-section-sub { font-size: 11px; margin: -6px 4px 12px; }
  .week-grid-row { gap: 4px; }
  .wk-cell { padding: 8px 2px 6px; }
  .wk-cell-day { font-size: 8px; }
  .wk-cell-num { font-size: 11px; }
  .wk-cell-score { font-size: 9px; }
}
@media (min-width: 600px) {
  /* Larger phones / tablets / desktop frame — slightly wider orbs
     so the visual weight stays balanced. */
  .energy-orb-wrap { height: 150px; }
  .energy-orb { width: 150px; height: 150px; }
  .energy-orb-score { font-size: 42px; }
  .energy-pillar-tip { font-size: 13px; }
}
.today-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.today-gauge-score {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.today-gauge-of {
  font-size: 10px;
  color: var(--text-muted, #9a8c7a);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Headline + body — Co-Star direct copy. Tightened vertical rhythm
   so the headline → body → CTA reads as one calm block, not three
   disconnected stacks. */
.today-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-cocoa);
  letter-spacing: 0.1px;
  line-height: 1.25;
  margin-top: 14px;       /* extra air above headline so the band-pill breathes */
  margin-bottom: 10px;
  max-width: 26ch;
  text-align: center;
}
.today-body {
  font-size: 14.5px;
  color: var(--text-cocoa);
  line-height: 1.6;
  max-width: 34ch;
  margin: 0 auto 22px;
  text-align: center;
  /* Long letters get clamped to ~5 lines initially; tap to expand. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: -webkit-line-clamp 0.2s;
}
.today-body.expanded {
  -webkit-line-clamp: 99;     /* effectively unbounded */
}

/* Day Strip — horizontal intensity bar */
.day-strip-wrap {
  width: 100%;
  margin-bottom: 22px;
}
.day-strip-label {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #7a6a55);
  margin-bottom: 6px;
}
.day-strip {
  width: 100%;
  height: 28px;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.day-strip-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted, #b5a795);
  letter-spacing: 0.08em;
  margin-top: 4px;
  padding: 0 2px;
}

/* Life Strip — current chapter visualised */
.life-strip-wrap {
  width: 100%;
  margin-bottom: 18px;
}
.life-strip-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}
.life-strip-chapter {
  font-weight: 700;
  color: var(--text);
}
.life-strip-remaining {
  color: var(--accent-strong, #d97e0b);
  font-weight: 600;
  font-size: 11px;
}
.life-strip-bar {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.life-strip-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--accent, #f59e0b), var(--accent-strong, #d97e0b));
  width: 0%;
  transition: width 1s ease-out;
}
.life-strip-pin {
  position: absolute;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--accent-strong, #d97e0b);
  transform: translateX(-50%);
  left: 0%;
  transition: left 1s ease-out;
}
.life-strip-edges {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted, #b5a795);
  letter-spacing: 0.04em;
  margin-top: 5px;
  padding: 0 2px;
}

/* Action buttons */
.today-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.today-action-btn {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: white;
  color: var(--text);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.today-action-btn:hover { background: rgba(0,0,0,0.03); transform: translateY(-1px); }
/* Was: dark plum (#3d3548) — read as a system button, not part of the
   warm cream-and-honey app theme. Now a honey gradient that matches
   the rest of the app's primary actions (match-session-send, Match
   submit, etc.). */
.today-action-chat {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
  padding: 13px 18px;
}
.today-action-chat:hover,
.today-action-chat:focus-visible {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.36);
  transform: translateY(-1px);
  outline: none;
}

/* Top-right share button */
.today-share-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.04);
  border: none;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.today-share-btn:hover { background: rgba(0,0,0,0.08); color: var(--text); }

/* ===== Daily Letter Modal ===== */
.daily-letter-modal {
  max-width: 460px;
  padding: 28px 22px 22px;
  position: relative;
}
.daily-letter-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.daily-letter-modal-from {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-mid, rgba(0,0,0,0.06));
}
.daily-letter-modal-fromlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-strong, #d97e0b);
}
.daily-letter-modal-date {
  font-size: 11px;
  color: var(--text-muted);
}
.daily-letter-modal-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

/* Tier-aware: free users see today-card with a partial blur on
   gauge details; tap any blurred zone → Plans modal. */
/* Free tier: keep the gradient stroke at full strength so the gauge
   never reads as 'broken / blank'. Tier signal already comes from the
   blurred headline/body/strips below — no need to mute the score arc. */
.today-card.tier-free .today-gauge-fill { opacity: 0.92; }
.today-card.tier-free .today-headline { filter: blur(2.5px); opacity: 0.78; pointer-events: none; }
.today-card.tier-free .today-body { filter: blur(2.5px); opacity: 0.78; pointer-events: none; }
.today-card.tier-free .day-strip-wrap { filter: blur(2px); opacity: 0.85; pointer-events: none; }
.today-card.tier-free .life-strip-wrap { filter: blur(2px); opacity: 0.85; pointer-events: none; }

/* The ribbon CTA for free users so they know how to unlock */
.today-card-upgrade-ribbon {
  display: none;
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent-soft, #fdf6e8), rgba(245,158,11,0.04));
  border: 1px dashed rgba(245,158,11,0.4);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong, #d97e0b);
  cursor: pointer;
  text-align: center;
}
.today-card.tier-free .today-card-upgrade-ribbon { display: block; }

/* Animation on mount — subtle fade + lift */
@keyframes todayCardEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.today-card { animation: todayCardEnter 0.4s ease-out; }

/* =====================================================================
   VISUAL UNIFICATION SPRINT
   =====================================================================
   Normalises border-radius / padding / shadow / focus state / typography
   across every button, input, card, and modal in the app — so the auth
   screen, profile section, plans modal, today card, match results all
   feel like the same product.

   Strategy:
   1. Add radius / spacing / font-size tokens (colors + shadows already
      defined at the top of this file).
   2. Apply the tokens to a single grouped selector per primitive (all
      buttons share one rule, all inputs share one rule, etc.) so we
      don't repeat 50 patchy declarations.
   3. Loaded LAST so the cascade resolves in our favor without needing
      !important on most rules.
   ===================================================================== */

:root {
  /* — Radius scale (used by buttons, inputs, cards, modals) — */
  --radius-xs:       6px;
  --radius-sm:       8px;
  --radius-md:       10px;     /* default for buttons + inputs */
  --radius-lg:       14px;     /* default for cards */
  --radius-xl:       18px;     /* default for modals */
  --radius-pill:     999px;

  /* — Spacing scale — */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-7:         32px;

  /* — Type scale — */
  --font-xs:         10px;
  --font-sm:         12px;
  --font-md:         14px;
  --font-lg:         16px;
  --font-xl:         18px;
  --font-2xl:        22px;
  --font-3xl:        28px;
  --font-4xl:        44px;

  /* — Weight — */
  --w-regular:       400;
  --w-medium:        500;
  --w-semi:          600;
  --w-bold:          700;
}

/* —— Reusable focus ring (same on every input + button) —— */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
  border-color: var(--accent) !important;
}

/* —— Buttons: single normalised treatment ——————————————
   All button class names known across the app, normalised to:
     - radius: --radius-md (10px)
     - font-weight: 700
     - smooth hover lift
     - DM Sans family
   We do NOT change colors / backgrounds — those remain whatever the
   class' own rule sets. We only normalise the chrome.
   ———————————————————————————————————————————————————— */
.auth-btn,
.profile-btn,
.plan-card-cta,
.today-action-btn,
.match-submit-btn,
.match-back-btn,
.match-ask-btn,
.buy-questions-btn,
.referral-share-btn,
.referral-copy-btn,
.credit-referral-btn,
.inline-save-btn,
.inline-cancel-btn,
.modal-btn,
.razorpay-sim-pay,
.razorpay-sim-cancel,
.streak-modal-cta,
.why-mode-btn,
.send-btn,
.chat-mode-toggle,
.subscription-row-cta,
.plans-billing-btn,
.muhurta-find-btn,
.muhurta-back-btn,
.muhurta-activity-btn,
.muhurta-range-btn,
.testimonial-submit-btn,
.report-soon-preview-btn,
.report-soon-open-btn,
.retro-btn,
.match-dob-select {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  border-radius: var(--radius-md);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.01em;
}
.auth-btn:hover,
.profile-btn:hover,
.plan-card-cta:hover:not(:disabled),
.today-action-btn:hover,
.match-submit-btn:hover,
.match-back-btn:hover,
.match-ask-btn:hover,
.buy-questions-btn:hover,
.referral-share-btn:hover,
.subscription-row-cta:hover,
.muhurta-find-btn:hover,
.razorpay-sim-pay:hover {
  transform: translateY(-1px);
}
.auth-btn:active,
.profile-btn:active,
.plan-card-cta:active,
.today-action-btn:active,
.match-submit-btn:active,
.subscription-row-cta:active,
.razorpay-sim-pay:active {
  transform: translateY(0);
}

/* Pills (special-cased — they keep pill radius, only chrome unified) */
.subscription-row-cta,
.referral-copy-btn,
.muhurta-meta-chip,
.plans-billing-btn { border-radius: var(--radius-pill); }

/* —— Inputs: single normalised treatment ——————————————
   Type-attribute selectors so we cover every text-style input across
   auth, profile, match, plans, etc., without enumerating IDs.
   ———————————————————————————————————————————————————— */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: var(--font-md);
  font-weight: var(--w-medium);
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder {
  color: var(--text-soft);
  font-weight: var(--w-regular);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
input:disabled, textarea:disabled, select:disabled {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Select arrow (since we removed default appearance) */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237a7088' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* —— Cards: unified shadow + radius ——————————————————— */
.insight-card,
.plan-card,
.today-card,
.match-result-card,
.muhurta-result-card,
.qotd-card,
.biggest-shift-card,
.birth-star-card,
.horoscope-card,
.last-year-widget,
.todays-focus,
.retro-card,
.thinking-card,
.birthday-banner,
.aura-status-banner,
.profile-section,
.payment-card,
.referral-section,
.subscription-row,
.streak-modal-rewards li,
.streak-modal-warn,
.app-footer {
  border-radius: var(--radius-lg);
}
.insight-card,
.plan-card,
.today-card,
.match-result-card,
.muhurta-result-card,
.payment-card,
.referral-section,
.profile-section,
.subscription-row {
  box-shadow: var(--shadow-sm);
}

/* —— Modals: unified shadow + radius ——————————————————— */
.modal-content,
.daily-letter-modal,
.plans-modal,
.streak-modal,
.razorpay-sim-modal,
.edit-modal {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans);
}

/* —— Typography: tighten letter-spacing on big numbers + headlines —— */
h1, h2, h3, .auth-title, .modal-title, .plans-modal-title,
.match-title, .today-headline, .today-gauge-score, .plan-card-name {
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.app-title { letter-spacing: -0.02em; }

/* —— Aura wordmark accent (used inside auth-title + app-title) —— */
.brand-name-aura {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, #ff9800 0%, #d4a574 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}

/* —— Buttons that should look like primary CTAs across the app —— */
/* These keep their existing background colors but get a consistent
   font-size + padding so they all read as one design language. */
.auth-btn.primary,
.match-submit-btn,
.muhurta-find-btn,
.razorpay-sim-pay,
.streak-modal-cta,
.plan-card-cta:not(:disabled),
.buy-questions-btn,
.subscription-row-cta {
  font-size: var(--font-md);
  padding: 12px 20px;
  letter-spacing: 0.02em;
}

/* —— Sentence-case header normalisation: existing CSS sometimes used
       text-transform: uppercase; the modern aesthetic keeps it natural. */
.section-title,
.card-title { text-transform: none; }

/* —— Body text default: improved readability across the app —— */
body, p, .body-text { line-height: 1.6; }

/* —— Optional: small padding bump on tappable areas for thumb-friendly
       hit targets without changing visual size. Mobile-only. */
@media (max-width: 540px) {
  .auth-btn, .profile-btn, .plan-card-cta,
  .today-action-btn, .match-submit-btn, .match-ask-btn,
  .buy-questions-btn, .referral-share-btn, .subscription-row-cta,
  .razorpay-sim-pay, .muhurta-find-btn {
    min-height: 44px;
  }
}

/* End Visual Unification Sprint — added 2026-05 */

/* — Typography scale baseline (cascade-friendly: only sets the
     defaults; per-card rules can still override where needed) — */
body { font-size: var(--font-md); }
h1, .auth-title { font-size: var(--font-3xl); font-weight: var(--w-bold); }
h2, .modal-title, .plans-modal-title, .match-title,
.daily-letter-modal .daily-letter-modal-from { font-size: var(--font-2xl); font-weight: var(--w-bold); }
h3, .section-title, .card-title { font-size: var(--font-lg); font-weight: var(--w-bold); }

/* Section + card label hierarchy unified */
.card-tagline,
.upcoming-subtitle,
.qotd-text,
.day-strip-label,
.life-strip-meta,
.match-tap-hint,
.plans-foot-note,
.razorpay-sim-amount-sub,
.subscription-row-cta-text,
.referral-subtitle,
.referral-reward-note,
.match-subtitle,
.payment-subtitle,
.testimonial-blurb,
.app-tagline,
.input-hint,
.inline-hint {
  font-size: var(--font-sm);
  font-weight: var(--w-regular);
  color: var(--text-muted);
  line-height: 1.55;
}

/* Section + card padding consistent across the app */
.insight-card,
.plan-card,
.payment-card,
.referral-section,
.profile-section,
.subscription-row,
.match-result-card,
.muhurta-result-card,
.qotd-card,
.biggest-shift-card,
.birth-star-card,
.last-year-widget,
.todays-focus,
.retro-card,
.thinking-card {
  padding: var(--space-4) var(--space-5);
}
.today-card { padding: var(--space-6) var(--space-5) var(--space-5); }

/* Profile group label (Premium / You / Your chart / Credits & friends) */
.profile-group-label {
  font-size: var(--font-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* End typography + spacing pass */

/* ===== Today Card — fresh metrics panel ===== */

/* Delta tag below the score (yesterday-comparison) */
.today-gauge-delta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
.today-gauge-delta.up      { background: rgba(34,197,94,0.10);  color: #16a34a; }
.today-gauge-delta.down    { background: rgba(193,97,75,0.10);  color: #c1614b; }
.today-gauge-delta.neutral { background: rgba(0,0,0,0.05);      color: var(--text-muted); }

/* Body now carries the full daily letter — generous line-height */
.today-body {
  font-size: var(--font-md) !important;
  line-height: 1.65 !important;
  color: var(--text);
  max-width: 38ch;
  margin-bottom: 18px !important;
  white-space: pre-wrap;
}

/* Top-3 domain mini-bars — replaces the flat 6-bar Today's Pulse */
.today-domains {
  width: 100%;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-domains-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 6px;
  margin-bottom: 2px;
  text-align: left;
}
.today-domains-quiet { color: var(--text-soft); opacity: 0.7; }
.today-domain-row {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  text-align: left;
}
.today-domain-row-quiet { opacity: 0.7; }
.today-domain-label {
  font-weight: var(--w-semi);
  color: var(--text);
}
.today-domain-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.today-domain-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s ease-out;
}
.today-domain-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi);
  color: var(--text);
  text-align: right;
}

/* End fresh metrics panel */

/* Gauge label (above) + explainer (below) — give the score meaning */
.today-gauge-label {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.today-gauge-explainer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -4px;
  margin-bottom: 14px;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Today's tone — body / mind / social signals below the gauge */
.today-tone {
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(0,0,0,0.02));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.today-tone-row {
  display: grid;
  grid-template-columns: 22px 50px 64px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-align: left;
}
.today-tone-emoji { font-size: 16px; line-height: 1; }
.today-tone-label {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.today-tone-level {
  font-size: 11px;
  font-weight: var(--w-bold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-align: center;
  white-space: nowrap;
}
/* Tier colors per level — green peak / amber mid / rust low */
.today-tone-level-peak,
.today-tone-level-sharp,
.today-tone-level-open    { background: rgba(34,197,94,0.12);  color: #16a34a; }
.today-tone-level-good,
.today-tone-level-balanced,
.today-tone-level-steady   { background: rgba(245,158,11,0.12); color: var(--accent-strong); }
.today-tone-level-light,
.today-tone-level-foggy,
.today-tone-level-reserved { background: rgba(212,165,116,0.16); color: #b8860b; }
.today-tone-level-rest,
.today-tone-level-heavy,
.today-tone-level-inward    { background: rgba(193,97,75,0.10);  color: #c1614b; }
.today-tone-copy {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================================
 * FORECAST STRIP — 3-pill row of Today / Tomorrow / This week.
 * When all 3 windows share the same dominant area, swaps to a
 * single horizontal CURIOSITY BANNER that drives upgrade /
 * chat engagement.
 * ============================================================ */
.forecast-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: -4px 0 16px;     /* pull it slightly under the Today Card */
  padding: 0;
}
.forecast-strip.forecast-strip-deduped {
  display: block;          /* single horizontal banner, full width */
}
.forecast-pill.forecast-pill-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  background: linear-gradient(135deg, #fff 0%, #f9efe1 100%);
  border: 1px solid rgba(180, 140, 90, 0.22);
  box-shadow: 0 4px 16px rgba(60, 40, 0, 0.06);
  position: relative;
  overflow: hidden;
}
.forecast-pill.forecast-pill-banner::before {
  /* subtle warm edge glow on the left to draw the eye */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--pillar-physical) 0%, var(--text-honey-deep) 100%);
}
.forecast-banner-glyph {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.forecast-banner-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.forecast-banner-label {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-honey-deep);
  font-weight: 700;
}
.forecast-banner-line {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-cocoa);
  line-height: 1.4;
  font-family: var(--font-sans);
}
.forecast-banner-cta {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-honey-deep);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
}
.forecast-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px 12px;
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-sans);
  text-align: center;
}
.forecast-pill:hover,
.forecast-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 152, 0, 0.32);
  box-shadow: 0 8px 20px rgba(60, 40, 0, 0.06);
  outline: none;
}
.forecast-pill:active { transform: translateY(0); }
.forecast-pill-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.forecast-pill-glyph {
  font-size: 24px;
  line-height: 1;
  margin: 4px 0 2px;
}
.forecast-pill-area {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.forecast-pill-retro {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #c1614b;
  background: rgba(193, 97, 75, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* ============================================================
 * BIGGEST SHIFT — compress card → sleek pin tile
 * IMPORTANT: no `display:flex !important` — JS toggles inline
 * style="display:none" when no qualifying event exists; an
 * !important here would force the empty card visible.
 * The card's inline style="display:flex" (set by renderHookCards
 * when there's a chosen event) controls visibility.
 * ============================================================ */
.biggest-shift-card {
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, #fff 0%, #fff8ef 100%) !important;
  border: 1px solid rgba(255, 152, 0, 0.18) !important;
  border-radius: var(--radius-lg, 14px) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.biggest-shift-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 152, 0, 0.12) !important;
}
.biggest-shift-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 152, 0, 0.08);
  border-radius: 999px;
}
.biggest-shift-body { flex: 1; min-width: 0; }
.biggest-shift-label {
  font-size: 10px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-strong, #e87f00) !important;
  font-weight: 700;
  margin-bottom: 2px !important;
}
.biggest-shift-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text);
  line-height: 1.3 !important;
  margin: 0 !important;
}
.biggest-shift-meta {
  font-size: 12px !important;
  color: var(--text-muted);
  margin-top: 2px !important;
}
.biggest-shift-cta {
  font-size: 13px !important;
  color: var(--accent-strong, #e87f00) !important;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================
 * LAST-YEAR — compress widget → inline pill
 * ============================================================ */
.last-year-widget {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  background: rgba(244, 238, 251, 0.55) !important;
  border: 1px solid rgba(120, 90, 160, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  margin: 16px 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.last-year-icon {
  font-size: 16px !important;
  flex-shrink: 0;
  opacity: 0.7;
}
.last-year-details {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.last-year-label {
  font-size: 10px !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.last-year-text {
  font-size: 12px !important;
  color: var(--text-soft, var(--text-muted));
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* ============================================================
 * CHAT COUNTER CHIPS — '💬 X left  · 🔮 Y left' above the input.
 * Drives upgrade pull (free user sees they have ~3 chats left) and
 * surfaces tier benefits (Plus shows 'X/60 free this month').
 * ============================================================ */
.chat-counter-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 12px 4px;
  font-family: var(--font-sans);
}
.chat-counter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-muted, #74695b);
  background: rgba(255, 152, 0, 0.06);
  border: 1px solid rgba(255, 152, 0, 0.14);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-counter-chip:nth-child(2) {
  background: rgba(120, 90, 160, 0.06);
  border-color: rgba(120, 90, 160, 0.16);
  color: #6b4d8c;
}

/* ============================================================
 * DESKTOP / LAPTOP — wrap the app in a phone-shaped frame so the
 * mobile-first UI doesn't stretch awkwardly across a wide monitor.
 * Centered, capped to ~430px (iPhone-Pro-Max-ish), with a soft
 * page background so the frame reads as a device, not a flat
 * wall. Mobile (≤480px) untouched — full-bleed as before.
 * ============================================================ */
@media (min-width: 768px) {
  body {
    background: linear-gradient(180deg, #f4eee2 0%, #e8dcc4 100%);
    min-height: 100vh;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(255, 152, 0, 0.06) 0%, transparent 60%);
    z-index: 0;
  }
  /* Constrain both auth + main app to a phone-width frame */
  #authScreen,
  #mainApp {
    max-width: 430px;
    margin: 24px auto;
    min-height: calc(100vh - 48px);
    background: var(--bg-cream, #fefaf3);
    border-radius: 36px;
    box-shadow:
      0 20px 60px -20px rgba(60, 40, 0, 0.25),
      0 6px 18px -8px rgba(60, 40, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  /* Bottom tab nav, modals, and sticky chat bar all need to live
     inside the frame too. Constrain via the same width on the
     position:fixed elements. */
  .bottom-nav,
  #plansModal .modal-card,
  #razorpaySimModal .modal-card,
  .modal-overlay {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 0 0 36px 36px;
    width: 100%;
  }
  /* Match-chat overlay: same phone-frame constraint as the rest of
     the app, so it doesn't sprawl across the desktop viewport.
     IMPORTANT: do NOT add `inset: auto` here — it's the shorthand for
     top/right/bottom/left and will silently undo the positioning above
     it (was an old bug that broke desktop match-chat opening). */
  .match-session {
    max-width: 430px;
    top: 24px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 36px;
    overflow: hidden;
    height: calc(100vh - 48px);
    box-shadow:
      0 20px 60px -20px rgba(60, 40, 0, 0.25),
      0 6px 18px -8px rgba(60, 40, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  }
  /* Match-chat header — on desktop the phone-frame is only 430px so
     the original 2-line title + uppercase subtitle layout wraps to
     5+ lines once the Analysis toggle is in the row. Inline the sub
     beside the title and let the title ellipsis on long partner
     names — same shape as Aura chat's chat-mode-bar. Mobile keeps
     the original stacked layout (no override below this rule). */
  .match-session-header {
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    padding: 10px 14px;
  }
  .match-session-back {
    width: 32px; height: 32px;
    font-size: 16px;
  }
  .match-session-id {
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
  }
  .match-session-title {
    font-size: var(--t-xl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
  }
  .match-session-sub {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--t-md);
    color: var(--text-taupe);
    letter-spacing: 0.1px;
    font-weight: 500;
    text-transform: none;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* On desktop, drop the literal "Compatibility chat" subtitle text —
     the amber-gradient frame + partner name already communicate the
     context, and the quota-inline span already prefixes itself with
     "· ∞ left". Keeping the subtitle would force a 3-segment header
     ("You & X · Compatibility chat · ∞ left") that won't fit inside
     the 430px frame next to the Analysis toggle. Mobile keeps the
     full stacked label. */
  .match-session-sub > span:first-child {
    display: none;
  }
}
/* Larger desktop — keep frame the same size but add more breathing room */
@media (min-width: 1200px) {
  #authScreen,
  #mainApp {
    margin: 40px auto;
    min-height: calc(100vh - 80px);
  }
}

/* ============================================================
 * CHAT INLINE TABLES (Phase 1 intent router)
 * Used when chat detects a "list / show me" intent and renders
 * tabular data directly instead of asking the LLM. Tappable rows
 * drill into a follow-up question.
 * ============================================================ */
.message-content-table {
  padding: 0 !important;
  background: transparent !important;
}
.chat-tbl-wrap {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-sm);
  padding: 14px 4px 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.chat-tbl-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(60, 40, 0, 0.06);
  margin-bottom: 4px;
}
.chat-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--text);
}
.chat-tbl thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(60, 40, 0, 0.06);
}
.chat-tbl tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(60, 40, 0, 0.04);
  vertical-align: middle;
}
.chat-tbl tbody tr:last-child td { border-bottom: none; }
.chat-tbl-row {
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.chat-tbl-row:hover,
.chat-tbl-row:focus-visible {
  background: rgba(255, 152, 0, 0.04);
  outline: none;
}
.chat-tbl-row:active { background: rgba(255, 152, 0, 0.08); }
.chat-tbl-row-current { background: rgba(255, 152, 0, 0.08); }
.chat-tbl-row-current td { font-weight: 600; }
.chat-tbl-row-current:hover { background: rgba(255, 152, 0, 0.12); }
.chat-tbl-row-past td { color: var(--text-muted); opacity: 0.85; }
.chat-tbl-row-future td { color: var(--text-soft, var(--text-muted)); }
.chat-tbl-planet {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chat-tbl-icon {
  font-size: 16px;
  width: 28px;
  text-align: center;
  padding-right: 0 !important;
}
.chat-tbl-date { white-space: nowrap; }
.chat-tbl-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}
.chat-tbl-status-current,
.chat-tbl-status-active {
  background: rgba(255, 152, 0, 0.16);
  color: #b56700;
}
.chat-tbl-status-past,
.chat-tbl-status-spent {
  background: rgba(60, 40, 0, 0.06);
  color: var(--text-muted);
}
.chat-tbl-status-future,
.chat-tbl-status-coming,
.chat-tbl-status-dormant {
  background: rgba(120, 90, 160, 0.08);
  color: #6b4d8c;
}
.chat-tbl-status-maturing {
  background: rgba(86, 145, 87, 0.12);
  color: #3a7a3b;
}
.chat-tbl-hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 12px 0;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}

/* ============================================================
 * TODAY RADAR — 6-axis polygon chart of today's domain shape
 * ============================================================ */
.today-radar {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding-lg);
  margin: 12px 0 18px;
  box-shadow: var(--card-shadow);
  text-align: center;
}
.radar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.radar-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text);
}
.radar-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.radar-body {
  display: flex;
  justify-content: center;
}
.radar-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}
.radar-ring {
  fill: none;
  stroke: rgba(60, 40, 0, 0.08);
  stroke-width: 1;
}
.radar-ring:nth-child(odd) { stroke-dasharray: 2 3; }
.radar-axis {
  stroke: rgba(60, 40, 0, 0.10);
  stroke-width: 1;
}
.radar-shape {
  stroke: var(--accent, #ff9800);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(255, 152, 0, 0.12));
}
.radar-dot {
  fill: var(--accent, #ff9800);
  stroke: #fff;
  stroke-width: 1.5;
}
.radar-label {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.radar-label:hover .radar-label-hit,
.radar-label:focus-visible .radar-label-hit {
  fill: rgba(255, 152, 0, 0.08);
  stroke: rgba(255, 152, 0, 0.25);
}
.radar-label:focus-visible { outline: none; }
.radar-label-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.radar-label-emoji {
  font-size: 14px;
  pointer-events: none;
}
.radar-label-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  fill: var(--text-muted);
  pointer-events: none;
}
.radar-label-score {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text);
  pointer-events: none;
}
.radar-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}

/* ============================================================
 * POLAR BLOOM — 6-petal flower replacing the polygon radar.
 * Each petal coloured by its domain (work/love/money/...).
 * ============================================================ */
.today-bloom .radar-body { padding: 4px 0 8px; }
.bloom-svg { width: 100%; max-width: 320px; height: auto; display: block; }
.bloom-ring {
  fill: none;
  stroke: rgba(60, 40, 0, 0.06);
  stroke-width: 1;
}
.bloom-petal {
  cursor: pointer;
  transition: fill-opacity 0.18s ease, transform 0.18s ease;
  transform-origin: 130px 130px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.04));
}
.bloom-petal:hover,
.bloom-petal:focus-visible {
  fill-opacity: 0.85 !important;
  outline: none;
  transform: scale(1.04);
}
.bloom-center { fill: rgba(60, 40, 0, 0.4); }
.bloom-label-emoji { font-size: 14px; pointer-events: none; }
.bloom-label-text {
  font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; fill: var(--text-muted); pointer-events: none;
}
.bloom-label-score {
  font-size: 11px; font-weight: 700; fill: var(--text); pointer-events: none;
}

/* ============================================================
 * ENERGY PORTAL — 3 pillars (Physical / Mental / Emotional)
 * Centerpiece of the redesigned Insights tab. Each pillar:
 *   · pulsing radial orb (size + glow tied to score)
 *   · 7-day waveform with today highlighted
 *   · trend arrow vs the week's average
 *   · chart-tied 1-line tip
 *   · tap → bottom-sheet deep-dive
 * ============================================================ */
.energy-portal-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-align: center;
  margin: -6px 0 14px;
  font-style: italic;
}
.energy-portal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.energy-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-xl, 18px);
  padding: 20px 18px 16px;
  box-shadow: 0 4px 18px rgba(60, 40, 0, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(180, 140, 90, 0.14);
  overflow: hidden;            /* keep border-radius clean on the top stripe */
}
.energy-pillar:hover, .energy-pillar:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(60, 40, 0, 0.10);
  outline: none;
}
/* Pillar identity stripe at the top — softer, brand-aligned earth tones */
.energy-pillar-physical { border-top: 2.5px solid #c89770; }   /* warm honey */
.energy-pillar-mental   { border-top: 2.5px solid #a59ec0; }   /* soft mauve */
.energy-pillar-emotional{ border-top: 2.5px solid #c89eaf; }   /* dusty rose */

.energy-pillar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;          /* allow text-overflow on long titles */
}
.energy-pillar-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.energy-pillar-title {
  flex: 1;
  min-width: 0;          /* lets it shrink without breaking layout */
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.energy-pillar-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;        /* never compress on narrow screens */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  line-height: 1;
}
.energy-pillar-trend-arrow { font-size: 13px; line-height: 1; }
.energy-pillar-trend-num { font-size: 11px; }
/* Trend pill colours — wellness palette, not bright SaaS green/red */
.energy-pillar-trend.trend-up   { background: #dee9d8; color: #5e8868; }  /* sage */
.energy-pillar-trend.trend-down { background: #ebd4d8; color: #92697a; }  /* dusty rose */
.energy-pillar-trend.trend-flat { background: #ede4d6; color: var(--text-taupe); }  /* warm taupe */

/* ===== Apple-Watch-style FILL RING for each pillar =====
   Same primitive as the Day Strength gauge + Match score gauge.
   Track + fill arc, score number centred on top. */
.pillar-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 6px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar-ring {
  width: 140px;
  height: 140px;
  display: block;
  transform: rotate(-90deg);          /* fill starts at 12 o'clock */
}
.pillar-ring-track {
  fill: none;
  stroke: rgba(120, 90, 60, 0.16);    /* slightly darker so the empty arc reads */
  stroke-width: 9;
}
.pillar-ring-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 364;
  stroke-dashoffset: 364;              /* starts empty until JS sets it */
  /* Slow + smooth — the user must SEE the ring fill in clockwise. */
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.9, 0.4, 1);
  filter: drop-shadow(0 2px 5px rgba(60, 40, 0, 0.14));
}

/* ============================================================
 * TIER-LOCKED PILLAR — score, fill arc, trend, waveform all
 * obscured for free users. They see the shape (orb + cards) +
 * '🔒 Premium' overlay; they DO NOT see the actual scores.
 * ============================================================ */
.tier-locked .pillar-ring-score {
  color: transparent !important;
  text-shadow: none !important;
}
.tier-locked .pillar-ring-fill {
  /* Fixed ~25% fill arc — non-revealing of the real score. */
  stroke-dashoffset: 273 !important;
  transition: none !important;
}
.tier-locked .energy-pillar-trend {
  visibility: hidden;
}
.tier-locked .energy-wave-bar {
  fill: rgba(120, 90, 60, 0.20) !important;   /* uniform muted bars */
}
.tier-locked .energy-wave-tick {
  fill: transparent !important;                /* hide day labels too */
}
.tier-locked .energy-pillar-tip {
  filter: blur(4px);                           /* extra blur on the tip text */
}
.pillar-ring-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 248, 235, 0.9);
  transition: color 0.4s ease;
  pointer-events: none;
}

.energy-pillar-explainer {
  /* Italic serif for elegance — matches LifeIndex Aura wordmark */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--text-taupe);
  text-align: center;
  letter-spacing: 0.1px;
  margin-bottom: 6px;
  font-weight: 500;
}
.energy-waveform {
  display: block;
  margin: 4px auto 12px;
  max-width: 240px;
  width: 100%;
  text-align: center;
}
.energy-wave-svg { width: 100%; height: 44px; display: block; }
.energy-wave-bar { transition: opacity 0.3s ease; }
.energy-wave-bar.is-today {
  filter: drop-shadow(0 1px 3px rgba(255, 152, 0, 0.4));
}
.energy-wave-tick {
  font-size: 8.5px;
  fill: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.energy-pillar-tip {
  font-size: var(--t-md);
  color: var(--text-cocoa);
  text-align: center;
  line-height: 1.55;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 400;
  font-family: var(--font-sans);
}
.energy-pillar-cta {
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: right;
  color: var(--text-taupe);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ============================================================
 * PILLAR DEEP-DIVE SHEET — slides up from the bottom on tap
 * ============================================================ */
.pillar-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.pillar-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 14, 6, 0);
  pointer-events: auto;
  transition: background 0.25s ease;
}
.pillar-sheet.show .pillar-sheet-backdrop { background: rgba(20, 14, 6, 0.42); }
.pillar-sheet-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 18px 18px 24px;
  box-shadow: 0 -10px 40px rgba(60, 40, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.4, 1);
  pointer-events: auto;
  max-height: 84vh;
  overflow-y: auto;
}
.pillar-sheet.show .pillar-sheet-card { transform: translateY(0); }
.pillar-sheet-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(60, 40, 0, 0.06);
  border-radius: 999px;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.pillar-sheet-head {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 16px;
}
.pillar-sheet-icon { font-size: 22px; }
.pillar-sheet-title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
}
.pillar-sheet-score {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-strong);
  background: rgba(255, 152, 0, 0.10);
  padding: 4px 12px;
  border-radius: 999px;
}
.pillar-sheet-section { margin-bottom: 20px; }
.pillar-sheet-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pillar-sheet-section-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 8px;
}
.pillar-sheet-factor {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(60, 40, 0, 0.06);
  font-size: 13px;
}
.pillar-sheet-factor:last-child { border-bottom: none; }
.pillar-sheet-factor-icon { font-size: 16px; }
.pillar-sheet-factor-text { flex: 1; color: var(--text); }
.pillar-sheet-factor-delta {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.pillar-sheet-factor-delta.pos { background: rgba(16, 185, 129, 0.12); color: #047857; }
.pillar-sheet-factor-delta.neg { background: rgba(193, 97, 75, 0.12); color: #b54321; }
.pillar-sheet-actions { display: flex; justify-content: center; margin-top: 8px; }
.pillar-sheet-ask {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--accent, #f59e0b) 0%, #ff8a3d 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 138, 61, 0.32);
}

/* ============================================================
 * TIME-OF-DAY ENERGY CURVE — Body / Mind / Social through the day
 * ============================================================ */
.time-curve-card {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 16px 14px 12px;
  margin: 12px 0 16px;
  box-shadow: var(--card-shadow);
}
.time-curve-header {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 6px;
}
.time-curve-title {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text);
}
.time-curve-subtitle { font-size: 11px; color: var(--text-muted); }
.time-curve-body { display: block; }
.time-curve-svg { width: 100%; height: 110px; display: block; }
.time-curve-axis { stroke: rgba(60, 40, 0, 0.08); stroke-width: 1; }
.time-curve-now { stroke: rgba(60, 40, 0, 0.20); stroke-width: 1; stroke-dasharray: 2 3; }
.time-curve-line {
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
.time-curve-body  { stroke: var(--accent); }
.time-curve-mind  { stroke: #8b5cf6; }
.time-curve-social { stroke: #06b6d4; }
.time-curve-tick {
  font-size: 9px; fill: var(--text-muted); font-weight: 600; letter-spacing: 0.5px;
}
.time-curve-legend {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.time-curve-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.time-curve-swatch {
  display: inline-block; width: 10px; height: 3px; border-radius: 2px;
}
.time-curve-swatch-body   { background: var(--accent); }
.time-curve-swatch-mind   { background: #8b5cf6; }
.time-curve-swatch-social { background: #06b6d4; }

/* ============================================================
 * WEEK HEAT GRID — 7 day-strength cells in a row
 * ============================================================ */
.week-grid-card {
  background: var(--bg-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin: 12px 0 16px;
  box-shadow: var(--card-shadow);
}
.week-grid-header {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px;
}
.week-grid-title {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text);
}
.week-grid-subtitle { font-size: 11px; color: var(--text-muted); }
.week-grid-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.wk-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px 4px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  background: rgba(255, 255, 255, 0.6);
}
.wk-cell:hover, .wk-cell:focus-visible {
  transform: translateY(-2px); outline: none; border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(60, 40, 0, 0.08);
}
.wk-cell-day {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-muted);
}
.wk-cell-num { font-size: 13px; font-weight: 700; color: var(--text); }
.wk-cell-score { font-size: 10px; font-weight: 700; opacity: 0.85; }
.wk-cell-low    { background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.30); color: #6b4da6; }
.wk-cell-low .wk-cell-score { color: #6b4da6; }
.wk-cell-mid    { background: rgba(255, 152, 0, 0.16); border-color: rgba(255, 152, 0, 0.32); color: #b56700; }
.wk-cell-mid .wk-cell-score { color: #b56700; }
.wk-cell-high   { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.30); color: #047857; }
.wk-cell-high .wk-cell-score { color: #047857; }
.wk-cell-today  {
  outline: 2px solid var(--accent, #f59e0b);
  outline-offset: -2px;
}
.wk-cell-locked .wk-cell-day,
.wk-cell-locked .wk-cell-num,
.wk-cell-locked .wk-cell-score { filter: blur(2px); opacity: 0.55; }
.wk-cell-lock {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  pointer-events: none;
}
.week-grid-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 12px;
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.week-grid-legend-bar {
  display: inline-block; width: 80px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(167,139,250,0.6) 0%, rgba(255,152,0,0.6) 50%, rgba(16,185,129,0.6) 100%);
}

/* ============================================================
 * ANALYSIS MODE TOGGLE — locked variant for free users.
 * Toggle is visible but desaturated, with a 🔒 Premium chip
 * appended. Click → Plans modal (handled in JS).
 * ============================================================ */
.chat-mode-bar.analysis-locked {
  opacity: 0.95;
}
.chat-mode-bar.analysis-locked .chat-mode-toggle-track {
  filter: grayscale(0.5) opacity(0.6);
  pointer-events: none;
}
.chat-mode-bar.analysis-locked .chat-mode-toggle {
  cursor: pointer;
}
.analysis-toggle-lock {
  margin-left: 6px;
}