:root {
  --bg-fosco: #0C1E12; 
  --card-fosco: #13331E; 
  --text-vibrant: #A7F3D0; 
  --neon-green: #10B981; 
  --neon-orange: #F97316; 
  --neon-red: #EF4444; 
  --input-fosco: #07130B;
  
  --shadow-raised: 
    -5px -5px 15px rgba(255,255,255,0.03), 
    5px 5px 15px rgba(0,0,0,0.6); 
    
  --shadow-pressed: 
    inset 2px 2px 5px rgba(0,0,0,0.8), 
    inset -2px -2px 5px rgba(255,255,255,0.02); 
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background-color: var(--bg-fosco); color: var(--text-vibrant); overflow-x: hidden; }

.screen { display: none; flex-direction: column; min-height: 100dvh; padding-bottom: 90px; } 
.screen.active { display: flex; }

.svg-header {
  position: sticky; top: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background-color: var(--bg-fosco); padding: 15px 20px; border-bottom: 2px solid #1A4429;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 500;
}
.header-lupa-svg { width: 40px; height: 40px; }
.header-text-block { display: flex; flex-direction: column; text-align: left; }
.header-title { font-size: 30px; font-weight: 900; color: #FFF; text-transform: uppercase; letter-spacing: 2px; }
.header-subtitle { font-size: 14px; font-weight: 600; color: var(--neon-green); text-transform: uppercase; letter-spacing: 1px; margin-top: -3px; }

.credits-counter {
  position: absolute; top: 18px; right: 20px; font-size: 36px; font-weight: 900;
  color: var(--neon-green); text-shadow: 0 0 10px rgba(16,185,129,0.8); z-index: 1000;
}

.content-pad { padding: 20px; max-width: 520px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

.neumorfic-card {
  background: var(--card-fosco); border-radius: 16px; padding: 25px; margin-bottom: 20px;
  box-shadow: var(--shadow-raised); transition: all 0.2s; border: 1px solid rgba(26,68,41,0.5);
}

.input-block {
  width: 100%; padding: 20px; font-size: 24px; font-weight: bold;
  background: var(--input-fosco); color: #FFF; border-radius: 12px; margin-bottom: 18px; border: none; outline: none;
  box-shadow: var(--shadow-pressed); 
}
.input-block::placeholder { color: #81C784; opacity: 0.6; }

.title-white { color: #FFFFFF; font-size: 26px; font-weight: 800; margin: 30px 0 18px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }

.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 35px; }
.grid-item {
  background: var(--card-fosco); border-radius: 12px; padding: 20px;
  display: flex; align-items: center; font-size: 20px; font-weight: 700;
  box-shadow: var(--shadow-raised); 
}
.grid-item input { transform: scale(1.7); margin-right: 18px; accent-color: var(--neon-green); }

/* CORREÇÃO DO BOTÃO +ADD (UM EMBAIXO DO OUTRO) */
.add-custom-row {
  display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px;
}
.add-custom-row input {
  width: 100%; padding: 18px; font-size: 19px; background: var(--input-fosco);
  border: none; color: #FFF; outline: none; border-radius: 12px;
  box-shadow: var(--shadow-pressed);
}
.add-custom-row button {
  width: 100%; background: var(--neon-green); color: #000; font-weight: 900; font-size: 19px;
  border: none; border-radius: 12px; padding: 15px; cursor: pointer;
  box-shadow: var(--shadow-raised);
}

.btn-save-neumorfic {
  width: 100%; padding: 22px; font-size: 28px; font-weight: 900;
  color: #000; background: var(--neon-green); border: none; border-radius: 14px; cursor: pointer;
  box-shadow: var(--shadow-raised), 0 0 10px rgba(16,185,129,0.4);
  transition: transform 0.1s;
}
.btn-save-neumorfic:active { transform: translateY(3px); box-shadow: var(--shadow-pressed); }

.scanner-area-neumorfic {
  position: relative; width: 100%; aspect-ratio: 1/1; background: #000;
  border-radius: 20px; overflow: hidden; margin-bottom: 25px;
  border: 5px solid var(--neon-green); box-shadow: var(--shadow-raised);
}
.laser-line-neon {
  position: absolute; width: 100%; height: 5px;
  background: var(--neon-green); box-shadow: 0 0 20px var(--neon-green);
  top: 50%; animation: scan-neon 2s infinite alternate; z-index: 10;
}
@keyframes scan-neon { 0% { top: 15%; } 100% { top: 85%; } }

.scan-trigger-fixed { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 400; text-align: center; cursor: pointer; }
.scan-trigger-svg { width: 130px; height: 130px; filter: drop-shadow(0 0 15px rgba(16,185,129,0.7)); }
.scan-trigger-fixed:active { transform: translateX(-50%) scale(0.9); }

#moduleResult .neumorfic-card { padding: 30px; }
#moduleResult .product-header { font-size: 38px; font-weight: 900; text-align: center; color: #FFF; margin-bottom: 18px; }
.product-image-container { width: 100%; max-height: 250px; display: flex; align-items: center; justify-content: center; background: #FFF; border-radius: 16px; padding: 10px; box-shadow: var(--shadow-raised); margin-bottom: 20px; }
.product-image-display { max-width: 100%; max-height: 230px; object-fit: contain; }

.qtd-row-neumorfic { display: flex; align-items: center; justify-content: center; margin: 25px 0; font-size: 28px; font-weight: 800; color: #FFF; }
.qtd-input-neumorfic {
  width: 100px; text-align: center; font-size: 34px; font-weight: 900;
  background: var(--input-fosco); color: #FFF; border: 3px solid var(--neon-green);
  border-radius: 12px; margin: 0 18px; padding: 12px;
  box-shadow: var(--shadow-pressed); outline: none;
}

.bula-neumorfic {
  background: var(--input-fosco); padding: 25px; border-radius: 14px;
  max-height: 280px; overflow-y: auto; font-size: 23px; line-height: 1.6;
  box-shadow: var(--shadow-pressed); text-align: left; border: 1px solid #1A4429;
}
.alerta-proibido { color: var(--neon-red); font-weight: 900; text-decoration: underline; text-shadow: 0 0 5px rgba(239,68,68,0.5); }
.alerta-atencao { color: var(--neon-orange); font-weight: 900; text-shadow: 0 0 5px rgba(249,115,22,0.5); }

/* CORREÇÃO DOS BOTÕES DESCARTAR/ADICIONAR (REDUZIDOS PARA CABER NA TELA) */
.carrinho-actions { display: flex; gap: 15px; margin-top: 30px; }
.btn-tátil-carrinho {
  flex: 1; padding: 15px; font-size: 20px; font-weight: 900;
  border-radius: 12px; cursor: pointer; transition: transform 0.1s; border: none;
}
.btn-add-carrinho { color: #000; background: var(--neon-green); box-shadow: var(--shadow-raised), 0 0 10px rgba(16,185,129,0.4); }
.btn-discard-carrinho { color: #FFF; background: var(--neon-red); box-shadow: var(--shadow-raised), 0 0 10px rgba(239,68,68,0.4); }
.btn-tátil-carrinho:active { transform: translateY(3px); box-shadow: var(--shadow-pressed); }

.bottom-nav-native {
  position: fixed; bottom: 0; left: 0; width: 100%; display: flex; height: 80px;
  background: var(--bg-fosco); border-top: 2px solid #1A4429;
  z-index: 1000; box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
}
.nav-item-native {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: none; color: #81C784; cursor: pointer; transition: color 0.2s;
}
.nav-svg { width: 32px; height: 32px; margin-bottom: 5px; opacity: 0.6; }
.nav-label-native { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.nav-item-native.active { color: var(--neon-green); }
.nav-item-native.active .nav-svg { opacity: 1; filter: drop-shadow(0 0 5px var(--neon-green)); }

.cart-list-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card-fosco); padding: 22px; border-radius: 14px;
  margin-bottom: 15px; font-size: 24px; font-weight: 600;
  box-shadow: var(--shadow-raised); border: 1px solid #1A4429;
}
.cart-del-btn-neumorfic {
  background: var(--neon-red); color: #FFF; border: none;
  font-size: 30px; font-weight: 900; width: 50px; height: 50px;
  border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-raised);
}
.cart-del-btn-neumorfic:active { transform: translateY(2px); box-shadow: var(--shadow-pressed); }

.cart-total-neumorfic {
  font-size: 48px; font-weight: 900; text-align: center;
  margin-top: 30px; color: var(--neon-green); text-shadow: 0 0 12px rgba(16,185,129,0.6);
  background: var(--input-fosco); padding: 20px; border-radius: 16px; box-shadow: var(--shadow-pressed);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-fosco); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--card-fosco); border-radius: 10px; }