.calculator-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 25px 30px 30px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #333;
  position: relative;
}

/* TASTO RESET - STILE AGGIORNATO */
.reset-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #D10000;
    border: none;
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(209, 0, 0, 0.3);
}
.reset-btn:hover { 
    background: #a80000; 
    transform: scale(1.05) rotate(180deg); 
    box-shadow: 0 5px 12px rgba(209, 0, 0, 0.4);
}

.calculator-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  border-left: 5px solid #bb0214;
  background-color: #fff9fa;
  padding: 15px 50px 15px 20px;
  border-radius: 0 6px 6px 0;
  margin-right: 0; 
}

.calculator-header h3 { margin: 0; font-size: 22px; font-weight: 700; color: #bb0214; text-transform: uppercase; }
.calculator-header p { margin: 0; font-size: 15px; line-height: 1.5; color: #555; }

/* STEP INSTRUCTIONS */
.instructions-box {
    display: flex;
    justify-content: space-between;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    gap: 10px;
}

.instr-step { flex: 1; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: #444; }
.instr-step .step-num {
    color: #fff; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px; flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.instr-step strong { display: block; color: #000; margin-bottom: 2px; }

.instr-step:nth-child(1) .step-num { background-color: #28a745; }
.instr-step:nth-child(2) .step-num { background-color: #0099CC; }
.instr-step:nth-child(3) .step-num { background-color: #bb0214; }

@media (max-width: 600px) { .instructions-box { flex-direction: column; } }

/* --- STEP 1: CONFIGURAZIONE (VERDE #28a745) --- */
.target-container {
    background: #fdfdfd; 
    border: 1px solid #e9ecef;
    border-left: 5px solid #28a745; 
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.05);
}
.target-title { 
    width: 100%; 
    font-size: 15px; 
    text-transform: uppercase; 
    color: #28a745; 
    font-weight: 800; 
    margin-bottom: 15px; 
    border-bottom: 1px solid #d4edda; 
    padding-bottom: 8px; 
}

.target-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; margin-bottom: 15px; }
.target-field { flex: 1; min-width: 140px; }
.target-field.start-field { flex: 2; min-width: 200px; }
.target-field label { display: block; font-size: 12px; margin-bottom: 5px; color: #444; font-weight: 700; }
.target-field select, .target-field input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; background: #fff; box-sizing: border-box; height: 40px; }
.target-field select:disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed; }
.target-field select:focus, .target-field input:focus { border-color: #bb0214; outline: none; }
#aroma-pct-container { display: none; max-width: 120px; }
.aroma-alert { font-size: 11px; color: #d9534f; font-weight: 700; margin-top: 4px; display: none; }

#set-goal-btn {
    width: 100%; background: #28a745; color: #fff; border: none; padding: 12px;
    border-radius: 6px; font-weight: 700; text-transform: uppercase; cursor: pointer;
    font-size: 14px; transition: background 0.2s;
}
#set-goal-btn:hover { background: #218838; transform: translateY(-1px); }

/* --- STEP 2: INGREDIENTI (AZZURRO #0099CC) --- */
#ingredients-table-wrapper { 
    width: 100%; 
    overflow-x: auto; 
    border-top: 3px solid #0099CC; 
    border-radius: 6px 6px 0 0;
}
#ingredients-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    font-size: 14px; 
    margin-top: 0; 
    border: 1px solid #eee; 
    border-top: none; 
    border-radius: 0 0 6px 6px; 
    overflow: hidden; 
    min-width: 500px;
}
#ingredients-table thead { 
    background: #e3f2fd; 
}
#ingredients-table th, #ingredients-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #ebebeb; }
#ingredients-table th { 
    font-weight: 700; 
    color: #007799; 
    font-size: 12px; 
    text-transform: uppercase; 
}

/* ERRORI SULLE RIGHE */
tr.row-error td { background-color: #fff5f5; color: #a00; }
tr.row-error input { border-color: #ffaeb6; background-color: #fff0f1; }

.calculator-container input[type="number"] { width: 80px; padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; }
.calculator-container input[readonly] { background-color: #f3f3f3; color: #777; cursor: not-allowed; }

.calc-btn-add { background: #0099CC; color: #fff; border: 1px solid transparent; padding: 10px 16px; border-radius: 6px; font-weight: 600; text-transform: uppercase; font-size: 14px; cursor: pointer; }
.calc-btn-add:hover { background: #007fa3; transform: translateY(-1px); }

.calc-btn-icon { padding: 6px 10px; border-radius: 4px; background: #ffebeb; color: #bb0214; border: 1px solid #f3c3c9; font-size: 12px; font-weight: bold; cursor: pointer; }
.calc-btn-icon:hover { background: #bb0214; color: #fff; }

#preset-select {
  padding: 10px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px;
  background: #ffffff; flex-grow: 1; margin: 0 8px; height: 40px; max-width: 100%;
  transition: all 0.3s ease;
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); border-color: #ffc107; }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); border-color: #ffc107; }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); border-color: #ccc; }
}
.highlight-pulse { animation: highlightPulse 2s infinite; }

#preset-select optgroup { font-weight: 700; color: #0099CC; }
#preset-select option:disabled { color: #aaa; background-color: #f9f9f9; font-style: italic; }

/* SUGGERIMENTI */
#preset-select option.suggested-item { background-color: #e3f2fd; color: #0277bd; }
#preset-select option.optimal-item { background-color: #fff9c4; color: #f57f17; font-weight: 800; } 

.actions-row { 
    margin-top: 20px; 
    padding: 15px; 
    background: #fbfbfb; 
    border: 1px solid #eee; 
    border-left: 5px solid #0099CC; 
    border-radius: 8px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    align-items: center; 
    justify-content: space-between; 
}
.actions-row.custom-row { 
    background: transparent; 
    border: none; 
    padding: 10px 0 0 0; 
    margin-top: 10px; 
    flex-direction: column; 
    align-items: center; 
}
.actions-row.secondary { margin-top: 25px; justify-content: center; background: transparent; border: none; padding: 0; }

.calc-btn-primary { background: #bb0214; color: #ffffff; font-size: 16px; padding: 14px 24px; box-shadow: 0 4px 10px rgba(187, 2, 20, 0.3); width: 100%; max-width: 300px; font-weight: 700; text-transform: uppercase; border-radius: 6px; border: none; cursor: pointer; }
.calc-btn-primary:hover { background: #990010; transform: translateY(-1px); }
.calc-btn-ghost { 
    background: transparent; 
    border: none;
    color: #888; 
    padding: 5px 10px; 
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer; 
}
.calc-btn-ghost:hover { color: #bb0214; }

/* --- STEP 3: RISULTATI (ROSSO #bb0214) --- */
#results { 
    margin-top: 30px; 
    padding: 25px; 
    border-radius: 8px; 
    background: #ffffff; 
    border: 1px solid #e0e0e0;
    border-left: 5px solid #bb0214; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.05); 
}
#results-title { 
    font-size: 16px; 
    font-weight: 800; 
    text-transform: uppercase; 
    color: #bb0214; 
    margin: 0 0 15px 0; 
    border-bottom: 1px solid #f8d7da; 
    padding-bottom: 8px; 
}
.results-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.result-block { flex: 1; min-width: 140px; }
.result-label { font-size: 13px; color: #666; margin-bottom: 4px; text-transform: uppercase; font-weight: 600; }
.result-number-main { 
    font-size: 32px; 
    font-weight: 800; 
    color: #333; 
    line-height: 1; 
}
.result-unit { font-size: 14px; color: #666; font-weight: 500; margin-left: 2px; }
.result-sub { font-size: 13px; color: #555; margin-top: 4px; }

.target-feedback { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; width: fit-content; text-transform: uppercase; }
.target-feedback.ok { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; }
.target-feedback.warn { color: #664d03; background-color: #fff3cd; border: 1px solid #ffecb5; }
.target-feedback.err { color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; }

.vg-pg-display { display: flex; gap: 20px; align-items: center; }
.vg-pg-item { display: flex; align-items: baseline; }

#messages { margin-top: 15px; font-size: 13px; color: #a00; font-weight: 600; padding: 12px; border-radius: 8px; background: #fff4f5; border: 1px solid #f3c3c9; }
#messages:empty { display: none; }

#format-info { margin-top: 35px; display: none; }
#format-info-legend { font-size: 15px; color: #333; margin: 0 0 15px 0; display: flex; align-items: center; gap: 8px; font-weight: 600; background: #fff; padding: 5px 0; }
#format-info-legend span.dot { width: 10px; height: 10px; border-radius: 50%; background: #0099CC; display: inline-block; }
.calc-info-item { border-radius: 8px; border: 1px solid #b3e5fc; border-left: 4px solid #0099CC; padding: 20px; margin-bottom: 20px; background: #e1f5fe; }
.calc-info-item h4 { margin: 0 0 10px 0; font-size: 17px; font-weight: 700; color: #007799; display: flex; align-items: center; gap: 8px; }
.calc-info-item h4::before { content: "💡"; font-size: 16px; }
.calc-info-item-tagline { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #007799; margin-bottom: 4px; font-weight: 600; }

/* MEDIA QUERY SPECIFICA PER MOBILE (Max 700px) */
@media (max-width: 700px) {
  .calculator-container { padding: 15px; }
  .instructions-box { flex-direction: column; }
  .target-container { padding: 15px; }
  .target-row { flex-direction: column; gap: 10px; }
  .target-field, .target-field.start-field { width: 100%; min-width: 0; }
  #aroma-pct-container { max-width: 100%; }

  /* 1. Tabella Compatta su Mobile */
  #ingredients-table { min-width: 0; display: block; overflow-x: auto; }
  #ingredients-table th, #ingredients-table td { padding: 8px 4px; font-size: 12px; }
  .calculator-container input[type="number"] { width: 45px; padding: 6px 2px; font-size: 13px; text-align: center; }
  
  /* 2. Risultati a Griglia Compatta e Allineata */
  .results-grid { 
      display: grid; 
      grid-template-columns: 1fr 1fr; /* 2 colonne uguali */
      gap: 15px; 
      align-items: start; /* IMPORTANTE: Allinea i blocchi in alto */
  }
  .result-block { 
      min-width: 0; 
      text-align: center; 
  }
  .result-block .result-label { font-size: 11px; }
  .result-number-main { font-size: 24px; }
  
  /* NASCONDE LA PERCENTUALE (x.x%) SU MOBILE */
  .result-sub { display: none; }

  .vg-pg-display { justify-content: center; gap: 10px; }
  .target-feedback { margin: 6px auto 0 auto; font-size: 10px; white-space: normal; }

  /* Il blocco VG/PG prende tutta la larghezza (riga sotto) */
  .result-block:nth-child(3) {
      grid-column: span 2;
      border-top: 1px dashed #eee;
      padding-top: 10px;
  }
}