/* [O CSS permanece o mesmo do exemplo anterior para manter o design] */
   :root {
       --bg-color: #0f172a;
       --card-bg: rgba(30, 41, 59, 0.7);
       --text-primary: #f8fafc;
       --text-secondary: #94a3b8;
       --accent-color: #6366f1;
       --border-color: rgba(255, 255, 255, 0.1);
       --status-success: #10b981;
       --status-warning: #f59e0b;
       --status-danger: #ef4444;
   }

   body.light-mode {
       --bg-color: #f1f5f9;
       --card-bg: rgba(255, 255, 255, 0.9);
       --text-primary: #1e293b;
       --text-secondary: #64748b;
       --border-color: rgba(0, 0, 0, 0.1);
   }

   body {
       font-family: 'Inter', sans-serif;
       background: var(--bg-color);
       color: var(--text-primary);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       margin: 0;
   }

   .glass-card {
       background: var(--card-bg);
       backdrop-filter: blur(10px);
       border: 1px solid var(--border-color);
       border-radius: 20px;
       padding: 2rem;
       width: 100%;
       max-width: 400px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
   }

   .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 2rem;
   }

   .input-group {
       margin-bottom: 1.5rem;
   }

   label {
       display: block;
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
       color: var(--text-secondary);
   }

   /* MUDANÇA: Type="text" para permitir caracteres como 'kg' e 'm' */
   input {
       width: 100%;
       padding: 0.8rem;
       border-radius: 10px;
       border: 1px solid var(--border-color);
       background: rgba(0, 0, 0, 0.2);
       color: white;
       box-sizing: border-box;
       font-size: 1rem;
   }

   body.light-mode input {
       background: white;
       color: black;
   }

   button {
       width: 100%;
       padding: 1rem;
       border-radius: 10px;
       border: none;
       background: var(--accent-color);
       color: white;
       font-weight: bold;
       cursor: pointer;
       transition: 0.3s;
       margin-top: 1rem;
   }

   .result-container {
       margin-top: 2rem;
       text-align: center;
       border-top: 1px solid var(--border-color);
       padding-top: 1rem;
   }

   .hidden {
       display: none;
   }

   #imc-value {
       font-size: 3rem;
       font-weight: bold;
       display: block;
   }

   .gauge-bar {
       height: 8px;
       background: #334155;
       border-radius: 4px;
       margin: 15px 0;
       overflow: hidden;
   }

   #gauge-fill {
       height: 100%;
       width: 0%;
       background: var(--accent-color);
       transition: 1s ease;
   }

   .status-success {
       color: var(--status-success);
   }

   .status-warning {
       color: var(--status-warning);
   }

   .status-danger {
       color: var(--status-danger);
   }

   .theme-btn {
       width: auto;
       padding: 0.5rem;
       background: transparent;
       border: 1px solid var(--border-color);
       color: var(--text-secondary);
   }

   /* Cores Dinâmicas com Efeito Glow */
   .status-success {
       color: var(--status-success) !important;
       text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
   }

   .status-warning {
       color: var(--status-warning) !important;
       text-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
   }

   .status-danger {
       color: var(--status-danger) !important;
       text-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
   }

   /* Ajuste no preenchimento da barra para seguir a cor do resultado */
   #gauge-fill {
       height: 100%;
       width: 0%;
       border-radius: 4px;
       transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.5s ease;
       box-shadow: 0 0 10px currentColor;
   }

   /* Animação suave para a troca de cores */
   #imc-value,
   #imc-status {
       transition: color 0.5s ease, text-shadow 0.5s ease;
   }

   /* Animação de contagem e entrada */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes pulse-light {
       0% {
           box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
       }

       70% {
           box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
       }
   }

   .animate-result {
       animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
   }

   .pulse-effect {
       animation: pulse-light 1.5s infinite;
   }

   /* Estilo para o número crescendo */
   #imc-value {
       transition: all 0.3s ease;
       display: inline-block;
   }