:root {
    /* ---- Color palette ---- */
    --brand: #2D6A4F;
    --brand-dark: #1B4332;
    --brand-accent: #52B788;
    --brand-accent-soft: #74C69D;
    --brand-light: #F0FAF4;
    --brand-tint: #D8F3DC;

    /* Meal-type accents */
    --meal-breakfast: #3B82F6; /* blue */
    --meal-lunch: #F59E0B;     /* orange */
    --meal-dinner: #8B5CF6;    /* purple */
    --meal-snack: #14B8A6;     /* teal */

    /* Shape & depth */
    --radius-card: 12px;
    --radius-input: 8px;
    --shadow-sm: 0 2px 8px rgba(27, 67, 50, .06);
    --shadow-md: 0 6px 20px rgba(27, 67, 50, .10);
    --shadow-lg: 0 16px 40px rgba(27, 67, 50, .16);
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
}

* { font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

html { font-size: 16px; }
body {
    background: var(--brand-light);
    color: #1f2d24;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: -.01em; }
.display-4, .display-5 { letter-spacing: -.03em; }

/* ---- Brand utilities ---- */
.bg-brand { background: linear-gradient(90deg, var(--brand-dark), var(--brand)) !important; }
.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--brand-accent) !important; }

.btn { border-radius: var(--radius-input); font-weight: 600; transition: var(--transition); }
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn-accent { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.btn-accent:hover { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-md); }
.btn-outline-brand { color: var(--brand); border-color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
a { color: var(--brand-dark); }

/* ---- Navbar ---- */
.app-navbar {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(27, 67, 50, .08);
    box-shadow: 0 2px 14px rgba(27, 67, 50, .06);
}
.app-navbar .navbar-brand {
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}
.app-navbar .nav-link {
    color: #33463c;
    font-weight: 500;
    border-radius: 999px;
    padding: .45rem .95rem !important;
    transition: var(--transition);
}
.app-navbar .nav-link:hover { color: var(--brand); background: var(--brand-light); }
.app-navbar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, var(--brand), var(--brand-accent));
    box-shadow: var(--shadow-sm);
}

/* ---- Cards ---- */
.card {
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.program-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--brand-accent);
}
.program-card::after { content: ""; }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* rotating accent shades for dashboard cards */
.accent-0 { border-top-color: #2D6A4F; }
.accent-1 { border-top-color: #40916C; }
.accent-2 { border-top-color: #52B788; }
.accent-3 { border-top-color: #74C69D; }
.accent-4 { border-top-color: #1B4332; }
.accent-5 { border-top-color: #95D5B2; }

.feature-card { transition: var(--transition); }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-icon {
    width: 60px; height: 60px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint); color: var(--brand); font-size: 1.7rem;
}

/* ---- Hero ---- */
.hero {
    background:
        radial-gradient(circle at 85% 20%, rgba(116, 198, 157, .28), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(45, 106, 79, .12), transparent 40%),
        linear-gradient(135deg, #ffffff, var(--brand-light));
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
}
.hero-badge {
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: 999px;
    font-weight: 600;
    padding: .4rem 1rem;
}
.plate-illustration { max-width: 100%; height: auto; filter: drop-shadow(0 14px 28px rgba(27, 67, 50, .18)); }

/* ---- Stats row ---- */
.stat-value { font-size: 2.4rem; font-weight: 800; color: var(--brand); line-height: 1; }
.stat-label { color: #5a6b62; font-weight: 500; }

/* ---- Welcome banner ---- */
.welcome-banner {
    background: linear-gradient(120deg, var(--brand-dark), var(--brand) 55%, var(--brand-accent));
    color: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
}
.welcome-banner::before {
    content: "";
    position: absolute; right: -40px; top: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.welcome-banner .emoji { font-size: 3rem; }

/* ---- Forms ---- */
.form-control, .form-select { border-radius: var(--radius-input); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .22rem rgba(82, 183, 136, .25);
}
.form-floating > label { color: #7a877f; }
.field-error { color: #c62828; font-size: .85rem; margin-top: .3rem; }
.auth-wrap { max-width: 480px; margin: 2rem auto; }
.auth-head {
    background: linear-gradient(120deg, var(--brand-dark), var(--brand-accent));
    color: #fff;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding: 1.75rem 2rem;
}

/* ---- Meal-type badges ---- */
.mb { color: #fff; font-weight: 600; letter-spacing: .01em; }
.mb-breakfast { background: var(--meal-breakfast); }
.mb-lunch { background: var(--meal-lunch); }
.mb-dinner { background: var(--meal-dinner); }
.mb-snack { background: var(--meal-snack); }

/* ---- Planner ---- */
.accordion-button:not(.collapsed) {
    background: var(--brand-light);
    color: var(--brand-dark);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(82, 183, 136, .25); }
.day-total-badge { font-size: .95rem; }
.progress { background: #e3ece7; border-radius: 999px; }
.progress-bar { border-radius: 999px; }

/* Floating add-meal button */
.btn-add-meal {
    background: var(--brand-accent);
    color: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    font-weight: 600;
}
.btn-add-meal:hover { background: var(--brand); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ---- Toasts ---- */
.toast-container { z-index: 1080; }
.app-toast { border: none; border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.app-toast .toast-body { font-weight: 500; }
.app-toast.toast-success { border-left: 5px solid var(--brand-accent); }
.app-toast.toast-error { border-left: 5px solid #e5484d; }
.app-toast.toast-success .toast-icon { color: var(--brand-accent); }
.app-toast.toast-error .toast-icon { color: #e5484d; }

/* ---- Footer ---- */
.app-footer { background: #fff; border-top: 1px solid rgba(27, 67, 50, .08); }

/* ---- Empty state ---- */
.empty-illustration { font-size: 4.5rem; }

/* ---- Print ---- */
@media print {
    .no-print, .navbar, footer, .btn, .toast-container { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .container { max-width: 100%; }
    a[href]:after { content: ""; }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 575.98px) {
    .btn-responsive { width: 100%; }
    .stat-value { font-size: 2rem; }
}



/* =========================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================= */

/* ---- Body fade-in on load ---- */
body { opacity: 0; transition: opacity .4s ease; }
body.page-loaded { opacity: 1; }

/* ---- Hero plate floating bob ---- */
@keyframes plateBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.plate-illustration { animation: plateBob 3s ease-in-out infinite; }

/* ---- Navbar leaf rotate on hover ---- */
.navbar-brand .brand-leaf {
    display: inline-block;
    transition: transform .3s ease;
}
.navbar-brand:hover .brand-leaf { transform: rotate(15deg) scale(1.1); }

/* ---- Button hover scale + shadow ---- */
.btn { will-change: transform; }
.btn:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(.98) translateY(1px); }
.btn:disabled { transform: none; box-shadow: none; }

/* ---- Generic card lift on hover ---- */
.card-lift { transition: transform var(--transition), box-shadow var(--transition); }
.card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---- Progress bars animated fill on load ---- */
.progress-bar {
    transform-origin: left center;
    animation: barGrow 1.1s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Toast slide-in from bottom-right + fade ---- */
@keyframes toastIn {
    from { opacity: 0; transform: translate(40px, 20px); }
    to   { opacity: 1; transform: translate(0, 0); }
}
.toast-container .toast.showing,
.toast-container .toast.show { animation: toastIn .45s cubic-bezier(.22, 1, .36, 1); }

/* ---- Green loading spinner (for LLM / AJAX calls) ---- */
.spinner-green {
    display: inline-block;
    width: 1.15rem; height: 1.15rem;
    border: 3px solid rgba(82, 183, 136, .30);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -.2em;
}
.spinner-green-sm { width: .95rem; height: .95rem; border-width: 2px; }
.spinner-green-lg { width: 3rem; height: 3rem; border-width: 5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Fade-in slide-up (e.g. meal rows when added) ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .5s ease both; }
.meal-row { animation: fadeInUp .45s ease both; }

/* ---- Input focus green glow ring (enhanced) ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .22rem rgba(82, 183, 136, .28);
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* ---- Calorie badge pulse (over target) ---- */
@keyframes caloriePulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.calorie-over {
    background-color: #dc3545 !important;
    color: #fff !important;
    animation: caloriePulse 1.4s ease-out infinite;
}

/* ---- Shake (delete) ---- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(7px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}
.shake { animation: shake .5s ease; }

/* =========================================================
   NUTRITION ANALYZER
   ========================================================= */
.nutrition-page { max-width: 960px; margin: 0 auto; }

.analyzer-search-wrap { max-width: 720px; }
.analyzer-search {
    position: relative;
    display: flex;
    gap: .5rem;
    background: #fff;
    border-radius: 18px;
    padding: .5rem;
    border: 1px solid rgba(27, 67, 50, .10);
}
.analyzer-search .form-control {
    border: none;
    padding-left: 2.6rem;
    box-shadow: none;
}
.analyzer-search .form-control:focus { box-shadow: none; }
.analyzer-search-icon {
    position: absolute;
    left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--brand-accent);
    font-size: 1.1rem;
    pointer-events: none;
}
.analyzer-search .btn { white-space: nowrap; }

.analyzer-suggestions .chip {
    border: 1px solid rgba(27, 67, 50, .15);
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 500;
    margin: .15rem;
    transition: var(--transition);
}
.analyzer-suggestions .chip:hover {
    background: var(--brand-tint);
    transform: translateY(-2px);
}

/* ---- Result card ---- */
.result-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(27, 67, 50, .06);
}
.result-card .section-title {
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.result-card .section-title i { color: var(--brand-accent); }

/* ---- Health score ring ---- */
.health-score { position: relative; width: 92px; height: 92px; text-align: center; }
.score-ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.score-ring .ring-bg { fill: none; stroke: #eef3f0; stroke-width: 8; }
.score-ring .ring-fg {
    fill: none; stroke-width: 8; stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}
.score-inner {
    position: absolute; top: 34px; left: 0; right: 0;
    font-weight: 800; line-height: 1;
}
.score-num { font-size: 1.6rem; }
.score-den { font-size: .8rem; color: #8a978f; }
.score-caption {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #8a978f; margin-top: .1rem;
}
.score-green .ring-fg { stroke: #2E7D32; } .score-green .score-num { color: #2E7D32; }
.score-yellow .ring-fg { stroke: #F59E0B; } .score-yellow .score-num { color: #F59E0B; }
.score-red .ring-fg { stroke: #EF4444; } .score-red .score-num { color: #EF4444; }

/* ---- Macro arc cards ---- */
.macro-card {
    background: var(--brand-light);
    border-radius: 16px;
    padding: 1rem .5rem .9rem;
    text-align: center;
}
.macro-arc { width: 90px; height: 90px; }
.macro-arc .arc-bg { fill: none; stroke: #e6efe9; stroke-width: 8; }
.macro-arc .arc-fg {
    fill: none; stroke-width: 8; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dasharray 1s ease;
}
.macro-arc .arc-val { font-size: 15px; font-weight: 800; fill: #223; text-anchor: middle; }
.macro-arc .arc-unit { font-size: 9px; fill: #8a978f; text-anchor: middle; }
.macro-label { font-weight: 700; margin-top: .3rem; }
.macro-dv { font-size: .78rem; }

/* ---- Micro rows ---- */
.micro-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.micro-icon {
    font-size: 1.15rem; width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint); border-radius: 10px; flex: 0 0 auto;
}
.micro-body { flex: 1 1 auto; }
.micro-name { font-weight: 600; font-size: .9rem; }
.micro-bar { height: 7px; background: #eef3f0; border-radius: 6px; overflow: hidden; margin-top: .2rem; }
.micro-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand));
    border-radius: 6px;
    width: 0; animation: barGrowW 1s ease both;
}
@keyframes barGrowW { from { width: 0; } }

/* ---- Health notes ---- */
.health-notes {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--brand-tint);
    border-left: 4px solid var(--brand);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: .5rem 0 1.25rem;
    color: var(--brand-dark);
}
.health-notes i { color: var(--brand); font-size: 1.3rem; margin-top: .1rem; }

/* ---- Disable animations for print ---- */
@media print {
    body { opacity: 1 !important; animation: none !important; }
    .plate-illustration, .progress-bar, .meal-row, [data-aos] {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}