/* ================= VARIABLES ================= */
  :root {
    --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-300: #6ee7b7; --brand-400: #34d399; 
    --brand-500: #10b981; --brand-600: #059669; --brand-700: #047857;
    
    --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; 
    --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; 
    --slate-800: #1e293b; --slate-900: #0f172a;
    
    --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;
    --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46;
    --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c;
    --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e;
    --purple-50: #faf5ff; --purple-200: #e9d5ff; --purple-500: #a855f7; --purple-600: #9333ea; --purple-700: #7e22ce;
    --orange-50: #fff7ed; --orange-200: #fed7aa; --orange-500: #f97316;
    --yellow-50: #fefce8; --yellow-200: #fef08a; --yellow-500: #eab308;
    --indigo-50: #eef2ff; --indigo-200: #c7d2fe; --indigo-500: #6366f1;
  }

  /* ================= RESET & BASE ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--slate-50); 
    color: var(--slate-800); 
    -webkit-tap-highlight-color: transparent; 
    -webkit-font-smoothing: antialiased; 
  }
  ::selection { background-color: var(--brand-500); color: white; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--slate-100); }
  ::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 9999px; }
  button { background: none; border: none; cursor: pointer; font: inherit; outline: none; }
  input, select { font: inherit; outline: none; }
  
  /* ================= UTILITIES ================= */
  .hidden { display: none !important; }
  .flex { display: flex !important; }
  .inline-flex { display: inline-flex !important; }
  .flex-col { flex-direction: column !important; }
  .text-center { text-align: center; }
  .mb-3 { margin-bottom: 0.75rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mt-6 { margin-top: 1.5rem; }
  .mt-8 { margin-top: 2rem; }

  /* JS State Overrides (Mantidos para não quebrar a lógica do JS) */
  .bg-brand-50 { background-color: var(--brand-50) !important; }
  .text-brand-700 { color: var(--brand-700) !important; }
  .text-brand-600 { color: var(--brand-600) !important; }
  .text-slate-600 { color: var(--slate-600) !important; }
  .text-slate-400 { color: var(--slate-400) !important; }
  .border-brand-500 { border-color: var(--brand-500) !important; }
  .border-slate-200 { border-color: var(--slate-200) !important; }

  @keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  .animate-pop { animation: pop .25s cubic-bezier(.175,.885,.32,1.275) forwards; }

  /* ================= COMPONENTS ================= */
  
  /* Toast */
  #toastWrap { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
  @media (min-width: 768px) { #toastWrap { bottom: 2rem; } }
  .toast-msg { pointer-events: auto; background: var(--slate-900); color: white; font-weight: 700; font-size: 0.75rem; padding: 0.75rem 1.25rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 1px solid var(--slate-700); display: flex; align-items: center; gap: 0.5rem; }
  .toast-msg i { color: var(--brand-400); }

  /* Header & Navigation */
  .header { background: white; border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; z-index: 30; }
  .header-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; height: 4rem; }
  @media (min-width: 640px) { .header-container { padding: 0 1.5rem; } }
  @media (min-width: 1024px) { .header-container { padding: 0 2rem; } }
  .logo-area { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
  .logo-icon { width: 2.25rem; height: 2.25rem; background: var(--brand-600); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 900; color: white; font-size: 1.125rem; box-shadow: 0 4px 6px -1px rgba(5,150,105,0.2); }
  .logo-text { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.025em; color: var(--slate-900); display: none; }
  @media (min-width: 640px) { .logo-text { display: inline; } }
  
  .desktop-nav { display: none; align-items: center; gap: 0.25rem; }
  @media (min-width: 768px) { .desktop-nav { display: flex; } }
  @media (min-width: 1024px) { .desktop-nav { gap: 0.5rem; } }
  .tabbtn { padding: 0.5rem 0.875rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.75rem; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; color: var(--slate-600); }
  @media (min-width: 1024px) { .tabbtn { font-size: 0.875rem; } }
  .tabbtn:hover:not(.bg-brand-50) { background: var(--slate-100); }
  
  .settings-area { display: flex; align-items: center; gap: 0.5rem; }
  .btn-settings { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: 0.75rem; border: 1px solid rgba(226,232,240,0.8); transition: background 0.2s; }
  .btn-settings:hover { background: var(--slate-100); }
  @media (min-width: 640px) { .btn-settings { padding: 0.5rem 0.75rem; } }
  .settings-icon-wrap { width: 1.75rem; height: 1.75rem; background: var(--brand-100); color: var(--brand-700); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; }
  .settings-text { font-size: 0.75rem; font-weight: 700; color: var(--slate-800); display: none; }
  @media (min-width: 640px) { .settings-text { display: inline; } }

  /* Mobile Nav */
  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--slate-200); z-index: 40; padding: 0.25rem 0.5rem; justify-content: space-around; align-items: center; }
  @media (min-width: 768px) { .mobile-nav { display: none; } }
  .mob-tab { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.75rem; border-radius: 0.75rem; transition: all 0.2s; }
  .mob-tab i { font-size: 1.125rem; }
  .mob-tab span { font-size: 10px; margin-top: 0.125rem; font-weight: 700;}

  /* Main Container */
  .main-wrap { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 6rem; }
  @media (min-width: 640px) { .main-wrap { padding-inline: 1.5rem; } }
  @media (min-width: 768px) { .main-wrap { padding-bottom: 3rem; } }
  @media (min-width: 1024px) { .main-wrap { padding-inline: 2rem; } }

  /* Typography & Titles */
  .section-header { border-bottom: 1px solid rgba(226,232,240,0.8); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
  .section-header.no-border { border: none; padding-bottom: 0; }
  .section-title { font-size: 1.5rem; font-weight: 900; color: var(--slate-900); letter-spacing: -0.025em; }
  @media (min-width: 768px) { .section-title { font-size: 1.875rem; } }
  .section-subtitle { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; margin-top: 0.125rem; }
  @media (min-width: 768px) { .section-subtitle { font-size: 0.875rem; } }
  .section-title-sm { font-size: 1.125rem; font-weight: 900; color: var(--slate-900); margin-bottom: 1rem; }

  /* Cards */
  .card { background: white; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.9); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); padding: 1.5rem; }
  @media (min-width: 768px) { .card { padding: 2rem; } }
  .card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
  .card-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-400); }

  /* Dashboard Grid */
  .grid-dash-top { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 1024px) { 
    .grid-dash-top { grid-template-columns: repeat(3, 1fr); } 
    .card-cal { grid-column: span 2; } 
  }

  /* Badges */
  .badge { font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: 9999px; }
  .badge-brand { color: var(--brand-700); background: var(--brand-50); }
  .badge-amber { color: var(--amber-600); background: var(--amber-50); }
  .badge-amber-sm { color: var(--amber-800); background: var(--amber-100); padding: 0.125rem 0.625rem; }
  .badge-blue { color: var(--blue-700); background: var(--blue-50); }
  .badge-emerald { color: var(--emerald-800); background: var(--emerald-100); padding: 0.125rem 0.625rem; }

  /* Calorie Chart Box */
  .cal-content { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 2rem; margin: 0.5rem 0; }
  @media (min-width: 640px) { .cal-content { flex-direction: row; } }
  .chart-box { position: relative; width: 11rem; height: 11rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .chart-box svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .chart-bg { color: var(--slate-100); stroke: currentColor; fill: none; stroke-width: 3.5; }
  .chart-fg { color: var(--brand-500); transition: stroke-dasharray 0.5s; stroke: currentColor; fill: none; stroke-width: 3.5; stroke-linecap: round; }
  .chart-info { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .chart-val { font-size: 1.875rem; font-weight: 900; color: var(--slate-900); letter-spacing: -0.025em; }
  .chart-unit { font-size: 0.75rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; }
  .chart-div { width: 2rem; height: 2px; background: var(--slate-200); margin: 0.25rem 0; }
  .chart-goal { font-size: 0.75rem; font-weight: 700; color: var(--slate-500); }

  .cal-stats { width: 100%; }
  @media (min-width: 640px) { .cal-stats { width: auto; } }
  .cal-stats > * + * { margin-top: 0.75rem; }
  .stat-box { display: flex; align-items: center; gap: 0.75rem; background: var(--slate-50); padding: 0.75rem; border-radius: 1rem; border: 1px solid var(--slate-100); }
  .stat-icon { width: 2rem; height: 2rem; border-radius: 0.75rem; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; }
  .stat-icon i { font-size: 0.75rem; }
  .stat-label { font-size: 0.75rem; color: var(--slate-400); font-weight: 700; }
  .stat-val { font-size: 0.875rem; font-weight: 800; color: var(--slate-800); }
  .trophy-badge { align-items: center; gap: 0.375rem; background: var(--amber-50); color: var(--amber-700); font-size: 0.75rem; font-weight: 800; padding: 0.375rem 0.75rem; border-radius: 9999px; }

  /* Progress Bars & Water */
  .progress-track { width: 100%; background: var(--slate-100); border-radius: 9999px; height: 0.625rem; overflow: hidden; margin-bottom: 1rem; }
  .progress-bar { height: 100%; border-radius: 9999px; transition: width 0.3s; }
  .bg-blue { background: var(--blue-500); }
  .bg-rose { background: var(--rose-500); }
  .bg-amber { background: var(--amber-500); }
  .bg-purple { background: var(--purple-500); }
  
  .water-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
  .btn-water { padding: 0.625rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.75rem; transition: all 0.2s; }
  .btn-water-light { background: var(--blue-50); color: var(--blue-700); }
  .btn-water-light:hover { background: var(--blue-100); }
  .btn-water-dark { background: var(--blue-600); color: white; }
  .btn-water-dark:hover { background: var(--blue-700); }
  .water-toast { background: var(--emerald-50); color: var(--emerald-700); font-size: 0.75rem; font-weight: 800; padding: 0.625rem 0.75rem; border-radius: 0.75rem; align-items: center; justify-content: center; gap: 0.375rem; text-align: center; }

  /* Macros Grid */
  .grid-macros { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 768px) { .grid-macros { grid-template-columns: repeat(3, 1fr); } }
  .macro-card { background: white; padding: 1.25rem; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 0.75rem; }
  .macro-header { display: flex; justify-content: space-between; align-items: center; }
  .macro-pill { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 9999px; text-transform: uppercase; }
  .macro-pill-rose { color: var(--rose-600); background: var(--rose-50); }
  .macro-pill-amber { color: var(--amber-600); background: var(--amber-50); }
  .macro-pill-purple { color: var(--purple-600); background: var(--purple-50); }
  .macro-pct { font-size: 0.75rem; font-weight: 900; color: var(--slate-700); }
  .macro-vals { display: flex; align-items: baseline; justify-content: space-between; }
  .macro-c { font-size: 1.5rem; font-weight: 900; color: var(--slate-900); }
  .macro-g { font-size: 0.75rem; color: var(--slate-400); font-weight: 700; }

  /* Mini Grid (Dashboard) */
  .flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  .text-sm-gray { font-size: 0.75rem; font-weight: 700; color: var(--slate-400); }
  @media (max-width: 639px) { .sm-hidden { display: none; } }
  .grid-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  @media (min-width: 768px) { .grid-mini { grid-template-columns: repeat(3, 1fr); } }
  
  .mini-meal { text-align: left; background: white; padding: 1rem; border-radius: 1rem; border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); transition: all 0.2s; }
  .mini-meal:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
  .mini-meal.done { border-color: var(--brand-300); background: rgba(236,253,245,0.5); }
  .meal-icon-wrap { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; margin-bottom: 0.5rem; border: 1px solid transparent; }
  .meal-title { font-size: 0.75rem; font-weight: 800; color: var(--slate-800); }
  .meal-sub { font-size: 11px; font-weight: 600; margin-top: 0.125rem; }
  .meal-sub.done { color: var(--brand-600); }
  .meal-sub.empty { color: var(--slate-400); }
  
  /* Meal Colors for JS injection */
  .mc-amber { color: var(--amber-500); background: var(--amber-50); border-color: var(--amber-200); }
  .mc-orange { color: var(--orange-500); background: var(--orange-50); border-color: var(--orange-200); }
  .mc-emerald { color: var(--emerald-500); background: var(--emerald-50); border-color: var(--emerald-200); }
  .mc-yellow { color: var(--yellow-500); background: var(--yellow-50); border-color: var(--yellow-200); }
  .mc-indigo { color: var(--indigo-500); background: var(--indigo-50); border-color: var(--indigo-200); }
  .mc-purple { color: var(--purple-500); background: var(--purple-50); border-color: var(--purple-200); }

  /* Full Meals List (Meals Tab) */
  .meals-list { display: flex; flex-direction: column; gap: 1.25rem; }
  .meal-card { background: white; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.9); padding: 1.5rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); transition: all 0.2s; }
  @media (min-width: 768px) { .meal-card { padding: 1.75rem; } }
  .meal-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
  .meal-card-header { display: flex; flex-direction: column; gap: 0.75rem; border-bottom: 1px solid var(--slate-100); padding-bottom: 1.25rem; }
  @media (min-width: 640px) { .meal-card-header { flex-direction: row; align-items: center; justify-content: space-between; } }
  .meal-card-title-area { display: flex; align-items: center; gap: 1rem; }
  .meal-icon-lg { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; border: 1px solid transparent; }
  .meal-name { font-weight: 800; color: var(--slate-900); font-size: 1.125rem; }
  .meal-macros { font-size: 0.75rem; font-weight: 600; color: var(--slate-500); margin-top: 0.125rem; }
  .meal-actions { display: flex; align-items: center; gap: 0.5rem; align-self: flex-end; }
  @media (min-width: 640px) { .meal-actions { align-self: auto; } }
  
  .btn-action { font-weight: 800; font-size: 0.75rem; padding: 0.625rem 1rem; border-radius: 0.75rem; transition: all 0.2s; display: flex; align-items: center; gap: 0.375rem; }
  .btn-add { background: var(--brand-50); color: var(--brand-700); }
  .btn-add:hover { background: var(--brand-100); }
  .btn-done { background: var(--emerald-600); color: white; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
  .btn-done:hover { background: var(--emerald-700); }
  .btn-undo { background: var(--rose-600); color: white; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
  .btn-undo:hover { background: var(--rose-700); }

  .meal-items { padding-top: 0.5rem; }
  .meal-item { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid var(--slate-100); }
  .meal-item:last-child { border-bottom: none; }
  .mi-name { font-size: 0.875rem; font-weight: 700; color: var(--slate-800); }
  .mi-qty { font-size: 11px; color: var(--slate-400); font-weight: 600; }
  .mi-right { display: flex; align-items: center; gap: 0.75rem; }
  .mi-macros { font-size: 11px; font-weight: 700; color: var(--slate-500); }
  .btn-del { color: var(--slate-300); padding: 0.25rem; transition: color 0.2s; }
  .btn-del:hover { color: var(--rose-500); }
  .empty-msg { font-size: 0.75rem; color: var(--slate-400); padding: 0.5rem 0; }

  /* Foods Tab */
  .flex-wrap-between { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
  @media (min-width: 640px) { .flex-wrap-between { flex-direction: row; align-items: center; justify-content: space-between; } }
  
  .btn-primary { background: var(--brand-600); color: white; font-weight: 800; font-size: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
  .btn-primary:hover { background: var(--brand-700); }
  .btn-primary-lg { font-size: 1rem; padding: 1rem; border-radius: 1rem; width: 100%; box-shadow: 0 10px 15px -3px rgba(5,150,105,0.3); }
  
  .input-text { width: 100%; background: white; border: 1px solid var(--slate-200); border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--slate-800); transition: border-color 0.2s; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); margin-bottom: 1rem; }
  .input-text:focus { border-color: var(--brand-500); }
  .input-bg { background: var(--slate-50); box-shadow: none; margin-bottom: 0; }

  .food-list-box { background: white; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); padding: 0 1.25rem; }
  .food-item { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; border-bottom: 1px solid var(--slate-100); }
  .food-item:last-child { border-bottom: none; }
  .fi-name { font-size: 0.875rem; font-weight: 700; color: var(--slate-800); }
  .fi-badge { font-size: 9px; background: var(--amber-100); color: var(--amber-700); padding: 0.125rem 0.375rem; border-radius: 9999px; font-weight: 900; margin-left: 0.25rem; }
  .fi-sub { font-size: 11px; color: var(--slate-400); font-weight: 600; }
  .fi-actions { display: flex; align-items: center; gap: 0.25rem; }
  .btn-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
  .btn-icon-edit { color: var(--brand-600); }
  .btn-icon-edit:hover { background: var(--brand-50); }
  .btn-icon-del { color: var(--rose-500); }
  .btn-icon-del:hover { background: var(--rose-50); }
  .empty-catalog { padding: 2rem 0; font-size: 0.75rem; color: var(--slate-400); text-align: center; }

  /* History Tab */
  .history-list { display: flex; flex-direction: column; gap: 1rem; }
  .hist-card { background: white; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
  .hist-top { display: flex; flex-direction: column; gap: 0.75rem; }
  @media (min-width: 640px) { .hist-top { flex-direction: row; justify-content: space-between; align-items: center; } }
  .hist-date-area { display: flex; align-items: center; gap: 0.5rem; }
  .hist-date { font-weight: 900; color: var(--slate-900); font-size: 1.125rem; text-transform: capitalize; }
  .hist-sub { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; margin-top: 0.25rem; }
  .hist-macros { display: flex; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--slate-600); }
  .hm-pill { padding: 0.375rem 0.75rem; border-radius: 0.75rem; }
  .hm-p { background: var(--rose-50); color: var(--rose-700); }
  .hm-c { background: var(--amber-50); color: var(--amber-700); }
  .hm-g { background: var(--purple-50); color: var(--purple-700); }
  .hist-meals { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--slate-100); }
  .hm-badge { font-size: 10px; padding: 0.25rem 0.625rem; border-radius: 9999px; font-weight: 700; }
  .hm-badge-done { background: var(--brand-50); color: var(--brand-700); }
  .hm-badge-miss { background: var(--slate-100); color: var(--slate-400); }
  .empty-hist { background: white; border-radius: 1.5rem; border: 1px solid rgba(226,232,240,0.8); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); padding: 3.5rem 0; text-align: center; font-size: 0.875rem; color: var(--slate-400); font-weight: 500; }

  /* Settings Tab */
  .settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 768px) { .settings-grid { grid-template-columns: repeat(2, 1fr); } }
  .set-card-title { font-weight: 900; color: var(--slate-900); margin-bottom: 0.75rem; }
  .set-list { font-size: 0.875rem; }
  .set-item { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid var(--slate-100); }
  .set-item:last-child { border-bottom: none; }
  .set-lbl { color: var(--slate-500); font-weight: 500; }
  .set-val { font-weight: 700; color: var(--slate-800); }
  
  .btn-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; }
  @media (min-width: 640px) { .btn-grid { grid-template-columns: repeat(2, 1fr); } }
  .btn-set { font-weight: 800; font-size: 0.875rem; padding: 0.875rem; border-radius: 1rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
  .btn-redef { background: var(--brand-50); color: var(--brand-700); }
  .btn-redef:hover { background: var(--brand-100); }
  .btn-logout { background: var(--rose-50); color: var(--rose-700); }
  .btn-logout:hover { background: var(--rose-100); }

  /* Modals */
  /* ================= MODALS ================= */
  .modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(15,23,42,0.6); 
    z-index: 100; 
    display: flex; 
    align-items: flex-start; /* Evita que o topo seja cortado */
    justify-content: center; 
    padding: 2rem 1rem; /* Dá espaço de respiro em cima e embaixo */
    overflow-y: auto; 
  }
  
  .modal-box { 
    background: white; 
    border-radius: 1.5rem; 
    width: 100%; 
    border: 1px solid rgba(226,232,240,0.8); 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
    margin: auto 0; /* Centraliza verticalmente se couber na tela */
    padding: 1.5rem; 
    position: relative; 
  }
  @media (min-width: 768px) { .modal-box { padding: 2.5rem; } }
  .modal-xl { max-width: 36rem; }
  .modal-lg { max-width: 32rem; }
  
  .modal-icon { width: 3rem; height: 3rem; background: var(--brand-100); color: var(--brand-600); border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 0.75rem; }
  .modal-title { font-size: 1.5rem; font-weight: 900; color: var(--slate-900); text-align: center; }
  .modal-title-left { text-align: left; font-size: 1.25rem; margin-bottom: 0.25rem; }
  .modal-sub { font-size: 0.75rem; color: var(--slate-500); text-align: center; margin-top: 0.25rem; }
  @media (min-width: 768px) { .modal-sub { font-size: 0.875rem; } }
  .modal-sub-left { text-align: left; margin-bottom: 1.25rem; }
  
  .modal-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
  .btn-close { color: var(--slate-400); padding: 0.25rem; transition: color 0.2s; font-size: 1.125rem; }
  .btn-close:hover { color: var(--slate-700); }

  .form-group { margin-bottom: 1rem; }
  .form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
  .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
  .form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
  
  .form-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--slate-700); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; }
  .form-label-norm { text-transform: none; letter-spacing: normal; color: var(--slate-600); }
  .form-label-sm { font-size: 10px; margin-bottom: 0.25rem; }
  .input-center { text-align: center; }
  .input-sm { padding: 0.5rem; }
  
  .pill-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
  @media (min-width: 640px) { .pill-grid { grid-template-columns: repeat(2, 1fr); } .col-span-2 { grid-column: span 2; } }
  .pill-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .pill { padding: 0.75rem; border: 1px solid var(--slate-200); border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; color: var(--slate-600); transition: all 0.2s; cursor: pointer; }
  .pill-sm { font-size: 0.75rem; }
  .pill:hover:not(.border-brand-500) { background: var(--slate-50); }
  
  .modal-note { font-size: 11px; color: var(--slate-400); text-align: center; line-height: 1.2; margin-bottom: 1rem; }
  
  .picker-list { max-height: 16rem; overflow-y: auto; border: 1px solid var(--slate-100); border-radius: 1rem; margin-bottom: 1rem; }
  .picker-item { padding: 0.75rem 1rem; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid var(--slate-50); }
  .picker-item:last-child { border-bottom: none; }
  .picker-item:hover { background: var(--brand-50); }