body { background:#f4f5f9; }
.navbar { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.nav-link {  !important; border-radius:6px; }
.nav-link.active { color:#fff !important; background:rgba(255,255,255,0.15); }
.nav-link:hover { color:#000 !important; background:rgba(255,255,255,0.15); }
.main-content { max-width:1100px; margin:0 auto; padding:8px 16px 40px; }
.card { border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.card-header { background:#fff; border-bottom:1px solid #f0f0f0; font-weight:600; }
.text-white { color:#fff !important; }

.user-badge {
    width:36px; height:36px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:14px;
    flex-shrink:0; text-transform:uppercase; line-height:1;
}
.user-badge.sm { width:28px; height:28px; font-size:12px; }

.stat-card { border-radius:12px; padding:20px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.stat-card .stat-label { font-size:13px; opacity:.9; margin-bottom:6px; }
.stat-card .stat-value { font-size:1.6rem; font-weight:700; }
.stat-blue { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-teal { background: linear-gradient(135deg, #0f9b8e, #00d2ff); }
.stat-orange { background: linear-gradient(135deg, #f7971e, #ffd200); }

.login-wrap { max-width:400px; margin:60px auto; }
.login-wrap .card { padding:10px; }

/* ---- Calendar ---- */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-daylabel { text-align:center; font-size:12px; color:#888; font-weight:600; text-transform:uppercase; }
.cal-day {
    position:relative; background:#fff; border-radius:10px; min-height:92px; padding:6px 8px;
    cursor:pointer; border:1px solid #eee; transition:box-shadow .15s;
}
.cal-day:hover { box-shadow:0 2px 10px rgba(0,0,0,0.12); }
.cal-day.outside { opacity:.35; }
.cal-day.today { border:2px solid #667eea; }
.cal-day .cal-daynum { font-weight:700; font-size:13px; }
.cal-suggest-badge {
    position:absolute; margin-left: 1px; top:6px; right:8px; color:#0dcaf0; font-size:12px;
}
.cal-day .cal-meals { margin-top:4px; display:flex; flex-wrap:wrap; gap:3px; }
.meal-dot {
    font-size:10px; border-radius:6px; padding:2px 5px; background:#f0f1f8; color:#555;
    display:inline-flex; align-items:center; gap:3px;
}

.meal-dot.filled {
    background: #6574d8;
    color: #fff;
    border: 2px solid #3f4cac;
    font-weight: 650;
    box-shadow: 0 1px 4px rgba(63, 76, 172, 0.35);
}

.cal-week-row { grid-template-columns:repeat(7,1fr); }
.cal-day.week-mode { min-height:150px; }

.food-chip {
    display:inline-flex; align-items:center; gap:5px; background:#f0f1f8; border-radius:16px;
    padding:4px 10px; font-size:13px; margin:2px 4px 2px 0;
}
.food-chip .fa-check { color:#28a745; }
.food-chip .fa-triangle-exclamation { color:#f7971e; }
.food-chip .fa-ban { color:#dc3545; }
.food-chip .rm { cursor:pointer; color:#999; margin-left:4px; }

.badge-month { background:#eef0fb; color:#5a5fb8; font-weight:600; }

.milestone-photo {
    width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
}