/* ==========================================================================
   NUTRIR — OBSIDIAN DESIGN SYSTEM
   Warm dark luxury · Amber accent · Geist + Geist Mono · Glass cards
   ========================================================================== */

/* 1. DESIGN TOKENS */
:root {
    /* Backgrounds */
    --bg-app:              #0a0a0c;
    --bg-surface:          rgba(255,250,240,0.04);
    --bg-surface-elevated: rgba(12,12,14,0.96);
    --border-color:        rgba(255,250,240,0.08);
    --border-hover:        rgba(255,250,240,0.14);

    /* Palette */
    --color-primary:       #f5c14d;   /* Amber */
    --color-primary-rgb:   245,193,77;
    --color-secondary:     #8da7c4;   /* Slate blue — hydration */
    --color-secondary-rgb: 141,167,196;
    --color-accent2:       #e0734a;   /* Coral orange */
    --color-text-main:     #f4f1ec;
    --color-text-muted:    rgba(244,241,236,0.45);

    /* Macros */
    --color-protein:       #ff8e7e;
    --color-protein-rgb:   255,142,126;
    --color-carbs:         #c4e88f;
    --color-carbs-rgb:     196,232,143;
    --color-fat:           #f5c14d;
    --color-fat-rgb:       245,193,77;
    --color-fiber:         #bf8af2;

    /* Gradients */
    --gradient-primary:      linear-gradient(180deg, #f5c14d, #e0a13a);
    --gradient-accent:       linear-gradient(135deg, #f5c14d, #e0734a);
    --gradient-fasting:      linear-gradient(135deg, #f5c14d, #e0734a);
    --gradient-water:        linear-gradient(180deg, #8da7c4, #6a8fb8);

    --shadow-premium:   0 12px 40px rgba(0,0,0,0.6);
    --blur-glass:       20px;
    --transition-smooth: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
}

/* 2. RESET */
* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: #030305;
    color: var(--color-text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* App Wrapper */
.app-container {
    width: 100%;
    max-width: 460px;
    height: 100vh;
    background: var(--bg-app);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-container::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(245,193,77,0.08), transparent 70%),
        radial-gradient(40% 30% at 100% 100%, rgba(224,115,74,0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.app-container::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,250,240,0.03) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, black 25%, black 80%, transparent);
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 461px) {
    .app-container {
        height: 92vh;
        max-height: 860px;
        border-radius: 36px;
        border: 1px solid rgba(255,250,240,0.08);
        box-shadow: var(--shadow-premium);
    }
}

/* Screen router */
.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: var(--transition-smooth);
    background: transparent;
    padding-bottom: 75px;
    z-index: 1;
}

.screen.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 2;
}

#screen-onboarding,
#screen-scanner,
#screen-results,
#screen-food-search {
    padding-bottom: 0;
    z-index: 5;
}

.scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    padding-bottom: 40px;
    scrollbar-width: none;
    position: relative; z-index: 1;
}

.scrollable-content::-webkit-scrollbar { display: none; }

.flex-1 { flex: 1; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.margin-top-md { margin-top: 16px; }
.margin-top-lg { margin-top: 24px; }

/* 3. BUTTONS */
.btn-primary {
    background: var(--gradient-primary);
    color: #1a1408;
    border: none;
    border-radius: 14px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 22px -8px rgba(245,193,77,0.5);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 28px -6px rgba(245,193,77,0.55);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary:disabled {
    background: rgba(255,250,240,0.06);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-secondary {
    background: rgba(255,250,240,0.04);
    color: var(--color-text-main);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    background: rgba(255,250,240,0.07);
    border-color: var(--border-hover);
}

.btn-danger {
    background: rgba(224,115,74,0.08);
    color: var(--color-accent2);
    border: 1px solid rgba(224,115,74,0.2);
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-danger:hover { background: rgba(224,115,74,0.14); }

.btn-text-icon {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.icon-btn {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(255,250,240,0.04);
    border: 1px solid var(--border-color);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.icon-btn:hover {
    background: rgba(255,250,240,0.07);
    border-color: var(--border-hover);
}

/* 4. INPUTS */
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group-row { display: flex; gap: 12px; }

label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    color: var(--color-text-main);
    font-size: 14px;
    font-family: 'Geist', sans-serif;
    transition: var(--transition-smooth);
    -webkit-appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(244,241,236,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

input:focus, select:focus {
    outline: none;
    border-color: rgba(245,193,77,0.4);
    background: rgba(255,250,240,0.05);
}

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

.gender-selector { display: flex; gap: 10px; }
.gender-btn { flex: 1; cursor: pointer; }
.gender-btn input { display: none; }
.gender-btn .btn-content {
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}
.gender-btn input:checked + .btn-content {
    border-color: rgba(245,193,77,0.35);
    background: rgba(245,193,77,0.08);
}
.gender-btn input:checked + .btn-content i { color: var(--color-primary); }
.gender-btn span { font-size: 12px; font-weight: 500; }

/* Sliders */
.label-row-val { display: flex; justify-content: space-between; align-items: center; }
.slider-display-val {
    font-family: 'Geist Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-primary);
}

.slider-wrapper { display: flex; flex-direction: column; gap: 4px; }

input[type="range"] {
    -webkit-appearance: none;
    width: 100%; height: 2px;
    border-radius: 1px;
    background: rgba(255,250,240,0.1);
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; height: 2px;
    cursor: pointer;
    border-radius: 1px;
    background: rgba(255,250,240,0.1);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px; width: 18px;
    border-radius: 50%;
    background: #f5c14d;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 0 10px rgba(245,193,77,0.4), 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #0a0a0c;
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); }

.slider-bounds {
    display: flex;
    justify-content: space-between;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* Mascot speech bubble */
.mascot-speech-bubble {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(245,193,77,0.04);
    border: 1px solid rgba(245,193,77,0.12);
    padding: 14px;
    border-radius: 16px;
    margin-bottom: 20px;
}
.mascot-img-placeholder { font-size: 28px; animation: bounce 2s infinite ease-in-out; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.speech-text { font-size: 13px; line-height: 1.5; color: rgba(244,241,236,0.8); }

/* Onboarding estimate boxes */
.estimation-results-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-top: 20px; margin-bottom: 20px;
}
.result-box {
    background: rgba(245,193,77,0.04);
    border: 1px solid rgba(245,193,77,0.14);
    padding: 14px; border-radius: 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.result-box .r-title {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
}
.result-box .r-value { font-size: 14px; font-weight: 500; color: var(--color-text-main); }
.result-box .r-value strong { color: var(--color-primary); }

/* Divider */
.divider-line {
    height: 1px; background: var(--border-color);
    margin: 16px 0;
}

/* ==========================================================================
   5. LOGIN SCREEN
   ========================================================================== */
.welcome-header {
    padding: 40px 28px 24px;
    text-align: left;
    flex-shrink: 0;
    position: relative; z-index: 1;
}

.logo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 18px;
}

.ai-pill {
    background: rgba(245,193,77,0.15);
    color: var(--color-primary);
    border: 1px solid rgba(245,193,77,0.3);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.welcome-header h1 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.welcome-header h1 span { color: var(--color-primary); }
.welcome-header p { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; }

.login-body { padding-top: 8px; }

.auth-form .form-group { margin-bottom: 12px; }

.auth-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 14px;
}

.btn-text-only {
    background: none; border: none;
    color: var(--color-primary);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

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

.auth-divider span {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    color: var(--color-text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.google-signin-wrapper {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   6. DASHBOARD
   ========================================================================== */
.dashboard-header {
    padding: 20px 24px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative; z-index: 1;
    gap: 12px;
}

.dashboard-header .user-greeting {
    flex: 1;
    min-width: 0;
}

.user-greeting h2 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.date-today {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-btn-review {
    background: rgba(245,193,77,0.1);
    border: 1px solid rgba(245,193,77,0.25);
    color: var(--color-primary);
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    animation: alertPulse 2.5s infinite ease-in-out;
}

@keyframes alertPulse { 0%,100%{opacity:.85} 50%{opacity:1; transform:scale(1.02)} }

.dashboard-content { display: flex; flex-direction: column; gap: 14px; }

/* Search trigger */
.search-trigger-bar {
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.search-trigger-bar:hover {
    background: rgba(255,250,240,0.05);
    border-color: var(--border-hover);
}

/* Calorie card */
.calorie-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 22px;
    backdrop-filter: blur(var(--blur-glass));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ring-wrapper {
    position: relative;
    width: 160px; height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.progress-ring {
    transform: rotate(-90deg);
    width: 160px; height: 160px;
    flex-shrink: 0;
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.8s ease-in-out;
    stroke-dasharray: 427.25;
    stroke-dashoffset: 427.25;
}

.ring-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ring-number {
    font-family: 'Geist Mono', monospace;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: var(--color-text-main);
}

.ring-label {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.calorie-summary-row {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.cal-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cal-stat .stat-val {
    font-family: 'Geist Mono', monospace;
    font-size: 14px; font-weight: 500;
}
.cal-stat .stat-lbl {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; color: var(--color-text-muted); letter-spacing: 0.06em;
}

.cal-divider { width: 1px; height: 22px; background: var(--border-color); }

/* Water card */
.water-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0;
    backdrop-filter: blur(var(--blur-glass));
}

.water-header { display: flex; justify-content: space-between; align-items: center; }

.water-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-secondary);
}

.water-icon-pulse { animation: waterPulse 2s infinite ease-in-out; }
@keyframes waterPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

.water-title { font-size: 13px; font-weight: 500; }

.water-amount {
    font-family: 'Geist Mono', monospace;
    font-size: 12px; font-weight: 500;
}

.water-bar-bg {
    height: 4px;
    background: rgba(255,250,240,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.water-bar-fill {
    height: 100%;
    background: var(--gradient-water);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.water-controls-row { display: flex; gap: 8px; align-items: center; }

.btn-water-quick {
    flex: 1;
    background: rgba(141,167,196,0.08);
    border: 1px solid rgba(141,167,196,0.18);
    color: var(--color-secondary);
    border-radius: 10px;
    padding: 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transition: var(--transition-smooth);
}

.btn-water-quick:hover { background: rgba(141,167,196,0.14); }
.btn-water-quick .sub { font-size: 9px; font-weight: 400; color: var(--color-text-muted); }

/* ── Macro Panel (substitui macro-grid) ── */
.macro-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
    backdrop-filter: blur(var(--blur-glass));
}

.macro-panel-row {
    display: grid;
    grid-template-columns: 76px 1fr 66px;
    align-items: center;
    gap: 10px;
}

.mpr-label {
    display: flex; align-items: center; gap: 7px;
}

.mpr-dot {
    width: 7px; height: 7px;
    border-radius: 50%; flex-shrink: 0;
}

.mpr-name {
    font-size: 12px; font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mpr-bar { height: 4px !important; }

.mpr-val {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; color: var(--color-text-muted);
    text-align: right; white-space: nowrap;
}
.mpr-val strong { color: var(--color-text-main); font-weight: 600; font-size: 12px; }

.bar-bg {
    height: 3px; width: 100%;
    background: rgba(255,250,240,0.06);
    border-radius: 2px; overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.1,0.8,0.3,1);
}

.bg-protein { background: var(--color-protein); }
.bg-carbs   { background: var(--color-carbs); }
.bg-fat     { background: var(--color-fat); }

/* FAB */
.btn-fab {
    position: absolute;
    bottom: 88px; right: 20px;
    background: var(--gradient-primary);
    color: #1a1408;
    border: none;
    border-radius: 28px;
    height: 50px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 32px -10px rgba(245,193,77,0.65), 0 1px 0 rgba(255,255,255,0.2) inset;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition-smooth);
}

.btn-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -8px rgba(245,193,77,0.7), 0 1px 0 rgba(255,255,255,0.2) inset;
}

/* Meals list */
.meals-log-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex-shrink: 0; }

.section-title-row { display: flex; justify-content: space-between; align-items: center; }
.section-title-row h3 { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }

.meal-count {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; font-weight: 500;
    background: rgba(255,250,240,0.05);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meals-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Meal item (expandível) ── */
.meal-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--transition-smooth);
    backdrop-filter: blur(var(--blur-glass));
}

.meal-item:hover { border-color: var(--border-hover); }

.meal-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px 8px;
    cursor: pointer;
}

.meal-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.meal-title { font-size: 13px; font-weight: 500; }
.meal-time {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
}

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

.meal-cal-badge {
    font-family: 'Geist Mono', monospace;
    font-size: 15px; font-weight: 600;
    color: var(--color-primary);
}
.meal-cal-badge span { font-size: 9px; color: var(--color-text-muted); font-weight: 400; margin-left: 1px; }

.meal-delete-btn {
    background: none; border: none;
    color: rgba(224,115,74,0.4);
    cursor: pointer; padding: 5px;
    border-radius: 8px;
    transition: var(--transition-smooth);
}
.meal-delete-btn:hover { color: var(--color-accent2); background: rgba(224,115,74,0.08); }

.meal-tags-row {
    display: flex; align-items: center; gap: 5px;
    padding: 0 14px 10px;
    flex-wrap: wrap;
}

.meal-expand-btn {
    margin-left: auto;
    background: none; border: none;
    color: var(--color-text-muted);
    cursor: pointer; padding: 2px;
    display: flex; align-items: center;
    transition: transform 0.25s ease;
}
.meal-expand-btn.open { transform: rotate(180deg); }

/* Expanded food items */
.meal-items-detail {
    border-top: 1px solid var(--border-color);
    background: rgba(255,250,240,0.02);
}
.meal-items-detail.hidden { display: none; }

.mdi-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,250,240,0.04);
}
.mdi-item:last-child { border-bottom: none; }

.mdi-name { font-size: 12px; color: var(--color-text-main); }
.mdi-info {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
    text-align: right;
}

/* Tags coloridas (usadas em meals e history) */
.mmtag {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 2px 7px; border-radius: 6px;
}
.mmtag-p { background: rgba(34,197,94,0.12);  color: #22c55e; }
.mmtag-c { background: rgba(59,130,246,0.12); color: #3b82f6; }
.mmtag-f { background: rgba(249,115,22,0.12); color: #f97316; }

.empty-state {
    text-align: center;
    padding: 32px 16px;
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.empty-icon { width: 32px; height: 32px; opacity: 0.4; }

/* ==========================================================================
   7. FOOD SEARCH
   ========================================================================== */
.food-search-body {
    display: flex; flex-direction: column;
    flex: 1; overflow: hidden;
    position: relative; z-index: 1;
}

.search-input-wrapper {
    position: relative;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.search-icon-inside {
    position: absolute; left: 38px;
    color: var(--color-text-muted);
}

.search-input-wrapper input {
    padding-left: 42px;
    padding-right: 42px;
}

.clear-search-btn {
    position: absolute; right: 38px;
    background: none; border: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.search-results-scroll {
    flex: 1; overflow-y: auto;
    padding: 14px 22px;
    display: flex; flex-direction: column; gap: 8px;
}

.search-food-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 13px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.search-food-item:hover {
    border-color: var(--border-hover);
    background: rgba(255,250,240,0.05);
}

.food-meta-info { display: flex; flex-direction: column; gap: 3px; }
.food-meta-info .title { font-size: 13px; font-weight: 500; }
.food-meta-info .kcal {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; color: var(--color-text-muted);
}
.food-meta-info .portion-badge {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; font-weight: 500;
    color: var(--color-primary);
    background: rgba(245,193,77,0.08);
    border: 1px solid rgba(245,193,77,0.2);
    padding: 1px 6px;
    border-radius: 6px;
    align-self: flex-start;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.add-food-search-btn {
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(245,193,77,0.2);
    background: rgba(245,193,77,0.06);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.search-food-item:hover .add-food-search-btn {
    background: var(--color-primary);
    color: #1a1408;
}

/* ==========================================================================
   8. SCANNER & RESULTS
   ========================================================================== */
.scanner-header,
.results-header,
.history-header,
.settings-header {
    padding: 18px 22px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative; z-index: 1;
}

.scanner-header h3,
.results-header h3,
.history-header h3,
.settings-header h3 {
    font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
}

.scanner-body {
    display: flex; flex-direction: column;
    flex: 1; overflow: hidden;
    padding: 14px 20px 20px;
    gap: 16px;
    position: relative; z-index: 1;
}

.camera-preview-container {
    flex: 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #06060a;
    min-height: 0;
}

.camera-feed {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.scanner-laser {
    position: absolute; left: 26px; right: 26px; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f5c14d, transparent);
    box-shadow: 0 0 12px #f5c14d;
    animation: scanLine 2s ease-in-out infinite;
}
@keyframes scanLine { 0%,100%{top:30%} 50%{top:70%} }

.camera-frame .corner {
    position: absolute; width: 24px; height: 24px;
    border-color: #f5c14d;
    border-style: solid;
}
.camera-frame .top-left    { top:18px; left:18px;  border-width:2px 0 0 2px; border-radius:6px 0 0 0; }
.camera-frame .top-right   { top:18px; right:18px; border-width:2px 2px 0 0; border-radius:0 6px 0 0; }
.camera-frame .bottom-left { bottom:64px; left:18px;  border-width:0 0 2px 2px; border-radius:0 0 0 6px; }
.camera-frame .bottom-right{ bottom:64px; right:18px; border-width:0 2px 2px 0; border-radius:0 0 6px 0; }

.camera-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; color: var(--color-text-muted);
}

.placeholder-icon { width: 36px; height: 36px; opacity: 0.4; }
.camera-placeholder p { font-size: 12px; text-align: center; padding: 0 24px; line-height: 1.5; }

.scanner-controls { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

.input-tabs {
    display: flex; gap: 6px;
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 4px;
}

.tab-btn {
    flex: 1;
    background: transparent; border: none;
    color: var(--color-text-muted);
    font-size: 12px; font-weight: 500;
    padding: 9px 10px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tab-btn.active {
    background: rgba(245,193,77,0.1);
    color: var(--color-primary);
    border: 1px solid rgba(245,193,77,0.25);
}

.control-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.btn-capture {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255,250,240,0.15);
    padding: 4px;
    cursor: pointer;
}

.btn-capture-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 24px rgba(245,193,77,0.5);
}

.control-hint {
    font-size: 11px; color: var(--color-text-muted);
    text-align: center; line-height: 1.4;
}

.upload-dropzone {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    padding: 20px;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    width: 100%;
}

.upload-filename { font-size: 11px; color: var(--color-text-muted); }

/* AI Loader */
.ai-loader-overlay {
    position: absolute; inset: 0;
    background: rgba(10,10,12,0.85);
    backdrop-filter: blur(12px);
    z-index: 20;
    display: flex;
    align-items: center; justify-content: center;
}

.loader-content {
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
    padding: 32px;
}

.sparkle-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(245,193,77,0.1);
    border: 1px solid rgba(245,193,77,0.3);
    display: flex; align-items: center; justify-content: center;
}

.pulsing-sparkle {
    color: var(--color-primary);
    animation: sparkleAnim 1.2s ease-in-out infinite;
}
@keyframes sparkleAnim { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:.7} }

.loader-content h4 { font-size: 16px; font-weight: 500; }
.loader-content p { font-size: 12px; color: var(--color-text-muted); }

.bar-bg.mini-loader { width: 160px; border-radius: 2px; }
.animated-progress {
    width: 40%;
    background: var(--gradient-primary);
    animation: loadingBar 1.5s ease-in-out infinite;
}
@keyframes loadingBar { 0%{width:5%} 50%{width:80%} 100%{width:5%} }

/* Results */
.results-content { padding-top: 14px; }

.result-image-preview {
    position: relative;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #0d0d10;
    border: 1px solid var(--border-color);
}

.result-image-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.source-badge {
    position: absolute; bottom: 12px; left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10,10,12,0.75);
    border: 1px solid rgba(245,193,77,0.35);
    color: var(--color-primary);
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
    display: flex; align-items: center; gap: 5px;
    letter-spacing: 0.06em;
}

/* ── Calories card ── */
.results-cal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 10px;
    backdrop-filter: blur(var(--blur-glass));
}

.results-cal-main {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 14px;
}

.kcal-number {
    font-family: 'Geist Mono', monospace;
    font-size: 48px; font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-primary);
}

.kcal-label {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; color: var(--color-text-muted);
}

.results-goal-bar-track {
    height: 4px;
    background: rgba(255,250,240,0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}

.results-goal-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--color-primary);
    transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
    min-width: 4px;
}

.results-goal-pct {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* ── Macros card ── */
.results-macros-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 14px;
    backdrop-filter: blur(var(--blur-glass));
    display: flex; flex-direction: column; gap: 14px;
}

.result-macro-row {}

.rmr-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}

.rmr-name {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.rmr-value {
    font-family: 'Geist Mono', monospace;
    font-size: 14px; font-weight: 600;
    color: var(--color-text-main);
}

.rmr-bar-track {
    height: 3px;
    background: rgba(255,250,240,0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 4px;
}

.rmr-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
    min-width: 4px;
}

.rmr-goal-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
}

/* ── Food item card v2 ── */
.food-item-card-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(var(--blur-glass));
}

.food-item-card-v2:hover {
    border-color: var(--border-hover);
    background: rgba(255,250,240,0.05);
}

.ficv2-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}

.ficv2-name {
    font-size: 14px; font-weight: 500;
    color: var(--color-text-main);
    flex: 1;
}

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

.ficv2-cal {
    font-family: 'Geist Mono', monospace;
    font-size: 16px; font-weight: 600;
    color: var(--color-primary);
}

.ficv2-cal-unit {
    font-size: 10px; font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 2px;
}

.ficv2-edit-icon {
    width: 14px; height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.ficv2-bottom {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}

.ficv2-weight {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; color: var(--color-text-muted);
    background: rgba(255,250,240,0.06);
    padding: 2px 7px; border-radius: 6px;
    border: 1px solid var(--border-color);
}

.ficv2-macros {
    display: flex; gap: 5px; flex-wrap: wrap;
}

.ficv2-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 2px 7px; border-radius: 6px;
}

.ficv2-tag-p { background: rgba(34,197,94,0.12);  color: #22c55e; }
.ficv2-tag-c { background: rgba(59,130,246,0.12); color: #3b82f6; }
.ficv2-tag-f { background: rgba(249,115,22,0.12); color: #f97316; }
.ficv2-tag-fi{ background: rgba(168,85,247,0.12); color: #a855f7; }

.text-gemini  { color: var(--color-primary); }
.text-profile { color: var(--color-secondary); }

.detected-foods-section { margin-bottom: 14px; }

.food-items-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }

.food-item-row {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(var(--blur-glass));
}

.food-item-color-dot {
    width: 4px; height: 30px;
    border-radius: 2px;
    background: var(--color-primary);
    flex-shrink: 0;
}

.food-item-info { flex: 1; }
.food-item-name { font-size: 13px; font-weight: 500; }
.food-item-quantity {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted); margin-top: 1px;
}

.food-item-cal {
    font-family: 'Geist Mono', monospace;
    font-size: 13px; font-weight: 500;
    display: flex; align-items: baseline; gap: 2px;
}

.food-item-cal-unit {
    font-size: 9px; color: var(--color-text-muted);
}

.actions-section {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px;
}

/* ==========================================================================
   9. RECIPES
   ========================================================================== */
.recipe-top-nav-tabs {
    display: flex;
    padding: 8px 22px;
    gap: 10px;
    background: rgba(255,250,240,0.02);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative; z-index: 1;
}

.recipe-tab-btn {
    flex: 1;
    background: transparent; border: none;
    color: var(--color-text-muted);
    font-size: 12px; font-weight: 500;
    padding: 10px 0;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition-smooth);
}

.recipe-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.recipes-content-view { display: flex; flex-direction: column; gap: 14px; }
.recipe-section-panel { display: flex; flex-direction: column; gap: 14px; }

.recipe-filters {
    display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 3px; flex-shrink: 0;
}
.recipe-filters::-webkit-scrollbar { display: none; }

.recipe-filter-btn {
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: rgba(255,250,240,0.02);
    color: var(--color-text-muted);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.recipe-filter-btn.active {
    background: rgba(245,193,77,0.1);
    color: var(--color-primary);
    border-color: rgba(245,193,77,0.28);
}

.ai-recipe-banner,
.ai-recipe-generator-card {
    background: linear-gradient(180deg, rgba(245,193,77,0.06), rgba(224,115,74,0.03));
    border: 1px solid rgba(245,193,77,0.18);
    border-radius: 18px;
    padding: 18px;
    display: flex; flex-direction: column; gap: 9px;
    flex-shrink: 0;
    position: relative; overflow: hidden;
}

.ai-recipe-generator-card::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(245,193,77,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.banner-badge {
    align-self: flex-start;
    font-family: 'Geist Mono', monospace;
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    background: rgba(245,193,77,0.15);
    color: var(--color-primary);
    border: 1px solid rgba(245,193,77,0.3);
    padding: 2px 9px;
    border-radius: 6px;
}

.ai-recipe-banner h4,
.ai-recipe-generator-card h4 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }

.ai-recipe-banner p,
.ai-recipe-generator-card .description {
    font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
}

.recipes-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

.recipe-grid-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex; height: 108px;
    backdrop-filter: blur(var(--blur-glass));
}

.recipe-grid-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.recipe-card-img {
    width: 108px; height: 100%;
    background-size: cover; background-position: center;
    background-color: rgba(245,193,77,0.06);
    flex-shrink: 0;
}

.recipe-card-info {
    flex: 1; padding: 13px 16px;
    display: flex; flex-direction: column; justify-content: space-between;
}

.recipe-card-info h4 { font-size: 13px; font-weight: 500; line-height: 1.35; }

.recipe-card-meta {
    display: flex; justify-content: space-between;
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
}

.recipe-card-meta .cal { color: var(--color-primary); font-weight: 500; }

.count-badge {
    background: rgba(245,193,77,0.1);
    border: 1px solid rgba(245,193,77,0.2);
    color: var(--color-primary);
    padding: 1px 8px;
    border-radius: 20px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
}

.saved-ai-section { display: flex; flex-direction: column; gap: 10px; }

/* Weekly plan cards */
.weekly-plans-list { display: flex; flex-direction: column; gap: 10px; }

.weekly-plan-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(var(--blur-glass));
}

.weekly-plan-header {
    padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
}

.weekly-plan-header-left { display: flex; flex-direction: column; gap: 3px; }
.weekly-plan-title { font-size: 13px; font-weight: 500; }
.weekly-plan-subtitle { font-size: 10px; color: var(--color-text-muted); }
.weekly-plan-icon { transition: var(--transition-smooth); color: var(--color-text-muted); }
.weekly-plan-card.expanded .weekly-plan-icon { transform: rotate(180deg); color: var(--color-primary); }

.weekly-plan-days-list {
    display: none;
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.15);
    padding: 6px 0;
}

.weekly-plan-card.expanded .weekly-plan-days-list { display: flex; flex-direction: column; }

.weekly-day-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,250,240,0.03);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.weekly-day-row:last-child { border-bottom: none; }
.weekly-day-row:hover { background: rgba(255,250,240,0.02); }

.weekly-day-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 55px;
}

.weekly-day-name {
    flex: 1;
    font-size: 12px; font-weight: 500;
    padding: 0 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.weekly-day-kcal {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; color: var(--color-primary);
}

/* ==========================================================================
   10. FASTING
   ========================================================================== */
.fasting-content {
    display: flex; flex-direction: column;
    align-items: center; gap: 20px;
}

.fasting-protocol-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    width: 100%;
}

.fasting-timer-container {
    margin-top: 4px;
    display: flex; justify-content: center; align-items: center;
}

.fasting-ring-wrapper {
    position: relative;
    width: 220px; height: 220px;
    display: flex; justify-content: center; align-items: center;
}

.progress-ring-fasting {
    transform: rotate(-90deg);
    width: 220px; height: 220px;
}

.progress-ring-fasting circle {
    transition: stroke-dashoffset 0.3s linear;
}

.fasting-text-center {
    position: absolute;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    width: 170px;
}

.fasting-status-label {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

.fasting-timer-digits {
    font-family: 'Geist Mono', monospace;
    font-size: 32px; font-weight: 500;
    letter-spacing: -0.04em;
    color: var(--color-text-main);
    margin: 2px 0;
}

.fasting-info-sub {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
    color: var(--color-primary);
    margin-top: 4px;
}

.fasting-phase-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px; width: 100%;
}

.fasting-phase-card .phase-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

.fasting-phase-card h4 { font-size: 13px; font-weight: 500; }
.fasting-phase-card p { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }

/* ==========================================================================
   11. HISTORY
   ========================================================================== */
.history-content { display: flex; flex-direction: column; gap: 14px; }

.stats-overview-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(var(--blur-glass));
}

.soc-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.soc-header h4 { font-size: 14px; font-weight: 500; }

.soc-goal-badge {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; font-weight: 500;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(245,193,77,0.12);
    color: var(--color-primary);
    border: 1px solid rgba(245,193,77,0.2);
}

.target-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.t-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.t-val {
    font-family: 'Geist Mono', monospace;
    font-size: 13px; font-weight: 500; color: var(--color-primary);
}

.t-lbl {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; color: var(--color-text-muted); letter-spacing: 0.06em;
}

.chart-container-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(var(--blur-glass));
}

.chart-header { margin-bottom: 14px; }
.chart-header h3 { font-size: 14px; font-weight: 500; }
.chart-sub {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted); margin-top: 3px;
}

.chart-wrapper { position: relative; height: 160px; }

.diary-archive-section { display: flex; flex-direction: column; gap: 10px; }
.diary-archive-section h3 { font-size: 14px; font-weight: 500; }

.history-days-list { display: flex; flex-direction: column; gap: 8px; }

.history-day-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-smooth);
    backdrop-filter: blur(var(--blur-glass));
}
.history-day-card:hover { border-color: var(--border-hover); }

.hdc-main { padding: 13px 15px 10px; }

.hdc-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px;
}

.hdc-date-info {}
.hdc-day-name { font-size: 13px; font-weight: 500; display: block; }
.hdc-date-str {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
}

.hdc-cal-block { text-align: right; }
.hdc-cal-val {
    font-family: 'Geist Mono', monospace;
    font-size: 18px; font-weight: 600;
    display: block; line-height: 1;
}
.hdc-cal-pct {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
}

.hdc-bar-track {
    height: 3px;
    background: rgba(255,250,240,0.08);
    border-radius: 99px; overflow: hidden;
    margin-bottom: 10px;
}
.hdc-bar-fill {
    height: 100%; border-radius: 99px;
    transition: width 0.5s ease;
}

.hdc-bottom {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
}
.hdc-macros { display: flex; gap: 5px; flex-wrap: wrap; }

.hdc-toggle-btn {
    flex-shrink: 0;
    background: none; border: 1px solid var(--border-color);
    color: var(--color-text-muted);
    cursor: pointer; padding: 4px 10px;
    border-radius: 8px; font-size: 10px;
    display: flex; align-items: center; gap: 4px;
    transition: var(--transition-smooth);
    font-family: 'Geist', sans-serif;
}
.hdc-toggle-btn:hover { border-color: var(--border-hover); color: var(--color-text-main); }
.hdc-toggle-btn i { width: 12px; height: 12px; transition: transform 0.25s; }
.hdc-toggle-btn.open i { transform: rotate(180deg); }

.hdc-meals-list {
    border-top: 1px solid var(--border-color);
    background: rgba(255,250,240,0.02);
}
.hdc-meals-list.hidden { display: none; }

.hdc-meal-item {
    padding: 9px 15px;
    border-bottom: 1px solid rgba(255,250,240,0.04);
}
.hdc-meal-item:last-child { border-bottom: none; }

.hdc-meal-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.hdc-meal-name { font-size: 12px; font-weight: 500; }
.hdc-meal-kcal {
    font-family: 'Geist Mono', monospace;
    font-size: 12px; color: var(--color-primary); font-weight: 600;
}
.hdc-meal-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; color: var(--color-text-muted);
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* ==========================================================================
   12. SETTINGS / PROFILE
   ========================================================================== */
.settings-content { display: flex; flex-direction: column; gap: 14px; }

/* ── Profile Hero ── */
.profile-hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 18px 16px;
    backdrop-filter: blur(var(--blur-glass));
}

.profile-avatar-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-primary-dim, rgba(245,193,77,0.12));
    border: 2px solid rgba(245,193,77,0.35);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(245,193,77,0.12);
}

.profile-avatar-initials {
    font-family: 'Geist Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.profile-hero-info {
    flex: 1;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}

.profile-hero-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.profile-hero-plan {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: rgba(255,250,240,0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px 9px;
    display: inline-block;
    align-self: flex-start;
}

.profile-hero-plan.premium {
    color: var(--color-primary);
    background: rgba(245,193,77,0.08);
    border-color: rgba(245,193,77,0.2);
}

.profile-logout-btn {
    background: rgba(255,250,240,0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--color-text-muted);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.profile-logout-btn i { width: 16px; height: 16px; }

.profile-logout-btn:hover {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
}

/* ── Calorie highlight ── */
.profile-cal-highlight {
    background: rgba(245,193,77,0.06);
    border: 1px solid rgba(245,193,77,0.14);
    border-radius: 14px;
    padding: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
    margin-bottom: 12px;
}

.pch-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.pch-value {
    font-family: 'Geist Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.pch-unit { font-size: 14px; font-weight: 400; opacity: 0.7; }

.pch-goal {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ── Bio grid ── */
.profile-bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.profile-bio-item {
    background: rgba(255,250,240,0.025);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 3px;
}

.profile-bio-item.pbi-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pbi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.pbi-value {
    font-family: 'Geist Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

.pbi-unit { font-size: 11px; font-weight: 400; opacity: 0.55; }

.settings-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
    backdrop-filter: blur(var(--blur-glass));
}

.settings-card.danger-zone {
    border-color: rgba(224,115,74,0.2);
    background: rgba(224,115,74,0.03);
}

.card-header-icon {
    display: flex; align-items: center; gap: 10px;
}

.card-header-icon h3 { font-size: 14px; font-weight: 500; }

.border-profile { padding-left: 10px; border-left: 3px solid var(--color-secondary); }
.border-gemini  { padding-left: 10px; border-left: 3px solid var(--color-primary); }

.settings-description { font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }

.settings-profile-info { display: flex; flex-direction: column; gap: 8px; }

.input-password-wrapper {
    display: flex; gap: 6px; align-items: center;
}

.input-password-wrapper input { flex: 1; }

.api-status-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px; font-weight: 500;
}

.api-status-badge.inactive {
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    color: var(--color-text-muted);
}

.api-status-badge.active {
    background: rgba(196,232,143,0.06);
    border: 1px solid rgba(196,232,143,0.2);
    color: var(--color-carbs);
}

.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.flex-meta-adjusters {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.summary-total-cal-box {
    background: rgba(245,193,77,0.04);
    border: 1px solid rgba(245,193,77,0.14);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; margin-top: 12px;
}

.summary-total-cal-box strong {
    font-family: 'Geist Mono', monospace;
    color: var(--color-primary); font-size: 15px;
}

/* Professional & Admin screens */
.professional-content,
.admin-content { display: flex; flex-direction: column; gap: 14px; }

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

.patient-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.patient-card:hover { border-color: var(--border-hover); }

.admin-user-row {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}

/* ==========================================================================
   13. BOTTOM NAV
   ========================================================================== */
.bottom-nav {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 74px;
    background: linear-gradient(180deg, transparent, rgba(10,10,12,0.95) 30%);
    border-top: 1px solid rgba(255,250,240,0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
    backdrop-filter: blur(var(--blur-glass));
    z-index: 10;
}

.nav-item {
    background: none; border: none;
    color: rgba(244,241,236,0.35);
    display: flex; flex-direction: column;
    align-items: center; gap: 3px;
    cursor: pointer;
    font-size: 8px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex: 1;
    min-width: 0;
    transition: var(--transition-smooth);
    padding: 6px 2px 0;
}

.nav-item i { width: 17px; height: 17px; }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.nav-item.active { color: var(--color-primary); }
.nav-item.active i { filter: drop-shadow(0 0 6px rgba(245,193,77,0.5)); }

/* ==========================================================================
   14. MODALS
   ========================================================================== */
.modal-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-card {
    width: 100%;
    background: rgba(14,14,18,0.98);
    border-top: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    padding: 22px;
    transform: translateY(100%);
    transition: var(--transition-smooth);
    display: flex; flex-direction: column; gap: 14px;
}

.modal-overlay.active .modal-card { transform: translateY(0); }

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
}

.modal-header h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }

.modal-footer { display: flex; gap: 10px; }
.modal-footer.flex-column { flex-direction: column; gap: 8px; }

.scrollable-modal-content {
    max-height: 55vh;
    overflow-y: auto;
    padding: 2px;
}

.scrollable-modal-content::-webkit-scrollbar { width: 3px; }
.scrollable-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255,250,240,0.08);
    border-radius: 2px;
}

/* Recipe modal specific */
.recipe-modal-card { max-height: 92vh; }

.recipe-tags-row { display: flex; gap: 7px; margin-bottom: 14px; }

.recipe-badge-item {
    font-size: 11px; font-weight: 500;
    background: rgba(255,250,240,0.04);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    display: flex; align-items: center; gap: 4px;
}

.recipe-badge-item.text-protein {
    background: rgba(255,142,126,0.08);
    color: var(--color-protein);
    border-color: rgba(255,142,126,0.2);
}

.recipe-nutritional-box {
    background: rgba(255,250,240,0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
}

.recipe-nutritional-box h4 {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.recipe-macros-table {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px; margin-bottom: 12px;
}

.recipe-m-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.recipe-m-stat .val {
    font-family: 'Geist Mono', monospace;
    font-size: 14px; font-weight: 500;
}
.recipe-m-stat .lbl {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; color: var(--color-text-muted);
}

.recipe-calories-row {
    display: flex; justify-content: space-between;
    align-items: center; font-size: 13px;
}

.recipe-calories-row strong {
    font-family: 'Geist Mono', monospace;
    color: var(--color-primary); font-size: 15px; font-weight: 500;
}

.portions-selector-row {
    display: flex; justify-content: space-between;
    align-items: center;
    margin-top: 18px; margin-bottom: 10px;
}

.portions-controls {
    display: flex; align-items: center;
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px; padding: 3px;
}

.portions-controls button {
    width: 30px; height: 30px;
    border-radius: 8px; border: none;
    background: rgba(255,250,240,0.04);
    color: var(--color-text-main);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.portions-controls button:hover { background: rgba(255,250,240,0.08); }
.portion-val-display { padding: 0 14px; font-size: 13px; font-weight: 500; }

.ingredients-scaled-list { display: flex; flex-direction: column; gap: 7px; }

.ingredient-scaled-card {
    background: rgba(255,250,240,0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 11px 14px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}

.ingredient-scaled-card .i-name { font-weight: 500; }
.ingredient-scaled-card .i-amount {
    font-family: 'Geist Mono', monospace;
    color: var(--color-primary); font-weight: 500;
}

.preparo-section p { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }

/* Plateau options */
.plateau-options-list { display: flex; flex-direction: column; gap: 10px; }
.plateau-option-btn { cursor: pointer; }
.plateau-option-btn input { display: none; }
.plateau-option-btn .option-content {
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    padding: 14px; border-radius: 14px;
    display: flex; flex-direction: column; gap: 3px;
    transition: var(--transition-smooth);
}
.plateau-option-btn input:checked + .option-content {
    border-color: rgba(245,193,77,0.35);
    background: rgba(245,193,77,0.06);
}
.plateau-option-btn .option-content span { font-size: 13px; font-weight: 500; }
.plateau-option-btn .option-content .subtext { font-size: 11px; color: var(--color-text-muted); }

/* Food confirm */
.food-confirm-summary-pill {
    background: rgba(255,250,240,0.03);
    border: 1px solid var(--border-color);
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12px; font-weight: 500;
    text-align: center; color: var(--color-text-muted);
}

.food-confirm-macros-preview {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 7px; margin-top: 14px;
}

.macro-mini {
    background: rgba(0,0,0,0.2);
    border-radius: 10px; padding: 8px;
    display: flex; flex-direction: column; align-items: center;
}

.macro-mini .lbl {
    font-family: 'Geist Mono', monospace;
    font-size: 8px; color: var(--color-text-muted); font-weight: 500;
}
.macro-mini .val {
    font-family: 'Geist Mono', monospace;
    font-size: 12px; font-weight: 500; margin-top: 2px;
}

/* Orientation/prescriptions screen */
.professional-orientations-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.orientation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
}

.orientation-card .from {
    font-family: 'Geist Mono', monospace;
    font-size: 9px; color: var(--color-primary);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.orientation-card .text { font-size: 13px; line-height: 1.55; }

/* ── Receitas do Nutricionista ── */
.pro-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,250,240,0.08);
}
.pro-plan-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text-main);
}
.pro-plan-day-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255,250,240,0.03);
    border: 1px solid rgba(255,250,240,0.07);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}
.pro-day-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--color-text-muted);
    padding: 7px 2px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-sans);
    transition: all 0.15s;
}
.pro-day-tab:hover { color: var(--color-text-main); background: rgba(255,250,240,0.05); }
.pro-day-tab.active { background: rgba(245,193,77,0.12); color: var(--color-primary); }
.pro-plan-day-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--color-text-main);
}
.pro-meal-card {
    background: rgba(255,250,240,0.03);
    border: 1px solid rgba(255,250,240,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.pro-meal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pro-meal-icon { font-size: 22px; }
.pro-meal-label { font-size: 14px; font-weight: 700; display: block; }
.pro-meal-time {
    font-size: 11px;
    color: var(--color-text-muted);
    background: rgba(255,250,240,0.06);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
}
.pro-meal-cal {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 700;
    white-space: nowrap;
}
.pro-meal-item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.pro-meal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,250,240,0.04);
    flex-wrap: wrap;
    gap: 4px;
}
.pro-meal-item:last-child { border-bottom: none; }
.pro-item-name { font-size: 13px; }
.pro-item-qty { color: var(--color-text-muted); font-size: 11px; }
.pro-item-macros { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); white-space: nowrap; }
.pro-meal-subtotal { font-size: 12px; color: var(--color-primary); font-family: var(--font-mono); font-weight: 600; padding: 6px 0 4px; }
.pro-meal-instructions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    background: rgba(255,250,240,0.03);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    line-height: 1.5;
}
.pro-day-total-card {
    background: rgba(245,193,77,0.06);
    border: 1px solid rgba(245,193,77,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
}
.pro-day-total-title { font-size: 13px; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; }
.pro-day-total-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.pro-total-bar-wrap { flex: 1; height: 6px; background: rgba(255,250,240,0.08); border-radius: 3px; overflow: hidden; }
.pro-total-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.pro-total-val { font-family: var(--font-mono); font-size: 12px; color: var(--color-primary); white-space: nowrap; }
.pro-day-total-macros { display: flex; gap: 16px; font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); }

/* ── Body Eval Card ───────────────────────────────── */
.body-eval-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.body-eval-metric {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}
.body-eval-metric-val {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-primary);
    line-height: 1;
}
.body-eval-metric-lbl {
    font-size: 10px;
    opacity: 0.52;
    margin-top: 4px;
}
.body-eval-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.6;
    margin-top: 8px;
}
.body-eval-notes {
    font-size: 11px;
    color: var(--color-text-muted);
    background: rgba(255,250,240,0.03);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    line-height: 1.5;
}
.body-eval-assessment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(124,58,237,0.18);
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #a78bfa;
    text-transform: capitalize;
    margin-bottom: 10px;
}

/* ==========================================================================
   25. SIDE DRAWER (MENU LATERAL)
   ========================================================================== */
.btn-drawer-trigger {
    flex-shrink: 0;
}

.btn-drawer-trigger i {
    width: 20px;
    height: 20px;
}

.drawer-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.side-drawer {
    position: absolute;
    top: 0; left: 0;
    width: 78%;
    max-width: 320px;
    height: 100%;
    background: linear-gradient(180deg, #15151a 0%, #0e0e12 100%);
    border-right: 1px solid var(--border-color);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.45);
}

.side-drawer.active {
    transform: translateX(0);
}

.drawer-header {
    padding: 22px 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 10px;
}

.drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.drawer-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.drawer-avatar .profile-avatar-initials {
    font-size: 18px;
}

.drawer-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.drawer-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-user-plan {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    text-transform: uppercase;
}

.drawer-close-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-item {
    background: transparent;
    border: none;
    color: rgba(244,241,236,0.75);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Geist', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
}

.drawer-item i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.drawer-item:hover,
.drawer-item:active {
    background: rgba(255,255,255,0.05);
    color: var(--color-text-main);
}

.drawer-item.active {
    background: rgba(245,193,77,0.1);
    color: var(--color-primary);
}

.drawer-footer {
    padding: 14px 16px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.drawer-logout-btn {
    width: 100%;
    background: rgba(224,115,74,0.08);
    border: 1px solid rgba(224,115,74,0.2);
    color: #e0734a;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Geist', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-smooth);
}

.drawer-logout-btn i {
    width: 16px;
    height: 16px;
}

.drawer-logout-btn:hover {
    background: rgba(224,115,74,0.14);
}

/* Ajusta dashboard-header pra acomodar hamburger à esquerda */
.dashboard-header .btn-drawer-trigger {
    margin-right: 4px;
}