html { font-family: 'Inter', system-ui, sans-serif; }
    :root {
      --color-primary: #4DB6AC;
      --color-primary-hover: #399b92;
      --color-muted: #F5F5F5;
      --color-muted-foreground: #6b7280;
      --color-card: #fff;
      --color-border: #e5e7eb;
      --color-accent: #D1C4E9;
    }
    .bg-primary { background-color: var(--color-primary); }
    .text-primary { color: var(--color-primary); }
    .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
    .border-card { border-color: var(--color-border); }
    .text-muted-foreground { color: var(--color-muted-foreground); }
    .bg-muted { background-color: var(--color-muted); }
    .font-heading { font-family: inherit; font-weight: 700; }
    .container-custom { max-width: 1200px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
    
    /* Checklist Item State Management - CSS-driven approach for iOS compatibility */
    .checklist-item[data-completed="true"] .checklist-checkbox {
      background-color: #10b981 !important;
      border-color: #10b981 !important;
      color: white !important;
    }
    
    .checklist-item[data-completed="false"] .checklist-checkbox {
      background-color: transparent !important;
      border-color: #d1d5db !important;
      color: #6b7280 !important;
    }
    
    .checklist-item[data-completed="true"] .checklist-checkbox:hover {
      background-color: #059669 !important;
    }
    
    .checklist-item[data-completed="false"] .checklist-checkbox:hover {
      border-color: #60a5fa !important;
      background-color: #dbeafe !important;
    }
    
    .checklist-item[data-completed="true"] .checklist-text {
      text-decoration: line-through !important;
      color: #6b7280 !important;
    }
    
    .checklist-item[data-completed="false"] .checklist-text {
      text-decoration: none !important;
      color: #111827 !important;
    }
    
    .checklist-item[data-completed="true"] .checklist-text.title {
      color: #6b7280 !important;
    }
    
    .checklist-item[data-completed="false"] .checklist-text.title {
      color: #111827 !important;
    }

    .side-effect-card {
      background: var(--color-muted);
      border: 1px solid var(--color-border);
      border-radius: 1rem;
      box-shadow: 0 2px 8px rgba(77, 182, 172, 0.07);
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .side-effect-card:hover {
      box-shadow: 0 4px 16px rgba(77, 182, 172, 0.15);
      transform: translateY(-2px) scale(1.01);
    }

    .details-btn {
      background: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: 0.5rem;
      padding: 0.5rem 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .details-btn:hover {
      background: var(--color-primary-hover);
    }

    .gradient-text {
      background-image: linear-gradient(to right, #4DB6AC, rgba(77,182,172,0.8), #F8BBD0, #D1C4E9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      border: 1px solid var(--color-border);
      background-color: var(--color-primary);
      color: #fff;
      font-weight: 600;
      transition: background 0.2s, color 0.2s;
    }
    .btn:hover, .btn:focus {
      background-color: var(--color-accent);
      color: #fff;
    }