body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      background: #fffaf3;
      color: #3e3e3e;
    }
    header {
      background-color: #3d2c2c;
      color: #f4f4f4;
      padding: 1.5rem;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    header h1 {
      margin: 0;
      font-size: 1.8rem;
    }
    main {
      padding: 2rem 1rem;
      max-width: 960px;
      margin: auto;
    }
    .section {
      background: #ffffff;
      padding: 1.5rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      margin-bottom: 2rem;
    }
    /* General input, select, button styles - IMPORTANT: Exclude checkboxes from 100% width */
    input:not([type="checkbox"]), select, button {
      width: 100%;
      padding: 0.75rem;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      border-radius: 0.5rem;
      border: 1px solid #ddd;
      font-size: 1rem;
      box-sizing: border-box;
    }

    /* Unified button style */
    button:not(#floating-calc) {
      background-color: #a7662d;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }
    button:not(#floating-calc):hover {
      background-color: #8a5625;
      transform: scale(1.02);
    }

    /* Floating button specific styles */
    #floating-calc {
      background-color: #5e3f23;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: 600;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }
    #floating-calc:hover {
      background-color: #4e2d1c;
      transform: scale(1.05);
    }

    .summary {
      font-weight: 600;
      font-size: 1.1rem;
      color: #4e2d1c;
    }
    #status {
      font-size: 1.1rem;
      padding: 0.75rem;
      border-radius: 0.5rem;
      text-align: center;
      transition: all 0.3s ease-in-out;
      margin-top: 1rem;
    }
    .status-good {
      background-color: #e9fce6;
      color: #1b5e20;
      animation: pulseGreen 1s ease-in-out;
    }
    .status-bad {
      background-color: #ffeaea;
      color: #b71c1c;
      animation: shakeRed 0.6s ease-in-out;
    }
    .drink-category {
      margin: 1rem 0 0.5rem 0;
      cursor: pointer;
      font-weight: bold;
      padding: 0.75rem 0.5rem;
      border-radius: 0.5rem;
      background-color: #f0e8e0;
      color: #5e3f23;
      transition: background 0.2s;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .drink-category:hover {
      background-color: #e0d0c0;
    }
    .drink-list {
      display: none;
      margin-bottom: 1rem;
      padding-left: 1rem;
      border-left: 2px solid #f0e8e0;
    }
    /* Key change for checkbox alignment */
    .drink-list label {
      display: flex; /* Use flexbox for alignment */
      align-items: center; /* Vertically align checkbox and text */
      margin-bottom: 0.5rem;
      cursor: pointer;
    }
    .drink-list input[type="checkbox"] {
      width: auto; /* Override 100% width for checkboxes */
      margin-right: 0.5rem; /* Add some space between checkbox and text */
      margin-top: 0; /* Reset margin from general input rule */
      margin-bottom: 0; /* Reset margin from general input rule */
    }

    #floating-calc {
      position:fixed;
      bottom:20px;
      right:20px;
      padding:1rem 1.5rem;
      border-radius:50px;
      font-size:1rem;
      box-shadow:0 4px 12px rgba(0,0,0,0.2);
      z-index:999;
      width: auto;
      display: none;
    }
    .error-message {
      color: #b71c1c;
      font-size: 0.85rem;
      margin-top: -0.8rem;
      margin-bottom: 1rem;
      display: none;
    }
    .drink-category::after {
        content: '▼';
        margin-left: 10px;
        transition: transform 0.2s ease-in-out;
    }
    .drink-category.open::after {
        content: '▲';
        transform: rotate(0deg);
    }

    /* New styles for feedback messages */
    .feedback-message {
      font-size: 0.9rem;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      padding: 0.5rem;
      border-radius: 0.3rem;
      text-align: center;
      display: none; /* Hidden by default */
    }
    .feedback-success {
      background-color: #e9fce6;
      color: #1b5e20;
    }
    .feedback-error {
      background-color: #ffeaea;
      color: #b71c1c;
    }

    /* Animation for number updates */
    @keyframes pulseGreen {
      0% { transform: scale(1); }
      50% { transform: scale(1.02); background-color: #d4fcd0; }
      100% { transform: scale(1); }
    }
    @keyframes shakeRed {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }
    .highlight-update {
        animation: highlightChange 0.5s ease-out forwards;
    }
    @keyframes highlightChange {
        0% { background-color: #d4fcd0; } /* Light green */
        100% { background-color: transparent; }
    }