:root {
      --bg: #fef6ff;
      --cream: #fff9fc;
      --card: #ffffff;
      --pink1: #ffe4f1;
      --pink2: #ffb8d9;
      --pink3: #ff8ec4;
      --blue1: #e0f2fe;
      --blue2: #a5d8ff;
      --blue3: #74c0fc;
      --mint1: #d1fae5;
      --mint2: #6ee7b7;
      --lav1: #ede9fe;
      --lav2: #c4b5fd;
      --butter: #fef3c7;
      --butter2: #fcd34d;
      --peach1: #fff1e6;
      --peach2: #ffcba4;
      --coral: #fb7185;
      --text: #4a2040;
      --text-mid: #7c5a6e;
      --text-soft: #b89aaa;
      --border: rgba(255,184,217,0.25);
      --shadow: 0 4px 20px rgba(255,142,196,0.1);
      --shadow-lg: 0 8px 32px rgba(255,142,196,0.15);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { overflow-x: hidden; }
    body {
      font-family: 'Nunito','ZCOOL KuaiLe',sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ===== FLOATING DECORATIONS ===== */
    .float-deco {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      opacity: 0.15;
    }
    .bubble {
      border-radius: 50%;
      animation: rise linear infinite;
    }
    .bubble:nth-child(1) { width:20px;height:20px;background:var(--pink2);left:8%;animation-duration:12s;bottom:-20px; }
    .bubble:nth-child(2) { width:14px;height:14px;background:var(--blue2);left:25%;animation-duration:16s;animation-delay:3s;bottom:-14px; }
    .bubble:nth-child(3) { width:18px;height:18px;background:var(--lav2);right:15%;animation-duration:14s;animation-delay:6s;bottom:-18px; }
    .bubble:nth-child(4) { width:12px;height:12px;background:var(--mint2);right:30%;animation-duration:18s;animation-delay:9s;bottom:-12px; }
    .bubble:nth-child(5) { width:16px;height:16px;background:var(--butter2);left:60%;animation-duration:15s;animation-delay:2s;bottom:-16px; }
    .bubble:nth-child(6) { width:10px;height:10px;background:var(--peach2);right:8%;animation-duration:20s;animation-delay:5s;bottom:-10px; }
    @keyframes rise {
      0% { transform:translateY(0) rotate(0deg) scale(1); opacity:0; }
      10% { opacity:0.2; }
      90% { opacity:0.15; }
      100% { transform:translateY(-110vh) rotate(360deg) scale(0.5); opacity:0; }
    }

    .star-float {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      font-size: 16px;
      animation: twinkle-float ease-in-out infinite;
    }
    .star-float:nth-child(7) { top:12%;left:6%;animation-duration:4s; }
    .star-float:nth-child(8) { top:25%;right:10%;animation-duration:3.5s;animation-delay:1s; }
    .star-float:nth-child(9) { top:60%;left:4%;animation-duration:5s;animation-delay:2s; }
    .star-float:nth-child(10) { top:45%;right:6%;animation-duration:4.5s;animation-delay:0.5s; }
    .star-float:nth-child(11) { top:80%;left:15%;animation-duration:3.8s;animation-delay:1.5s; }
    @keyframes twinkle-float {
      0%,100% { opacity:0.1; transform:translateY(0) scale(0.8); }
      50% { opacity:0.3; transform:translateY(-10px) scale(1.1); }
    }

    /* Scroll food floaters */
    .scroll-food {
      position:fixed;
      pointer-events:none;
      z-index:0;
      font-size:22px;
      opacity:0;
      transition:none;
    }
    .scroll-food.drift-left {
      animation:drift-l 3s ease-out forwards;
    }
    .scroll-food.drift-right {
      animation:drift-r 3s ease-out forwards;
    }
    @keyframes drift-l {
      0% { opacity:0; transform:translateX(30px) rotate(0deg) scale(0.5); }
      15% { opacity:0.35; }
      85% { opacity:0.25; }
      100% { opacity:0; transform:translateX(-60px) rotate(-30deg) scale(0.8); }
    }
    @keyframes drift-r {
      0% { opacity:0; transform:translateX(-30px) rotate(0deg) scale(0.5); }
      15% { opacity:0.35; }
      85% { opacity:0.25; }
      100% { opacity:0; transform:translateX(60px) rotate(30deg) scale(0.8); }
    }

    /* ===== HEADER ===== */
    .hero {
      background: linear-gradient(135deg, #ffc8dd 0%, #bde0fe 40%, #a2d2ff 60%, #cdb4db 100%);
      background-size: 200% 200%;
      animation: gradient-shift 8s ease-in-out infinite;
      padding: 44px 20px 56px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    @keyframes gradient-shift {
      0%,100% { background-position:0% 50%; }
      50% { background-position:100% 50%; }
    }
    .hero::after {
      content:'';
      position:absolute;
      bottom:-1px;left:-5%;right:-5%;
      height:36px;
      background:var(--bg);
      border-radius:50% 50% 0 0 / 100% 100% 0 0;
    }
    /* Hero sparkles */
    .hero-sparkle {
      position: absolute;
      font-size: 18px;
      animation: sparkle-dance ease-in-out infinite;
    }
    .hero-sparkle:nth-child(1) { top:15%;left:10%;animation-duration:3s; }
    .hero-sparkle:nth-child(2) { top:20%;right:12%;animation-duration:2.5s;animation-delay:0.8s; }
    .hero-sparkle:nth-child(3) { bottom:30%;left:8%;animation-duration:3.5s;animation-delay:1.5s;font-size:14px; }
    .hero-sparkle:nth-child(4) { bottom:35%;right:8%;animation-duration:2.8s;animation-delay:0.3s;font-size:22px; }
    .hero-sparkle:nth-child(5) { top:35%;left:25%;animation-duration:4s;animation-delay:2s;font-size:12px; }
    @keyframes sparkle-dance {
      0%,100% { opacity:0.3; transform:scale(0.6) rotate(0deg); }
      50% { opacity:1; transform:scale(1.2) rotate(20deg); }
    }

    .hero-avatar {
      width:88px;height:88px;
      border-radius:50%;
      background:var(--card);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 14px;
      box-shadow: 0 6px 24px rgba(205,180,219,0.35);
      border:4px solid rgba(255,255,255,0.7);
      position:relative;z-index:1;
      animation: avatar-bounce 3s ease-in-out infinite;
    }
    @keyframes avatar-bounce {
      0%,100% { transform:translateY(0) rotate(0deg); }
      25% { transform:translateY(-8px) rotate(-2deg); }
      75% { transform:translateY(-4px) rotate(2deg); }
    }
    .hero-avatar img { width:72px;height:72px;border-radius:50%;object-fit:cover; }
    .hero h1 {
      font-family:'ZCOOL KuaiLe',sans-serif;
      font-size:28px;
      color:#fff;
      text-shadow: 0 2px 8px rgba(150,80,130,0.2);
      position:relative;z-index:1;
    }
    .hero p {
      font-size:13px;
      color:rgba(255,255,255,0.85);
      margin-top:4px;
      position:relative;z-index:1;
      font-weight:600;
    }

    /* ===== COMPACT PROFILE HEADER ===== */
    .profile-header {
      background: linear-gradient(135deg, #ffc8dd 0%, #bde0fe 40%, #a2d2ff 60%, #cdb4db 100%);
      background-size: 200% 200%;
      animation: gradient-shift 8s ease-in-out infinite;
      padding: 14px 20px 22px;
      text-align: center;
      position: relative;
      overflow: hidden;
      display:flex; align-items:center; justify-content:center; gap:10px;
    }
    .profile-header::after {
      content:'';
      position:absolute;
      bottom:-1px;left:-5%;right:-5%;
      height:18px;
      background:var(--bg);
      border-radius:50% 50% 0 0 / 100% 100% 0 0;
      z-index:2;
    }
    .profile-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.7);
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .profile-info {
      flex-grow: 1;
      position: relative;
      z-index: 1;
    }
    .profile-logo {
      width:32px; height:32px; border-radius:50%; object-fit:cover;
      border:2px solid rgba(255,255,255,0.7);
    }
    .profile-title {
      font-family: 'ZCOOL KuaiLe', sans-serif;
      font-size: 18px;
      color: #fff;
      text-shadow: 0 2px 8px rgba(150,80,130,0.2);
      margin: 0;
    }
    .profile-age-badge {
      display: inline-block;
      background: rgba(255,255,255,0.9);
      color: var(--text);
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      margin-left: 8px;
    }
    .profile-stats {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .profile-stat-pill {
      background: rgba(255,255,255,0.85);
      color: var(--text);
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }

    /* ===== BOTTOM NAVIGATION ===== */
    .btm-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--card);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 20px rgba(255,142,196,0.1);
      display: flex;
      z-index: 100;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .bn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 4px 12px;
      background: none;
      border: none;
      font-family: inherit;
      color: var(--text-soft);
      text-decoration: none;
      transition: all 0.2s;
      cursor: pointer;
      min-height: 44px;
    }
    .bn.active {
      color: var(--pink3);
    }
    .bn-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }
    .bn-label {
      font-size: 11px;
      font-weight: 600;
    }
    .bn-indicator { display:none; }
    .bn.active .bn-icon {
      transform:scale(1.2);
      transition:transform .2s;
    }

    /* ===== PAGE CONTAINERS ===== */
    .page {
      display: none;
      padding-bottom: 80px; /* Space for bottom nav */
    }
    .page.active {
      display: block;
      animation: fadeIn 0.35s ease;
    }

    /* ===== HOME PAGE ===== */
    .home-hero {
      text-align:center; padding:20px 20px 10px;
      position:relative;
    }
    .hh-avatar {
      width:120px; height:120px; border-radius:50%; object-fit:cover;
      border:5px solid rgba(255,255,255,0.9); margin-bottom:8px;
      position:relative; z-index:1;
      animation:avatarFloat 3s ease-in-out infinite;
      box-shadow:0 8px 30px rgba(255,142,196,0.25);
    }
    @keyframes avatarFloat { 0%,100%{transform:translateY(0) rotate(0) scale(1)} 25%{transform:translateY(-8px) rotate(-3deg) scale(1.02)} 50%{transform:translateY(-2px) rotate(0) scale(0.98)} 75%{transform:translateY(-6px) rotate(3deg) scale(1.01)} }
    .hh-avatar-wrap { position:relative; display:inline-block; z-index:5; }
    .hh-sparkle {
      position:absolute; font-size:16px; pointer-events:none;
      animation:sparkleOrbit 4s linear infinite;
    }
    .hh-sparkle:nth-child(2){animation-delay:0s;--orbit-r:68px;--orbit-start:0deg;}
    .hh-sparkle:nth-child(3){animation-delay:1.3s;--orbit-r:72px;--orbit-start:120deg;font-size:12px;}
    .hh-sparkle:nth-child(4){animation-delay:2.6s;--orbit-r:65px;--orbit-start:240deg;font-size:14px;}
    @keyframes sparkleOrbit {
      from{transform:rotate(var(--orbit-start,0deg)) translateX(var(--orbit-r,70px)) rotate(calc(-1*var(--orbit-start,0deg)));opacity:0.8;}
      to{transform:rotate(calc(var(--orbit-start,0deg) + 360deg)) translateX(var(--orbit-r,70px)) rotate(calc(-1*(var(--orbit-start,0deg) + 360deg)));opacity:0.8;}
    }
    .hh-hearts {
      position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:200px; height:180px; pointer-events:none; z-index:10;
    }
    .hh-heart {
      position:absolute; animation:heartFloat 3s ease-in-out infinite;
      opacity:0;
    }
    @keyframes heartFloat {
      0%{opacity:0;transform:translateY(0) scale(0.5)}
      20%{opacity:0.8;transform:translateY(-15px) scale(1)}
      80%{opacity:0.4;transform:translateY(-50px) scale(0.8)}
      100%{opacity:0;transform:translateY(-70px) scale(0.6)}
    }
    .hh-age {
      font-size:24px; font-weight:800;
      font-family:'ZCOOL KuaiLe',cursive; position:relative; z-index:1;
      margin-bottom:20px; color:var(--text);
    }
    .hh-age span { color:var(--pink3); }
    .hh-stats {
      display:flex; justify-content:center; gap:14px;
      position:relative; z-index:1; padding:0 10px;
    }
    .hh-stat-item {
      text-align:center; border-radius:24px;
      padding:16px 14px; min-width:95px; position:relative;
      overflow:hidden; transition:transform .3s;
    }
    .hh-stat-item:active { transform:scale(0.94); }
    .hh-stat-item:nth-child(1) { background:linear-gradient(145deg,#fff0f5,#fce7f3); }
    .hh-stat-item:nth-child(3) { background:linear-gradient(145deg,#ecfdf5,#d1fae5); }
    .hh-stat-item:nth-child(5) { background:linear-gradient(145deg,#eff6ff,#dbeafe); }
    .hh-stat-item::before {
      content:''; position:absolute; top:-8px; right:-8px;
      width:40px; height:40px; border-radius:50%;
      background:rgba(255,255,255,0.5);
    }
    .hh-stat-emoji { font-size:28px; display:block; margin-bottom:4px; animation:emojiWiggle 2s ease-in-out infinite; }
    .hh-stat-item:nth-child(1) .hh-stat-emoji { animation-delay:0s; }
    .hh-stat-item:nth-child(3) .hh-stat-emoji { animation-delay:0.7s; }
    .hh-stat-item:nth-child(5) .hh-stat-emoji { animation-delay:1.4s; }
    @keyframes emojiWiggle { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-12deg)} 30%{transform:rotate(10deg)} 45%{transform:rotate(-8deg)} 55%{transform:rotate(0)} }
    .hh-stat-item:nth-child(1) { animation:statPop .5s cubic-bezier(0.34,1.56,0.64,1) .1s both, statGlow 3s ease-in-out infinite 1s; }
    .hh-stat-item:nth-child(3) { animation:statPop .5s cubic-bezier(0.34,1.56,0.64,1) .2s both, statGlow 3s ease-in-out infinite 2s; }
    .hh-stat-item:nth-child(5) { animation:statPop .5s cubic-bezier(0.34,1.56,0.64,1) .3s both, statGlow 3s ease-in-out infinite 3s; }
    @keyframes statGlow {
      0%,100%{box-shadow:0 4px 16px rgba(0,0,0,0.04)} 50%{box-shadow:0 4px 24px rgba(255,142,196,0.2)}
    }
    .hh-stat-val { font-size:28px; font-weight:900; color:var(--text); font-family:'Nunito',sans-serif; line-height:1; }
    .hh-stat-unit { font-size:12px; color:var(--text-soft); font-weight:700; margin-top:4px; }
    .hh-stat-divider { display:none; }
    @keyframes statPop { from{opacity:0;transform:scale(0.5) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

    /* Food parade - scrolling marquee of unlocked foods */
    .home-floats { position:relative; overflow:hidden; margin:16px 0 8px; padding:10px 0; }
    .food-parade {
      display:flex; gap:0; width:max-content;
      animation:paradeScroll var(--parade-dur, 20s) linear infinite;
    }
    .food-parade:hover { animation-play-state:paused; }
    @keyframes paradeScroll {
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }
    .fp-item {
      display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:8px 14px; flex-shrink:0;
    }
    .fp-emoji {
      font-size:32px;
      animation:fpBounce 2s ease-in-out infinite var(--fp-delay, 0s);
      filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    .fp-name {
      font-size:10px; font-weight:700; color:var(--text-soft);
      white-space:nowrap; font-family:'ZCOOL KuaiLe',cursive;
    }
    @keyframes fpBounce {
      0%,100%{transform:translateY(0) scale(1)}
      50%{transform:translateY(-6px) scale(1.1)}
    }
    /* Soft gradient masks on edges */
    .home-floats::before, .home-floats::after {
      content:''; position:absolute; top:0; bottom:0; width:40px; z-index:2; pointer-events:none;
    }
    .home-floats::before { left:0; background:linear-gradient(to right, var(--bg), transparent); }
    .home-floats::after { right:0; background:linear-gradient(to left, var(--bg), transparent); }
    .home-greeting {
      text-align:center; padding:10px 20px; margin-bottom:4px;
      font-family:'ZCOOL KuaiLe',cursive; font-size:17px;
      color:var(--text-mid);
      animation:greetFade 1s ease both .5s;
    }
    @keyframes greetFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    .home-btns {
      display:flex; gap:12px; padding:0 16px; margin-bottom:20px;
    }
    .hb-btn {
      flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
      padding:18px 12px; border:none; border-radius:20px;
      font-size:16px; font-weight:800; cursor:pointer;
      transition:transform .2s, box-shadow .2s;
      box-shadow:0 4px 16px rgba(0,0,0,0.08);
    }
    .hb-btn:active { transform:scale(0.95); }
    .hb-food { background:linear-gradient(135deg,#ffc8dd,#ff8ec4); color:white; }
    .hb-grow { background:linear-gradient(135deg,#a7f3d0,#34d399); color:white; }
    .hb-emoji { font-size:22px; }
    .hb-text { letter-spacing:0.5px; }

    .home-snap { padding:0 16px; }
    .home-snap-card {
      background:white; border-radius:20px; padding:16px;
      box-shadow:0 2px 12px rgba(0,0,0,0.04);
    }
    .home-snap-title { font-size:13px; font-weight:700; color:var(--text-soft); margin-bottom:10px; }
    .home-snap-item { display:flex; align-items:center; gap:8px; padding:6px 0; }
    .home-snap-emoji { font-size:20px; }
    .home-snap-food { font-size:13px; color:var(--text); font-weight:600; }
    .home-actions {
      display: flex;
      gap: 12px;
      padding: 0 16px 20px;
      margin-top: 20px;
    }
    .action-card {
      flex: 1;
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      color: var(--text);
      text-decoration: none;
      box-shadow: var(--shadow);
      transition: all 0.2s;
      display: none; /* Hidden by default, shown when logged in */
    }
    .action-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    .action-card-icon {
      font-size: 24px;
      margin-bottom: 8px;
      display: block;
    }
    .action-card-label {
      font-size: 14px;
      font-weight: 700;
    }
    .recent-entries {
      padding: 0 16px;
    }
    .recent-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 12px;
    }
    .recent-entry {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .recent-entry-emoji {
      font-size: 20px;
      flex-shrink: 0;
    }
    .recent-entry-info {
      flex-grow: 1;
    }
    .recent-entry-date {
      font-size: 11px;
      color: var(--text-soft);
      font-weight: 600;
    }
    .recent-entry-food {
      font-size: 13px;
      color: var(--text);
      font-weight: 700;
    }

    /* ===== MILESTONES PAGE ===== */
    .milestone-category {
      padding: 0 16px 16px;
    }
    .milestone-category-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .milestone-item {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 20px;
      padding: 14px 16px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .milestone-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    .milestone-item.achieved {
      background: var(--pink1);
      border-color: var(--pink2);
    }
    .milestone-checkbox {
      width: 20px;
      height: 20px;
      border: 2px solid var(--border);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      background: var(--card);
      flex-shrink: 0;
    }
    .milestone-item.achieved .milestone-checkbox {
      background: var(--pink3);
      border-color: var(--pink3);
      color: #fff;
    }
    .milestone-info {
      flex-grow: 1;
    }
    .milestone-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }
    .milestone-date {
      font-size: 12px;
      color: var(--text-soft);
      margin-top: 2px;
    }

    /* Add bottom padding to body */
    body {
      padding-bottom: 80px;
    }

    /* ===== DESK CONTAINER ===== */
    .desk { position: relative; z-index: 1; }

    /* ===== STATS ===== */
    .stats {
      display:flex;gap:12px;
      padding:0 16px;
      margin-top:8px;
      position:relative;z-index:2;
    }
    .st {
      flex:1;
      border-radius:20px;
      padding:16px 8px;
      text-align:center;
      box-shadow:0 4px 16px rgba(0,0,0,0.04);
      border:none;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
      animation: pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
      cursor:pointer;
    }
    .st:nth-child(1) { background:linear-gradient(145deg,#fff0f5,#fce7f3); }
    .st:nth-child(2) { background:linear-gradient(145deg,#ecfdf5,#d1fae5); }
    .st:nth-child(3) { background:linear-gradient(145deg,#eff6ff,#dbeafe); }
    .st:nth-child(1) { animation-delay:0.1s; }
    .st:nth-child(2) { animation-delay:0.2s; }
    .st:nth-child(3) { animation-delay:0.3s; }
    .st:hover { transform:translateY(-4px) scale(1.03); }
    .st:active { transform:scale(0.94); transition:transform 0.1s; }
    @keyframes pop-in { from { opacity:0; transform:scale(0.7) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
    .st:hover { transform:translateY(-4px) scale(1.02); }
    .st .v { font-size:30px;font-weight:900;line-height:1; }
    .st:nth-child(1) .v { color:var(--pink3); }
    .st:nth-child(2) .v { color:var(--blue3); }
    .st:nth-child(3) .v { color:var(--peach2); }
    .st .lb { font-size:11px;color:var(--text-soft);margin-top:4px;font-weight:700; }
    .st .st-icon { font-size:22px; margin-bottom:4px; display:block; }

    /* ===== FOOD GRID ===== */
    .sec { padding:24px 16px 8px; }
    .sec-t {
      font-size:16px;
      font-weight:800;
      margin-bottom:14px;
      color:var(--text);
    }
    .fg { display:flex;flex-wrap:wrap;gap:8px; }
    .fc {
      background:var(--card);
      border:2px solid var(--border);
      border-radius:28px;
      padding:7px 14px 7px 10px;
      font-size:13px;font-weight:800;
      display:inline-flex;align-items:center;gap:5px;
      box-shadow:0 2px 8px rgba(255,184,217,0.08);
      transition:all 0.2s;
      cursor:default;
    }
    .fc:hover { transform:translateY(-2px) rotate(-2deg); border-color:var(--pink2); background:var(--pink1); }
    .fc:active { animation:jelly 0.6s cubic-bezier(0.25,0.1,0.25,1); }
    .fc .fi { font-size:20px; transition:transform 0.3s; }
    .fc:hover .fi { transform:scale(1.3) rotate(10deg); }
    .fc-cat { margin-bottom:12px; width:100%; }
    .fc-cat-label {
      font-size:12px;font-weight:800;
      color:var(--text-soft);
      margin-bottom:6px;
      letter-spacing:0.5px;
    }
    .fc-cat-items { display:flex;flex-wrap:wrap;gap:8px; }

    /* ===== TABS ===== */
    .tabs {
      display:flex;
      margin:20px 16px 16px;
      background:var(--pink1);
      border-radius:18px;
      padding:4px;
      border:2px solid var(--border);
    }
    .tb {
      flex:1;text-align:center;
      padding:10px 0;font-size:14px;font-weight:800;
      border-radius:15px;cursor:pointer;
      border:none;background:none;
      font-family:inherit;color:var(--text-soft);
      transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .tb.on {
      background:var(--card);
      color:var(--text);
      box-shadow:0 4px 14px rgba(255,142,196,0.15);
      transform:scale(1.02);
    }

    /* Search bar styles */
    .search-bar {
      padding:0 16px;
      margin-bottom:16px;
      position:relative;
    }
    
    .search-bar input {
      width:100%;
      padding:12px 16px;
      border:2px solid var(--border);
      border-radius:20px;
      font-size:15px;
      font-family:inherit;
      background:var(--card);
      color:var(--text);
      transition:border-color 0.3s;
    }
    
    .search-bar input:focus {
      outline:none;
      border-color:var(--pink3);
      box-shadow:0 0 0 3px rgba(255,142,196,0.15);
    }
    
    .search-bar input::placeholder {
      color:var(--text-soft);
    }
    
    .search-clear {
      position:absolute;
      right:28px;
      top:50%;
      transform:translateY(-50%);
      background:var(--text-soft);
      color:white;
      border:none;
      border-radius:50%;
      width:20px;
      height:20px;
      font-size:14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    
    .search-clear:hover {
      background:var(--text);
    }

    /* ===== CALENDAR ===== */
    .cal { padding:0 10px 32px; display:none; }
    .cn { display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px; }
    .cn button {
      width:40px;height:40px;
      border-radius:14px;
      border:2px solid var(--border);
      background:var(--card);
      font-size:18px;cursor:pointer;
      font-family:inherit;color:var(--text-mid);
      box-shadow:var(--shadow);
      transition:all 0.2s;
    }
    .cn button:hover { background:var(--pink1); transform:scale(1.1); }
    .cn button:active { transform:scale(0.9); }
    .cm { font-family:'ZCOOL KuaiLe',sans-serif;font-size:19px; }
    .cg { display:grid;grid-template-columns:repeat(7,1fr);gap:5px; }
    .cw { text-align:center;font-size:11px;color:var(--text-soft);font-weight:700;padding:5px 0 8px; }
    .cc {
      aspect-ratio:0.88;
      border-radius:16px;
      display:flex;flex-direction:column;
      align-items:center;
      padding:4px 2px 4px;
      cursor:default;
      border:2px solid transparent;
      transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
      background:var(--card);
    }
    .cc.emp { background:none;border:none; }
    .cc.has {
      cursor:pointer;
      border-width:2.5px;
      box-shadow:0 2px 10px rgba(255,184,217,0.15);
    }
    .cc.has:hover { transform:scale(1.08) rotate(-1deg); border-color:var(--pink2); box-shadow:var(--shadow-lg); }
    .cc.has:active { animation:jelly 0.6s cubic-bezier(0.25,0.1,0.25,1); }
    .cc.tod { border-color:var(--blue3); box-shadow:0 0 0 3px rgba(116,192,252,0.2); }
    .cc.non { opacity:0.25;background:none;border:none; }
    .cd { font-size:11px;font-weight:800;color:var(--text-mid);line-height:1; }
    .ce { text-align:center;font-size:13px;line-height:1.3;margin-top:2px;max-height:36px;overflow:hidden; }
    .cm-dot { width:6px;height:6px;border-radius:50%;margin-top:2px; }

    /* ===== TIMELINE ===== */
    .tl { padding:0 16px 80px; }
    .td { margin-bottom:22px; }
    .th { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
    .th-dot {
      width:14px;height:14px;
      border-radius:50%;
      flex-shrink:0;
      box-shadow:0 0 0 3px var(--bg), 0 0 0 5px currentColor;
      animation: dot-pulse 2s ease-in-out infinite;
    }
    @keyframes dot-pulse { 0%,100%{box-shadow:0 0 0 3px var(--bg),0 0 0 5px currentColor;}50%{box-shadow:0 0 0 3px var(--bg),0 0 0 7px currentColor;} }
    .th-d { font-size:15px;font-weight:800; }
    .th-d small { font-weight:600;color:var(--text-soft);margin-left:4px;font-size:12px; }
    .th-a {
      margin-left:auto;
      font-size:11px;font-weight:700;
      color:var(--pink3);
      background:var(--pink1);
      padding:3px 12px;border-radius:12px;
    }
    .ms {
      margin-left:6px;padding-left:24px;
      border-left:3px dashed var(--pink2);
      display:flex;flex-direction:column;gap:10px;
    }
    .mc {
      background:var(--card);
      border-radius:22px;
      padding:16px 18px;
      box-shadow:var(--shadow);
      border:2px solid var(--border);
      transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      cursor:pointer;
    }
    .mc:hover { transform:translateY(-3px) rotate(-0.5deg); box-shadow:var(--shadow-lg); }
    .mc:active { transform:scale(0.95) rotate(0.5deg); transition:transform 0.1s; }
    @keyframes jelly { 0%{transform:scale(1)} 20%{transform:scale(1.05,0.95)} 40%{transform:scale(0.97,1.03)} 55%{transform:scale(1.02,0.98)} 70%{transform:scale(0.995,1.005)} 85%{transform:scale(1.003,0.997)} 100%{transform:scale(1)} }
    @keyframes pop-emoji { 0%{transform:scale(1)} 40%{transform:scale(1.4) rotate(15deg)} 70%{transform:scale(0.9) rotate(-5deg)} 100%{transform:scale(1) rotate(0deg)} }
    .mc.jelly { animation:jelly 0.6s cubic-bezier(0.25,0.1,0.25,1); }
    .mt {
      display:inline-block;
      font-size:11px;font-weight:800;
      padding:3px 12px;border-radius:10px;
      margin-bottom:8px;letter-spacing:0.5px;
    }
    .mt-am { background:var(--butter);color:#92400e; }
    .mt-pm { background:var(--pink1);color:#be185d; }
    .mt-ev { background:var(--lav1);color:#7c3aed; }
    .mf { display:flex;align-items:flex-start;gap:10px; }
    .mf .me { font-size:32px;line-height:1;flex-shrink:0;transition:transform 0.3s; }
    .mc:hover .mf .me { transform:scale(1.2) rotate(10deg); }
    .mc.jelly .mf .me { animation:pop-emoji 0.5s ease; }
    .mf .mx { font-size:14px;font-weight:700;flex:1;color:var(--text); }
    .mm {
      display:inline-flex;align-items:center;gap:3px;
      font-size:11px;font-weight:700;
      padding:3px 10px;border-radius:10px;
      margin-top:8px;
    }
    .ml { background:#fce7f3;color:#be185d; }
    .mh { background:#fef3c7;color:#b45309; }
    .mn { background:#dbeafe;color:#1d4ed8; }
    .mu { background:#ede9fe;color:#7c3aed; }
    .mr { background:#f1f5f9;color:#64748b; }
    .nt {
      margin-top:10px;padding-top:10px;
      border-top:2px dashed var(--pink1);
      font-size:13px;color:var(--text-mid);
      line-height:1.75;font-weight:600;
    }
    .nw {
      display:inline-block;
      background:linear-gradient(135deg,#fef3c7,#fde68a);
      color:#92400e;
      font-size:11px;font-weight:800;
      padding:3px 10px;border-radius:10px;
      margin-top:6px;
      animation:sparkle 2s ease-in-out infinite;
    }
    @keyframes sparkle { 0%,100%{box-shadow:0 0 4px rgba(253,230,138,0.4)}50%{box-shadow:0 0 16px rgba(253,230,138,0.8)} }
    @keyframes burst {
      0% { opacity:1;transform:translate(0,0) scale(1); }
      100% { opacity:0;transform:translate(var(--bx),var(--by)) scale(0); }
    }
    .burst-particle {
      position:fixed;pointer-events:none;z-index:99;font-size:14px;
      animation:burst 0.8s ease-out forwards;
    }

    /* ===== MODAL ===== */
    .ov {
      display:none;
      position:fixed;inset:0;
      background:rgba(74,32,64,0.3);
      backdrop-filter:blur(6px);
      z-index:100;
      align-items:flex-end;
      justify-content:center;
    }
    .ov.sh { display:flex; }
    .mo {
      background:var(--cream);
      border-radius:28px 28px 0 0;
      padding:16px 20px 32px;
      width:100%;max-width:480px;
      max-height:80vh;overflow-y:auto;
      animation:su 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes su { from{transform:translateY(100%)}to{transform:translateY(0)} }
    .mb { width:40px;height:5px;background:var(--pink2);border-radius:3px;margin:0 auto 16px; }
    .mo h3 { font-family:'ZCOOL KuaiLe',sans-serif;font-size:20px;margin-bottom:2px; }
    .mo .al { font-size:13px;color:var(--text-soft);margin-bottom:16px;font-weight:600; }
    .mo .mi {
      background:var(--card);
      border-radius:20px;padding:16px 18px;
      margin-bottom:8px;
      border:2px solid var(--border);
    }
    .mo .mn-box {
      background:var(--butter);
      border-left:4px solid var(--butter2);
      border-radius:16px;
      padding:12px 14px;margin-top:12px;
      font-size:13px;color:var(--text-mid);
      line-height:1.75;font-weight:600;
    }

    /* === GROWTH TRACKING === */
    .grow { padding: 0 16px; }
    .grow-header { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
    .grow-header h3 { font-size:16px; font-weight:800; color:var(--text); }
    .grow-add-btn { background:linear-gradient(135deg,var(--pink1),var(--lav1)); border:none; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; }
    .grow-add-btn:active { transform:scale(0.95); }
    .grow-summary { display:flex; gap:12px; margin-bottom:16px; }
    .gs-card { flex:1; border-radius:20px; padding:16px 8px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.04); border:none; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); animation:pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both; cursor:pointer; }
    .gs-card:nth-child(1) { background:linear-gradient(145deg,#fff0f5,#fce7f3); animation-delay:0.1s; }
    .gs-card:nth-child(2) { background:linear-gradient(145deg,#ecfdf5,#d1fae5); animation-delay:0.2s; }
    .gs-card:nth-child(3) { background:linear-gradient(145deg,#eff6ff,#dbeafe); animation-delay:0.3s; }
    .gs-card:hover { transform:translateY(-4px) scale(1.02); }
    .gs-card:active { transform:scale(0.94); transition:transform 0.1s; }
    .gs-icon { font-size:22px; margin-bottom:4px; display:block; }
    .gs-val { font-size:30px; font-weight:900; line-height:1; }
    .gs-card:nth-child(1) .gs-val { color:var(--pink3); }
    .gs-card:nth-child(2) .gs-val { color:var(--blue3); }
    .gs-card:nth-child(3) .gs-val { color:var(--peach2); }
    .gs-label { font-size:11px; color:var(--text-soft); margin-top:4px; font-weight:700; }
    .grow-tabs { display:flex; gap:8px; margin-bottom:16px; }
    .gt-btn { flex:1; padding:10px; border:2px solid var(--border); background:white; border-radius:20px; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; color:var(--text-soft); }
    .gt-btn.gt-on { border-color:var(--pink2); background:var(--pink1); color:var(--text); }
    .grow-chart-wrap { background:white; border-radius:20px; padding:14px 10px 14px 6px; box-shadow:0 4px 16px rgba(0,0,0,0.04); margin-bottom:16px; overflow:visible; }
    .grow-records { margin-bottom:16px; }
    .gr-row { display:flex; align-items:center; justify-content:space-between; background:white; border-radius:20px; padding:14px 16px; margin-bottom:10px; box-shadow:0 4px 16px rgba(0,0,0,0.04); border:1px solid var(--border); }
    .gr-info { flex:1; }
    .gr-date { font-size:13px; font-weight:700; color:var(--text); }
    .gr-vals { font-size:12px; color:var(--text-soft); margin-top:2px; }
    .gr-note { font-size:11px; color:#a1a1aa; font-style:italic; }
    .gr-del { background:none; border:none; font-size:16px; cursor:pointer; opacity:0.4; padding:4px 8px; }
    .gr-del:hover { opacity:1; }
    /* Vaccine styles — matches food section spacing */
    #vaccinePage { padding:0 16px; }
    .vax-header { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
    .vax-header h3 { font-size:16px; font-weight:800; margin:0; color:var(--text); }
    .vax-add-btn { background:linear-gradient(135deg,var(--pink1),var(--lav1)); border:none; border-radius:20px; padding:6px 16px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; }
    .vax-upcoming { background:linear-gradient(145deg,#fff8f0,#fff0f5); border-radius:20px; padding:16px; margin-bottom:16px; border:1px solid #ffe4d6; box-shadow:0 4px 16px rgba(0,0,0,0.04); }
    .vax-upcoming-title { font-size:14px; font-weight:700; margin-bottom:10px; color:#e67e22; }
    .vax-up-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.05); font-size:13px; }
    .vax-up-item:last-child { border-bottom:none; }
    .vax-up-date { color:#e67e22; font-weight:600; font-size:12px; white-space:nowrap; margin-left:8px; }
    .vax-timeline { position:relative; padding-left:20px; margin-top:8px; }
    .vax-timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--pink2),var(--lav1)); border-radius:2px; }
    .vax-group { margin-bottom:16px; position:relative; }
    .vax-group-dot { position:absolute; left:-20px; top:4px; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--pink2),var(--lav2)); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.15); z-index:1; }
    .vax-group-date { font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }
    .vax-card { background:#fff; border-radius:20px; padding:14px 16px; margin-bottom:8px; border:1px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,0.04); }
    .vax-card-name { font-size:14px; font-weight:700; color:var(--text); }
    .vax-card-dose { font-size:12px; color:var(--text-soft); margin-top:2px; }
    .vax-card-meta { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
    .vax-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
    .vax-badge.fever { background:#fff3e0; color:#e65100; }
    .vax-badge.ok { background:#e8f5e9; color:#2e7d32; }
    .vax-badge.age { background:#f3e5f5; color:#7b1fa2; }
    .vax-item { padding:6px 0; border-bottom:1px solid rgba(0,0,0,0.04); position:relative; }
    .vax-item:last-of-type { border-bottom:none; }
    .vax-item-name { font-size:14px; font-weight:700; color:var(--text); padding-right:24px; }
    .vax-item-dose { font-size:12px; color:var(--text-soft); margin-top:1px; }
    .vax-card-notes { font-size:12px; color:var(--text-soft); margin-top:6px; }
    .vax-card-del { float:right; background:none; border:none; font-size:14px; cursor:pointer; opacity:0.4; }
    .vax-card-del:hover { opacity:1; }
    .vax-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; justify-content:center; align-items:center; }
    .vax-modal.sh { display:flex; }
    .vax-form { background:white; border-radius:20px; padding:24px; width:90%; max-width:360px; box-sizing:border-box; overflow:hidden; }
    .vax-form h3 { margin-bottom:16px; font-size:17px; }
    .vax-form label { display:block; margin-bottom:12px; font-size:13px; font-weight:600; color:var(--text-soft); }
    .vax-form input { display:block; width:100%; margin-top:4px; padding:10px 12px; border:2px solid #e5e7eb; border-radius:12px; font-size:15px; outline:none; transition:border-color .2s; box-sizing:border-box; -webkit-appearance:none; }
    .vax-form input:focus { border-color:var(--pink2); }
    .vax-no-data { text-align:center; padding:40px 20px; color:var(--text-soft); font-size:14px; }

    .grow-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; justify-content:center; align-items:center; }
    .grow-modal.sh { display:flex; }
    .grow-form { background:white; border-radius:20px; padding:24px; width:90%; max-width:360px; }
    .grow-form h3 { margin-bottom:16px; font-size:17px; }
    .grow-form label { display:block; margin-bottom:12px; font-size:13px; font-weight:600; color:var(--text-soft); }
    .grow-form input { display:block; width:100%; margin-top:4px; padding:10px 12px; border:2px solid #e5e7eb; border-radius:12px; font-size:15px; outline:none; transition:border-color .2s; }
    .grow-form input:focus { border-color:var(--pink2); }
    .gf-btns { display:flex; gap:10px; margin-top:16px; }
    .gf-btns button { flex:1; padding:12px; border:none; border-radius:14px; font-size:14px; font-weight:700; cursor:pointer; background:#f3f4f6; color:#666; }
    .gf-save { background:linear-gradient(135deg,var(--pink2),var(--pink3))!important; color:#fff!important; }

    .foot {
      text-align:center;
      padding:24px 16px 40px;
      font-size:12px;
      color:var(--text-soft);
      font-weight:600;
    }

    /* ===== AUTH BAR ===== */
    .auth-bar {
      position:absolute;top:0;left:0;right:0;z-index:80;
      display:flex;align-items:center;justify-content:flex-end;
      padding:14px 16px;
      background:transparent;
      gap:10px;
      transition:transform 0.3s;
    }
    .auth-bar.hidden { opacity:0;pointer-events:none; }
    .auth-user {
      display:flex;align-items:center;gap:8px;
      margin-right:auto;
    }
    .auth-user img {
      width:28px;height:28px;border-radius:50%;
      border:2px solid var(--pink2);
    }
    .auth-user span { font-size:13px;font-weight:700;color:var(--text); }
    .auth-btn {
      padding:6px 16px;border-radius:20px;
      font-size:12px;font-weight:800;
      border:2px solid rgba(255,255,255,0.5);
      cursor:pointer;font-family:inherit;
      transition:all 0.2s;
      background:rgba(255,255,255,0.25);
      backdrop-filter:blur(8px);
      color:var(--text);
    }
    .auth-btn:hover { background:rgba(255,255,255,0.45);border-color:rgba(255,255,255,0.7); }
    .auth-btn.login { background:linear-gradient(135deg,var(--pink1),var(--lav1));color:var(--text);border-color:var(--pink2);box-shadow:0 2px 12px rgba(255,142,196,0.2); }
    .auth-btn.login:hover { background:linear-gradient(135deg,var(--pink2),var(--lav2));color:white;transform:scale(1.05); }
    .auth-btn.logout { background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.6);color:var(--text);font-size:12px;padding:6px 14px;backdrop-filter:blur(8px); }

    /* ===== FAB (floating add button) ===== */
    .fab {
      display:none;
      position:fixed;bottom:100px;right:20px;z-index:60; /* Above bottom nav */
      width:56px;height:56px;border-radius:50%;
      background:linear-gradient(135deg,var(--pink3),var(--lav2));
      color:white;font-size:28px;
      border:none;cursor:pointer;
      box-shadow:0 6px 24px rgba(255,142,196,0.35);
      transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      font-family:inherit;
    }
    .fab:hover { transform:scale(1.1) rotate(90deg); }
    .fab:active { transform:scale(0.95); }
    .fab.show { display:flex;align-items:center;justify-content:center; }

    /* ===== FORM MODAL ===== */
    .form-ov {
      display:none;position:fixed;inset:0;
      background:rgba(74,32,64,0.3);
      backdrop-filter:blur(6px);
      z-index:90;
      align-items:flex-end;justify-content:center;
    }
    .form-ov.sh { display:flex; }
    .form-modal {
      background:var(--cream);
      border-radius:28px 28px 0 0;
      padding:20px 20px 100px;
      width:100%;max-width:480px;
      max-height:90vh;overflow-y:auto;
      animation:su 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .form-modal h3 {
      font-family:'ZCOOL KuaiLe',sans-serif;
      font-size:20px;margin-bottom:16px;
      text-align:center;
    }
    .form-group {
      margin-bottom:14px;
    }
    .form-group label {
      display:block;font-size:12px;font-weight:800;
      color:var(--text-mid);margin-bottom:5px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width:100%;
      padding:10px 14px;
      border:2px solid var(--border);
      border-radius:14px;
      font-size:14px;font-family:inherit;
      background:var(--card);
      color:var(--text);
      outline:none;
      transition:border-color 0.2s;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color:var(--pink3);
    }
    .form-group textarea { resize:vertical;min-height:60px; }
    .emoji-picker {
      display:flex;flex-wrap:wrap;gap:6px;
    }
    .emoji-opt {
      width:38px;height:38px;
      border-radius:12px;
      border:2px solid var(--border);
      background:var(--card);
      font-size:20px;
      cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:all 0.15s;
    }
    .emoji-opt:hover { transform:scale(1.15); }
    .emoji-opt.sel { border-color:var(--pink3);background:var(--pink1);transform:scale(1.1); }
    .mood-picker {
      display:flex;gap:6px;flex-wrap:wrap;
    }
    .mood-opt {
      padding:6px 12px;border-radius:12px;
      border:2px solid var(--border);
      background:var(--card);
      font-size:12px;font-weight:700;
      cursor:pointer;
      transition:all 0.15s;
      font-family:inherit;
    }
    .mood-opt:hover { transform:scale(1.05); }
    .mood-opt.sel { border-color:var(--pink3);background:var(--pink1); }
    .form-actions {
      display:flex;gap:10px;margin-top:20px;
    }
    .form-btn {
      flex:1;padding:12px;border-radius:16px;
      font-size:15px;font-weight:800;
      border:none;cursor:pointer;font-family:inherit;
      transition:all 0.2s;
    }
    .form-btn.primary {
      background:linear-gradient(135deg,var(--pink3),var(--lav2));
      color:white;
      box-shadow:0 4px 16px rgba(255,142,196,0.3);
    }
    .form-btn.primary:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,142,196,0.4); }
    .form-btn.cancel {
      background:var(--card);color:var(--text-soft);
      border:2px solid var(--border);
    }
    .form-btn.danger {
      background:#fee2e2;color:#dc2626;
      border:2px solid #fecaca;
      flex:0.5;
    }
    .form-btn.danger:hover { background:#fecaca; }

    /* Edit/delete icons on cards */
    .mc-actions {
      display:none;
      position:absolute;top:10px;right:10px;
      gap:6px;
    }
    .mc-actions.show { display:flex; }
    .mc-act-btn {
      width:30px;height:30px;border-radius:10px;
      border:1.5px solid var(--border);
      background:var(--card);
      font-size:14px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:all 0.15s;
    }
    .mc-act-btn:hover { background:var(--pink1);transform:scale(1.1); }
    .mc-act-btn.del:hover { background:#fee2e2; }
    .mc { position:relative; }

    /* ===== DESKTOP — same as mobile, just centered with max-width ===== */
    @media(min-width:768px) {
      .profile-header, .page, .desk { max-width:480px; margin-left:auto; margin-right:auto; }
      .btm-nav { max-width:480px; left:50%; transform:translateX(-50%); }
      .ov { align-items:center; }
      .mo { border-radius:28px;max-height:70vh;animation:fadeScale 0.3s cubic-bezier(0.16,1,0.3,1); }
      @keyframes fadeScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
    }

/* === Animations === */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    /* ===== ENHANCED HOME PAGE ===== */
    .hh-avatar-container {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hh-avatar-container:active .hh-avatar {
      transform: scale(0.9);
      transition: transform 0.1s;
    }
    .hh-hearts-container {
      position: absolute;
      inset: -20px;
      pointer-events: none;
      overflow: visible;
    }
    .floating-heart {
      position: absolute;
      left: 50%;
      bottom: 50%;
      font-size: 16px;
      opacity: 0;
      animation: heartRise 2.5s ease-out forwards;
      pointer-events: none;
    }
    @keyframes heartRise {
      0% { opacity: 0; transform: translate(-50%, 0) scale(0.3) rotate(0deg); }
      15% { opacity: 1; transform: translate(calc(-50% + var(--hx, 0px)), -15px) scale(1) rotate(var(--hr, 10deg)); }
      85% { opacity: 0.6; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 0px)), -80px) scale(0.6) rotate(var(--hr2, -10deg)); }
    }
    /* Celebrate burst */
    .celebrate-particle {
      position: fixed;
      pointer-events: none;
      z-index: 999;
      font-size: 20px;
      animation: celebrateBurst 1s cubic-bezier(0.25,0.1,0.25,1) forwards;
    }
    @keyframes celebrateBurst {
      0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
      100% { opacity: 0; transform: translate(var(--cx), var(--cy)) scale(0.3) rotate(var(--cr, 180deg)); }
    }

    /* Home progress bar */
    .home-progress {
      padding: 0 16px;
      margin-top: 4px;
    }
    .hp-card {
      background: var(--card);
      border-radius: 20px;
      padding: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      border: 2px solid var(--border);
    }
    .hp-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-soft);
      margin-bottom: 10px;
    }
    .hp-bar-wrap {
      background: var(--pink1);
      border-radius: 12px;
      height: 20px;
      overflow: hidden;
      position: relative;
      margin-bottom: 6px;
    }
    .hp-bar {
      height: 100%;
      border-radius: 12px;
      background: linear-gradient(90deg, var(--pink2), var(--pink3));
      transition: width 1s cubic-bezier(0.34,1.56,0.64,1);
      position: relative;
      min-width: 24px;
    }
    .hp-bar::after {
      content: '';
      position: absolute;
      right: 4px;
      top: 4px;
      bottom: 4px;
      width: 12px;
      border-radius: 6px;
      background: rgba(255,255,255,0.4);
    }
    .hp-bar-shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: shimmer 2s ease-in-out infinite;
    }
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .hp-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
    }
    .hp-labels span:first-child { color: var(--pink3); }
    .hp-labels span:last-child { color: var(--text-soft); }
    .hp-milestones {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .hp-ms {
      background: var(--lav1);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-mid);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .hp-ms.done {
      background: var(--mint1);
      color: #059669;
      text-decoration: line-through;
    }

    /* Today snapshot */
    .home-today {
      padding: 0 16px;
      margin-top: 12px;
    }
    .ht-card {
      background: var(--card);
      border-radius: 20px;
      padding: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      border: 2px solid var(--border);
    }
    .ht-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-soft);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ht-meals {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ht-meal {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 14px;
      background: var(--bg);
      transition: transform 0.2s;
    }
    .ht-meal:active { transform: scale(0.97); }
    .ht-meal-emoji { font-size: 24px; flex-shrink: 0; }
    .ht-meal-info { flex: 1; }
    .ht-meal-time { font-size: 11px; font-weight: 700; color: var(--text-soft); }
    .ht-meal-food { font-size: 13px; font-weight: 700; color: var(--text); }
    .ht-empty {
      text-align: center;
      padding: 16px;
      color: var(--text-soft);
      font-size: 13px;
    }
    .ht-empty-emoji { font-size: 36px; display: block; margin-bottom: 8px; }

    /* Fun fact card */
    .home-funfact {
      padding: 0 16px;
      margin-top: 12px;
    }
    .hf-card {
      background: linear-gradient(135deg, var(--butter), var(--peach1));
      border-radius: 20px;
      padding: 16px;
      border: 2px solid rgba(252,211,77,0.3);
      position: relative;
      overflow: hidden;
    }
    .hf-card::before {
      content: '💡';
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 48px;
      opacity: 0.1;
      transform: rotate(15deg);
    }
    .hf-label {
      font-size: 11px;
      font-weight: 800;
      color: #b45309;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .hf-text {
      font-size: 14px;
      font-weight: 600;
      color: #92400e;
      line-height: 1.6;
    }

/* ===== HOME PAGE V2 ===== */
.hh-avatar-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hh-avatar-container:active .hh-avatar {
  transform: scale(0.9);
  transition: transform 0.1s;
}
.hh-hearts-container {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}
.floating-heart {
  position: absolute;
  left: 50%;
  bottom: 60%;
  font-size: 16px;
  opacity: 0;
  animation: heartRise 3s ease-out forwards;
  pointer-events: none;
}
@keyframes heartRise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5) rotate(0deg); }
  15% { opacity: 0.9; transform: translate(calc(-50% + var(--hx, 0px)), -10px) scale(1) rotate(var(--hr, 10deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx, 0px)), -120px) scale(0.6) rotate(var(--hr, 10deg)); }
}
.celebrate-burst {
  position: absolute;
  font-size: 20px;
  pointer-events: none;
  animation: celebBurst 0.8s ease-out forwards;
}
@keyframes celebBurst {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx,0),var(--by,0)) scale(0.3); }
}

/* Progress bar */
.home-progress {
  padding: 0 20px;
  margin: 8px 0 4px;
}
.hp-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.hp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.hp-bar-wrap {
  background: var(--pink1);
  border-radius: 12px;
  height: 20px;
  overflow: hidden;
  position: relative;
}
.hp-bar {
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff8ec4, #c4b5fd, #74c0fc);
  background-size: 200% 100%;
  animation: barShimmer 2s linear infinite;
  transition: width 1s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: 40px;
}
@keyframes barShimmer { 0%{background-position:200% 0} 100%{background-position:0 0} }
.hp-bar-label {
  font-size: 11px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.hp-milestone-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
}
.hp-next {
  color: var(--pink3);
  font-weight: 700;
}

/* Today snapshot */
.home-today {
  padding: 0 20px;
  margin: 12px 0;
}
.ht-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ht-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ht-meals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ht-meal {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--pink1);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ht-meal-emoji {
  font-size: 18px;
}
.ht-empty {
  text-align: center;
  padding: 12px;
  color: var(--text-soft);
  font-size: 13px;
}

/* Fun fact card */
.home-funfact {
  padding: 0 20px;
  margin: 12px 0 8px;
}
.hf-card {
  background: linear-gradient(135deg, #fef3c7, #fff7ed);
  border: 2px solid #fde68a;
  border-radius: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}
.hf-card:active { transform: scale(0.97); }
.hf-card.flip { animation: factFlip 0.4s ease; }
@keyframes factFlip {
  0% { transform: scale(1) rotateX(0); opacity:1; }
  40% { transform: scale(0.95) rotateX(90deg); opacity:0; }
  60% { transform: scale(0.95) rotateX(-90deg); opacity:0; }
  100% { transform: scale(1) rotateX(0); opacity:1; }
}
.hf-icon {
  font-size: 28px;
  flex-shrink: 0;
  animation: hfWiggle 3s ease-in-out infinite;
}
@keyframes hfWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} 75%{transform:rotate(-4deg)} }
.hf-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 600;
}
.hf-label {
  font-size: 11px;
  color: #b45309;
  font-weight: 700;
  margin-bottom: 2px;
}