/* water-intake-calculator — extracted from inline <style> */
:root {
    --water-primary: var(--evvy-cluster-color, #0ea5e9);
    --water-primary-rgb: var(--evvy-cluster-color-rgb, 14,165,233);
    --water-glass-empty: #e2e8f0;
    --water-glass-filled: var(--water-primary);
    --water-schedule-bg: rgba(var(--water-primary-rgb), 0.06);
    --water-schedule-border: rgba(var(--water-primary-rgb), 0.15);
  }

  [data-bs-theme="dark"] {
    --water-glass-empty: #334155;
    --water-schedule-bg: rgba(var(--water-primary-rgb), 0.1);
    --water-schedule-border: rgba(var(--water-primary-rgb), 0.25);
  }

  .evvy-chip-toggle {
    display: inline-flex;
    gap: .25rem;
    margin-left: .75rem;
  }
  .evvy-chip {
    padding: .25rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    color: var(--bs-body-color);
  }
  .evvy-chip.evvy-chip-active {
    background: var(--water-primary);
    color: #fff;
    border-color: var(--water-primary);
  }

  .evvy-switch-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .evvy-switch-row {
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--water-schedule-bg);
    border: 1px solid var(--water-schedule-border);
  }
  .evvy-switch-row .form-check-input:checked {
    background-color: var(--water-primary);
    border-color: var(--water-primary);
  }
  .evvy-input-label-sm {
    font-size: .85rem;
    margin-bottom: .25rem;
  }
  .evvy-caffeine-stepper {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: .5rem;
    background: var(--water-schedule-bg);
    border: 1px solid var(--water-schedule-border);
  }

  .evvy-glass-tracker {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: .75rem;
    background: var(--water-schedule-bg);
    border: 1px solid var(--water-schedule-border);
  }
  .evvy-glass-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
  }
  .evvy-glass-icon {
    font-size: 1.5rem;
    transition: color .3s ease, transform .3s ease;
  }
  .evvy-glass-icon.filled {
    color: var(--water-glass-filled);
    transform: scale(1.1);
  }
  .evvy-glass-icon.empty {
    color: var(--water-glass-empty);
  }

  .evvy-schedule-card {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: .75rem;
    background: var(--water-schedule-bg);
    border: 1px solid var(--water-schedule-border);
  }
  .evvy-schedule-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
  }
  .evvy-schedule-slot {
    text-align: center;
    padding: .35rem .25rem;
    border-radius: .4rem;
    background: rgba(var(--water-primary-rgb), 0.08);
    font-size: .75rem;
    line-height: 1.2;
  }
  .evvy-schedule-slot .slot-time {
    font-weight: 600;
    display: block;
    color: var(--water-primary);
  }
  .evvy-schedule-slot .slot-amount {
    display: block;
    opacity: .8;
  }

  @media (max-width: 575.98px) {
    .evvy-schedule-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .evvy-glass-icon {
      font-size: 1.25rem;
    }
  }