:root {
        --c-primary: #f8afa6; /* Coral */
        --c-secondary: #d4ebeb; /* Mint */
        --c-background: #fef7e6; /* Beige */
        --c-surface: #ffffff;
        --c-text: #4f4f4f;
        --c-pink-pastel: #fadadd;
      }
      body {
        font-family: "Nunito", sans-serif;
        background-color: var(--c-background);
        color: var(--c-text);
      }
      .screen {
        display: none;
      }
      .screen.active {
        display: block;
      }
      .nav-item.active svg,
      .nav-item.active span {
        color: var(--c-primary);
        font-weight: bold;
      }
      .btn-primary {
        background-color: var(--c-primary);
        color: white;
        padding: 10px 20px;
        border-radius: 9999px;
        font-weight: bold;
        transition: background-color 0.2s;
      }
      .btn-primary:hover {
        background-color: #f79a8f;
      }
      .btn-secondary {
        background-color: #e0e0e0;
        color: var(--c-text);
        padding: 10px 20px;
        border-radius: 9999px;
        font-weight: bold;
        transition: background-color 0.2s;
      }
      .btn-join {
        background-color: var(--c-secondary);
        color: var(--c-text);
        padding: 10px 20px;
        border-radius: 9999px;
        font-weight: bold;
        transition: background-color 0.2s;
      }
      .btn-join:hover {
        background-color: #c5e0e0;
      }
      #share-code {
        background: #eee;
        padding: 10px;
        border-radius: 8px;
        font-weight: bold;
        letter-spacing: 2px;
        cursor: pointer;
        text-transform: uppercase;
      }
      .symptom-btn {
        border: 1px solid #e0e0e0;
        border-radius: 9999px;
        padding: 8px 16px;
        transition: all 0.2s;
      }
      .symptom-btn.selected {
        background-color: var(--c-secondary);
        border-color: var(--c-secondary);
        font-weight: bold;
      }
      .modal {
        display: none;
      }
      .modal.active {
        display: flex;
      }