/* ============================================================
   KÍRA – PERIOD TRACKER  v1.3
   styles.css  ·  Soft Bloom aesthetic · Mobile-first
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --purple-deep:  #4a0e72;
  --purple-core:  #6a1b9a;
  --purple-mid:   #8e24aa;
  --purple-light: #ce93d8;
  --purple-faint: #f3e5f5;
  --purple-ultra: #faf0ff;
  --pink-mid:     #f48fb1;
  --white:        #ffffff;
  --text-primary: #2d0845;
  --text-secondary:#7b5ea7;
  --text-muted:   #b39dce;
  --border:       rgba(106,27,154,0.13);
  --success:      #4caf50;
  --danger:       #e57373;

  --shadow-sm:  0 2px 12px rgba(106,27,154,0.09);
  --shadow-md:  0 4px 24px rgba(106,27,154,0.13);
  --shadow-lg:  0 8px 40px rgba(106,27,154,0.20);
  --shadow-btn: 0 4px 18px rgba(106,27,154,0.38);
  --inner-glow: inset 0 1px 0 rgba(255,255,255,0.85);

  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-full: 999px;
  --gap: 6px; --gap-sm: 12px; --gap-md: 18px; --gap-lg: 24px; --gap-xl: 32px;

  --ease:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-s: cubic-bezier(0.4,0,0.2,1);

  --nav-h:  72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:'Nunito',sans-serif; font-weight:500; color:var(--text-primary); background:var(--purple-ultra); min-height:100dvh; overflow-x:hidden; line-height:1.5; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
textarea,input { font-family:inherit; outline:none; }
a { color:inherit; }
.hidden { display:none !important; }
body.modal-open { overflow:hidden; }
body.privacy-mode .cycle-day-num, body.privacy-mode .meta-val, body.privacy-mode .hint-text,
body.privacy-mode .log-entry-desc, body.privacy-mode .history-date {
  filter:blur(7px) saturate(0.4); user-select:none; transition:filter 0.4s var(--ease-s);
}

/* ── Shared Components ─────────────────────────────────────── */
.card {
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm),var(--inner-glow); padding:var(--gap-md);
  margin-bottom:var(--gap-md); border:1px solid var(--border);
  animation:cardIn 0.35s var(--ease-s) both; animation-delay:var(--card-delay,0ms);
}
@keyframes cardIn { from{opacity:0;transform:translateY(10px) scale(0.99)} to{opacity:1;transform:none} }

.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:var(--gap);
  background:var(--white); color:var(--purple-core); font-weight:800; font-size:1rem;
  border-radius:var(--r-full); padding:16px 28px; box-shadow:var(--shadow-btn);
  transition:transform 0.2s var(--ease),box-shadow 0.2s; width:100%; position:relative; overflow:hidden;
}
.btn-primary:active { transform:scale(0.96); box-shadow:0 2px 8px rgba(106,27,154,0.22); }
.btn-lg { font-size:1.05rem; padding:18px 28px; }
.arrow  { font-size:1.2rem; display:inline-block; transition:transform 0.2s var(--ease); }
.btn-primary:hover .arrow { transform:translateX(5px); }

.icon-btn { width:42px; height:42px; border-radius:var(--r-full); background:var(--purple-faint); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:background 0.2s,transform 0.15s var(--ease); }
.icon-btn:active { transform:scale(0.88); background:var(--purple-light); }
.text-btn { font-size:0.82rem; font-weight:700; color:var(--purple-core); }
.nexacore-link { color:var(--purple-core); font-weight:800; text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color 0.2s; }
.nexacore-link:hover { border-bottom-color:var(--purple-light); }

/* ── Screen Management ─────────────────────────────────────── */
.onboarding-screen { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(160deg,#7b1fa2 0%,#4a0e72 60%,#1a0030 100%); overflow:hidden; }
#app { position:relative; min-height:100dvh; }
#app.hidden { display:none; }
.app-screen { display:none; padding:var(--gap-md) var(--gap-md) calc(var(--nav-h) + var(--safe-b) + var(--gap-lg)); min-height:100dvh; overflow-y:auto; }
.app-screen.active-screen { display:block; }
.screen-in  { animation:screenIn  0.3s var(--ease-s) both; }
.screen-out { animation:screenOut 0.22s var(--ease-s) both; pointer-events:none; }
@keyframes screenIn  { from{opacity:0;transform:translateY(14px) scale(0.99)} to{opacity:1;transform:none} }
@keyframes screenOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-8px) scale(1.01)} }

/* ── Onboarding ────────────────────────────────────────────── */
.ob-bg { position:absolute; inset:0; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.4; animation:blobPulse 6s ease-in-out infinite alternate; }
.b1 { width:340px;height:340px;background:radial-gradient(circle,#ce93d8,transparent 70%);top:-80px;left:-80px; }
.b2 { width:280px;height:280px;background:radial-gradient(circle,#f48fb1,transparent 70%);top:30%;right:-60px;animation-delay:2s; }
.b3 { width:220px;height:220px;background:radial-gradient(circle,#9c27b0,transparent 70%);bottom:20%;left:10%;animation-delay:4s; }
@keyframes blobPulse { from{transform:scale(1)} to{transform:scale(1.2) translate(20px,-20px)} }
.ob-panel { position:relative;z-index:2;background:rgba(255,255,255,0.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.15);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--gap-xl) var(--gap-lg) calc(var(--gap-xl) + var(--safe-b));color:var(--white);display:flex;flex-direction:column;gap:var(--gap-md); }
.ob-logo { display:flex;align-items:center;gap:var(--gap-sm); }
.ob-flower { font-size:2.2rem;animation:floatBloom 3s ease-in-out infinite; }
@keyframes floatBloom { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-6px) rotate(5deg)} }
.ob-brand { font-family:'DM Serif Display',serif;font-size:2.2rem;font-style:italic; }
.ob-headline { font-family:'DM Serif Display',serif;font-size:2rem;line-height:1.2; }
.ob-headline em { font-style:italic;color:var(--purple-light); }
.ob-sub { font-size:0.95rem;color:rgba(255,255,255,0.8);line-height:1.6; }
.ob-pills { display:flex;flex-wrap:wrap;gap:var(--gap); }
.pill { background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-full);padding:6px 14px;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.9); }
.ob-footer { text-align:center;font-size:0.78rem;color:rgba(255,255,255,0.5); }

/* ── Screen Header ─────────────────────────────────────────── */
.screen-header { display:flex;align-items:center;justify-content:space-between;padding:var(--gap-md) 0 var(--gap-sm); }
.screen-label  { font-size:0.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em; }
.screen-title  { font-family:'DM Serif Display',serif;font-size:1.75rem;color:var(--text-primary);line-height:1.2; }
.screen-subtitle { font-size:0.85rem;color:var(--text-secondary);font-weight:600; }
.screen-date { font-size:0.8rem;font-weight:600;color:var(--text-muted);background:var(--purple-faint);padding:4px 10px;border-radius:var(--r-full); }
.header-actions { display:flex;align-items:center;gap:var(--gap); }

/* ── Home / Cycle Ring ─────────────────────────────────────── */
.empty-card { background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--gap-xl) var(--gap-lg);text-align:center;border:2px dashed var(--purple-light);margin-top:var(--gap-md); }
.empty-icon  { font-size:3rem;margin-bottom:var(--gap-md); }
.empty-card h3 { font-family:'DM Serif Display',serif;font-size:1.4rem;margin-bottom:var(--gap);color:var(--text-primary); }
.empty-card p  { font-size:0.9rem;color:var(--text-secondary);line-height:1.55;margin-bottom:var(--gap-lg); }

.card-hero { display:flex;flex-direction:column;align-items:center;gap:var(--gap-md);padding:var(--gap-lg);background:linear-gradient(145deg,#f0e6ff,#fde8f0 60%,#faf0ff);border:1px solid rgba(206,147,216,0.3);box-shadow:var(--shadow-lg),var(--inner-glow);position:relative;overflow:hidden; }
.card-hero::before { content:'';position:absolute;top:-40%;left:-60%;width:60%;height:180%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.5) 50%,transparent 60%);animation:shimmer 5s ease-in-out infinite;pointer-events:none; }
@keyframes shimmer { 0%{left:-60%;opacity:0} 10%{opacity:1} 40%{left:120%;opacity:1} 41%{opacity:0} 100%{left:120%;opacity:0} }

.ring-wrap { position:relative;width:148px;height:148px;flex-shrink:0; }
.cycle-ring { width:100%;height:100%; }
.ring-track    { fill:none;stroke:rgba(106,27,154,0.10);stroke-width:10; }
.ring-progress { fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1);filter:drop-shadow(0 0 4px rgba(142,36,170,0.35)); }
.ring-inner { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.ring-day   { font-family:'DM Serif Display',serif;font-size:2.6rem;line-height:1;color:var(--purple-core); }
.ring-label { font-size:0.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px; }

.meta-row { display:flex;align-items:center;gap:var(--gap-md);width:100%; }
.meta-item { flex:1;display:flex;align-items:center;gap:var(--gap); }
.meta-icon { font-size:1.4rem; }
.meta-label { font-size:0.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em; }
.meta-val   { font-size:0.95rem;font-weight:800;color:var(--text-primary); }
.meta-sep   { width:1px;height:36px;background:rgba(106,27,154,0.15); }

.period-banner { background:linear-gradient(135deg,#fce4ec,#f3e5f5);border:1.5px solid var(--pink-mid);border-radius:var(--r-md);padding:13px var(--gap-md);font-size:0.9rem;font-weight:700;color:#880e4f;margin-bottom:var(--gap-md);box-shadow:0 4px 16px rgba(244,143,177,0.2);animation:slideDown 0.35s var(--ease) both; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

.card-hint { background:linear-gradient(135deg,#ede7f6,#fce4ec);border:none;display:flex;flex-direction:column;gap:4px; }
.hint-label { font-size:0.72rem;font-weight:700;color:var(--purple-mid);text-transform:uppercase;letter-spacing:0.08em; }
.hint-text  { font-size:0.95rem;color:var(--text-primary);font-weight:600;line-height:1.5; }

/* ── Gamification Card ─────────────────────────────────────── */
.card-gamif { background:linear-gradient(145deg,#ede7f6,#fce4ec);border:1px solid rgba(206,147,216,0.25);box-shadow:var(--shadow-sm),var(--inner-glow); }
.gamif-row  { display:flex;align-items:center;justify-content:space-around;margin-bottom:var(--gap-md); }
.gamif-block { display:flex;align-items:center;gap:var(--gap); }
.gamif-emoji { font-size:1.5rem; }
.gamif-lbl  { font-size:0.68rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em; }
.gamif-val  { font-size:0.92rem;font-weight:800;color:var(--text-primary); }
.gamif-sep  { width:1px;height:32px;background:rgba(106,27,154,0.15); }
.progress-wrap { margin-bottom:var(--gap-sm); }
.progress-bar  { height:8px;background:rgba(106,27,154,0.10);border-radius:var(--r-full);overflow:hidden;margin-bottom:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.08); }
.progress-fill { height:100%;background:linear-gradient(90deg,var(--purple-light),var(--purple-core),var(--purple-mid));background-size:200%;border-radius:var(--r-full);width:0%;transition:width 1.2s cubic-bezier(0.4,0,0.2,1);animation:progressShimmer 3s linear infinite; }
@keyframes progressShimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
.progress-label { font-size:0.7rem;font-weight:700;color:var(--text-muted);text-align:right; }
.badge-shelf { display:flex;gap:var(--gap);flex-wrap:wrap; }
.badge-shelf:empty { display:none; }
.badge-pill  { display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.75);border:1.5px solid rgba(106,27,154,0.15);border-radius:var(--r-full);padding:4px 10px;font-size:0.72rem;font-weight:700;color:var(--text-secondary);animation:badgePop 0.45s var(--ease) both;box-shadow:0 1px 4px rgba(106,27,154,0.1); }
@keyframes badgePop { from{transform:scale(0) rotate(-10deg);opacity:0} 70%{transform:scale(1.08) rotate(2deg);opacity:1} to{transform:scale(1);opacity:1} }

/* ── Quick Mood Strip ──────────────────────────────────────── */
.quick-strip  { margin-bottom:var(--gap-md); }
.strip-label  { font-size:0.78rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--gap-sm); }
.mood-quick-row { display:flex;gap:var(--gap-sm);overflow-x:auto;padding-bottom:4px;scrollbar-width:none; }
.mood-quick-row::-webkit-scrollbar { display:none; }
.mood-quick-btn { flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--white);border:2px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-size:1.4rem;box-shadow:var(--shadow-sm);transition:transform 0.18s var(--ease),border-color 0.2s,background 0.2s; }
.mood-quick-btn .mood-label-sm { font-size:0.65rem;font-weight:700;color:var(--text-secondary); }
.mood-quick-btn.selected,.mood-quick-btn:active { border-color:var(--purple-core);background:var(--purple-faint);transform:scale(1.08); }
@keyframes pointsBounce { 0%{transform:scale(1)} 30%{transform:scale(1.3) rotate(-5deg)} 55%{transform:scale(0.9) rotate(3deg)} 75%{transform:scale(1.08)} 100%{transform:scale(1)} }
.points-chip { display:flex;align-items:center;gap:4px;background:var(--purple-faint);border:1.5px solid var(--border);border-radius:var(--r-full);padding:6px 12px;font-size:0.82rem;font-weight:800;color:var(--purple-core);transition:transform 0.18s var(--ease); }
.points-chip.bounce { animation:pointsBounce 0.55s var(--ease) both; }

/* ── Recent Logs ───────────────────────────────────────────── */
.card-row-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-sm); }
.card-section-title { font-size:0.85rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em; }
.empty-state { font-size:0.9rem;color:var(--text-muted);text-align:center;padding:var(--gap-md) 0; }
.log-entry { display:flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm) 0;border-bottom:1px solid var(--border); }
.log-entry:last-child { border-bottom:none; }
.log-entry-emoji { font-size:1.4rem; }
.log-entry-body  { flex:1;min-width:0; }
.log-entry-date  { font-size:0.72rem;font-weight:700;color:var(--text-muted); }
.log-entry-desc  { font-size:0.88rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ── Log Screen ────────────────────────────────────────────── */
.error-banner { display:flex;align-items:center;gap:var(--gap-sm);background:#fff3f3;border:1.5px solid #ffcccc;border-radius:var(--r-md);padding:12px var(--gap-md);margin-bottom:var(--gap-md);font-size:0.88rem;font-weight:700;color:#c62828; }
.error-banner span:nth-child(2) { flex:1; }
.error-banner button { font-size:0.85rem;color:#c62828;padding:2px 6px;border-radius:var(--r-sm); }
.log-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-sm); }
.log-section-title { font-size:0.9rem;font-weight:800;color:var(--text-primary);margin-bottom:var(--gap-sm); }
.log-hint { font-size:0.82rem;color:var(--text-secondary);font-weight:600;margin-top:var(--gap);line-height:1.45; }
.active-badge { font-size:0.72rem;font-weight:800;color:#c62828;background:#ffebee;border:1px solid #ffcdd2;padding:3px 10px;border-radius:var(--r-full);animation:activePulse 2s ease-in-out infinite; }
@keyframes activePulse { 0%,100%{box-shadow:0 0 0 0 rgba(229,115,115,0)} 50%{box-shadow:0 0 0 4px rgba(229,115,115,0.25)} }

.date-row   { display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--gap-sm); }
.date-label { font-size:0.78rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;min-width:48px; }
.date-btn   { flex:1;display:flex;align-items:center;gap:var(--gap-sm);background:var(--purple-ultra);border:2px solid var(--border);border-radius:var(--r-md);padding:10px 14px;transition:border-color 0.2s,background 0.2s,transform 0.15s var(--ease);text-align:left; }
.date-btn:not(:disabled):active { transform:scale(0.98); }
.date-btn:disabled { opacity:0.45;cursor:not-allowed; }
.date-btn.date-filled { border-color:var(--purple-core);background:var(--purple-faint); }
.date-btn span:nth-child(2) { flex:1;font-size:0.88rem;font-weight:700;color:var(--text-primary); }
.date-btn:disabled span:nth-child(2) { color:var(--text-muted); }
.chevron { font-size:1.1rem;color:var(--text-muted);font-weight:700; }
.btn-period-save { width:100%;margin-top:var(--gap-sm);background:var(--purple-faint);border:2px solid var(--purple-core);border-radius:var(--r-full);color:var(--purple-core);font-size:0.9rem;font-weight:800;padding:12px;transition:background 0.2s,transform 0.15s var(--ease); }
.btn-period-save:active { background:var(--purple-light);transform:scale(0.97); }

.mood-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-sm);margin-bottom:var(--gap); }
.mood-btn  { display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--border);border-radius:var(--r-md);padding:12px 6px;background:var(--purple-ultra);transition:transform 0.2s var(--ease),border-color 0.18s,background 0.18s,box-shadow 0.18s; }
.mood-btn .mood-emoji { font-size:1.6rem;transition:transform 0.2s var(--ease); }
.mood-btn .mood-name  { font-size:0.65rem;font-weight:700;color:var(--text-secondary);text-align:center; }
.mood-btn.selected { border-color:var(--purple-core);background:linear-gradient(145deg,var(--purple-faint),#fde8f5);transform:scale(1.07);box-shadow:0 4px 16px rgba(106,27,154,0.18),0 0 0 3px rgba(106,27,154,0.1); }
.mood-btn.selected .mood-emoji { transform:scale(1.15) rotate(-5deg); }
.mood-btn:active { transform:scale(0.93); }
.mood-selected { font-size:0.88rem;font-weight:600;min-height:22px;padding:4px 0;transition:color 0.25s; }

.symptom-chips { display:flex;flex-wrap:wrap;gap:var(--gap); }
.symptom-chip  { border:2px solid var(--border);border-radius:var(--r-full);padding:7px 14px;font-size:0.82rem;font-weight:700;color:var(--text-secondary);background:var(--purple-ultra);transition:all 0.18s var(--ease-s); }
.symptom-chip.selected { background:var(--purple-faint);border-color:var(--purple-core);color:var(--purple-core); }
.symptom-chip:active { transform:scale(0.95); }

.flow-row   { display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--gap); }
.flow-label { font-size:0.75rem;font-weight:700;color:var(--text-muted);white-space:nowrap; }
.flow-slider { flex:1;-webkit-appearance:none;height:6px;border-radius:var(--r-full);background:linear-gradient(to right,var(--purple-light),var(--purple-core));outline:none; }
.flow-slider::-webkit-slider-thumb { -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--purple-core);box-shadow:0 0 0 4px rgba(106,27,154,0.2);cursor:pointer;transition:transform 0.15s var(--ease); }
.flow-slider::-webkit-slider-thumb:active { transform:scale(1.2); }
.flow-val { text-align:center;font-size:0.82rem;font-weight:800;color:var(--purple-core); }

.log-textarea { width:100%;border:2px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-size:0.9rem;color:var(--text-primary);background:var(--purple-ultra);resize:none;transition:border-color 0.2s,background 0.2s;line-height:1.5; }
.log-textarea:focus { border-color:var(--purple-core);background:var(--white); }
.log-textarea::placeholder { color:var(--text-muted); }
.char-count { font-size:0.72rem;font-weight:600;color:var(--text-muted);text-align:right;margin-top:4px; }
.optional-tag { font-size:0.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;background:var(--purple-faint);padding:2px 7px;border-radius:var(--r-full);vertical-align:middle;margin-left:6px; }

.btn-save { width:100%;background:linear-gradient(135deg,var(--purple-mid),var(--purple-core),var(--purple-deep));background-size:200%;background-position:right;color:var(--white);font-size:1rem;font-weight:800;padding:17px;border-radius:var(--r-full);box-shadow:var(--shadow-btn);margin-bottom:var(--gap-md);transition:transform 0.2s var(--ease),box-shadow 0.2s,background-position 0.4s;letter-spacing:0.01em; }
.btn-save:active { transform:scale(0.96);box-shadow:0 2px 10px rgba(106,27,154,0.22);background-position:left; }
.save-feedback { text-align:center;font-size:0.92rem;font-weight:700;color:var(--success);padding:var(--gap-sm); }
@keyframes fadeInOut { 0%{opacity:0;transform:translateY(-8px) scale(0.95)} 15%{opacity:1;transform:none} 75%{opacity:1} 100%{opacity:0} }

/* ── Insights Screen ───────────────────────────────────────── */
.insights-summary-card { background:linear-gradient(135deg,var(--purple-core),var(--purple-deep));border:none;box-shadow:var(--shadow-lg); }
.summary-row { display:flex;justify-content:space-around;align-items:center; }
.summary-stat { display:flex;flex-direction:column;align-items:center;gap:4px; }
.stat-val  { font-family:'DM Serif Display',serif;font-size:2rem;color:var(--white);line-height:1; }
.stat-desc { font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.7);text-align:center;text-transform:uppercase;letter-spacing:0.05em; }
.insights-list  { display:flex;flex-direction:column;gap:var(--gap-sm);margin-bottom:var(--gap-md); }
.insight-card   { background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm),var(--inner-glow);padding:var(--gap-md);border-left:4px solid var(--purple-core);display:flex;gap:var(--gap-sm);align-items:flex-start;animation:slideLeft 0.35s var(--ease-s) both; }
@keyframes slideLeft { from{opacity:0;transform:translateX(-14px) scale(0.98)} to{opacity:1;transform:none} }
.insight-icon  { font-size:1.5rem;flex-shrink:0;line-height:1.4; }
.insight-label { font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px; }
.insight-text  { font-size:0.92rem;font-weight:600;color:var(--text-primary);line-height:1.55; }
.insights-empty { text-align:center;padding:var(--gap-xl) var(--gap-md); }
.empty-illustration { font-size:3.5rem;margin-bottom:var(--gap-md);animation:floatBloom 3.5s ease-in-out infinite; }
.empty-title { font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--text-primary);margin-bottom:var(--gap); }
.empty-desc  { font-size:0.9rem;color:var(--text-secondary);line-height:1.55; }

/* ── Q&A Card ──────────────────────────────────────────────── */
.qa-card { background:linear-gradient(145deg,#1a0030,#3a0060);border:1px solid rgba(206,147,216,0.25);position:relative;overflow:hidden; }
.qa-card::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(206,147,216,0.1),transparent 60%);pointer-events:none; }
.qa-header { display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--gap-sm); }
.qa-icon  { font-size:1.6rem; }
.qa-title { font-size:1rem;font-weight:800;color:var(--white); }
.qa-sub   { font-size:0.72rem;font-weight:600;color:rgba(206,147,216,0.85);margin-top:1px; }
.qa-suggestions { display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:var(--gap-sm);scrollbar-width:none; }
.qa-suggestions::-webkit-scrollbar { display:none; }
.qa-pill { flex-shrink:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-full);padding:6px 12px;font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.85);transition:background 0.18s,transform 0.15s var(--ease);white-space:nowrap; }
.qa-pill:active { background:rgba(255,255,255,0.15);transform:scale(0.96); }
.qa-input-row { display:flex;gap:8px;align-items:center; }
.qa-input { flex:1;background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--r-full);padding:10px 16px;font-size:0.88rem;font-weight:600;color:var(--white);transition:border-color 0.2s,background 0.2s; }
.qa-input::placeholder { color:rgba(255,255,255,0.45); }
.qa-input:focus { border-color:var(--purple-light);background:rgba(255,255,255,0.14); }
.qa-send-btn { width:40px;height:40px;flex-shrink:0;background:var(--purple-light);color:var(--purple-deep);border-radius:50%;font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform 0.18s var(--ease),background 0.2s;box-shadow:0 2px 10px rgba(206,147,216,0.35); }
.qa-send-btn:active { transform:scale(0.9);background:var(--purple-mid); }
.qa-answer-area  { margin-top:var(--gap-md); }
.qa-answer-bubble { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:var(--r-md);padding:var(--gap-md);font-size:0.92rem;font-weight:600;color:rgba(255,255,255,0.95);line-height:1.65;white-space:pre-wrap;animation:bubbleIn 0.3s var(--ease) both; }
@keyframes bubbleIn { from{opacity:0;transform:translateY(8px) scale(0.98)} to{opacity:1;transform:none} }
.qa-disclaimer { font-size:0.72rem;color:rgba(255,255,255,0.45);margin-top:var(--gap-sm);line-height:1.5;padding:0 2px; }

/* ── Notification Prompt ───────────────────────────────────── */
.notif-prompt { background:linear-gradient(135deg,#ede7f6,#fce4ec);border:1.5px solid rgba(206,147,216,0.3); }
.notif-row   { display:flex;align-items:flex-start;gap:var(--gap-md);margin-bottom:var(--gap-md); }
.notif-icon  { font-size:1.8rem;flex-shrink:0; }
.notif-title { font-size:0.95rem;font-weight:800;color:var(--text-primary);margin-bottom:3px; }
.notif-desc  { font-size:0.82rem;color:var(--text-secondary);line-height:1.45; }
.btn-notif   { width:100%;background:linear-gradient(135deg,var(--purple-mid),var(--purple-deep));color:var(--white);font-size:0.9rem;font-weight:800;padding:13px;border-radius:var(--r-full);box-shadow:var(--shadow-btn);margin-bottom:var(--gap);transition:transform 0.2s var(--ease); }
.btn-notif:active { transform:scale(0.97); }
.notif-dismiss { display:block;width:100%;text-align:center;font-size:0.78rem;font-weight:700;color:var(--text-muted);padding:6px; }

/* ── Settings Screen ───────────────────────────────────────── */
.settings-profile-card { display:flex;align-items:center;gap:var(--gap-md);background:linear-gradient(135deg,var(--purple-faint),#fce4ec);border:none; }
.profile-avatar { font-size:2.5rem;width:56px;height:56px;background:rgba(255,255,255,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 10px rgba(106,27,154,0.15); }
.profile-name { font-size:1rem;font-weight:800;color:var(--text-primary); }
.profile-sub  { font-size:0.78rem;color:var(--text-secondary);margin-top:2px; }
.settings-group { margin-bottom:var(--gap-lg); }
.settings-group-label { font-size:0.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--gap-sm);padding-left:4px; }
.settings-item { display:flex;align-items:center;justify-content:space-between;background:var(--white);border-radius:var(--r-md);padding:var(--gap-md);margin-bottom:var(--gap);box-shadow:var(--shadow-sm);border:1px solid var(--border); }
.settings-item-text { display:flex;align-items:center;gap:var(--gap-sm);flex:1;min-width:0; }
.settings-icon { font-size:1.3rem;flex-shrink:0; }
.settings-name { font-size:0.9rem;font-weight:700;color:var(--text-primary); }
.settings-desc { font-size:0.75rem;color:var(--text-muted);margin-top:1px; }
.settings-sub-btn { display:block;width:calc(100% - var(--gap-md));margin:var(--gap) var(--gap-sm) var(--gap-sm);background:var(--purple-faint);border:1.5px solid var(--border);border-radius:var(--r-full);color:var(--purple-core);font-size:0.82rem;font-weight:700;padding:10px;text-align:center;transition:background 0.2s; }
.settings-sub-btn:active { background:var(--purple-light); }

.stepper     { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.stepper-btn { width:30px;height:30px;border-radius:50%;background:var(--purple-faint);color:var(--purple-core);font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;transition:background 0.2s,transform 0.15s var(--ease); }
.stepper-btn:active { background:var(--purple-light);transform:scale(0.9); }
.stepper-val { font-size:1rem;font-weight:800;color:var(--purple-core);min-width:28px;text-align:center; }

.toggle { position:relative;display:inline-block;flex-shrink:0;cursor:pointer; }
.toggle input { opacity:0;width:0;height:0;position:absolute; }
.toggle-track { display:block;width:48px;height:26px;background:rgba(0,0,0,0.12);border-radius:var(--r-full);position:relative;transition:background 0.28s var(--ease-s); }
.toggle-thumb { position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:0 1px 5px rgba(0,0,0,0.22);transition:transform 0.28s var(--ease),box-shadow 0.28s; }
.toggle input:checked + .toggle-track { background:var(--purple-core); }
.toggle input:checked + .toggle-track .toggle-thumb { transform:translateX(22px);box-shadow:0 2px 8px rgba(106,27,154,0.35); }

.history-list  { display:flex;flex-direction:column;gap:6px; }
.history-empty { font-size:0.85rem;color:var(--text-muted);padding:8px 0; }
.history-item  { display:flex;align-items:center;gap:var(--gap-sm);background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:10px var(--gap-md);box-shadow:var(--shadow-sm); }
.history-dot   { font-size:1.1rem;flex-shrink:0; }
.history-body  { flex:1;min-width:0; }
.history-date  { font-size:0.88rem;font-weight:700;color:var(--text-primary); }
.history-dur   { font-size:0.75rem;color:var(--text-muted);margin-top:1px; }
.history-del   { font-size:0.75rem;color:var(--text-muted);padding:4px 8px;border-radius:var(--r-sm);transition:background 0.15s,color 0.15s;flex-shrink:0; }
.history-del:hover { background:#fff3f3;color:var(--danger); }

.btn-danger { width:100%;background:#fff3f3;border:2px solid #ffcccc;color:var(--danger);font-size:0.9rem;font-weight:700;padding:14px;border-radius:var(--r-md);transition:background 0.2s; }
.btn-danger:active { background:#ffe0e0; }
.danger-hint { font-size:0.72rem;color:var(--text-muted);margin-top:var(--gap);padding-left:4px; }
.settings-version { text-align:center;padding:var(--gap-md) 0;font-size:0.75rem;color:var(--text-muted);cursor:default; }

/* ── Bottom Nav ────────────────────────────────────────────── */
.bottom-nav { position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:stretch;background:rgba(255,255,255,0.94);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--border);height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);box-shadow:0 -2px 24px rgba(106,27,154,0.1); }
.nav-item { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;color:var(--text-muted);font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;transition:color 0.2s var(--ease-s),transform 0.18s var(--ease);position:relative; }
.nav-item.active { color:var(--purple-core); }
.nav-item.active::after { content:'';position:absolute;top:0;width:36px;height:3px;background:linear-gradient(90deg,var(--purple-light),var(--purple-core));border-radius:0 0 var(--r-full) var(--r-full);animation:navLine 0.35s var(--ease) both; }
@keyframes navLine { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
.nav-item:active { transform:scale(0.86); }
.nav-icon { font-size:1.3rem;line-height:1;transition:transform 0.2s var(--ease); }
.nav-item.active .nav-icon { transform:scale(1.1); }
.nav-log-icon { font-size:1.5rem;width:40px;height:40px;background:linear-gradient(135deg,var(--purple-mid),var(--purple-deep));color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(106,27,154,0.45);transition:transform 0.22s var(--ease),box-shadow 0.22s;font-style:normal;position:relative;overflow:hidden; }
.nav-log-icon::after { content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(142,36,170,0.3);animation:logPulse 2.4s ease-in-out infinite; }
@keyframes logPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.18);opacity:0} }
.nav-item.active .nav-log-icon,.nav-item:active .nav-log-icon { transform:scale(1.08);box-shadow:0 6px 20px rgba(106,27,154,0.55); }
.nav-label { line-height:1; }

/* ── Modals ────────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;z-index:200;background:rgba(30,0,60,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;padding:var(--gap-md);padding-bottom:calc(var(--gap-md) + var(--safe-b));animation:overlayIn 0.22s ease; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal-box { width:100%;background:var(--white);border-radius:var(--r-lg);padding:var(--gap-xl) var(--gap-lg);text-align:center;animation:modalUp 0.32s var(--ease);box-shadow:0 20px 60px rgba(30,0,60,0.3); }
@keyframes modalUp { from{transform:translateY(40px);opacity:0} to{transform:none;opacity:1} }
.modal-icon  { font-size:2.5rem;margin-bottom:var(--gap-sm); }
.modal-title { font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--text-primary);margin-bottom:var(--gap); }
.modal-body  { font-size:0.88rem;color:var(--text-secondary);line-height:1.55;margin-bottom:var(--gap-lg); }
.modal-actions { display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm); }
.btn-modal-cancel { padding:14px;border-radius:var(--r-full);font-size:0.9rem;font-weight:800;background:var(--purple-faint);color:var(--purple-core);transition:transform 0.15s var(--ease); }
.btn-modal-cancel:active { transform:scale(0.96); }
.btn-modal-danger { padding:14px;border-radius:var(--r-full);font-size:0.9rem;font-weight:800;background:var(--danger);color:var(--white);box-shadow:0 4px 14px rgba(229,115,115,0.4);transition:transform 0.15s var(--ease); }
.btn-modal-danger:active { transform:scale(0.96); }

/* Date picker */
.datepicker-box  { padding:var(--gap-lg) var(--gap-md); }
.dp-header       { display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap); }
.dp-header h3    { font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--text-primary);text-align:center;flex:1; }
.dp-nav          { width:36px;height:36px;border-radius:50%;background:var(--purple-faint);color:var(--purple-core);font-size:1.3rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background 0.18s,transform 0.15s var(--ease);flex-shrink:0; }
.dp-nav:not(:disabled):active { background:var(--purple-light);transform:scale(0.88); }
.dp-nav:disabled { opacity:0.3;cursor:not-allowed; }
.dp-purpose { font-size:0.8rem;font-weight:700;color:var(--text-secondary);text-align:center;margin-bottom:var(--gap-md); }
.dp-weekdays { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px; }
.dp-weekdays span { text-align:center;font-size:0.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;padding:4px 0; }
.dp-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:var(--gap-md); }
.dp-cell { aspect-ratio:1;border-radius:50%;font-size:0.88rem;font-weight:700;color:var(--text-primary);background:transparent;display:flex;align-items:center;justify-content:center;transition:background 0.15s,transform 0.15s var(--ease);position:relative; }
.dp-blank    { pointer-events:none; }
.dp-today    { color:var(--purple-core);font-weight:800; }
.dp-today::after { content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--purple-core); }
.dp-selected { background:var(--purple-core) !important;color:var(--white) !important;box-shadow:0 2px 10px rgba(106,27,154,0.3); }
.dp-disabled { opacity:0.25;cursor:not-allowed;pointer-events:none; }
.dp-cell:not(.dp-blank):not(.dp-disabled):not(.dp-selected):active { background:var(--purple-faint);transform:scale(0.9); }

/* Badge modal */
.badge-box { position:relative;overflow:hidden; }
.badge-confetti { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.confetti-piece { position:absolute;border-radius:2px;animation:confettiFall 2.5s linear forwards;opacity:0; }
@keyframes confettiFall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(320px) rotate(720deg);opacity:0} }
.badge-earned-icon { font-size:4.5rem;display:block;margin-bottom:var(--gap-sm);animation:badgePop 0.7s var(--ease) both;filter:drop-shadow(0 4px 16px rgba(106,27,154,0.3)); }
@keyframes badgePop { from{transform:scale(0) rotate(-20deg);opacity:0} 55%{transform:scale(1.25) rotate(8deg);opacity:1} 75%{transform:scale(0.92) rotate(-3deg)} to{transform:scale(1) rotate(0)} }
.badge-earned-name { font-family:'DM Serif Display',serif;font-size:1.3rem;font-style:italic;color:var(--purple-core);margin-bottom:var(--gap); }
.badge-earned-desc { font-size:0.9rem;color:var(--text-secondary);line-height:1.55; }

/* ── Privacy Lock Screen ───────────────────────────────────── */
.lock-screen { position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(160deg,#7b1fa2,#4a0e72 60%,#1a0030);overflow:hidden; }
.lock-screen.hidden { display:none !important; }
.lock-bg  { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.lock-blob { position:absolute;border-radius:50%;filter:blur(55px);opacity:0.35;animation:blobPulse 6s ease-in-out infinite alternate; }
.lb1 { width:300px;height:300px;background:radial-gradient(circle,#ce93d8,transparent 70%);top:-60px;left:-60px; }
.lb2 { width:260px;height:260px;background:radial-gradient(circle,#f48fb1,transparent 70%);top:25%;right:-50px;animation-delay:3s; }
.lock-panel { position:relative;z-index:2;width:100%;background:rgba(255,255,255,0.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.15);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--gap-xl) var(--gap-lg) calc(var(--gap-xl) + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:var(--gap-md);animation:modalUp 0.35s var(--ease); }
.lock-logo  { font-size:2.5rem;animation:floatBloom 3s ease-in-out infinite; }
.lock-title { font-family:'DM Serif Display',serif;font-size:1.8rem;color:var(--white);font-style:italic; }
.lock-sub   { font-size:0.9rem;color:rgba(255,255,255,0.7);font-weight:600; }
.lock-error { font-size:0.85rem;font-weight:700;color:#ffcdd2;background:rgba(229,115,115,0.2);border-radius:var(--r-full);padding:6px 16px; }
@keyframes lockShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.lock-screen.lock-shake .pin-dots { animation:lockShake 0.4s ease both; }

.pin-dots { display:flex;gap:16px;justify-content:center; }
.pin-dot  { width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.5);background:transparent;transition:background 0.15s,transform 0.15s var(--ease),border-color 0.15s; }
.pin-dot.filled { background:var(--white);border-color:var(--white);transform:scale(1.15); }

.pin-pad { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:280px; }
.pin-pad-sm { max-width:260px;margin:var(--gap-md) auto 0; }
.pin-key { aspect-ratio:1;border-radius:50%;font-size:1.4rem;font-weight:700;font-family:'Nunito',sans-serif;color:var(--white);background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;transition:background 0.15s,transform 0.15s var(--ease);min-height:64px;min-width:64px; }
.pin-key:not(:disabled):active { background:rgba(255,255,255,0.28);transform:scale(0.9); }
.pin-empty { background:transparent !important;border:none !important;pointer-events:none; }
.pin-del   { font-size:1.2rem; }
.pin-key:disabled { opacity:0;cursor:default; }

/* PIN setup modal */
.pin-setup-box { padding:var(--gap-xl) var(--gap-lg);max-height:92dvh;overflow-y:auto; }
.pin-step-label { font-size:0.85rem;font-weight:700;color:var(--text-secondary);text-align:center;margin-bottom:var(--gap-sm); }
.pin-setup-box .pin-dot { border-color:var(--border); }
.pin-setup-box .pin-dot.filled { background:var(--purple-core);border-color:var(--purple-core); }
.pin-setup-box .pin-key { color:var(--text-primary);background:var(--purple-ultra);border-color:var(--border);font-size:1.2rem;min-height:52px;min-width:52px; }
.pin-setup-box .pin-key:not(:disabled):active { background:var(--purple-faint);transform:scale(0.9); }
.pin-error { font-size:0.82rem;font-weight:700;color:var(--danger);text-align:center;padding:6px 0; }
.pin-cancel { display:block;margin:var(--gap-sm) auto 0;color:var(--text-muted);font-size:0.85rem;font-weight:700; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast { position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 12px);left:50%;transform:translateX(-50%) translateY(20px);z-index:250;background:var(--purple-deep);color:var(--white);font-size:0.88rem;font-weight:700;padding:12px 22px;border-radius:var(--r-full);box-shadow:0 6px 24px rgba(30,0,60,0.35);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.25s,transform 0.3s var(--ease); }
.toast.toast-show { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width:420px) { .mood-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:520px) {
  .app-screen,.bottom-nav { max-width:420px;margin:0 auto; }
  .bottom-nav { left:50%;transform:translateX(-50%);border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .lock-panel { max-width:420px;margin:0 auto;border-radius:var(--r-lg); }
  .toast { max-width:380px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important; }
}